From d6b0603177b8b4902ae9f967e96a23aac07fa01e Mon Sep 17 00:00:00 2001 From: "songwanli2025@163.com" <songwanli2025@163.com> Date: Thu, 19 Mar 2020 13:26:06 +0800 Subject: [PATCH] modify(EditOnGithubButton) --- demo/deploymentInit.js | 4 ++ demo/devInit.js | 4 ++ .../components/drawer/enUS/target.md | 8 ++- .../components/drawer/zhCN/target.md | 7 ++- demo/loaders/NaiveUIMdLoader.js | 36 ++++------- demo/loaders/convertMd2Doc.js | 60 ++++--------------- demo/utils/ComponentDemo.vue | 24 ++------ demo/utils/EditOnGithubButton.vue | 47 +++++++++++++++ demo/utils/EditOnGithubHeader.vue | 54 +++++++++++++++++ 9 files changed, 150 insertions(+), 94 deletions(-) create mode 100644 demo/utils/EditOnGithubButton.vue create mode 100644 demo/utils/EditOnGithubHeader.vue diff --git a/demo/deploymentInit.js b/demo/deploymentInit.js index 92349befe..819c5e12d 100644 --- a/demo/deploymentInit.js +++ b/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 => { diff --git a/demo/devInit.js b/demo/devInit.js index bbb84eabb..d3bf7144c 100644 --- a/demo/devInit.js +++ b/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 => { diff --git a/demo/documentation/components/drawer/enUS/target.md b/demo/documentation/components/drawer/enUS/target.md index a1244a4de..5fc1b9e92 100644 --- a/demo/documentation/components/drawer/enUS/target.md +++ b/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> diff --git a/demo/documentation/components/drawer/zhCN/target.md b/demo/documentation/components/drawer/zhCN/target.md index 03e227454..a9be02852 100644 --- a/demo/documentation/components/drawer/zhCN/target.md +++ b/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> diff --git a/demo/loaders/NaiveUIMdLoader.js b/demo/loaders/NaiveUIMdLoader.js index aa3d2d74b..13d619f4e 100644 --- a/demo/loaders/NaiveUIMdLoader.js +++ b/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 }) - const documentationContent = mdContent.replace(titleReg, `$1$2${gheButton}$3`) - return `<i18n> - { - "zh-CN": { - "editOnGithub": "在 Github 上编辑" - }, - "en-US": { - "editOnGithub": "Edit on Github" - } + let mdContent = marked.parser(tokens, { renderer }) + if (titleText) { + const gheButton = `<edit-on-github-header url=${url} text=${titleText}></edit-on-github-header>` + const titleReg = /(<n-h1[^>]*>)(.*?)(<\/n-h1>)/ + mdContent = mdContent.replace(titleReg, `${gheButton}`) } -</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>` diff --git a/demo/loaders/convertMd2Doc.js b/demo/loaders/convertMd2Doc.js index 361880bf1..4b2a1b8bc 100644 --- a/demo/loaders/convertMd2Doc.js +++ b/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 documentationTemplate = ` -<i18n> - { - "zh-CN": { - "editOnGithub": "在 Github 上编辑" - }, - "en-US": { - "editOnGithub": "Edit on Github" - } + 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 titleReg = /(<n-h1[^>]*>)(.*?)(<\/n-h1>)/ + documentationContent = documentationContent.replace(titleReg, `${gheButton}`) } -</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) diff --git a/demo/utils/ComponentDemo.vue b/demo/utils/ComponentDemo.vue index 2fb4fb54f..0be904701 100644 --- a/demo/utils/ComponentDemo.vue +++ b/demo/utils/ComponentDemo.vue @@ -34,16 +34,10 @@ :show-arrow="true" > <template v-slot:activator> - <n-button - style="padding: 0 2px 0 8px" - ghost - round - @click="handleEditOnGithubClick" - > - <template v-slot:icon> - <create-outline /> - </template> - </n-button> + <edit-on-github-button + class="edit-button" + :url="url" + /> </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, - createOutline + codeOutline }, 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 }, diff --git a/demo/utils/EditOnGithubButton.vue b/demo/utils/EditOnGithubButton.vue new file mode 100644 index 000000000..9a6d107e2 --- /dev/null +++ b/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> diff --git a/demo/utils/EditOnGithubHeader.vue b/demo/utils/EditOnGithubHeader.vue new file mode 100644 index 000000000..0812e58f9 --- /dev/null +++ b/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>