feat: add demo edit link

components/OneDemo.vue

@@ -49,6 +49,11 @@
         :name="localExpanded ? 'one-demo-code-off' : 'one-demo-code'"
       />
     </veui-button>
+    <one-edit-link
+      class="edit"
+      variant="quiet"
+      :path="path"
+    />
   </section>
   <section
     v-if="$slots.source"
@@ -68,6 +73,7 @@ import i18n from 'veui/mixins/i18n'
 import { BrowserWindow } from 'vue-windows'
 import { getLocale } from '../common/i18n'
 import { play } from '../common/play'
+import OneEditLink from './OneEditLink'
 
 export default {
   name: 'one-demo',
@@ -77,12 +83,14 @@ export default {
   components: {
     'veui-button': Button,
     'veui-icon': Icon,
-    BrowserWindow
+    BrowserWindow,
+    OneEditLink
   },
   mixins: [i18n],
   props: {
     expanded: Boolean,
-    browser: String
+    browser: String,
+    path: String
   },
   data () {
     return {
@@ -193,4 +201,11 @@ Icon.register({
 
   .veui-button + .veui-button
     margin-left 12px
+
+.edit
+  position absolute
+  right 30px
+  top 50%
+  transform translateY(-50%)
+  font-size 12px
 </style>

components/OneEditLink.vue

@@ -1,15 +1,24 @@
 <template>
 <a
   class="one-edit-link"
+  :class="
+    variant
+      ? {
+        [`one-edit-link-${variant}`]: true,
+      }
+      : {}
+  "
   :href="href"
   target="_blank"
   rel="noopener"
 >
-  {{ t('editOnGitHub') }}
+  <slot :label="t('editOnGitHub')">
+    {{ t("editOnGitHub") }}
     <veui-icon
       class="icon"
       name="external-link"
     />
+  </slot>
 </a>
 </template>
 
@@ -27,6 +36,10 @@ export default {
   },
   mixins: [i18n],
   props: {
+    variant: {
+      type: String,
+      default: 'default'
+    },
     path: String
   },
   computed: {
@@ -39,6 +52,10 @@ export default {
 
 <style lang="stylus" scoped>
 .one-edit-link
+  text-decoration none
+  transition background 0.2s, color 0.2s, border-color 0.2s
+
+  &-default
     display inline-flex
     align-items center
     padding 4px 6px
@@ -46,8 +63,6 @@ export default {
     background-color #fff
     color #848b99
     border 1px solid #e2e6f0
-  transition background 0.2s, color 0.2s, border-color 0.2s
-  text-decoration none
 
     &:hover
     &[data-focus-visible-added]
@@ -62,4 +77,14 @@ export default {
 
     .icon
       margin-left 4px
+
+  &-quiet
+    color #282c33
+
+    &:hover
+    &[data-focus-visible-added]
+      color #545b66
+
+    &:active
+      color #000
 </style>

one/build/rehype-demo.js

@@ -8,14 +8,15 @@ export default function attacher () {
       let { tagName } = node
       let [name] = tagName.match(RE_DEMO) || []
       if (name) {
-        let { code, desc, browser } = data.demos[name] || {}
+        let { code, desc, browser, path } = data.demos[name] || {}
         if (!code) {
           return
         }
 
         let demo = h('one-demo',
           {
-            browser
+            browser,
+            path
           },
           [
             node,

one/build/remark-demo.js

@@ -40,6 +40,8 @@ export default function attacher () {
           ? resolve(DOCS_DIR, src.slice(1))
           : resolve(dirname(path), src)
 
+      let demoRelativePath = relative(DOCS_DIR, demoPath)
+
       if (!existsSync(demoPath)) {
         console.warn(`Demo not found at '${demoPath}'`)
         return
@@ -55,7 +57,8 @@ export default function attacher () {
 
       let { content, doc } = extractDoc(demoPath, { locale })
       fileData.demos[name] = {
-        path: demoPath,
+        filePath: demoPath,
+        path: demoRelativePath,
         browser,
         code: render('```vue\n' + content + '\n```', demoPath).contents,
         desc: render(doc, demoPath).contents