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')">
-  <veui-icon
+    {{ t("editOnGitHub") }}
-    class="icon"
+    <veui-icon
-    name="external-link"
+      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,27 +52,39 @@ export default {
 
 <style lang="stylus" scoped>
 .one-edit-link
-  display inline-flex
-  align-items center
-  padding 4px 6px
-  border-radius 4px
-  background-color #fff
-  color #848b99
-  border 1px solid #e2e6f0
-  transition background 0.2s, color 0.2s, border-color 0.2s
   text-decoration none
+  transition background 0.2s, color 0.2s, border-color 0.2s
 
-  &:hover
+  &-default
-  &[data-focus-visible-added]
+    display inline-flex
-    background-color #f6f7fa
+    align-items center
+    padding 4px 6px
+    border-radius 4px
+    background-color #fff
+    color #848b99
+    border 1px solid #e2e6f0
+
+    &:hover
+    &[data-focus-visible-added]
+      background-color #f6f7fa
+      color #282c33
+      border-color #d3d9e6
+
+    &:active
+      background-color #e2e6f0
+      color #000
+      border-color #d3d9e6
+
+    .icon
+      margin-left 4px
+
+  &-quiet
     color #282c33
-    border-color #d3d9e6
 
-  &:active
+    &:hover
-    background-color #e2e6f0
+    &[data-focus-visible-added]
-    color #000
+      color #545b66
-    border-color #d3d9e6
 
-.icon
+    &:active
-  margin-left 4px
+      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