mirror of
https://github.com/wahyd4/vuepress.git
synced 2026-08-09 05:16:23 +10:00
style: lint code
This commit is contained in:
@@ -38,6 +38,7 @@ Vue.use(VuePress)
|
||||
Vue.mixin(dataMixin(ClientComputedMixin, siteData))
|
||||
// component for rendering markdown content and setting title etc.
|
||||
|
||||
/* eslint-disable vue/match-component-file-name */
|
||||
Vue.component('Content', Content)
|
||||
Vue.component('ContentSlotsDistributor', ContentSlotsDistributor)
|
||||
Vue.component('OutboundLink', OutboundLink)
|
||||
@@ -46,6 +47,7 @@ Vue.component('ClientOnly', ClientOnly)
|
||||
// core components
|
||||
Vue.component('Layout', getLayoutAsyncComponent('Layout'))
|
||||
Vue.component('NotFound', getLayoutAsyncComponent('NotFound'))
|
||||
/* eslint-disable-next-line vue/match-component-file-name */
|
||||
|
||||
// global helper for adding base path to absolute urls
|
||||
Vue.prototype.$withBase = function (path) {
|
||||
@@ -102,7 +104,7 @@ export function createApp (isServer) {
|
||||
router,
|
||||
render (h) {
|
||||
return h('div', { attrs: { id: 'app' }}, [
|
||||
h('router-view', { ref: 'layout' }),
|
||||
h('RouterView', { ref: 'layout' }),
|
||||
h('div', { class: 'global-ui' }, globalUIComponents.map(component => h(component)))
|
||||
])
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<component :is="layout"/>
|
||||
<component :is="layout" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -7,6 +7,16 @@ import Vue from 'vue'
|
||||
import { setGlobalInfo } from '@app/util'
|
||||
|
||||
export default {
|
||||
name: 'GlobalLayout',
|
||||
|
||||
computed: {
|
||||
layout () {
|
||||
const layout = this.getLayout()
|
||||
setGlobalInfo('layout', layout)
|
||||
return Vue.component(layout)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getLayout () {
|
||||
if (this.$page.path) {
|
||||
@@ -19,14 +29,6 @@ export default {
|
||||
}
|
||||
return 'NotFound'
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
layout () {
|
||||
const layout = this.getLayout()
|
||||
setGlobalInfo('layout', layout)
|
||||
return Vue.component(layout)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,8 +2,12 @@
|
||||
<div class="theme-container">
|
||||
<div class="content">
|
||||
<h1>404</h1>
|
||||
|
||||
<blockquote>{{ getMsg() }}</blockquote>
|
||||
<router-link to="/">Take me home.</router-link>
|
||||
|
||||
<RouterLink to="/">
|
||||
Take me home.
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,22 @@
|
||||
<template functional>
|
||||
<svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
|
||||
<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
|
||||
<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
|
||||
<svg
|
||||
class="icon outbound"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 100 100"
|
||||
width="15"
|
||||
height="15"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
|
||||
/>
|
||||
<polygon
|
||||
fill="currentColor"
|
||||
points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<template>
|
||||
<Content/>
|
||||
<Content />
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<template>
|
||||
<Content/>
|
||||
<Content />
|
||||
</template>
|
||||
|
||||
@@ -67,14 +67,14 @@ module.exports = (md, externalAttrs) => {
|
||||
routerLinks.push(to)
|
||||
|
||||
return Object.create(token, {
|
||||
tag: { value: 'router-link' }
|
||||
tag: { value: 'RouterLink' }
|
||||
})
|
||||
}
|
||||
|
||||
md.renderer.rules.link_close = (tokens, idx, options, env, self) => {
|
||||
const token = tokens[idx]
|
||||
if (hasOpenRouterLink) {
|
||||
token.tag = 'router-link'
|
||||
token.tag = 'RouterLink'
|
||||
hasOpenRouterLink = false
|
||||
}
|
||||
if (hasOpenExternalLink) {
|
||||
|
||||
@@ -3,12 +3,25 @@
|
||||
<svg
|
||||
v-if="show"
|
||||
class="go-to-top"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 49.484 28.284"
|
||||
@click="scrollToTop"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284"
|
||||
>
|
||||
<g transform="translate(-229 -126.358)">
|
||||
<rect fill="currentColor" width="35" height="5" rx="2" transform="translate(229 151.107) rotate(-45)"/>
|
||||
<rect fill="currentColor" width="35" height="5" rx="2" transform="translate(274.949 154.642) rotate(-135)"/>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
width="35"
|
||||
height="5"
|
||||
rx="2"
|
||||
transform="translate(229 151.107) rotate(-45)"
|
||||
/>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
width="35"
|
||||
height="5"
|
||||
rx="2"
|
||||
transform="translate(274.949 154.642) rotate(-135)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</transition>
|
||||
@@ -18,6 +31,8 @@
|
||||
import debounce from 'lodash.debounce'
|
||||
|
||||
export default {
|
||||
name: 'BackToTop',
|
||||
|
||||
props: {
|
||||
threshold: {
|
||||
type: Number,
|
||||
@@ -31,6 +46,12 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
show () {
|
||||
return this.scrollTop > this.threshold
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.scrollTop = this.getScrollTop()
|
||||
window.addEventListener('scroll', debounce(() => {
|
||||
@@ -49,12 +70,6 @@ export default {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
this.scrollTop = 0
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
show () {
|
||||
return this.scrollTop > this.threshold
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import BackToTop from './BackToTop.vue'
|
||||
|
||||
export default ({ Vue }) => {
|
||||
// eslint-disable-next-line vue/match-component-file-name
|
||||
Vue.component('BackToTop', BackToTop)
|
||||
}
|
||||
|
||||
@@ -10,8 +10,13 @@
|
||||
v-if="enabled"
|
||||
class="sw-update-popup"
|
||||
>
|
||||
{{ message }}<br>
|
||||
<button @click="reload">{{ buttonText }}</button>
|
||||
{{ message }}
|
||||
|
||||
<br>
|
||||
|
||||
<button @click="reload">
|
||||
{{ buttonText }}
|
||||
</button>
|
||||
</div>
|
||||
</slot>
|
||||
</transition>
|
||||
@@ -24,6 +29,8 @@ import { normalizeConfig } from '@app/util'
|
||||
import { popupConfig as defaultPopupConfig } from './i18n'
|
||||
|
||||
export default {
|
||||
name: 'SWUpdatePopup',
|
||||
|
||||
data () {
|
||||
return {
|
||||
rawPopupConfig: SW_UPDATE_POPUP,
|
||||
@@ -31,13 +38,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
event.$on('sw-updated', this.onSWUpdated)
|
||||
if (SW_UPDATE_POPUP === true) {
|
||||
this.rawPopupConfig = defaultPopupConfig
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
popupConfig () {
|
||||
return normalizeConfig(this, this.rawPopupConfig)
|
||||
@@ -58,6 +58,13 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
event.$on('sw-updated', this.onSWUpdated)
|
||||
if (SW_UPDATE_POPUP === true) {
|
||||
this.rawPopupConfig = defaultPopupConfig
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSWUpdated (e) {
|
||||
this.updateEvent = e
|
||||
|
||||
@@ -6,6 +6,7 @@ import SWUpdateEvent from './SWUpdateEvent'
|
||||
import event from './event'
|
||||
|
||||
if (SW_UPDATE_POPUP) {
|
||||
// eslint-disable-next-line vue/match-component-file-name
|
||||
Vue.component('SWUpdatePopup', () => import('./SWUpdatePopup.vue'))
|
||||
}
|
||||
|
||||
|
||||
@@ -1,36 +1,43 @@
|
||||
<template>
|
||||
<div class="search-box">
|
||||
<input
|
||||
@input="query = $event.target.value"
|
||||
ref="input"
|
||||
aria-label="Search"
|
||||
:value="query"
|
||||
:class="{ 'focused': focused }"
|
||||
:placeholder="placeholder"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
@input="query = $event.target.value"
|
||||
@focus="focused = true"
|
||||
@blur="focused = false"
|
||||
@keyup.enter="go(focusIndex)"
|
||||
@keyup.up="onUp"
|
||||
@keyup.down="onDown"
|
||||
ref="input"
|
||||
>
|
||||
<ul
|
||||
class="suggestions"
|
||||
v-if="showSuggestions"
|
||||
class="suggestions"
|
||||
:class="{ 'align-right': alignRight }"
|
||||
@mouseleave="unfocus"
|
||||
>
|
||||
<li
|
||||
class="suggestion"
|
||||
v-for="(s, i) in suggestions"
|
||||
:key="i"
|
||||
class="suggestion"
|
||||
:class="{ focused: i === focusIndex }"
|
||||
@mousedown="go(i)"
|
||||
@mouseenter="focus(i)"
|
||||
>
|
||||
<a :href="s.path" @click.prevent>
|
||||
<a
|
||||
:href="s.path"
|
||||
@click.prevent
|
||||
>
|
||||
<span class="page-title">{{ s.title || s.path }}</span>
|
||||
<span v-if="s.header" class="header">> {{ s.header.title }}</span>
|
||||
<span
|
||||
v-if="s.header"
|
||||
class="header"
|
||||
>> {{ s.header.title }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -40,6 +47,8 @@
|
||||
<script>
|
||||
/* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
|
||||
export default {
|
||||
name: 'SearchBox',
|
||||
|
||||
data () {
|
||||
return {
|
||||
query: '',
|
||||
@@ -49,15 +58,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
|
||||
document.addEventListener('keydown', this.onHotkey)
|
||||
},
|
||||
|
||||
beforeDestroy () {
|
||||
document.removeEventListener('keydown', this.onHotkey)
|
||||
},
|
||||
|
||||
computed: {
|
||||
showSuggestions () {
|
||||
return (
|
||||
@@ -121,6 +121,15 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
|
||||
document.addEventListener('keydown', this.onHotkey)
|
||||
},
|
||||
|
||||
beforeDestroy () {
|
||||
document.removeEventListener('keydown', this.onHotkey)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPageLocalePath (page) {
|
||||
for (const localePath in this.$site.locales || {}) {
|
||||
|
||||
@@ -21,7 +21,7 @@ describe('DropdownLink', () => {
|
||||
const wrapper = mount(DropdownLink, {
|
||||
localVue: createLocalVue(),
|
||||
stubs: {
|
||||
'router-link': RouterLinkStub
|
||||
'RouterLink': RouterLinkStub
|
||||
},
|
||||
propsData: { item }
|
||||
})
|
||||
|
||||
@@ -11,7 +11,7 @@ describe('NavLink', () => {
|
||||
const wrapper = mount(NavLink, {
|
||||
localVue: createLocalVue(),
|
||||
stubs: {
|
||||
'router-link': RouterLinkStub
|
||||
'RouterLink': RouterLinkStub
|
||||
},
|
||||
propsData: { item }
|
||||
})
|
||||
|
||||
@@ -14,6 +14,8 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AlgoliaSearchBox',
|
||||
|
||||
props: ['options'],
|
||||
|
||||
data () {
|
||||
@@ -22,6 +24,16 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
$lang (newValue) {
|
||||
this.update(this.options, newValue)
|
||||
},
|
||||
|
||||
options (newValue) {
|
||||
this.update(newValue, this.$lang)
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.initialize(this.options, this.$lang)
|
||||
this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
|
||||
@@ -58,16 +70,6 @@ export default {
|
||||
this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
|
||||
this.initialize(options, lang)
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
$lang (newValue) {
|
||||
this.update(this.options, newValue)
|
||||
},
|
||||
|
||||
options (newValue) {
|
||||
this.update(newValue, this.$lang)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -13,44 +13,47 @@
|
||||
<span
|
||||
class="arrow"
|
||||
:class="open ? 'down' : 'right'"
|
||||
></span>
|
||||
/>
|
||||
</button>
|
||||
|
||||
<DropdownTransition>
|
||||
<ul
|
||||
class="nav-dropdown"
|
||||
v-show="open"
|
||||
class="nav-dropdown"
|
||||
>
|
||||
<li
|
||||
class="dropdown-item"
|
||||
:key="subItem.link || index"
|
||||
v-for="(subItem, index) in item.items"
|
||||
:key="subItem.link || index"
|
||||
class="dropdown-item"
|
||||
>
|
||||
<h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
|
||||
<h4 v-if="subItem.type === 'links'">
|
||||
{{ subItem.text }}
|
||||
</h4>
|
||||
|
||||
<ul
|
||||
class="dropdown-subitem-wrapper"
|
||||
v-if="subItem.type === 'links'"
|
||||
class="dropdown-subitem-wrapper"
|
||||
>
|
||||
<li
|
||||
class="dropdown-subitem"
|
||||
:key="childSubItem.link"
|
||||
v-for="childSubItem in subItem.items"
|
||||
:key="childSubItem.link"
|
||||
class="dropdown-subitem"
|
||||
>
|
||||
<NavLink
|
||||
:item="childSubItem"
|
||||
@focusout="
|
||||
isLastItemOfArray(childSubItem, subItem.items) &&
|
||||
isLastItemOfArray(subItem, item.items) &&
|
||||
setOpen(false)
|
||||
isLastItemOfArray(subItem, item.items) &&
|
||||
setOpen(false)
|
||||
"
|
||||
:item="childSubItem"/>
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<NavLink
|
||||
v-else
|
||||
@focusout="isLastItemOfArray(subItem, item.items) && setOpen(false)"
|
||||
:item="subItem"
|
||||
@focusout="isLastItemOfArray(subItem, item.items) && setOpen(false)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -64,12 +67,11 @@ import DropdownTransition from '@theme/components/DropdownTransition.vue'
|
||||
import last from 'lodash/last'
|
||||
|
||||
export default {
|
||||
components: { NavLink, DropdownTransition },
|
||||
name: 'DropdownLink',
|
||||
|
||||
data () {
|
||||
return {
|
||||
open: false
|
||||
}
|
||||
components: {
|
||||
NavLink,
|
||||
DropdownTransition
|
||||
},
|
||||
|
||||
props: {
|
||||
@@ -78,13 +80,24 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
data () {
|
||||
return {
|
||||
open: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
dropdownAriaLabel () {
|
||||
return this.item.ariaLabel || this.item.text
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route () {
|
||||
this.open = false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setOpen (value) {
|
||||
this.open = value
|
||||
@@ -93,12 +106,6 @@ export default {
|
||||
isLastItemOfArray (item, array) {
|
||||
return last(array) === item
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route () {
|
||||
this.open = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
@after-enter="unsetHeight"
|
||||
@before-leave="setHeight"
|
||||
>
|
||||
<slot/>
|
||||
<slot />
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<main class="home" aria-labelledby="main-title">
|
||||
<main
|
||||
class="home"
|
||||
aria-labelledby="main-title"
|
||||
>
|
||||
<header class="hero">
|
||||
<img
|
||||
v-if="data.heroImage"
|
||||
@@ -7,15 +10,23 @@
|
||||
:alt="data.heroAlt || 'hero'"
|
||||
>
|
||||
|
||||
<h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>
|
||||
<h1
|
||||
v-if="data.heroText !== null"
|
||||
id="main-title"
|
||||
>
|
||||
{{ data.heroText || $title || 'Hello' }}
|
||||
</h1>
|
||||
|
||||
<p v-if="data.tagline !== null" class="description">
|
||||
<p
|
||||
v-if="data.tagline !== null"
|
||||
class="description"
|
||||
>
|
||||
{{ data.tagline || $description || 'Welcome to your VuePress site' }}
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="action"
|
||||
v-if="data.actionText && data.actionLink"
|
||||
class="action"
|
||||
>
|
||||
<NavLink
|
||||
class="action-button"
|
||||
@@ -25,24 +36,24 @@
|
||||
</header>
|
||||
|
||||
<div
|
||||
class="features"
|
||||
v-if="data.features && data.features.length"
|
||||
class="features"
|
||||
>
|
||||
<div
|
||||
class="feature"
|
||||
v-for="(feature, index) in data.features"
|
||||
:key="index"
|
||||
class="feature"
|
||||
>
|
||||
<h2>{{ feature.title }}</h2>
|
||||
<p>{{ feature.details }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Content class="theme-default-content custom"/>
|
||||
<Content class="theme-default-content custom" />
|
||||
|
||||
<div
|
||||
class="footer"
|
||||
v-if="data.footer"
|
||||
class="footer"
|
||||
>
|
||||
{{ data.footer }}
|
||||
</div>
|
||||
@@ -53,6 +64,8 @@
|
||||
import NavLink from '@theme/components/NavLink.vue'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
|
||||
components: { NavLink },
|
||||
|
||||
computed: {
|
||||
|
||||
@@ -1,21 +1,23 @@
|
||||
<template>
|
||||
<router-link
|
||||
<RouterLink
|
||||
v-if="isInternal"
|
||||
class="nav-link"
|
||||
:to="link"
|
||||
@focusout.native="focusoutAction"
|
||||
v-if="isInternal"
|
||||
:exact="exact"
|
||||
>{{ item.text }}</router-link>
|
||||
@focusout.native="focusoutAction"
|
||||
>
|
||||
{{ item.text }}
|
||||
</RouterLink>
|
||||
<a
|
||||
v-else
|
||||
:href="link"
|
||||
@focusout="focusoutAction"
|
||||
class="nav-link external"
|
||||
:target="target"
|
||||
:rel="rel"
|
||||
@focusout="focusoutAction"
|
||||
>
|
||||
{{ item.text }}
|
||||
<OutboundLink v-if="isBlankTarget"/>
|
||||
<OutboundLink v-if="isBlankTarget" />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
@@ -23,6 +25,8 @@
|
||||
import { isExternal, isMailto, isTel, ensureExt } from '../util'
|
||||
|
||||
export default {
|
||||
name: 'NavLink',
|
||||
|
||||
props: {
|
||||
item: {
|
||||
required: true
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<nav
|
||||
class="nav-links"
|
||||
v-if="userLinks.length || repoLink"
|
||||
class="nav-links"
|
||||
>
|
||||
<!-- user links -->
|
||||
<div
|
||||
class="nav-item"
|
||||
v-for="item in userLinks"
|
||||
:key="item.link"
|
||||
class="nav-item"
|
||||
>
|
||||
<DropdownLink
|
||||
v-if="item.type === 'links'"
|
||||
@@ -28,7 +28,7 @@
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{{ repoLabel }}
|
||||
<OutboundLink/>
|
||||
<OutboundLink />
|
||||
</a>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -39,7 +39,12 @@ import { resolveNavLinkItem } from '../util'
|
||||
import NavLink from '@theme/components/NavLink.vue'
|
||||
|
||||
export default {
|
||||
components: { NavLink, DropdownLink },
|
||||
name: 'NavLinks',
|
||||
|
||||
components: {
|
||||
NavLink,
|
||||
DropdownLink
|
||||
},
|
||||
|
||||
computed: {
|
||||
userNav () {
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<header class="navbar">
|
||||
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
|
||||
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
|
||||
|
||||
<router-link
|
||||
<RouterLink
|
||||
:to="$localePath"
|
||||
class="home-link"
|
||||
>
|
||||
<img
|
||||
class="logo"
|
||||
v-if="$site.themeConfig.logo"
|
||||
class="logo"
|
||||
:src="$withBase($site.themeConfig.logo)"
|
||||
:alt="$siteTitle"
|
||||
>
|
||||
<span
|
||||
v-if="$siteTitle"
|
||||
ref="siteName"
|
||||
class="site-name"
|
||||
v-if="$siteTitle"
|
||||
:class="{ 'can-hide': $site.themeConfig.logo }"
|
||||
>{{ $siteTitle }}</span>
|
||||
</router-link>
|
||||
</RouterLink>
|
||||
|
||||
<div
|
||||
class="links"
|
||||
@@ -30,8 +30,8 @@
|
||||
v-if="isAlgoliaSearch"
|
||||
:options="algolia"
|
||||
/>
|
||||
<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
|
||||
<NavLinks class="can-hide"/>
|
||||
<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
|
||||
<NavLinks class="can-hide" />
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
@@ -43,7 +43,14 @@ import SidebarButton from '@theme/components/SidebarButton.vue'
|
||||
import NavLinks from '@theme/components/NavLinks.vue'
|
||||
|
||||
export default {
|
||||
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
|
||||
name: 'Navbar',
|
||||
|
||||
components: {
|
||||
SidebarButton,
|
||||
NavLinks,
|
||||
SearchBox,
|
||||
AlgoliaSearchBox
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
@@ -51,6 +58,16 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
algolia () {
|
||||
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
|
||||
},
|
||||
|
||||
isAlgoliaSearch () {
|
||||
return this.algolia && this.algolia.apiKey && this.algolia.indexName
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
|
||||
const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
|
||||
@@ -64,16 +81,6 @@ export default {
|
||||
}
|
||||
handleLinksWrapWidth()
|
||||
window.addEventListener('resize', handleLinksWrapWidth, false)
|
||||
},
|
||||
|
||||
computed: {
|
||||
algolia () {
|
||||
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
|
||||
},
|
||||
|
||||
isAlgoliaSearch () {
|
||||
return this.algolia && this.algolia.apiKey && this.algolia.indexName
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,22 +1,34 @@
|
||||
<template>
|
||||
<footer class="page-edit">
|
||||
<div class="edit-link" v-if="editLink">
|
||||
<a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
|
||||
<div
|
||||
v-if="editLink"
|
||||
class="edit-link"
|
||||
>
|
||||
<a
|
||||
:href="editLink"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ editLinkText }}</a>
|
||||
<OutboundLink />
|
||||
</div>
|
||||
|
||||
<div class="last-updated" v-if="lastUpdated">
|
||||
<div
|
||||
v-if="lastUpdated"
|
||||
class="last-updated"
|
||||
>
|
||||
<span class="prefix">{{ lastUpdatedText }}:</span>
|
||||
<span class="time">{{ lastUpdated }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import isNil from 'lodash/isNil'
|
||||
import { endingSlashRE, outboundRE } from '../util'
|
||||
|
||||
export default {
|
||||
name: 'PageEdit',
|
||||
|
||||
computed: {
|
||||
lastUpdated () {
|
||||
return this.$page.lastUpdated
|
||||
@@ -94,6 +106,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@require '../styles/wrapper.styl'
|
||||
|
||||
|
||||
@@ -1,20 +1,62 @@
|
||||
<template>
|
||||
<div class="page-nav" v-if="prev || next">
|
||||
<div
|
||||
v-if="prev || next"
|
||||
class="page-nav"
|
||||
>
|
||||
<p class="inner">
|
||||
<span v-if="prev" class="prev">
|
||||
<span
|
||||
v-if="prev"
|
||||
class="prev"
|
||||
>
|
||||
←
|
||||
<a v-if="prev.type === 'external'" class="prev" :href="prev.path" target="_blank" rel='noopener noreferrer'>{{ prev.title || prev.path }}<OutboundLink /></a>
|
||||
<router-link v-else class="prev" :to="prev.path">{{ prev.title || prev.path }}</router-link>
|
||||
<a
|
||||
v-if="prev.type === 'external'"
|
||||
class="prev"
|
||||
:href="prev.path"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{{ prev.title || prev.path }}
|
||||
|
||||
<OutboundLink />
|
||||
</a>
|
||||
|
||||
<RouterLink
|
||||
v-else
|
||||
class="prev"
|
||||
:to="prev.path"
|
||||
>
|
||||
{{ prev.title || prev.path }}
|
||||
</RouterLink>
|
||||
</span>
|
||||
|
||||
<span v-if="next" class="next">
|
||||
<a v-if="next.type === 'external'" :href="next.path" target="_blank" rel='noopener noreferrer'>{{ next.title || next.path }}<OutboundLink /></a>
|
||||
<router-link v-else :to="next.path">{{ next.title || next.path }}</router-link>
|
||||
<span
|
||||
v-if="next"
|
||||
class="next"
|
||||
>
|
||||
<a
|
||||
v-if="next.type === 'external'"
|
||||
:href="next.path"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{{ next.title || next.path }}
|
||||
|
||||
<OutboundLink />
|
||||
</a>
|
||||
|
||||
<RouterLink
|
||||
v-else
|
||||
:to="next.path"
|
||||
>
|
||||
{{ next.title || next.path }}
|
||||
</RouterLink>
|
||||
→
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { resolvePage } from '../util'
|
||||
import isString from 'lodash/isString'
|
||||
@@ -22,7 +64,9 @@ import isNil from 'lodash/isNil'
|
||||
|
||||
export default {
|
||||
name: 'PageNav',
|
||||
|
||||
props: ['sidebarItems'],
|
||||
|
||||
computed: {
|
||||
prev () {
|
||||
return resolvePageLink(LINK_TYPES.PREV, this)
|
||||
@@ -116,5 +160,4 @@ function flatten (items, res) {
|
||||
overflow auto // clear float
|
||||
.next
|
||||
float right
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
<template>
|
||||
<aside class="sidebar">
|
||||
<NavLinks/>
|
||||
<slot name="top"/>
|
||||
<SidebarLinks :depth="0" :items="items"/>
|
||||
<slot name="bottom"/>
|
||||
<NavLinks />
|
||||
|
||||
<slot name="top" />
|
||||
|
||||
<SidebarLinks
|
||||
:depth="0"
|
||||
:items="items"
|
||||
/>
|
||||
<slot name="bottom" />
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,7 +1,20 @@
|
||||
<template>
|
||||
<div class="sidebar-button" @click="$emit('toggle-sidebar')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path>
|
||||
<div
|
||||
class="sidebar-button"
|
||||
@click="$emit('toggle-sidebar')"
|
||||
>
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
|
||||
class=""
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
`depth-${depth}`
|
||||
]"
|
||||
>
|
||||
<router-link
|
||||
<RouterLink
|
||||
v-if="item.path"
|
||||
class="sidebar-heading clickable"
|
||||
:class="{
|
||||
@@ -21,11 +21,11 @@
|
||||
>
|
||||
<span>{{ item.title }}</span>
|
||||
<span
|
||||
class="arrow"
|
||||
v-if="collapsable"
|
||||
:class="open ? 'down' : 'right'">
|
||||
</span>
|
||||
</router-link>
|
||||
class="arrow"
|
||||
:class="open ? 'down' : 'right'"
|
||||
/>
|
||||
</RouterLink>
|
||||
|
||||
<p
|
||||
v-else
|
||||
@@ -35,18 +35,18 @@
|
||||
>
|
||||
<span>{{ item.title }}</span>
|
||||
<span
|
||||
class="arrow"
|
||||
v-if="collapsable"
|
||||
:class="open ? 'down' : 'right'">
|
||||
</span>
|
||||
class="arrow"
|
||||
:class="open ? 'down' : 'right'"
|
||||
/>
|
||||
</p>
|
||||
|
||||
<DropdownTransition>
|
||||
<SidebarLinks
|
||||
v-if="open || !collapsable"
|
||||
class="sidebar-group-items"
|
||||
:items="item.children"
|
||||
v-if="open || !collapsable"
|
||||
:sidebarDepth="item.sidebarDepth"
|
||||
:sidebar-depth="item.sidebarDepth"
|
||||
:depth="depth + 1"
|
||||
/>
|
||||
</DropdownTransition>
|
||||
@@ -59,12 +59,23 @@ import DropdownTransition from '@theme/components/DropdownTransition.vue'
|
||||
|
||||
export default {
|
||||
name: 'SidebarGroup',
|
||||
props: ['item', 'open', 'collapsable', 'depth'],
|
||||
components: { DropdownTransition },
|
||||
|
||||
components: {
|
||||
DropdownTransition
|
||||
},
|
||||
|
||||
props: [
|
||||
'item',
|
||||
'open',
|
||||
'collapsable',
|
||||
'depth'
|
||||
],
|
||||
|
||||
// ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
|
||||
beforeCreate () {
|
||||
this.$options.components.SidebarLinks = require('@theme/components/SidebarLinks.vue').default
|
||||
},
|
||||
|
||||
methods: { isActive }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -73,7 +73,7 @@ function renderLink (h, to, text, active, level) {
|
||||
}
|
||||
}
|
||||
|
||||
return h('router-link', component, text)
|
||||
return h('RouterLink', component, text)
|
||||
}
|
||||
|
||||
function renderChildren (h, children, path, route, maxDepth, depth = 1) {
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<ul
|
||||
class="sidebar-links"
|
||||
v-if="items.length"
|
||||
class="sidebar-links"
|
||||
>
|
||||
<li v-for="(item, i) in items" :key="i">
|
||||
<li
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
>
|
||||
<SidebarGroup
|
||||
v-if="item.type === 'group'"
|
||||
:item="item"
|
||||
@@ -14,7 +17,7 @@
|
||||
/>
|
||||
<SidebarLink
|
||||
v-else
|
||||
:sidebarDepth="sidebarDepth"
|
||||
:sidebar-depth="sidebarDepth"
|
||||
:item="item"
|
||||
/>
|
||||
</li>
|
||||
@@ -43,16 +46,16 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.refreshIndex()
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route' () {
|
||||
this.refreshIndex()
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.refreshIndex()
|
||||
},
|
||||
|
||||
methods: {
|
||||
refreshIndex () {
|
||||
const index = resolveOpenGroupIndex(
|
||||
|
||||
@@ -2,8 +2,12 @@
|
||||
<div class="theme-container">
|
||||
<div class="theme-default-content">
|
||||
<h1>404</h1>
|
||||
|
||||
<blockquote>{{ getMsg() }}</blockquote>
|
||||
<router-link to="/">Take me home.</router-link>
|
||||
|
||||
<RouterLink to="/">
|
||||
Take me home.
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<div
|
||||
class="sidebar-mask"
|
||||
@click="toggleSidebar(false)"
|
||||
></div>
|
||||
/>
|
||||
|
||||
<Sidebar
|
||||
:items="sidebarItems"
|
||||
@@ -23,21 +23,21 @@
|
||||
<slot name="sidebar-top" />
|
||||
</template>
|
||||
<template #bottom>
|
||||
<slot name="sidebar-bottom"/>
|
||||
<slot name="sidebar-bottom" />
|
||||
</template>
|
||||
</Sidebar>
|
||||
|
||||
<Home v-if="$page.frontmatter.home"/>
|
||||
<Home v-if="$page.frontmatter.home" />
|
||||
|
||||
<Page
|
||||
v-else
|
||||
:sidebar-items="sidebarItems"
|
||||
>
|
||||
<template #top>
|
||||
<slot name="page-top"/>
|
||||
<slot name="page-top" />
|
||||
</template>
|
||||
<template #bottom>
|
||||
<slot name="page-bottom"/>
|
||||
<slot name="page-bottom" />
|
||||
</template>
|
||||
</Page>
|
||||
</div>
|
||||
@@ -51,7 +51,14 @@ import Sidebar from '@theme/components/Sidebar.vue'
|
||||
import { resolveSidebarItems } from '../util'
|
||||
|
||||
export default {
|
||||
components: { Home, Page, Sidebar, Navbar },
|
||||
name: 'Layout',
|
||||
|
||||
components: {
|
||||
Home,
|
||||
Page,
|
||||
Sidebar,
|
||||
Navbar
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -3,11 +3,17 @@
|
||||
const ID = 'bsa-cpc-script'
|
||||
|
||||
export default {
|
||||
render (h) {
|
||||
return h('div', { class: 'bsa-cpc-wrapper' }, [
|
||||
h('div', { ref: 'ads', class: 'bsa-cpc' })
|
||||
])
|
||||
name: 'BuySellAds',
|
||||
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
if (to.path !== from.path) {
|
||||
this.$refs.ads.innerHTML = ''
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
if (!document.getElementById(ID)) {
|
||||
const s = document.createElement('script')
|
||||
@@ -21,14 +27,7 @@ export default {
|
||||
this.load()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
if (to.path !== from.path) {
|
||||
this.$refs.ads.innerHTML = ''
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
load () {
|
||||
if (typeof _bsa !== 'undefined' && _bsa) {
|
||||
@@ -39,6 +38,12 @@ export default {
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render (h) {
|
||||
return h('div', { class: 'bsa-cpc-wrapper' }, [
|
||||
h('div', { ref: 'ads', class: 'bsa-cpc' })
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
<script>
|
||||
export default {
|
||||
render (h) {
|
||||
return h('div', { class: 'carbon-ads' })
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
name: 'CarbonAds',
|
||||
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
if (
|
||||
@@ -20,6 +16,11 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
|
||||
methods: {
|
||||
load () {
|
||||
const s = document.createElement('script')
|
||||
@@ -27,6 +28,10 @@ export default {
|
||||
s.src = `//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg`
|
||||
this.$el.appendChild(s)
|
||||
}
|
||||
},
|
||||
|
||||
render (h) {
|
||||
return h('div', { class: 'carbon-ads' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<ParentLayout>
|
||||
<template #sidebar-top>
|
||||
<CarbonAds/>
|
||||
<CarbonAds />
|
||||
</template>
|
||||
<template #page-bottom>
|
||||
<BuySellAds/>
|
||||
<BuySellAds />
|
||||
</template>
|
||||
</ParentLayout>
|
||||
</template>
|
||||
@@ -15,6 +15,8 @@ import CarbonAds from '@theme/components/CarbonAds.vue'
|
||||
import BuySellAds from '@theme/components/BuySellAds.vue'
|
||||
|
||||
export default {
|
||||
name: 'Layout',
|
||||
|
||||
components: {
|
||||
ParentLayout,
|
||||
CarbonAds,
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
<template>
|
||||
<p class="bit-sponsor">
|
||||
<a href="https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue" target="_blank">
|
||||
<a
|
||||
href="https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue"
|
||||
target="_blank"
|
||||
>
|
||||
<span>This project is sponsored by</span>
|
||||
<img alt="bit" src="https://raw.githubusercontent.com/vuejs/vuejs.org/master/themes/vue/source/images/bit.png">
|
||||
<img
|
||||
alt="bit"
|
||||
src="https://raw.githubusercontent.com/vuejs/vuejs.org/master/themes/vue/source/images/bit.png"
|
||||
>
|
||||
</a>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<template>
|
||||
<p class="demo">This is another component</p>
|
||||
<p class="demo">
|
||||
This is another component
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@@ -1,45 +1,202 @@
|
||||
<template>
|
||||
<svg-container>
|
||||
<svg width="400px" viewBox="0 0 688 403" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<svg
|
||||
width="400px"
|
||||
viewBox="0 0 688 403"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<rect id="path-1" x="140" y="0" width="549" height="176" rx="20"></rect>
|
||||
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="549" height="176" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
<rect
|
||||
id="path-1"
|
||||
x="140"
|
||||
y="0"
|
||||
width="549"
|
||||
height="176"
|
||||
rx="20"
|
||||
/>
|
||||
<mask
|
||||
id="mask-2"
|
||||
maskContentUnits="userSpaceOnUse"
|
||||
maskUnits="objectBoundingBox"
|
||||
x="0"
|
||||
y="0"
|
||||
width="549"
|
||||
height="176"
|
||||
fill="white"
|
||||
>
|
||||
<use xlink:href="#path-1" />
|
||||
</mask>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="diagram-markdown-slot-relationship" transform="translate(-1.000000, 0.000000)">
|
||||
<circle id="Oval" fill="#00BC7D" fill-rule="nonzero" cx="235" cy="88" r="59"></circle>
|
||||
<text id="Markdown-File-1" font-family="PingFangSC-Regular, PingFang SC" font-size="20" font-weight="normal" fill="#FFFFFF">
|
||||
<tspan x="186.79" y="85">Markdown </tspan>
|
||||
<tspan x="211.43" y="113">File 1</tspan>
|
||||
<g
|
||||
id="Page-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="diagram-markdown-slot-relationship"
|
||||
transform="translate(-1.000000, 0.000000)"
|
||||
>
|
||||
<circle
|
||||
id="Oval"
|
||||
fill="#00BC7D"
|
||||
fill-rule="nonzero"
|
||||
cx="235"
|
||||
cy="88"
|
||||
r="59"
|
||||
/>
|
||||
<text
|
||||
id="Markdown-File-1"
|
||||
font-family="PingFangSC-Regular, PingFang SC"
|
||||
font-size="20"
|
||||
font-weight="normal"
|
||||
fill="#FFFFFF"
|
||||
>
|
||||
<tspan
|
||||
x="186.79"
|
||||
y="85"
|
||||
>Markdown </tspan>
|
||||
<tspan
|
||||
x="211.43"
|
||||
y="113"
|
||||
>File 1</tspan>
|
||||
</text>
|
||||
<circle id="Oval" fill="#00BC7D" fill-rule="nonzero" cx="415" cy="88" r="59"></circle>
|
||||
<text id="Markdown-File-2" font-family="PingFangSC-Regular, PingFang SC" font-size="20" font-weight="normal" fill="#FFFFFF">
|
||||
<tspan x="366.79" y="85">Markdown </tspan>
|
||||
<tspan x="389.44" y="113">File 2</tspan>
|
||||
<circle
|
||||
id="Oval"
|
||||
fill="#00BC7D"
|
||||
fill-rule="nonzero"
|
||||
cx="415"
|
||||
cy="88"
|
||||
r="59"
|
||||
/>
|
||||
<text
|
||||
id="Markdown-File-2"
|
||||
font-family="PingFangSC-Regular, PingFang SC"
|
||||
font-size="20"
|
||||
font-weight="normal"
|
||||
fill="#FFFFFF"
|
||||
>
|
||||
<tspan
|
||||
x="366.79"
|
||||
y="85"
|
||||
>Markdown </tspan>
|
||||
<tspan
|
||||
x="389.44"
|
||||
y="113"
|
||||
>File 2</tspan>
|
||||
</text>
|
||||
<circle id="Oval" fill="#EB4D5D" fill-rule="nonzero" transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) " cx="419" cy="320" r="83"></circle>
|
||||
<text id="Layout-Component" transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) " font-family="PingFangSC-Regular, PingFang SC" font-size="24" font-weight="normal" fill="#FFFFFF">
|
||||
<tspan x="381.272" y="312">Layout</tspan>
|
||||
<tspan x="354.572" y="345">Component</tspan>
|
||||
<circle
|
||||
id="Oval"
|
||||
fill="#EB4D5D"
|
||||
fill-rule="nonzero"
|
||||
transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) "
|
||||
cx="419"
|
||||
cy="320"
|
||||
r="83"
|
||||
/>
|
||||
<text
|
||||
id="Layout-Component"
|
||||
transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) "
|
||||
font-family="PingFangSC-Regular, PingFang SC"
|
||||
font-size="24"
|
||||
font-weight="normal"
|
||||
fill="#FFFFFF"
|
||||
>
|
||||
<tspan
|
||||
x="381.272"
|
||||
y="312"
|
||||
>Layout</tspan>
|
||||
<tspan
|
||||
x="354.572"
|
||||
y="345"
|
||||
>Component</tspan>
|
||||
</text>
|
||||
<circle id="Oval" fill="#00BC7D" fill-rule="nonzero" cx="595" cy="88" r="59"></circle>
|
||||
<text id="Markdown-File-3" font-family="PingFangSC-Regular, PingFang SC" font-size="20" font-weight="normal" fill="#FFFFFF">
|
||||
<tspan x="546.79" y="85">Markdown </tspan>
|
||||
<tspan x="569.44" y="113">File 3</tspan>
|
||||
<circle
|
||||
id="Oval"
|
||||
fill="#00BC7D"
|
||||
fill-rule="nonzero"
|
||||
cx="595"
|
||||
cy="88"
|
||||
r="59"
|
||||
/>
|
||||
<text
|
||||
id="Markdown-File-3"
|
||||
font-family="PingFangSC-Regular, PingFang SC"
|
||||
font-size="20"
|
||||
font-weight="normal"
|
||||
fill="#FFFFFF"
|
||||
>
|
||||
<tspan
|
||||
x="546.79"
|
||||
y="85"
|
||||
>Markdown </tspan>
|
||||
<tspan
|
||||
x="569.44"
|
||||
y="113"
|
||||
>File 3</tspan>
|
||||
</text>
|
||||
<use id="Rectangle" stroke="#DC585F" mask="url(#mask-2)" stroke-width="8" stroke-dasharray="5" fill-rule="nonzero" xlink:href="#path-1"></use>
|
||||
<path id="Path" d="M317.737594,275.914863 C316.399837,275.439513 315.071319,274.934993 313.752054,274.40131 L314.877079,271.620246 C316.062011,272.099587 317.254567,272.554642 318.454758,272.985416 L320.320183,265.365584 L336.516196,279.111098 L315.802177,283.8206 L317.737594,275.914863 Z M237.053972,153.839171 L240.036678,154.160829 C239.860222,155.797097 239.727284,157.431576 239.637858,159.064293 L236.642347,158.900223 C236.734662,157.214791 236.871873,155.527765 237.053972,153.839171 Z M236.500062,163.984683 L239.50006,163.988115 C239.498183,165.6288 239.540423,167.267783 239.626781,168.905092 L236.630945,169.063103 C236.541751,167.372018 236.498123,165.679201 236.500062,163.984683 Z M237.034923,174.12831 L240.017951,173.809652 C240.191774,175.436839 240.409353,177.062453 240.670697,178.686519 L237.708802,179.163147 C237.439026,177.486687 237.214397,175.808399 237.034923,174.12831 Z M238.651506,184.177472 L241.584397,183.54648 C241.927872,185.142975 242.313817,186.738038 242.742248,188.33169 L239.845114,189.110544 C239.40355,187.46804 239.005676,185.823676 238.651506,184.177472 Z M241.277699,193.960604 L244.133333,193.041173 C244.633282,194.593949 245.173728,196.145426 245.754688,197.695614 L242.945486,198.748412 C242.348064,197.154297 241.792129,195.558357 241.277699,193.960604 Z M244.837653,203.467846 L247.596505,202.289399 C248.237243,203.789426 248.91606,205.288264 249.632972,206.785917 L246.927022,208.081229 C246.191725,206.545169 245.495264,205.007373 244.837653,203.467846 Z M249.214331,212.61803 L251.865379,211.213771 C252.629062,212.6555 253.428173,214.096132 254.262722,215.535667 L251.667331,217.040308 C250.813682,215.567829 249.996012,214.093736 249.214331,212.61803 Z M254.297283,221.391099 L256.836394,219.793315 C257.706019,221.175275 258.60841,222.556214 259.543577,223.936131 L257.060143,225.61915 C256.106032,224.21128 255.185076,222.801931 254.297283,221.391099 Z M259.974465,229.772936 L262.402649,228.01114 C263.362565,229.334138 264.3527,230.656183 265.373059,231.977271 L262.998786,233.811072 C261.960192,232.466375 260.952083,231.120331 259.974465,229.772936 Z M266.091044,237.698109 L268.411267,235.796382 C269.468483,237.08625 270.534696,238.346975 271.6099,239.578562 L269.349958,241.551545 C268.25419,240.296403 267.167887,239.011923 266.091044,237.698109 Z M272.734865,245.303177 L274.928459,243.25668 C276.064358,244.474225 277.209951,245.660334 278.365233,246.815016 L276.244465,248.936888 C275.064352,247.757389 273.894487,246.546149 272.734865,245.303177 Z M279.887015,252.446537 L281.927895,250.247718 C283.145938,251.378269 284.374389,252.475061 285.613248,253.538106 L283.65964,255.814817 C282.391056,254.726266 281.133515,253.603502 279.887015,252.446537 Z M287.576785,259.039625 L289.435074,256.684468 C290.736664,257.711462 292.049366,258.702468 293.373181,259.657502 L291.617984,262.09046 C290.259116,261.110138 288.912049,260.093188 287.576785,259.039625 Z M295.785278,264.957777 L297.4295,262.448487 C298.812943,263.354993 300.208145,264.223547 301.615114,265.054165 L300.089978,267.637566 C298.64262,266.783104 297.207718,265.889835 295.785278,264.957777 Z M304.529995,270.116457 L305.928241,267.462232 C307.386943,268.230677 308.857919,268.959729 310.341185,269.649406 L309.076317,272.36972 C307.547965,271.659079 306.032519,270.907986 304.529995,270.116457 Z" fill="#8599A4" fill-rule="nonzero"></path>
|
||||
<path id="Path" d="M505.524249,279.462157 L520.680172,264.577668 L526.525394,282.656202 L505.524249,279.462157 Z M607.459883,153.645338 L610.450216,153.404698 C610.586546,155.098816 610.691833,156.77921 610.766069,158.445876 L607.76904,158.579368 C607.696405,156.948625 607.593356,155.303949 607.459883,153.645338 Z M607.896371,163.523725 L610.896305,163.503827 C610.907594,165.205698 610.885378,166.892755 610.829647,168.56499 L607.831312,168.465065 C607.885706,166.832931 607.907396,165.18582 607.896371,163.523725 Z M607.562992,173.41012 L610.554458,173.636245 C610.42622,175.332733 610.262196,177.013376 610.062375,178.678161 L607.083754,178.320643 C607.278311,176.69972 607.43806,175.062883 607.562992,173.41012 Z M606.384557,183.20243 L609.343631,183.696275 C609.063719,185.373481 608.746022,187.033908 608.390534,188.677536 L605.458331,188.043351 C605.803721,186.446416 606.112465,184.832782 606.384557,183.20243 Z M604.291922,192.859811 L607.189213,193.63808 C606.748727,195.277893 606.269015,196.900206 605.750076,198.504997 L602.895608,197.581952 C603.399033,196.025135 603.864471,194.451096 604.291922,192.859811 Z M601.271525,202.20035 L604.075335,203.267423 C603.472603,204.851146 602.829959,206.41696 602.147412,207.96484 L599.402435,206.754426 C600.064131,205.253832 600.687158,203.735815 601.271525,202.20035 Z M597.290807,211.224832 L599.969243,212.576121 C599.208118,214.084773 598.407288,215.575496 597.566769,217.048269 L594.961228,215.561273 C595.776314,214.133064 596.552836,212.687591 597.290807,211.224832 Z M592.397896,219.797817 L594.924421,221.41543 C594.015938,222.834374 593.068787,224.235757 592.082984,225.619564 L589.639589,223.878927 C590.596732,222.53535 591.516161,221.174984 592.397896,219.797817 Z M586.660862,227.851867 L589.017105,229.708777 C587.977352,231.028126 586.900649,232.33062 585.787016,233.616254 L583.51944,231.652049 C584.602788,230.401378 585.649923,229.134653 586.660862,227.851867 Z M580.265616,235.264939 L582.455796,237.315088 C581.30524,238.54423 580.129172,239.752667 578.927599,240.940392 L576.818608,238.806814 C577.992605,237.646347 579.141605,236.465724 580.265616,235.264939 Z M573.232259,242.218017 L575.257873,244.430909 C574.018262,245.565611 572.753689,246.680004 571.464163,247.774085 L569.523296,245.486502 C570.784152,244.416746 572.02047,243.327252 573.232259,242.218017 Z M565.69619,248.613677 L567.551459,250.971213 C566.232998,252.008779 564.890366,253.026639 563.523572,254.024792 L561.754283,251.602063 C563.092093,250.625076 564.406059,249.628948 565.69619,248.613677 Z M557.696251,254.45734 L559.379522,256.940603 C557.993427,257.880163 556.584154,258.800801 555.151714,259.702516 L553.553517,257.163665 C554.957366,256.279948 556.338275,255.377839 557.696251,254.45734 Z M549.296271,259.746128 L550.810006,262.336225 C549.366211,263.180025 547.900334,264.005779 546.412381,264.81349 L544.981154,262.176903 C546.441447,261.384207 547.879818,260.573948 549.296271,259.746128 Z M540.616615,264.460914 L541.967561,267.139522 C540.476204,267.891683 538.963914,268.626729 537.430695,269.344665 L536.158499,266.62777 C537.665372,265.922171 539.15141,265.199884 540.616615,264.460914 Z M531.631899,268.669952 L532.82743,271.421444 C531.297326,272.086278 529.747462,272.734956 528.17784,273.367482 L527.056524,270.58492 C528.601359,269.962383 530.126483,269.324059 531.631899,268.669952 Z" fill="#8599A4" fill-rule="nonzero"></path>
|
||||
<path id="Line" d="M415,229 L405.5,210 L424.5,210 L415,229 Z M413.5,154 L416.5,154 L416.5,159 L413.5,159 L413.5,154 Z M413.5,164 L416.5,164 L416.5,169 L413.5,169 L413.5,164 Z M413.5,174 L416.5,174 L416.5,179 L413.5,179 L413.5,174 Z M413.5,184 L416.5,184 L416.5,189 L413.5,189 L413.5,184 Z M413.5,194 L416.5,194 L416.5,199 L413.5,199 L413.5,194 Z M413.5,204 L416.5,204 L416.5,209 L413.5,209 L413.5,204 Z" fill="#8599A4" fill-rule="nonzero"></path>
|
||||
<text id="Provider" fill="#8599A4" font-family="Arial-Black, Arial Black" font-size="25" font-weight="700">
|
||||
<tspan x="0.06640625" y="28">Provider</tspan>
|
||||
<use
|
||||
id="Rectangle"
|
||||
stroke="#DC585F"
|
||||
mask="url(#mask-2)"
|
||||
stroke-width="8"
|
||||
stroke-dasharray="5"
|
||||
fill-rule="nonzero"
|
||||
xlink:href="#path-1"
|
||||
/>
|
||||
<path
|
||||
id="Path"
|
||||
d="M317.737594,275.914863 C316.399837,275.439513 315.071319,274.934993 313.752054,274.40131 L314.877079,271.620246 C316.062011,272.099587 317.254567,272.554642 318.454758,272.985416 L320.320183,265.365584 L336.516196,279.111098 L315.802177,283.8206 L317.737594,275.914863 Z M237.053972,153.839171 L240.036678,154.160829 C239.860222,155.797097 239.727284,157.431576 239.637858,159.064293 L236.642347,158.900223 C236.734662,157.214791 236.871873,155.527765 237.053972,153.839171 Z M236.500062,163.984683 L239.50006,163.988115 C239.498183,165.6288 239.540423,167.267783 239.626781,168.905092 L236.630945,169.063103 C236.541751,167.372018 236.498123,165.679201 236.500062,163.984683 Z M237.034923,174.12831 L240.017951,173.809652 C240.191774,175.436839 240.409353,177.062453 240.670697,178.686519 L237.708802,179.163147 C237.439026,177.486687 237.214397,175.808399 237.034923,174.12831 Z M238.651506,184.177472 L241.584397,183.54648 C241.927872,185.142975 242.313817,186.738038 242.742248,188.33169 L239.845114,189.110544 C239.40355,187.46804 239.005676,185.823676 238.651506,184.177472 Z M241.277699,193.960604 L244.133333,193.041173 C244.633282,194.593949 245.173728,196.145426 245.754688,197.695614 L242.945486,198.748412 C242.348064,197.154297 241.792129,195.558357 241.277699,193.960604 Z M244.837653,203.467846 L247.596505,202.289399 C248.237243,203.789426 248.91606,205.288264 249.632972,206.785917 L246.927022,208.081229 C246.191725,206.545169 245.495264,205.007373 244.837653,203.467846 Z M249.214331,212.61803 L251.865379,211.213771 C252.629062,212.6555 253.428173,214.096132 254.262722,215.535667 L251.667331,217.040308 C250.813682,215.567829 249.996012,214.093736 249.214331,212.61803 Z M254.297283,221.391099 L256.836394,219.793315 C257.706019,221.175275 258.60841,222.556214 259.543577,223.936131 L257.060143,225.61915 C256.106032,224.21128 255.185076,222.801931 254.297283,221.391099 Z M259.974465,229.772936 L262.402649,228.01114 C263.362565,229.334138 264.3527,230.656183 265.373059,231.977271 L262.998786,233.811072 C261.960192,232.466375 260.952083,231.120331 259.974465,229.772936 Z M266.091044,237.698109 L268.411267,235.796382 C269.468483,237.08625 270.534696,238.346975 271.6099,239.578562 L269.349958,241.551545 C268.25419,240.296403 267.167887,239.011923 266.091044,237.698109 Z M272.734865,245.303177 L274.928459,243.25668 C276.064358,244.474225 277.209951,245.660334 278.365233,246.815016 L276.244465,248.936888 C275.064352,247.757389 273.894487,246.546149 272.734865,245.303177 Z M279.887015,252.446537 L281.927895,250.247718 C283.145938,251.378269 284.374389,252.475061 285.613248,253.538106 L283.65964,255.814817 C282.391056,254.726266 281.133515,253.603502 279.887015,252.446537 Z M287.576785,259.039625 L289.435074,256.684468 C290.736664,257.711462 292.049366,258.702468 293.373181,259.657502 L291.617984,262.09046 C290.259116,261.110138 288.912049,260.093188 287.576785,259.039625 Z M295.785278,264.957777 L297.4295,262.448487 C298.812943,263.354993 300.208145,264.223547 301.615114,265.054165 L300.089978,267.637566 C298.64262,266.783104 297.207718,265.889835 295.785278,264.957777 Z M304.529995,270.116457 L305.928241,267.462232 C307.386943,268.230677 308.857919,268.959729 310.341185,269.649406 L309.076317,272.36972 C307.547965,271.659079 306.032519,270.907986 304.529995,270.116457 Z"
|
||||
fill="#8599A4"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
<path
|
||||
id="Path"
|
||||
d="M505.524249,279.462157 L520.680172,264.577668 L526.525394,282.656202 L505.524249,279.462157 Z M607.459883,153.645338 L610.450216,153.404698 C610.586546,155.098816 610.691833,156.77921 610.766069,158.445876 L607.76904,158.579368 C607.696405,156.948625 607.593356,155.303949 607.459883,153.645338 Z M607.896371,163.523725 L610.896305,163.503827 C610.907594,165.205698 610.885378,166.892755 610.829647,168.56499 L607.831312,168.465065 C607.885706,166.832931 607.907396,165.18582 607.896371,163.523725 Z M607.562992,173.41012 L610.554458,173.636245 C610.42622,175.332733 610.262196,177.013376 610.062375,178.678161 L607.083754,178.320643 C607.278311,176.69972 607.43806,175.062883 607.562992,173.41012 Z M606.384557,183.20243 L609.343631,183.696275 C609.063719,185.373481 608.746022,187.033908 608.390534,188.677536 L605.458331,188.043351 C605.803721,186.446416 606.112465,184.832782 606.384557,183.20243 Z M604.291922,192.859811 L607.189213,193.63808 C606.748727,195.277893 606.269015,196.900206 605.750076,198.504997 L602.895608,197.581952 C603.399033,196.025135 603.864471,194.451096 604.291922,192.859811 Z M601.271525,202.20035 L604.075335,203.267423 C603.472603,204.851146 602.829959,206.41696 602.147412,207.96484 L599.402435,206.754426 C600.064131,205.253832 600.687158,203.735815 601.271525,202.20035 Z M597.290807,211.224832 L599.969243,212.576121 C599.208118,214.084773 598.407288,215.575496 597.566769,217.048269 L594.961228,215.561273 C595.776314,214.133064 596.552836,212.687591 597.290807,211.224832 Z M592.397896,219.797817 L594.924421,221.41543 C594.015938,222.834374 593.068787,224.235757 592.082984,225.619564 L589.639589,223.878927 C590.596732,222.53535 591.516161,221.174984 592.397896,219.797817 Z M586.660862,227.851867 L589.017105,229.708777 C587.977352,231.028126 586.900649,232.33062 585.787016,233.616254 L583.51944,231.652049 C584.602788,230.401378 585.649923,229.134653 586.660862,227.851867 Z M580.265616,235.264939 L582.455796,237.315088 C581.30524,238.54423 580.129172,239.752667 578.927599,240.940392 L576.818608,238.806814 C577.992605,237.646347 579.141605,236.465724 580.265616,235.264939 Z M573.232259,242.218017 L575.257873,244.430909 C574.018262,245.565611 572.753689,246.680004 571.464163,247.774085 L569.523296,245.486502 C570.784152,244.416746 572.02047,243.327252 573.232259,242.218017 Z M565.69619,248.613677 L567.551459,250.971213 C566.232998,252.008779 564.890366,253.026639 563.523572,254.024792 L561.754283,251.602063 C563.092093,250.625076 564.406059,249.628948 565.69619,248.613677 Z M557.696251,254.45734 L559.379522,256.940603 C557.993427,257.880163 556.584154,258.800801 555.151714,259.702516 L553.553517,257.163665 C554.957366,256.279948 556.338275,255.377839 557.696251,254.45734 Z M549.296271,259.746128 L550.810006,262.336225 C549.366211,263.180025 547.900334,264.005779 546.412381,264.81349 L544.981154,262.176903 C546.441447,261.384207 547.879818,260.573948 549.296271,259.746128 Z M540.616615,264.460914 L541.967561,267.139522 C540.476204,267.891683 538.963914,268.626729 537.430695,269.344665 L536.158499,266.62777 C537.665372,265.922171 539.15141,265.199884 540.616615,264.460914 Z M531.631899,268.669952 L532.82743,271.421444 C531.297326,272.086278 529.747462,272.734956 528.17784,273.367482 L527.056524,270.58492 C528.601359,269.962383 530.126483,269.324059 531.631899,268.669952 Z"
|
||||
fill="#8599A4"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
<path
|
||||
id="Line"
|
||||
d="M415,229 L405.5,210 L424.5,210 L415,229 Z M413.5,154 L416.5,154 L416.5,159 L413.5,159 L413.5,154 Z M413.5,164 L416.5,164 L416.5,169 L413.5,169 L413.5,164 Z M413.5,174 L416.5,174 L416.5,179 L413.5,179 L413.5,174 Z M413.5,184 L416.5,184 L416.5,189 L413.5,189 L413.5,184 Z M413.5,194 L416.5,194 L416.5,199 L413.5,199 L413.5,194 Z M413.5,204 L416.5,204 L416.5,209 L413.5,209 L413.5,204 Z"
|
||||
fill="#8599A4"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
<text
|
||||
id="Provider"
|
||||
fill="#8599A4"
|
||||
font-family="Arial-Black, Arial Black"
|
||||
font-size="25"
|
||||
font-weight="700"
|
||||
>
|
||||
<tspan
|
||||
x="0.06640625"
|
||||
y="28"
|
||||
>Provider</tspan>
|
||||
</text>
|
||||
<text id="Consumer" fill="#8599A4" font-family="Arial-Black, Arial Black" font-size="25" font-weight="700">
|
||||
<tspan x="0.243896484" y="327">Consumer</tspan>
|
||||
<text
|
||||
id="Consumer"
|
||||
fill="#8599A4"
|
||||
font-family="Arial-Black, Arial Black"
|
||||
font-size="25"
|
||||
font-weight="700"
|
||||
>
|
||||
<tspan
|
||||
x="0.243896484"
|
||||
y="327"
|
||||
>Consumer</tspan>
|
||||
</text>
|
||||
<path d="M161,320 L320.5,320" id="Line-2" stroke="#DC585F" stroke-width="4" stroke-dasharray="5" fill-rule="nonzero"></path>
|
||||
<path
|
||||
id="Line-2"
|
||||
d="M161,320 L320.5,320"
|
||||
stroke="#DC585F"
|
||||
stroke-width="4"
|
||||
stroke-dasharray="5"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="svg-container">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.svg-container
|
||||
margin 30px auto
|
||||
text-align center
|
||||
& > svg
|
||||
max-width 100%
|
||||
.svg-container
|
||||
margin 30px auto
|
||||
text-align center
|
||||
& > svg
|
||||
max-width 100%
|
||||
</style>
|
||||
|
||||
@@ -29,4 +29,3 @@ createApp({
|
||||
console.error(err)
|
||||
process.exit(1)
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user