doc: refactor doc index

This commit is contained in:
07akioni 2020-03-19 18:26:48 +08:00
parent abf5b5142b
commit 55332da04e
15 changed files with 345 additions and 658 deletions

View File

@ -1,5 +1,4 @@
import { Vue, router } from './deploymentInit'
import i18n from './i18n'
import { Vue, router, i18n } from './init'
import hljs from './hljs'
import demoRouterView from './demoRouterView'
import NaiveUI from '../lib/index'
@ -10,6 +9,6 @@ NaiveUI.setHljs(hljs)
new Vue({
...demoRouterView,
i18n,
router
router,
i18n
}).$mount('#app')

View File

@ -1,220 +0,0 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import LandingPage from './documentation/landing'
import Entry from './entry'
import intro from './documentation/intro/intro'
import start from './documentation/intro/start'
import devGuildlines from './documentation/intro/devGuidelines'
import nimbusServiceLayoutDemo from './documentation/deprecated/nimbusServiceLayout'
import gradientText from './documentation/components/gradientText'
import checkbox from './documentation/components/checkbox'
import button from './documentation/components/button'
import nswitch from './documentation/components/switch'
import input from './documentation/components/input'
import select from './documentation/components/select'
import cascader from './documentation/components/cascader'
import dynamicInput from './documentation/components/dynamicInput'
import modal from './documentation/components/modal'
import message from './documentation/components/message'
import tooltip from './documentation/components/tooltip'
import popover from './documentation/components/popover'
import alert from './documentation/components/alert'
import datePicker from './documentation/components/datePicker'
import inputNumber from './documentation/components/inputNumber'
import radio from './documentation/components/radio'
import form from './documentation/components/form'
import tabs from './documentation/components/tabs'
import timePicker from './documentation/components/timePicker'
import confirm from './documentation/components/confirm'
import backTop from './documentation/components/backTop'
import dropdown from './documentation/components/dropdown'
import badge from './documentation/components/badge'
import steps from './documentation/components/steps'
import notification from './documentation/components/notification'
import pagination from './documentation/components/pagination'
import collapse from './documentation/components/collapse'
import tag from './documentation/components/tag'
import menu from './documentation/components/menu'
import timeline from './documentation/components/timeline'
import progress from './documentation/components/progress'
import divider from './documentation/components/divider'
import popconfirm from './documentation/components/popconfirm'
import anchor from './documentation/components/anchor'
import popselect from './documentation/components/popselect'
import configProvider from './documentation/components/configProvider'
import dataTable from './documentation/components/dataTable'
import typography from './documentation/components/typography'
import transfer from './documentation/components/transfer'
import spin from './documentation/components/spin'
import drawer from './documentation/components/drawer'
import loadingBar from './documentation/components/loadingBar'
import time from './documentation/components/time'
import slider from './documentation/components/slider'
import tree from './documentation/components/tree'
import affix from './documentation/components/affix'
import statistic from './documentation/components/statistic'
import grid from './documentation/components/grid'
import breadcrumb from './documentation/components/breadcrumb'
import configConsumer from './documentation/components/configConsumer'
import descriptions from './documentation/components/descriptions'
import list from './documentation/components/list'
import card from './documentation/components/card'
import layout from './documentation/components/layout'
import avatar from './documentation/components/avatar'
import result from './documentation/components/result'
import thing from './documentation/components/thing'
import autoComplete from './documentation/components/autoComplete'
import empty from './documentation/components/empty'
import theme from './documentation/theme'
import element from './documentation/components/element'
import log from './documentation/components/log'
import code from './documentation/components/code'
import upload from './documentation/components/upload'
import table from './documentation/components/table'
import DocEntry from './docEntry'
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)
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 => {
route.path = prefix + route.path
return route
})
const children = [
{ path: '/intro', component: intro },
{ path: '/start', component: start },
{ path: '/dev-guildlines', component: devGuildlines },
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
{ path: '/n-layout', component: layout },
{ path: '/n-gradient-text', component: gradientText },
{
path: '/n-icon',
component: () => import('./documentation/components/icon')
},
{ path: '/n-checkbox', component: checkbox },
{ path: '/n-button', component: button },
{ path: '/n-switch', component: nswitch },
// { path: '/n-table', component: tableDemo },
{ path: '/n-data-table', component: dataTable },
{ path: '/n-input', component: input },
{ path: '/n-select', component: select },
{ path: '/n-cascader', component: cascader },
{ path: '/n-custom-dynamic-input', component: dynamicInput },
{ path: '/n-modal', component: modal },
{ path: '/n-message', component: message },
{ path: '/n-tooltip', component: tooltip },
{ path: '/n-popover', component: popover },
{ path: '/n-notification', component: notification },
{ path: '/n-pagination', component: pagination },
{ path: '/n-alert', component: alert },
{ path: '/n-date-picker', component: datePicker },
{ path: '/n-input-number', component: inputNumber },
{ path: '/n-radio', component: radio },
{ path: '/n-form', component: form },
{ path: '/n-tabs', component: tabs },
{ path: '/n-time-picker', component: timePicker },
{ path: '/n-confirm', component: confirm },
{ path: '/n-badge', component: badge },
{ path: '/n-steps', component: steps },
{ path: '/n-collapse', component: collapse },
{ path: '/n-progress', component: progress },
{ path: '/n-tag', component: tag },
{ path: '/n-menu', component: menu },
{ path: '/n-timeline', component: timeline },
{ path: '/n-back-top', component: backTop },
{ path: '/n-divider', component: divider },
{ path: '/n-popconfirm', component: popconfirm },
{ path: '/n-anchor', component: anchor },
{ path: '/n-dropdown', component: dropdown },
{ path: '/n-popselect', component: popselect },
{ path: '/n-config-provider', component: configProvider },
{ path: '/n-transfer', component: transfer },
{ path: '/n-spin', component: spin },
{ path: '/n-drawer', component: drawer },
{ path: '/n-loading-bar', component: loadingBar },
{ path: '/n-time', component: time },
{ path: '/n-slider', component: slider },
{ path: '/n-tree', component: tree },
{ path: '/n-affix', component: affix },
{ path: '/n-statistic', component: statistic },
{ path: '/n-grid', component: grid },
{ path: '/n-breadcrumb', component: breadcrumb },
{ path: '/n-config-consumer', component: configConsumer },
{ path: '/n-descriptions', component: descriptions },
{ path: '/n-list', component: list },
{ path: '/n-card', component: card },
{ path: '/n-avatar', component: avatar },
{ path: '/n-result', component: result },
{ path: '/n-thing', component: thing },
{ path: '/n-auto-complete', component: autoComplete },
{ path: '/n-empty', component: empty },
{ path: '/n-theme', component: theme },
{ path: '/n-element', component: element },
{ path: '/n-log', component: log },
{ path: '/n-code', component: code },
{ path: '/n-typography', component: typography },
{ path: '/n-upload', component: upload },
{ path: '/n-table', component: table }
]
const routes = [
{
path: '/:lang/:theme',
component: Entry,
children: [
{
path: '/:lang/:theme',
component: LandingPage,
name: 'home'
},
{
path: '/:lang/:theme/doc',
component: DocEntry,
children: withPrefix('/:lang/:theme/doc', children)
}
]
},
{
path: '/*',
redirect: '/zh-CN/light'
}
]
const router = new VueRouter({
mode: 'history',
routes
})
router.beforeEach(function (to, from, next) {
Vue.prototype.$NLoadingBar.theme = to.params.theme
if (to.path !== from.path) {
Vue.prototype.$NLoadingBar.start()
}
next()
})
router.afterEach(function (to, from) {
if (to.path !== from.path) {
Vue.prototype.$NLoadingBar.finish()
}
})
export { Vue, router }

View File

@ -1,16 +1,18 @@
import { Vue, router } from './devInit'
import i18n from './i18n'
import { Vue, router, routes, childRoutes, i18n } from './init'
import debugRouteMixin from './routes/debugRouteMixin'
import hljs from './hljs'
import demoRouterView from './demoRouterView'
import NaiveUI from '../src/index'
import '../styles/index.scss'
debugRouteMixin(routes, childRoutes)
Vue.use(NaiveUI)
NaiveUI.setHljs(hljs)
new Vue({
...demoRouterView,
i18n,
router
router,
i18n
}).$mount('#app')

View File

@ -1,256 +0,0 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import LandingPage from './documentation/landing'
import Entry from './entry'
import intro from './documentation/intro/intro'
import start from './documentation/intro/start'
import devGuildlines from './documentation/intro/devGuidelines'
import nimbusServiceLayoutDemo from './documentation/deprecated/nimbusServiceLayout'
import gradientText from './documentation/components/gradientText'
import checkbox from './documentation/components/checkbox'
import button from './documentation/components/button'
import nswitch from './documentation/components/switch'
import input from './documentation/components/input'
import select from './documentation/components/select'
import cascader from './documentation/components/cascader'
import dynamicInput from './documentation/components/dynamicInput'
import modal from './documentation/components/modal'
import message from './documentation/components/message'
import tooltip from './documentation/components/tooltip'
import popover from './documentation/components/popover'
import alert from './documentation/components/alert'
import datePicker from './documentation/components/datePicker'
import inputNumber from './documentation/components/inputNumber'
import radio from './documentation/components/radio'
import form from './documentation/components/form'
import tabs from './documentation/components/tabs'
import timePicker from './documentation/components/timePicker'
import confirm from './documentation/components/confirm'
import backTop from './documentation/components/backTop'
import dropdown from './documentation/components/dropdown'
import badge from './documentation/components/badge'
import steps from './documentation/components/steps'
import notification from './documentation/components/notification'
import pagination from './documentation/components/pagination'
import collapse from './documentation/components/collapse'
import tag from './documentation/components/tag'
import menu from './documentation/components/menu'
import timeline from './documentation/components/timeline'
import progress from './documentation/components/progress'
import divider from './documentation/components/divider'
import popconfirm from './documentation/components/popconfirm'
import anchor from './documentation/components/anchor'
import popselect from './documentation/components/popselect'
import configProvider from './documentation/components/configProvider'
import dataTable from './documentation/components/dataTable'
import typography from './documentation/components/typography'
import transfer from './documentation/components/transfer'
import spin from './documentation/components/spin'
import drawer from './documentation/components/drawer'
import loadingBar from './documentation/components/loadingBar'
import time from './documentation/components/time'
import slider from './documentation/components/slider'
import tree from './documentation/components/tree'
import affix from './documentation/components/affix'
import statistic from './documentation/components/statistic'
import grid from './documentation/components/grid'
import breadcrumb from './documentation/components/breadcrumb'
import configConsumer from './documentation/components/configConsumer'
import descriptions from './documentation/components/descriptions'
import list from './documentation/components/list'
import card from './documentation/components/card'
import layout from './documentation/components/layout'
import avatar from './documentation/components/avatar'
import result from './documentation/components/result'
import thing from './documentation/components/thing'
import autoComplete from './documentation/components/autoComplete'
import empty from './documentation/components/empty'
import theme from './documentation/theme'
import element from './documentation/components/element'
import log from './documentation/components/log'
import code from './documentation/components/code'
import upload from './documentation/components/upload'
import table from './documentation/components/table'
import DocEntry from './docEntry'
import ComponentDemo from './utils/ComponentDemo'
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'
import datePickerDebug from './debugComponents/datePickerDebug'
import backTopDebug from './debugComponents/backTopDebug'
import suffixDebug from './debugComponents/suffixDebug'
import cascaderDebug from './debugComponents/cascaderDebug'
import verticalAlignDebug from './debugComponents/verticalAlignDebug'
import iconTransitionDebug from './debugComponents/iconTransitionDebug'
import selectDebug from './debugComponents/selectDebug'
import popoverDebug from './debugComponents/popoverDebug'
import scrollbarDebug from './debugComponents/scrollbarDebug'
import scrollbarDebug2 from './debugComponents/scrollbarDebug2'
Vue.use(VueRouter)
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 => {
route.path = prefix + route.path
return route
})
const children = [
{ path: '/intro', component: intro },
{ path: '/start', component: start },
{ path: '/dev-guildlines', component: devGuildlines },
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
{ path: '/n-layout', component: layout },
{ path: '/n-gradient-text', component: gradientText },
{
path: '/n-icon',
component: () => import('./documentation/components/icon')
},
{ path: '/n-checkbox', component: checkbox },
{ path: '/n-button', component: button },
{ path: '/n-switch', component: nswitch },
// { path: '/n-table', component: tableDemo },
{ path: '/n-data-table', component: dataTable },
{ path: '/n-input', component: input },
{ path: '/n-select', component: select },
{ path: '/n-cascader', component: cascader },
{ path: '/n-dynamic-input', component: dynamicInput },
{ path: '/n-modal', component: modal },
{ path: '/n-message', component: message },
{ path: '/n-tooltip', component: tooltip },
{ path: '/n-popover', component: popover },
{ path: '/n-notification', component: notification },
{ path: '/n-pagination', component: pagination },
{ path: '/n-alert', component: alert },
{ path: '/n-date-picker', component: datePicker },
{ path: '/n-input-number', component: inputNumber },
{ path: '/n-radio', component: radio },
{ path: '/n-form', component: form },
{ path: '/n-tabs', component: tabs },
{ path: '/n-time-picker', component: timePicker },
{ path: '/n-confirm', component: confirm },
{ path: '/n-router-debug', component: routerDebug },
{ path: '/n-modal-debug', component: modalDebug },
{ path: '/n-scrollbar-debug', component: scrollbarDebug },
{ path: '/n-badge', component: badge },
{ path: '/n-steps', component: steps },
{ path: '/n-collapse', component: collapse },
{ path: '/n-progress', component: progress },
{ path: '/n-tag', component: tag },
{ path: '/n-menu', component: menu },
{ path: '/n-timeline', component: timeline },
{ path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
{ path: '/n-back-top', component: backTop },
{ path: '/n-date-picker-debug', component: datePickerDebug },
{ path: '/n-divider', component: divider },
{ path: '/n-popconfirm', component: popconfirm },
{ path: '/n-anchor', component: anchor },
{ path: '/n-dropdown', component: dropdown },
{ path: '/n-popselect', component: popselect },
{ path: '/n-config-provider', component: configProvider },
{ path: '/n--debug', component: suffixDebug },
{ path: '/n-transfer', component: transfer },
{ path: '/n-spin', component: spin },
{ path: '/n-drawer', component: drawer },
{ path: '/n-loading-bar', component: loadingBar },
{ path: '/n-time', component: time },
{ path: '/n-slider', component: slider },
{ path: '/n-tree', component: tree },
{ path: '/n-vertical-align-debug', component: verticalAlignDebug },
{ path: '/n-affix', component: affix },
{ path: '/n-statistic', component: statistic },
{ path: '/n-grid', component: grid },
{ path: '/n-breadcrumb', component: breadcrumb },
{ path: '/n-config-consumer', component: configConsumer },
{ path: '/n-descriptions', component: descriptions },
{ path: '/n-list', component: list },
{ path: '/n-card', component: card },
{ path: '/n-avatar', component: avatar },
{ path: '/n-result', component: result },
{ path: '/n-thing', component: thing },
{ path: '/n-auto-complete', component: autoComplete },
{ path: '/n-empty', component: empty },
{ path: '/n-theme', component: theme },
{ path: '/n-element', component: element },
{ path: '/n-log', component: log },
{ path: '/n-code', component: code },
{ path: '/n-typography', component: typography },
{ path: '/n-upload', component: upload },
{ path: '/n-table', component: table },
{
path: '/n-icon-transition-debug',
component: iconTransitionDebug
},
{ path: '/n-select-debug', component: selectDebug }
]
const routes = [
{
path: '/:lang/:theme/n-popover-debug',
component: popoverDebug
},
{
path: '/n-back-top-debug',
component: backTopDebug
},
{
path: '/n-cascader-debug',
component: cascaderDebug
},
{
path: '/:lang/:theme',
component: Entry,
children: [
{
path: '/:lang/:theme',
component: LandingPage,
name: 'home'
},
{
path: '/:lang/:theme/doc',
component: DocEntry,
children: withPrefix('/:lang/:theme/doc', children)
}
]
},
{
path: '/*',
redirect: '/zh-CN/light'
}
]
const router = new VueRouter({
mode: 'history',
routes
})
router.beforeEach(function (to, from, next) {
Vue.prototype.$NLoadingBar.theme = to.params.theme
if (to.path !== from.path) {
Vue.prototype.$NLoadingBar.start()
}
next()
})
router.afterEach(function (to, from) {
if (to.path !== from.path) {
Vue.prototype.$NLoadingBar.finish()
}
})
export { Vue, router }

View File

@ -1,4 +1,4 @@
# 点击标题
# Click on Item Header
```html
<n-collapse
v-model="activeNames"

View File

@ -1,5 +1,10 @@
<template>
<n-config-provider class="demo" namespace="naive-ui-doc" :theme="theme" :language="lang">
<n-config-provider
class="demo"
namespace="naive-ui-doc"
:theme="theme"
:language="lang"
>
<n-layout position="absolute" class="root-layout">
<doc-header
:lang="lang"
@ -17,7 +22,7 @@
<script>
import DocHeader from './header.vue'
import menuOptions from './menuOptions'
import i18n from './i18n'
import { i18n } from './init'
import { state } from './store'
export default {

View File

@ -1,6 +0,0 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export default new VueI18n({
locale: 'en-US'
})

46
demo/init.js Normal file
View File

@ -0,0 +1,46 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueI18n from 'vue-i18n'
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 { routes, childRoutes } from './routes/routes'
import './styles/demo.scss'
Vue.use(VueRouter)
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh-CN'
})
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 router = new VueRouter({
mode: 'history',
routes
})
router.beforeEach(function (to, from, next) {
Vue.prototype.$NLoadingBar.theme = to.params.theme
if (to.path !== from.path) {
Vue.prototype.$NLoadingBar.start()
}
next()
})
router.afterEach(function (to, from) {
if (to.path !== from.path) {
Vue.prototype.$NLoadingBar.finish()
}
})
export { Vue, router, routes, childRoutes, i18n }

View File

@ -0,0 +1,46 @@
import routerDebug from '../debugComponents/routerDebug'
import modalDebug from '../debugComponents/modalDebug'
import datePickerDebug from '../debugComponents/datePickerDebug'
import backTopDebug from '../debugComponents/backTopDebug'
import suffixDebug from '../debugComponents/suffixDebug'
import cascaderDebug from '../debugComponents/cascaderDebug'
import verticalAlignDebug from '../debugComponents/verticalAlignDebug'
import iconTransitionDebug from '../debugComponents/iconTransitionDebug'
import selectDebug from '../debugComponents/selectDebug'
import popoverDebug from '../debugComponents/popoverDebug'
import scrollbarDebug from '../debugComponents/scrollbarDebug'
import scrollbarDebug2 from '../debugComponents/scrollbarDebug2'
import { withPrefix } from './utils'
const RootDebugRoutes = [
{
path: '/n-popover-debug',
component: popoverDebug
},
{
path: '/n-back-top-debug',
component: backTopDebug
},
{
path: '/n-cascader-debug',
component: cascaderDebug
}
]
const ChildDebugRoutes = [
{ path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
{ path: '/n-date-picker-debug', component: datePickerDebug },
{ path: '/n--debug', component: suffixDebug },
{ path: '/n-vertical-align-debug', component: verticalAlignDebug },
{ path: '/n-icon-transition-debug', component: iconTransitionDebug },
{ path: '/n-select-debug', component: selectDebug },
{ path: '/n-router-debug', component: routerDebug },
{ path: '/n-modal-debug', component: modalDebug },
{ path: '/n-scrollbar-debug', component: scrollbarDebug }
]
export default function debugRouteMixin (routes, childRoutes) {
routes.unshift(RootDebugRoutes)
childRoutes.unshift(withPrefix('/:lang/:theme/doc', ChildDebugRoutes))
}

177
demo/routes/routes.js Normal file
View File

@ -0,0 +1,177 @@
import LandingPage from '../documentation/landing'
import Entry from '../entry'
import intro from '../documentation/intro/intro'
import start from '../documentation/intro/start'
import devGuildlines from '../documentation/intro/devGuidelines'
import nimbusServiceLayoutDemo from '../documentation/deprecated/nimbusServiceLayout'
import gradientText from '../documentation/components/gradientText'
import checkbox from '../documentation/components/checkbox'
import button from '../documentation/components/button'
import nswitch from '../documentation/components/switch'
import input from '../documentation/components/input'
import select from '../documentation/components/select'
import cascader from '../documentation/components/cascader'
import dynamicInput from '../documentation/components/dynamicInput'
import modal from '../documentation/components/modal'
import message from '../documentation/components/message'
import tooltip from '../documentation/components/tooltip'
import popover from '../documentation/components/popover'
import alert from '../documentation/components/alert'
import datePicker from '../documentation/components/datePicker'
import inputNumber from '../documentation/components/inputNumber'
import radio from '../documentation/components/radio'
import form from '../documentation/components/form'
import tabs from '../documentation/components/tabs'
import timePicker from '../documentation/components/timePicker'
import confirm from '../documentation/components/confirm'
import backTop from '../documentation/components/backTop'
import dropdown from '../documentation/components/dropdown'
import badge from '../documentation/components/badge'
import steps from '../documentation/components/steps'
import notification from '../documentation/components/notification'
import pagination from '../documentation/components/pagination'
import collapse from '../documentation/components/collapse'
import tag from '../documentation/components/tag'
import menu from '../documentation/components/menu'
import timeline from '../documentation/components/timeline'
import progress from '../documentation/components/progress'
import divider from '../documentation/components/divider'
import popconfirm from '../documentation/components/popconfirm'
import anchor from '../documentation/components/anchor'
import popselect from '../documentation/components/popselect'
import configProvider from '../documentation/components/configProvider'
import dataTable from '../documentation/components/dataTable'
import typography from '../documentation/components/typography'
import transfer from '../documentation/components/transfer'
import spin from '../documentation/components/spin'
import drawer from '../documentation/components/drawer'
import loadingBar from '../documentation/components/loadingBar'
import time from '../documentation/components/time'
import slider from '../documentation/components/slider'
import tree from '../documentation/components/tree'
import affix from '../documentation/components/affix'
import statistic from '../documentation/components/statistic'
import grid from '../documentation/components/grid'
import breadcrumb from '../documentation/components/breadcrumb'
import configConsumer from '../documentation/components/configConsumer'
import descriptions from '../documentation/components/descriptions'
import list from '../documentation/components/list'
import card from '../documentation/components/card'
import layout from '../documentation/components/layout'
import avatar from '../documentation/components/avatar'
import result from '../documentation/components/result'
import thing from '../documentation/components/thing'
import autoComplete from '../documentation/components/autoComplete'
import empty from '../documentation/components/empty'
import theme from '../documentation/theme'
import element from '../documentation/components/element'
import log from '../documentation/components/log'
import code from '../documentation/components/code'
import upload from '../documentation/components/upload'
import table from '../documentation/components/table'
import DocEntry from '../docEntry'
import { withPrefix } from './utils'
export const childRoutes = [
{ path: '/intro', component: intro },
{ path: '/start', component: start },
{ path: '/dev-guildlines', component: devGuildlines },
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
{ path: '/n-layout', component: layout },
{ path: '/n-gradient-text', component: gradientText },
{
path: '/n-icon',
component: () => import('../documentation/components/icon')
},
{ path: '/n-checkbox', component: checkbox },
{ path: '/n-button', component: button },
{ path: '/n-switch', component: nswitch },
{ path: '/n-data-table', component: dataTable },
{ path: '/n-input', component: input },
{ path: '/n-select', component: select },
{ path: '/n-cascader', component: cascader },
{ path: '/n-dynamic-input', component: dynamicInput },
{ path: '/n-modal', component: modal },
{ path: '/n-message', component: message },
{ path: '/n-tooltip', component: tooltip },
{ path: '/n-popover', component: popover },
{ path: '/n-notification', component: notification },
{ path: '/n-pagination', component: pagination },
{ path: '/n-alert', component: alert },
{ path: '/n-date-picker', component: datePicker },
{ path: '/n-input-number', component: inputNumber },
{ path: '/n-radio', component: radio },
{ path: '/n-form', component: form },
{ path: '/n-tabs', component: tabs },
{ path: '/n-time-picker', component: timePicker },
{ path: '/n-confirm', component: confirm },
{ path: '/n-badge', component: badge },
{ path: '/n-steps', component: steps },
{ path: '/n-collapse', component: collapse },
{ path: '/n-progress', component: progress },
{ path: '/n-tag', component: tag },
{ path: '/n-menu', component: menu },
{ path: '/n-timeline', component: timeline },
{ path: '/n-back-top', component: backTop },
{ path: '/n-divider', component: divider },
{ path: '/n-popconfirm', component: popconfirm },
{ path: '/n-anchor', component: anchor },
{ path: '/n-dropdown', component: dropdown },
{ path: '/n-popselect', component: popselect },
{ path: '/n-config-provider', component: configProvider },
{ path: '/n-transfer', component: transfer },
{ path: '/n-spin', component: spin },
{ path: '/n-drawer', component: drawer },
{ path: '/n-loading-bar', component: loadingBar },
{ path: '/n-time', component: time },
{ path: '/n-slider', component: slider },
{ path: '/n-tree', component: tree },
{ path: '/n-affix', component: affix },
{ path: '/n-statistic', component: statistic },
{ path: '/n-grid', component: grid },
{ path: '/n-breadcrumb', component: breadcrumb },
{ path: '/n-config-consumer', component: configConsumer },
{ path: '/n-descriptions', component: descriptions },
{ path: '/n-list', component: list },
{ path: '/n-card', component: card },
{ path: '/n-avatar', component: avatar },
{ path: '/n-result', component: result },
{ path: '/n-thing', component: thing },
{ path: '/n-auto-complete', component: autoComplete },
{ path: '/n-empty', component: empty },
{ path: '/n-theme', component: theme },
{ path: '/n-element', component: element },
{ path: '/n-log', component: log },
{ path: '/n-code', component: code },
{ path: '/n-typography', component: typography },
{ path: '/n-upload', component: upload },
{ path: '/n-table', component: table }
]
export const routes = [
{
path: '/:lang/:theme',
component: Entry,
children: [
{
path: '/:lang/:theme',
component: LandingPage,
name: 'home'
},
{
path: '/:lang/:theme/doc',
component: DocEntry,
children: withPrefix('/:lang/:theme/doc', childRoutes)
}
]
},
{
path: '/*',
redirect: '/zh-CN/light'
}
]

6
demo/routes/utils.js Normal file
View File

@ -0,0 +1,6 @@
export const withPrefix = (prefix, routes) => {
return routes.map(route => {
route.path = prefix + route.path
return route
})
}

View File

@ -1,134 +0,0 @@
/* eslint-disable */
import emojiRegex from 'emoji-regex';
const regex = emojiRegex();
const emojiUnicode = require("emoji-unicode")
/**
*
* Here's a thing that will look through all the text nodes of a document, and
* upon encountering an emoji codepoint, will replace it with an image.
* For now, those images are pulled from GitHub, which isn't very nice, so I
* need to find a more suitable host.
*
* Much of this code was gleaned from staring at the minified GitHub JS.
*
* Copyright (c) 2013 Mark Wunsch. Licensed under the MIT License.
* @markwunsch
*
*/
export const replaceEmojiWithImages = function (root) {
var REGIONAL_INDICATOR_A = parseInt("1f1e6", 16),
REGIONAL_INDICATOR_Z = parseInt("1f1ff", 16),
IMAGE_HOST = "github.githubassets.com",
IMAGE_PATH = "/images/icons/emoji/unicode/",
IMAGE_EXT = ".png";
// String.fromCodePoint is super helpful
if (!String.fromCodePoint) {
/*!
* ES6 Unicode Shims 0.1
* (c) 2012 Steven Levithan <http://slevithan.com/>
* MIT License
**/
String.fromCodePoint = function fromCodePoint () {
var chars = [], point, offset, units, i;
for (i = 0; i < arguments.length; ++i) {
point = arguments[i];
offset = point - 0x10000;
units = point > 0xFFFF ? [0xD800 + (offset >> 10), 0xDC00 + (offset & 0x3FF)] : [point];
chars.push(String.fromCharCode.apply(null, units));
}
return chars.join("");
}
}
/**
* Create a treewalker to walk an element and return an Array of Text Nodes.
* This function is (hopefully) smart enough to exclude unwanted text nodes
* like whitespace and script tags.
* https://gist.github.com/mwunsch/4693383
*/
function getLegitTextNodes(element) {
if (!document.createTreeWalker) return [];
var blacklist = ['SCRIPT', 'OPTION', 'TEXTAREA'],
textNodes = [],
walker = document.createTreeWalker(
element,
NodeFilter.SHOW_TEXT,
function excludeBlacklistedNodes(node) {
if (blacklist.indexOf(node.parentElement.nodeName.toUpperCase()) >= 0) return NodeFilter.FILTER_REJECT;
if (String.prototype.trim && !node.nodeValue.trim().length) return NodeFilter.FILTER_SKIP;
return NodeFilter.FILTER_ACCEPT;
},
false
);
while(walker.nextNode()) textNodes.push(walker.currentNode);
return textNodes;
}
/**
* For a UTF-16 (JavaScript's preferred encoding...kinda) surrogate pair,
* return a Unicode codepoint.
*/
function surrogatePairToCodepoint(lead, trail) {
return (lead - 0xD800) * 0x400 + (trail - 0xDC00) + 0x10000;
}
/**
* Get an Image element for an emoji codepoint (in hex).
*/
function getImageForCodepoint(hex) {
var img = document.createElement('IMG');
img.style.width = "1.4em";
img.style.verticalAlign = "top";
img.src = "//" + IMAGE_HOST + IMAGE_PATH + hex + IMAGE_EXT;
return img;
}
/**
* Convert an HTML string into a DocumentFragment, for insertion into the dom.
*/
function fragmentForString(htmlString) {
var tmpDoc = document.createElement('DIV'),
fragment = document.createDocumentFragment(),
childNode;
tmpDoc.innerHTML = htmlString;
while(childNode = tmpDoc.firstChild) {
fragment.appendChild(childNode);
}
return fragment;
}
/**
* Iterate through a list of nodes, find emoji, replace with images.
*/
function emojiReplace(nodes) {
var PATTERN = regex;
nodes.forEach(function (node) {
var replacement,
value = node.nodeValue,
matches = value.match(PATTERN);
if (matches) {
replacement = value.replace(PATTERN, function (match) {
var codepoint = emojiUnicode(matches[0]),
img = getImageForCodepoint(codepoint);
return img.outerHTML;
});
// console.log(matches)
node.parentNode.replaceChild(fragmentForString(replacement), node);
}
});
}
// Call everything we've defined
emojiReplace(getLegitTextNodes(root));
}

View File

@ -35,7 +35,7 @@
>
<template v-slot:activator>
<edit-on-github-button
class="edit-button"
style="padding: 0 3px 0 7px"
:url="url"
/>
</template>

View File

@ -3,6 +3,8 @@
class="edit-button"
ghost
round
:size="size"
:text="text"
@click="handleEditOnGithubClick"
>
<template v-slot:icon>
@ -10,8 +12,10 @@
</template>
</n-button>
</template>
<script>
import createOutline from '../../src/_icons/create-outline'
export default {
name: 'EditOnGithubButton',
components: {
@ -21,6 +25,14 @@ export default {
url: {
type: String,
required: true
},
text: {
type: Boolean,
default: false
},
size: {
type: String,
default: undefined
}
},
data () {
@ -40,8 +52,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.edit-button {
vertical-align: middle;
}
</style>

View File

@ -1,32 +1,39 @@
<i18n>
{
"zh-CN": {
<i18n>
{
"zh-CN": {
"editOnGithub": "在 Github 上编辑"
},
"en-US": {
"en-US": {
"editOnGithub": "Edit on Github"
}
}
</i18n>
}
}
</i18n>
<template>
<n-h1 :id="id">
<n-h1 :id="id" class="naive-doc-title">
{{ 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>
<span class="edit-button">
<n-tooltip
:delay="300"
placement="right"
:show-arrow="true"
>
<template v-slot:activator>
<edit-on-github-button
style="vertical-align: middle;"
text
size="large"
class="edit-button"
:url="url"
/>
</template>
{{ $t('editOnGithub') }}
</n-tooltip>
</span>
</n-h1>
</template>
<script>
export default {
name: 'EditOnGithubHeader',
@ -47,8 +54,16 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.edit-button {
margin-left: 10px;
}
<style scoped>
.naive-doc-title .edit-button {
display: inline-flex;
align-items: center;
opacity: 0;
transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}
.naive-doc-title:hover .edit-button {
opacity: 1;
}
</style>