modify(EditOnGithubButton)

demo/deploymentInit.js

@@ -80,6 +80,8 @@ import ComponentDemo from './utils/ComponentDemo'
 import ComponentDemos from './utils/ComponentDemos'
 import ComponentDocumentation from './utils/ComponentDocumentation'
 import DocumentationWrapper from './utils/DocumentationWrapper'
+import EditOnGithubButton from './utils/EditOnGithubButton'
+import EditOnGithubHeader from './utils/EditOnGithubHeader'
 import './styles/demo.scss'
 
 Vue.use(VueRouter)
@@ -88,6 +90,8 @@ Vue.component('ComponentDemo', ComponentDemo)
 Vue.component('ComponentDemos', ComponentDemos)
 Vue.component('DocumentationWrapper', DocumentationWrapper)
 Vue.component('ComponentDocumentation', ComponentDocumentation)
+Vue.component('EditOnGithubButton', EditOnGithubButton)
+Vue.component('EditOnGithubHeader', EditOnGithubHeader)
 
 const withPrefix = (prefix, routes) =>
   routes.map(route => {

demo/devInit.js

@@ -81,6 +81,8 @@ import ComponentDemos from './utils/ComponentDemos'
 import ComponentDocumentation from './utils/ComponentDocumentation'
 import DocumentationWrapper from './utils/DocumentationWrapper'
 import './styles/demo.scss'
+import EditOnGithubButton from './utils/EditOnGithubButton'
+import EditOnGithubHeader from './utils/EditOnGithubHeader'
 
 import routerDebug from './debugComponents/routerDebug'
 import modalDebug from './debugComponents/modalDebug'
@@ -101,6 +103,8 @@ Vue.component('ComponentDemo', ComponentDemo)
 Vue.component('ComponentDemos', ComponentDemos)
 Vue.component('DocumentationWrapper', DocumentationWrapper)
 Vue.component('ComponentDocumentation', ComponentDocumentation)
+Vue.component('EditOnGithubButton', EditOnGithubButton)
+Vue.component('EditOnGithubHeader', EditOnGithubHeader)
 
 const withPrefix = (prefix, routes) =>
   routes.map(route => {

demo/documentation/components/drawer/enUS/target.md

@@ -13,7 +13,13 @@
     height:500px;
     border:1px solid rgba(0, 0, 0, .1);
     margin-top: 10px;">
-  <p style="position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);">Appear area</p>
+  <p style="
+    position:absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%, -50%);">
+    Appear area
+  </p>
 </div>
 <n-drawer v-model="active" :width="200" :placement="placement" :target="target">
   <n-h1>Stoner</n-h1>

demo/documentation/components/drawer/zhCN/target.md

@@ -14,7 +14,12 @@
     border:1px solid rgba(0, 0, 0, .1);
     margin-top: 10px;"
 >
-  <p style="position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);">显示区域</p>
+  <p style="position:absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%, -50%);">
+    显示区域
+  </p>
 </div>
 <n-drawer v-model="active" :width="200" :placement="placement" :target="target">
   <n-h1>斯通纳</n-h1>

demo/loaders/NaiveUIMdLoader.js

@@ -22,30 +22,27 @@ function parseComponents (tokens) {
   return components
 }
 
-module.exports = function (content, titleReg, gheUrl, gheButton) {
+module.exports = function (content, url) {
   const tokens = marked.lexer(content)
+  const titleIndex = tokens.findIndex(token => token.type === 'heading' && token.depth === 1)
+  let titleText = titleIndex > -1 ? JSON.stringify(tokens[titleIndex].text) : null
   const anchor = parseMdAsAnchor(tokens)
   const components = parseComponents(tokens)
   const importStatements = components
     .map(component => `import ${component} from './${component}'`)
     .join('\n')
-  const mdContent = marked.parser(tokens, { renderer })
+  let mdContent = marked.parser(tokens, { renderer })
-  const documentationContent = mdContent.replace(titleReg, `$1$2${gheButton}$3`)
+  if (titleText) {
-  return `<i18n>
+    const gheButton = `<edit-on-github-header url=${url} text=${titleText}></edit-on-github-header>`
-  {
+    const titleReg = /(<n-h1[^>]*>)(.*?)(<\/n-h1>)/
-    "zh-CN": {
+    mdContent = mdContent.replace(titleReg, `${gheButton}`)
-      "editOnGithub": "在 Github 上编辑"
-    },
-    "en-US": {
-      "editOnGithub": "Edit on Github"
-    }
   }
-</i18n>
+  return `
 <template>
   <component-documentation>
     <div style="display: flex; flex-wrap: nowrap;">
       <div style="width: calc(100% - 180px); margin-right: 36px;">
-        ${documentationContent}
+        ${mdContent}
       </div>
       <div style="width: 144px;">
         ${anchor}
@@ -55,23 +52,10 @@ module.exports = function (content, titleReg, gheUrl, gheButton) {
 </template>
 <script>
 ${importStatements}
-import createOutline from 'naive-ui/lib/icons/create-outline'
 
 export default {
   components: {
-    createOutline,
     ${components.join(',\n')}
-  },
-  data () {
-    return {
-      gheUrl: ${JSON.stringify(gheUrl)}
-    }
-  },
-  methods: {
-    handleEditOnGithubClick () {
-      window.open(this.gheUrl, '_blank')
-      return false
-    },
   }
 }
 </script>`

demo/loaders/convertMd2Doc.js

@@ -46,7 +46,7 @@ function parseDemosAsAnchor (demosLiteral) {
   return `<n-anchor :top="32" :bound="16" position="absolute" affix style="width: 144px;">${linkTags.join('\n')}</n-anchor>`
 }
 
-function generateScript (demosLiteral, components = [], gheUrl) {
+function generateScript (demosLiteral, components = [], url) {
   const demoNames = demosLiteral
     .split('\n')
     .map(demoName => demoName.trim())
@@ -60,11 +60,9 @@ function generateScript (demosLiteral, components = [], gheUrl) {
   const componentStatements = demoNames.map(demoName => demoName + 'Demo').concat(components).join(', ')
   const script = `<script>
 ${importStatements}
-import createOutline from 'naive-ui/lib/icons/create-outline'
 
 export default {
   components: {
-    createOutline,
     ${componentStatements}
   },
   provide () {
@@ -75,14 +73,8 @@ export default {
   data () {
     return {
       anchorLinkMap: new Map(),
-      gheUrl: ${JSON.stringify(gheUrl)}
+      url: ${JSON.stringify(url)}
     }
-  },
-  methods: {
-    handleEditOnGithubClick () {
-      window.open(this.gheUrl, '_blank')
-      return false
-    },
   }
 }
 </script>`
@@ -91,32 +83,8 @@ export default {
 
 function convertMd2ComponentDocumentation (text, env = 'development', url) {
   const isNoDemo = !!~text.search('<!--no-demo-->')
-  const titleReg = /(<n-h1[^>]*>)(.*?)(<\/n-h1>)/
-  const gheUrl = 'https://***REMOVED***/tree/develop/' + url
-  const gheButton = `<n-tooltip
-          :delay="300"
-          :placement="'top'"
-          :show-arrow="true"
-        >
-          <template v-slot:activator>
-            <a href="">
-              <n-button
-                style="marginLeft:10px;verticalAlign:middle;"
-                ghost
-                round
-                @click="handleEditOnGithubClick"
-                size="small"
-              >
-                <template v-slot:icon>
-                  <create-outline />
-                </template>
-              </n-button>
-            </a>
-          </template>
-          {{ $t('editOnGithub') }}
-        </n-tooltip>`
   if (isNoDemo) {
-    return mdLoader(text, titleReg, gheUrl, gheButton)
+    return mdLoader(text, url)
   }
   const isSingleColumn = !!~text.search('<!--single-column-->')
   const tokens = marked.lexer(text)
@@ -157,20 +125,16 @@ function convertMd2ComponentDocumentation (text, env = 'development', url) {
   // const classedDocumentationHTML = addClassToHTML(documentationHTML, 'markdown')
   const demosReg = /<!--demos-->/
   const demoTags = parseDemos(demosLiteral, env)
-  const documentationContent = documentationHTML
+  let documentationContent = documentationHTML
     .replace(demosReg, template(demoTags, demosLiteral, isSingleColumn))
-    .replace(titleReg, `$1$2${gheButton}$3`)
+  const titleIndex = tokens.findIndex(token => token.type === 'heading' && token.depth === 1)
-  const documentationTemplate = `
+  if (titleIndex > -1) {
-<i18n>
+    const titleText = JSON.stringify(tokens[titleIndex].text)
-  {
+    const gheButton = `<edit-on-github-header url=${url} text=${titleText}></edit-on-github-header>`
-    "zh-CN": {
+    const titleReg = /(<n-h1[^>]*>)(.*?)(<\/n-h1>)/
-      "editOnGithub": "在 Github 上编辑"
+    documentationContent = documentationContent.replace(titleReg, `${gheButton}`)
-    },
-    "en-US": {
-      "editOnGithub": "Edit on Github"
-    }
   }
-</i18n>
+  const documentationTemplate = `s
 <template>
   <component-documentation>
     <div style="display: flex; flex-wrap: nowrap;">
@@ -183,7 +147,7 @@ function convertMd2ComponentDocumentation (text, env = 'development', url) {
     </div>
   </component-documentation>
 </template>`
-  const documentationScript = generateScript(demosLiteral, components, gheUrl)
+  const documentationScript = generateScript(demosLiteral, components, url)
   // if (components.length) console.log(`${documentationTemplate}\n\n${documentationScript}`)
   return `${documentationTemplate}\n\n${documentationScript}`
   // console.log(vueComponent)

demo/utils/ComponentDemo.vue

@@ -34,16 +34,10 @@
           :show-arrow="true"
         >
           <template v-slot:activator>
-            <n-button
+            <edit-on-github-button
-              style="padding: 0 2px 0 8px"
+              class="edit-button"
-              ghost
+              :url="url"
-              round
+            />
-              @click="handleEditOnGithubClick"
-            >
-              <template v-slot:icon>
-                <create-outline />
-              </template>
-            </n-button>
           </template>
           {{ $t('editOnGithub') }}
         </n-tooltip>
@@ -81,14 +75,12 @@
 
 <script>
 import codeOutline from '../../src/_icons/code-outline'
-import createOutline from '../../src/_icons/create-outline'
 import { state } from '../store'
 import camelCase from 'lodash/camelCase'
 
 export default {
   components: {
-    codeOutline,
+    codeOutline
-    createOutline
   },
   inject: {
     NDocumentation: {
@@ -111,7 +103,7 @@ export default {
       return this.state.mode
     },
     url () {
-      const relativePath = this.NDocumentation.gheUrl.replace('index.md', camelCase(this.name) + '.md')
+      const relativePath = this.NDocumentation.url.replace('index.md', camelCase(this.name) + '.md')
       return relativePath
     }
   },
@@ -134,10 +126,6 @@ export default {
     this.init()
   },
   methods: {
-    handleEditOnGithubClick () {
-      window.open(this.url, '_blank')
-      return false
-    },
     toggleCodeDisplay () {
       this.showCode = !this.showCode
     },

demo/utils/EditOnGithubButton.vue

@@ -0,0 +1,47 @@
+<template>
+  <n-button
+    class="edit-button"
+    ghost
+    round
+    @click="handleEditOnGithubClick"
+  >
+    <template v-slot:icon>
+      <create-outline />
+    </template>
+  </n-button>
+</template>
+<script>
+import createOutline from '../../src/_icons/create-outline'
+export default {
+  name: 'EditOnGithubButton',
+  components: {
+    createOutline
+  },
+  props: {
+    url: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      gheUrl: 'https://***REMOVED***/tree/develop/'
+    }
+  },
+  computed: {
+    gheDocUrl () {
+      return this.gheUrl + this.url
+    }
+  },
+  methods: {
+    handleEditOnGithubClick () {
+      return window.open(this.gheDocUrl, '_blank')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .edit-button {
+    vertical-align: middle;
+  }
+</style>

demo/utils/EditOnGithubHeader.vue

@@ -0,0 +1,54 @@
+
+ <i18n>
+    {
+    "zh-CN": {
+    "editOnGithub": "在 Github 上编辑"
+    },
+    "en-US": {
+    "editOnGithub": "Edit on Github"
+    }
+    }
+  </i18n>
+<template>
+  <n-h1 :id="id">
+    {{ text }}
+    <n-tooltip
+      :delay="300"
+      :placement="'top'"
+      :show-arrow="true"
+    >
+      <template v-slot:activator>
+        <edit-on-github-button
+          class="edit-button"
+          :url="url"
+        />
+      </template>
+      {{ $t('editOnGithub') }}
+    </n-tooltip>
+  </n-h1>
+</template>
+<script>
+export default {
+  name: 'EditOnGithubHeader',
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    text: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    id () {
+      return this.text.replace(/ /g, '-')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .edit-button {
+    margin-left: 10px;
+  }
+</style>