docs: extract the code block used for documentation into the components

geist-org · Feb 1, 2022 · 9feb423 · 9feb423
1 parent 95c9837
commit 9feb423
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 70 deletions.
diff --git a/lib/components/mdx-widgets/index.ts b/lib/components/mdx-widgets/index.ts
@@ -5,3 +5,4 @@ export { default as HomeCell } from './home-cell'
 export { default as IconsGallery } from './icons-gallery'
 export { default as ExampleBlock } from './example-block'
 export { default as GridDemo } from './grid-demo'
+export * as ParsedCodes from './parsed-codes'
diff --git a/lib/components/mdx-widgets/parsed-codes/clock.tsx b/lib/components/mdx-widgets/parsed-codes/clock.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+export const __html = `
+<span class="token keyword">class</span> <span class="token class-name">Clock</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
+  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
+        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hello, world!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
+        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">It is </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">date</span><span class="token punctuation">.</span><span class="token method function property-access">toLocaleTimeString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
+      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+    <span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+`.trim()
+
+export const Clock: React.FC<unknown> = () => (
+  <code className="language-jsx" dangerouslySetInnerHTML={{ __html }} />
+)
diff --git a/lib/components/mdx-widgets/parsed-codes/greeting.tsx b/lib/components/mdx-widgets/parsed-codes/greeting.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const __html = `
+<span class="token keyword">function</span> <span class="token function">getGreeting</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span><span class="token function">formatName</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
+  <span class="token punctuation">}</span>
+  <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hello, Stranger.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
+<span class="token punctuation">}</span>
+`.trim()
+
+export const Greeting: React.FC<unknown> = () => (
+  <code className="language-jsx" dangerouslySetInnerHTML={{ __html }} />
+)
diff --git a/lib/components/mdx-widgets/parsed-codes/index.ts b/lib/components/mdx-widgets/parsed-codes/index.ts
@@ -0,0 +1,3 @@
+export * from './clock'
+export * from './greeting'
+export * from './types'
diff --git a/lib/components/mdx-widgets/parsed-codes/types.tsx b/lib/components/mdx-widgets/parsed-codes/types.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const __html = `
+<span class="token keyword module">import</span> <span class="token punctuation">{</span> someFunc<span class="token punctuation">,</span> <span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">BaseType</span></span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">'./some-module.ts'</span>
+
+<span class="token comment">// BaseType is always guaranteed to be erased</span>
+<span class="token comment">// and someFunc will be preserved</span>
+<span class="token keyword module">export</span> <span class="token keyword">class</span> <span class="token class-name"><span class="token maybe-class-name">Thing</span></span> <span class="token keyword">implements</span> <span class="token class-name"><span class="token maybe-class-name">BaseType</span></span> <span class="token punctuation">{</span>
+  <span class="token function">someMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">someFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+`.trim()
+export const Types: React.FC<unknown> = () => (
+  <code className="language-jsx" dangerouslySetInnerHTML={{ __html }} />
+)
diff --git a/lib/components/playground/dynamic-live.tsx b/lib/components/playground/dynamic-live.tsx
@@ -31,6 +31,7 @@ const DynamicLive: React.FC<Props> = ({ code, scope }) => {
         }
         .wrapper > :global(div) {
           width: 100%;
+          background-color: transparent;
         }
         .wrapper > :global(.live-error) {
           padding: 10px 12px 0 12px;

diff --git a/pages/en-us/components/code.mdx b/pages/en-us/components/code.mdx
@@ -1,6 +1,5 @@
-import { Layout, Playground, Attributes } from 'lib/components'
-import { Code, Note, Link, Text } from 'components'
-import NextLink from 'next/link'
+import { Code, Text } from 'components'
+import { Layout, Playground, Attributes, ParsedCodes } from 'lib/components'
 
 export const meta = {
   title: 'Code',
@@ -9,15 +8,7 @@ export const meta = {
 
 ## Code
 
-Show source code in a standardized way.
-
-<Note>
-  Want to display <Code>shell</Code> code snippets? Try{' '}
-  <NextLink href="/en-us/components/snippet">
-    <Link color>Snippet</Link>
-  </NextLink>
-  .
-</Note>
+Show source code in a standardized way. Want to display shell code snippets? try [Snippet](/en-us/components/snippet).
 
 <Playground
   desc="Basic inline codes."
@@ -30,49 +21,48 @@ Show source code in a standardized way.
 <Playground
   title="Code Block"
   desc="Multi line code display."
-  scope={{ Code }}
+  scope={{ Code, ExampleCodes: ParsedCodes.Types }}
   code={`
-() => {
-  const codes = \`npm i @geist-ui/core
-yarn add @geist-ui/core\`
-  return <Code block my={0}>{codes}</Code>
-}
+<Code block my={0}><ExampleCodes /></Code>
 `}
 />
 
 <Playground
   title="width"
   desc="Specify width manually, or other styles."
-  scope={{ Code }}
+  scope={{ Code, ExampleCodes: ParsedCodes.Greeting }}
   code={`
-() => {
-  const codes = \`npm i @geist-ui/core
-yarn add @geist-ui/core\`
-  return <Code block width="50%" my={0}>{codes}</Code>
-}
+<Code block width="50%" my={0}><ExampleCodes /></Code>
 `}
 />
 
 <Playground
-  title="overlong"
-  desc="Out of range presentation."
-  scope={{ Code }}
+  title="name"
+  desc="Specify the file name for the code block."
+  scope={{ Code, ExampleCodes: ParsedCodes.Clock }}
   code={`
-() => {
-  const codes = \`npm i @geist-ui/core npm i @geist-ui/core npm i @geist-ui/core
-yarn add @geist-ui/core\`
-  return <Code block width="50%" my={0}>{codes}</Code>
-}
+<Code block name="/Components/Clock.jsx" my={0}><ExampleCodes /></Code>
+`}
+/>
+
+<Playground
+  title="classic style"
+  desc="The classic design style with a line border instead of a background."
+  scope={{ Code, ExampleCodes: ParsedCodes.Clock }}
+  code={`
+<Code block classic name="/Components/Clock.jsx" my={0}><ExampleCodes /></Code>
 `}
 />
 
 <Attributes edit="/pages/en-us/components/code.mdx">
 <Attributes.Title>Code.Props</Attributes.Title>
 
-| Attribute | Description        | Type             | Accepted values    | Default |
-| --------- | ------------------ | ---------------- | ------------------ | ------- |
-| **block** | show code in `pre` | `boolean`        | -                  | `false` |
-| ...       | native props       | `HTMLAttributes` | `'className', ...` | -       |
+| Attribute   | Description                                 | Type             | Accepted values    | Default |
+| ----------- | ------------------------------------------- | ---------------- | ------------------ | ------- |
+| **block**   | show code in `pre`                          | `boolean`        | -                  | `false` |
+| **name**    | text displayed at the top of the code block | `string`         | -                  | -       |
+| **classic** | display with classic style                  | `boolean`        | -                  | `false` |
+| ...         | native props                                | `HTMLAttributes` | `'className', ...` | -       |
 
 </Attributes>
 

diff --git a/pages/zh-cn/components/code.mdx b/pages/zh-cn/components/code.mdx
@@ -1,6 +1,6 @@
-import { Layout, Playground, Attributes } from 'lib/components'
 import { Code, Note, Link, Text } from 'components'
 import NextLink from 'next/link'
+import { Layout, Playground, Attributes, ParsedCodes } from 'lib/components'
 
 export const meta = {
   title: '代码 Code',
@@ -9,15 +9,7 @@ export const meta = {
 
 ## Code / 代码
 
-以标准化的方式展示源代码。
-
-<Note label="提示">
-  想要展示 <Code>Shell</Code> 代码片段或一个命令？ 可以试试{' '}
-  <NextLink href="/zh-cn/components/snippet">
-    <Link color>Snippet / 片段</Link>
-  </NextLink>{' '}
-  组件。
-</Note>
+以标准化的方式展示源代码。想要展示 Shell 代码片段或是一个命令？可以试试 [Snippet](/zh-cn/components/snippet) (片段) 组件。
 
 <Playground
   desc="基础的行内代码。"
@@ -30,49 +22,48 @@ export const meta = {
 <Playground
   title="代码块"
   desc="多行的代码块展示。"
-  scope={{ Code }}
+  scope={{ Code, ExampleCodes: ParsedCodes.Types }}
   code={`
-() => {
-  const codes = \`npm i @geist-ui/core
-yarn add @geist-ui/core\`
-  return <Code block my={0}>{codes}</Code>
-}
+<Code block my={0}><ExampleCodes /></Code>
 `}
 />
 
 <Playground
   title="宽度"
   desc="手动地指定宽度，或其他样式。"
-  scope={{ Code }}
+  scope={{ Code, ExampleCodes: ParsedCodes.Greeting }}
   code={`
-() => {
-  const codes = \`npm i @geist-ui/core
-yarn add @geist-ui/core\`
-  return <Code block width="50%" my={0}>{codes}</Code>
-}
+<Code block width="50%" my={0}><ExampleCodes /></Code>
 `}
 />
 
 <Playground
-  title="过长的"
-  desc="超出范围的代码的展示效果。"
-  scope={{ Code }}
+  title="标题"
+  desc="为代码块添加标题描述信息。"
+  scope={{ Code, ExampleCodes: ParsedCodes.Clock }}
   code={`
-() => {
-  const codes = \`npm i @geist-ui/core npm i @geist-ui/core npm i @geist-ui/core
-yarn add @geist-ui/core\`
-  return <Code block width="50%" my={0}>{codes}</Code>
-}
+<Code block name="/Components/Clock.jsx" my={0}><ExampleCodes /></Code>
+`}
+/>
+
+<Playground
+  title="经典样式"
+  desc="以边框代替背景块的经典设计样式。"
+  scope={{ Code, ExampleCodes: ParsedCodes.Clock }}
+  code={`
+<Code block classic name="/Components/Clock.jsx" my={0}><ExampleCodes /></Code>
 `}
 />
 
 <Attributes edit="/pages/zh-cn/components/code.mdx">
 <Attributes.Title>Code.Props</Attributes.Title>
 
-| 属性      | 描述             | 类型             | 推荐值             | 默认    |
-| --------- | ---------------- | ---------------- | ------------------ | ------- |
-| **block** | 展示多行的代码块 | `boolean`        | -                  | `false` |
-| ...       | 原生属性         | `HTMLAttributes` | `'className', ...` | -       |
+| 属性        | 描述                   | 类型             | 推荐值             | 默认    |
+| ----------- | ---------------------- | ---------------- | ------------------ | ------- |
+| **block**   | 展示多行的代码块       | `boolean`        | -                  | `false` |
+| **name**    | 显示在代码块顶部的文字 | `string`         | -                  | -       |
+| **classic** | 以经典样式展示代码块   | `boolean`        | -                  | `false` |
+| ...         | 原生属性               | `HTMLAttributes` | `'className', ...` | -       |
 
 </Attributes>