Widget code-block

[nighca]

• Component Features: get doc content by import instead of getStaticProps
• Component Code Refactor
• Component Code Runnable
• Component Code Editable (Go to playground, instead of edit in-place)
• Component Code Docs Aside Support
• Component Code as widget <goplus-code>
• Fix code in Features, as some codes is not executable

Docs Aside Support

component Code

type CodeSegment = {
  /** Code content */
  content: string
  /** Corresponding document for the code content */
  doc?: ReactNode
}

export interface Props {
  /** Code */
  code: string | CodeSegment[]
}

widget goplus-code

<goplus-code>
  <goplus-code-docs>
    Strings, which can be added together with <code>+</code>.
  </goplus-code-docs>
  println "Go"+"Plus"
  <goplus-code-docs>
    Integers and floats.
  </goplus-code-docs>
  println "1+1 =", 1+1
  println "7.0/3.0 =", 7.0/3.0
</goplus-code>

Output

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/goplus/www/HNs9nbrqUbdp37SZGq428EyX6k4F
✅ Preview: https://www-git-fork-nighca-code-goplus.vercel.app

[nighca]

react-syntax-highlighter 是 react-code-blocks 依赖的库，这里换成 react-syntax-highlighter 是为了更好的细节控制能力

[xushiwei]

I care the output specification. Is there a .js script to use, like https://github.com/zenorocha/clipboard.js?

[nighca]

@xushiwei It is supposed to be imported as described in #32 .

Instead of downloading or installing a file in your source code, you just insert an online script in your HTML page.

<script data-widgets="code" src="https://goplus.org/widgets/loader.js"></script>

[xushiwei]

@xushiwei It is supposed to be imported as described in #32 .

Instead of downloading or installing a file in your source code, you just insert an online script in your HTML page.

<script data-widgets="code" src="https://goplus.org/widgets/loader.js"></script>

why call it loader.js? I think codeblock.js is better.
and, for external usage, version must be required. don't provide a latest version path.
so, I think the better way is place it into a public hub, like https://api.goplus.org/widgets/codeblock-min-vX.X.XX.js.

[nighca]

why call it loader.js?

It loads widgets specified with attribute data-widgets. For example,

<script data-widgets="code" src="https://goplus.org/widgets/loader.js"></script>

This will load widget goplus-code (so that you can use <goplus-code></goplus-code> anywhere in your page); If we provide widget goplus-editor in the future, just use

<script data-widgets="code,editor" src="https://goplus.org/widgets/loader.js"></script>

It will load both goplus-code & goplus-editor.

Details are described here.

We created a widget loader & widget files when building widgets. The loader file's location will be constant: https://goplus.org/widgets/loader.js and the file will not be cached by browser. 3rd-party sites will insert it in page and tell which widgets they want to load. The loader will load corresponding widget files for them.

The widget files defines custom elements on page, which makes HTML tags like <goplus-header></goplus-header> work. Widget files' location changes with widget content changing (content-based addressing). But the loader will always know the correct location for each widget, which makes it possible to cache widget files' content locally - actually we will tell browsers to cache widget file content as long as possible.

[nighca]

for external usage, version must be required. don't provide a latest version path.

@xushiwei This is intended - so that we can update widgets throughout all sites at once.

The way to import as a library (installed locally with version specified by some package management tool), may be supported later. But it's not as convenient, that's why it's not supported at first place.

[xushiwei]

why call it loader.js?

It loads widgets specified with attribute data-widgets. For example,

<script data-widgets="code" src="https://goplus.org/widgets/loader.js"></script>

This will load widget goplus-code (so that you can use <goplus-code></goplus-code> anywhere in your page); If we provide widget goplus-editor in the future, just use

<script data-widgets="code,editor" src="https://goplus.org/widgets/loader.js"></script>

It will load both goplus-code & goplus-editor.

Details are described here.

many developers care about code size. if they only need codeblock, then maybe he don't like loader.js.

[nighca]

many developers care about code size. if they only need codeblock, then maybe he don't like loader.js.

The file loader.js will be as small as possible (especially compared with widget goplus-code itself). I will give a number here later. Here is the comparison:

• The loader.js size: 1.1 KB (618 B gzipped)
• The widget goplus-code: 773 KB (271 KB gzipped)

[nighca]

P.S. The loader way is also performance-friendly, as it reuses browser cache for widget files across different sites. For example, when user browsing goplus.org, tutorial.goplus.org & maybe some third-party site, the browser only need to load widget files once.

[xushiwei]

P.S. The loader way is also performance-friendly, as it reuses browser cache for widget files across different sites. For example, when user browsing goplus.org, tutorial.goplus.org & maybe some third-party site, the browser only need to load widget files once.

👍🏻

[2788]

LGTM.
🐂 🍺