feat: support copy and title

src/client/app/components/Demo/OnlineEdit/OnlineEdit.vue

@@ -10,38 +10,6 @@
       <input type="hidden" name="data" :value="codepenValue" />
     </template>
 
-    <!-- https://docs.jsfiddle.net/api/display-a-fiddle-from-post -->
-    <template v-if="platform === 'jsfiddle'">
-      <input type="hidden" name="js" :value="js" />
-      <input type="hidden" name="css" :value="css" />
-      <input type="hidden" name="html" :value="html" />
-      <input type="hidden" name="panel_js" value="3" />
-      <input type="hidden" name="resources" :value="resources" />
-    </template>
-
-    <!-- https://codesandbox.io/docs/importing#define-api -->
-    <!-- <template v-if="platform === 'codesandbox'">
-      <input type="hidden" name="parameters" :value="codeSandboxValue" />
-      <input
-        v-if="codesandboxOptions.query"
-        type="hidden"
-        name="query"
-        :value="codesandboxOptions.query"
-      />
-      <input
-        v-if="codesandboxOptions.embed"
-        type="hidden"
-        name="embed"
-        :value="codesandboxOptions.embed"
-      />
-      <input
-        v-if="codesandboxOptions.json"
-        type="hidden"
-        name="json"
-        :value="codesandboxOptions.json"
-      />
-    </template> -->
-
     <button type="submit" :data-tip="platformTip">
       <component :is="platform" />
     </button>
@@ -78,8 +46,7 @@ export default {
     layout: { type: String, default: 'left' },
     jsLibs: { type: Array, default: () => [] },
     cssLibs: { type: Array, default: () => [] },
-    editors: { type: String, default: '101' },
-    codesandboxOptions: { type: Object, default: () => ({}) }
+    editors: { type: String, default: '101' }
   },
   computed: {
     jsTmpl: (vm) => getJsTmpl(vm.js),

src/client/app/components/Demo/demo.css

@@ -5,7 +5,7 @@
 }
 
 .demo-slot {
-  padding: 24px 24px;
+  padding: 40px 24px;
 }
 
 .demo-actions {
@@ -28,14 +28,34 @@
   cursor: pointer;
   color: #666;
 }
+.demo-actions-tip {
+  font-size: 12px;
+  color: #3eaf7c;
+}
 
 .extra-class {
   border-top: 1px dashed var(--border-color);
   box-sizing: border-box;
 }
 
-
 .demo-platforms {
   display: flex;
   align-items: center;
 }
+
+.demo-title-desc {
+  border-top: 1px dashed var(--border-color);
+  padding: 1.5em 1em;
+  color: #454d64;
+  position: relative;
+  font-size: 14px;
+}
+
+.demo-title {
+  position: absolute;
+  top: 0;
+  left: 1em;
+  transform: translateY(-50%);
+  background: #fff;
+  font-weight: 500;
+}

src/client/app/components/Demo/demo.vue

@@ -4,6 +4,11 @@
       <slot></slot>
     </div>
 
+    <div class="demo-title-desc" v-show="title || desc">
+      <span class="demo-title">{{ title }}</span>
+      <span class="demo-desc">{{ desc }}</span>
+    </div>
+
     <div class="demo-actions">
       <div class="demo-platforms">
         <OnlineEdit
@@ -14,11 +19,10 @@
         />
       </div>
       <div class="demo-buttons">
-        <copySvg
-          class="demo-actions-copy"
-          @click="toggleExpand()"
-          title="复制"
-        />
+        <div class="demo-actions-copy">
+          <span v-show="showTip" class="demo-actions-tip">复制成功!</span>
+          <copySvg v-show="!showTip" @click="copyCode" title="复制" />
+        </div>
         <codeSvg
           class="demo-actions-expand"
           @click="toggleExpand()"
@@ -27,7 +31,7 @@
       </div>
     </div>
     <div
-      v-show="state.expand"
+      v-show="expand"
       v-html="decodedHtmlStr"
       :class="`language-${language} extra-class`"
     />
@@ -40,8 +44,8 @@ import './demo.css'
 import copySvg from './icons/copy.vue'
 import codeSvg from './icons/code.vue'
 import OnlineEdit from './OnlineEdit'
-import { JS_RE, CSS_RE, HTML_RE } from './OnlineEdit/constants'
-import { getMatchedResult, parseAndDecode } from './OnlineEdit/utils'
+import { useCopyCode } from './useCopyCode'
+import { useParseCode } from './useParseCode'
 
 export default {
   props: {
@@ -55,46 +59,32 @@ export default {
     },
     jsLibsStr: { type: String, default: '[]' },
     cssLibsStr: { type: String, default: '[]' },
-    codesandboxStr: { type: String, default: '{}' }
+    title: { type: String, default: '' },
+    desc: { type: String, default: '' }
   },
   components: {
     copySvg,
     codeSvg,
     OnlineEdit
   },
   setup(props) {
-    const state = reactive({
-      expand: false
-    })
-
-    const toggleExpand = () => (state.expand = !state.expand)
-
     const decodedHtmlStr = computed(() => decodeURIComponent(props.htmlStr))
     const decodedCodeStr = computed(() => decodeURIComponent(props.codeStr))
 
-    const parsedCode = computed(() => {
-      const js = getMatchedResult(JS_RE)(decodedCodeStr.value) || ''
-      const css = getMatchedResult(CSS_RE)(decodedCodeStr.value) || ''
-      const html =
-        getMatchedResult(HTML_RE)(decodedCodeStr.value) ||
-        decodedCodeStr.value
-          .replace(JS_RE, '')
-          .replace(CSS_RE, '')
-          .replace(HTML_RE, '')
-          .trim()
-
-      const jsLibs = parseAndDecode(props.jsLibsStr)
-      const cssLibs = parseAndDecode(props.cssLibsStr)
-      const codesandboxOptions = parseAndDecode(props.codesandboxStr)
-
-      return { js, css, html, jsLibs, cssLibs, codesandboxOptions }
-    })
+    const { showTip, copyCode } = useCopyCode(decodedCodeStr.value)
+    const { expand, toggleExpand, parsedCode } = useParseCode(
+      decodedCodeStr.value,
+      props.jsLibsStr,
+      props.cssLibsStr
+    )
 
     return {
-      state,
+      expand,
       toggleExpand,
       decodedHtmlStr,
-      parsedCode
+      parsedCode,
+      showTip,
+      copyCode
     }
   }
 }

src/client/app/components/Demo/useCopyCode.ts

@@ -0,0 +1,20 @@
+import { reactive, toRefs } from 'vue'
+
+export function useCopyCode(code: string) {
+  const state = reactive({
+    showTip: false
+  })
+
+  function copyCode() {
+    navigator.clipboard.writeText(code)
+    state.showTip = true
+    setTimeout(() => {
+      state.showTip = false
+    }, 5 * 1000)
+  }
+
+  return {
+    ...toRefs(state),
+    copyCode
+  }
+}

src/client/app/components/Demo/useParseCode.ts

@@ -0,0 +1,39 @@
+import { reactive, computed, toRefs } from 'vue'
+
+import { JS_RE, CSS_RE, HTML_RE } from './OnlineEdit/constants'
+import { getMatchedResult, parseAndDecode } from './OnlineEdit/utils'
+
+export function useParseCode(
+  decodedCodeStr: string,
+  jsLibsStr: string,
+  cssLibsStr: string
+) {
+  const state = reactive({
+    expand: false
+  })
+
+  const toggleExpand = () => (state.expand = !state.expand)
+
+  const parsedCode = computed(() => {
+    const js = getMatchedResult(JS_RE)(decodedCodeStr) || ''
+    const css = getMatchedResult(CSS_RE)(decodedCodeStr) || ''
+    const html =
+      getMatchedResult(HTML_RE)(decodedCodeStr) ||
+      decodedCodeStr
+        .replace(JS_RE, '')
+        .replace(CSS_RE, '')
+        .replace(HTML_RE, '')
+        .trim()
+
+    const jsLibs = parseAndDecode(jsLibsStr)
+    const cssLibs = parseAndDecode(cssLibsStr)
+
+    return { js, css, html, jsLibs, cssLibs }
+  })
+
+  return {
+    ...toRefs(state),
+    toggleExpand,
+    parsedCode
+  }
+}

src/node/config.ts

@@ -16,8 +16,8 @@ export interface UserConfig<ThemeConfig = any> {
   description?: string
   head?: HeadConfig[]
   themeConfig?: ThemeConfig
-  locales?: Record<string, LocaleConfig>
   // TODO locales support etc.
+  locales?: Record<string, LocaleConfig>
   alias?: Record<string, string>
 }
 

src/node/markdownToVue.ts

@@ -52,6 +52,7 @@ export function createMarkdownToVueRenderFn(
       lastUpdated
     }
 
+    data.hoistedTags = data.hoistedTags || {}
     data.hoistedTags.script = data.hoistedTags.script || []
     injectComponentData(data.hoistedTags)
 
@@ -86,8 +87,9 @@ function injectComponentData(hoistedTags: HoistedTags) {
   const exportCode = `\nexport default {
     components: {
       ${(hoistedTags.components || []).join(', ')}
-    }
-  }`
+    },
+  }
+  `
 
   hoistedTags.script?.push(exportCode)
 }