refactor: extract relative url

demo/loaders/ComponentDemoTemplate.vue

@@ -1,7 +1,7 @@
 <template>
   <component-demo
     demo-file-name="<!--DEMO_FILE_NAME-->"
-    demo-file-name-with-extension="<!--DEMO_FILE_NAME_WITH_EXT-->"
+    relative-url="<!--URL-->"
     title="<!--TITLE_SLOT-->"
   >
     <template v-slot:title>

demo/loaders/NaiveUIDemoLoader.js

@@ -1,5 +1,10 @@
 const convertMd2Demo = require('./convertMd2Demo')
+const projectPath = require('./project-path')
 
 module.exports = function (content) {
-  return convertMd2Demo(content, this.resourcePath)
+  const relativeUrl = this.resourcePath.replace(projectPath + '/', '')
+  return convertMd2Demo(content, {
+    relativeUrl,
+    resourcePath: this.resourcePath
+  })
 }

demo/loaders/NaiveUIDocLoader.js

@@ -1,9 +1,8 @@
 const convertMd2Doc = require('./convertMd2Doc')
-const path = require('path')
+const projectPath = require('./project-path')
 
 module.exports = function (content) {
   const env = process.env.NODE_ENV
-  const projectPath = path.resolve(__dirname, '..', '..')
   const relativeURL = this.resourcePath.replace(projectPath + '/', '')
   return convertMd2Doc(content, env, relativeURL)
 }

demo/loaders/NaiveUIMdLoader.js

@@ -40,9 +40,9 @@ module.exports = function (content, url) {
     .join('\n')
   let mdContent = marked.parser(tokens, { renderer })
   if (titleText) {
-    const gheButton = `<edit-on-github-header url=${url || relativeURL} text=${titleText}></edit-on-github-header>`
+    const githubButton = `<edit-on-github-header url=${url || relativeURL} text=${titleText}></edit-on-github-header>`
     const titleReg = /(<n-h1[^>]*>)(.*?)(<\/n-h1>)/
-    mdContent = mdContent.replace(titleReg, `${gheButton}`)
+    mdContent = mdContent.replace(titleReg, `${githubButton}`)
   }
   return `
 <template>

demo/loaders/convertMd2Demo.js

@@ -72,9 +72,9 @@ ${mergedParts.code}
   return mergedParts
 }
 
-function genVueComponent (parts, fileName, fileNameWithExtension, noRunning = false) {
+function genVueComponent (parts, fileName, relativeUrl, noRunning = false) {
   const demoFileNameReg = /<!--DEMO_FILE_NAME-->/g
-  const demoFileNameWithExt = /<!--DEMO_FILE_NAME_WITH_EXT-->/g
+  const relativeUrlReg = /<!--URL-->/g
   const titleReg = /<!--TITLE_SLOT-->/g
   const contentReg = /<!--CONTENT_SLOT-->/
   const codeReg = /<!--CODE_SLOT-->/
@@ -83,8 +83,7 @@ function genVueComponent (parts, fileName, fileNameWithExtension, noRunning = fa
   const demoReg = /<!--DEMO_SLOT-->/
   let src = demoBlock
   src = src.replace(demoFileNameReg, fileName)
-  src = src.replace(demoFileNameWithExt, fileNameWithExtension)
-  // console.log(src)
+  src = src.replace(relativeUrlReg, relativeUrl)
   if (parts.content) {
     src = src.replace(contentReg, parts.content)
   }
@@ -112,13 +111,16 @@ function getFileName (resourcePath) {
   return [fileNameWithExtension.split('.')[0], fileNameWithExtension]
 }
 
-function convertMd2Demo (text, resourcePath) {
+function convertMd2Demo (text, {
+  resourcePath,
+  relativeUrl
+}) {
   const noRunning = /<!--no-running-->/.test(text)
   const tokens = marked.lexer(text)
   const parts = getPartsOfDemo(tokens)
   const mergedParts = mergeParts(parts)
-  const [fileName, fileNameWithExtension] = getFileName(resourcePath)
-  const vueComponent = genVueComponent(mergedParts, fileName, fileNameWithExtension, noRunning)
+  const [fileName] = getFileName(resourcePath)
+  const vueComponent = genVueComponent(mergedParts, fileName, relativeUrl, noRunning)
   return vueComponent
 }
 

demo/loaders/convertMd2Doc.js

@@ -127,11 +127,11 @@ function convertMd2ComponentDocumentation (text, env = 'development', url) {
   const titleIndex = tokens.findIndex(token => token.type === 'heading' && token.depth === 1)
   if (titleIndex > -1) {
     const titleText = JSON.stringify(tokens[titleIndex].text)
-    const gheButton = `<edit-on-github-header url=${url} text=${titleText}></edit-on-github-header>`
+    const githubButton = `<edit-on-github-header relative-url="${url}" text=${titleText}></edit-on-github-header>`
     const titleReg = /(<n-h1[^>]*>)(.*?)(<\/n-h1>)/
-    documentationContent = documentationContent.replace(titleReg, `${gheButton}`)
+    documentationContent = documentationContent.replace(titleReg, `${githubButton}`)
   }
-  const documentationTemplate = `s
+  const documentationTemplate = `
 <template>
   <component-documentation>
     <div style="display: flex; flex-wrap: nowrap;">

demo/loaders/project-path.js

@@ -0,0 +1,2 @@
+const path = require('path')
+module.exports = path.resolve(__dirname, '..', '..')

demo/utils/ComponentDemo.vue

@@ -36,7 +36,7 @@
           <edit-on-github-button
             style="padding: 0; margin-right: 6px;"
             size="tiny"
-            :url="url"
+            :relative-url="relativeUrl"
           />
         </template>
         {{ $t('editOnGithub') }}
@@ -90,7 +90,7 @@ export default {
       type: String,
       required: true
     },
-    demoFileNameWithExtension: {
+    relativeUrl: {
       type: String,
       required: true
     }
@@ -113,14 +113,6 @@ export default {
   computed: {
     mode () {
       return this.modeRef.value
-    },
-    // TODO: make it move to loader
-    url () {
-      const relativePath = this.NDocumentation.url.replace(
-        'index.demo-entry.md',
-        this.demoFileNameWithExtension
-      )
-      return relativePath
     }
   },
   watch: {

demo/utils/EditOnGithubButton.vue

@@ -14,6 +14,7 @@
 
 <script>
 import editIcon from '../../src/_icons/git-commit-outline'
+import githubUrl from './github-url'
 
 export default {
   name: 'EditOnGithubButton',
@@ -21,7 +22,7 @@ export default {
     editIcon
   },
   props: {
-    url: {
+    relativeUrl: {
       type: String,
       required: true
     },
@@ -36,12 +37,12 @@ export default {
   },
   data () {
     return {
-      gheUrl: 'https://***REMOVED***/tree/develop/'
+      githubUrl
     }
   },
   computed: {
     gheDocUrl () {
-      return this.gheUrl + this.url
+      return this.githubUrl + this.relativeUrl
     }
   },
   methods: {

demo/utils/EditOnGithubHeader.vue

@@ -24,7 +24,7 @@
             text
             size="large"
             class="edit-button"
-            :url="url"
+            :relative-url="relativeUrl"
           />
         </template>
         {{ $t('editOnGithub') }}
@@ -37,7 +37,7 @@
 export default {
   name: 'EditOnGithubHeader',
   props: {
-    url: {
+    relativeUrl: {
       type: String,
       required: true
     },

demo/utils/github-url.js

@@ -0,0 +1 @@
+module.exports = 'https://***REMOVED***/tree/develop/'