feat: add edit link
This commit is contained in:
parent
2a59d493a5
commit
4a257c3680
@ -343,6 +343,13 @@ margin-y($top, $bottom = $top)
|
||||
[data-target]
|
||||
animation target-blink 6s ease 1 both
|
||||
|
||||
.meta
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
.one-edit-link
|
||||
margin-top 40px
|
||||
|
||||
@keyframes target-blink
|
||||
0%
|
||||
background-color #f2f7ff
|
||||
|
@ -9,7 +9,7 @@
|
||||
>
|
||||
<veui-icon
|
||||
class="icon"
|
||||
name="arrow-up"
|
||||
name="chevron-up"
|
||||
:label="t('toTop')"
|
||||
/>
|
||||
</button>
|
||||
@ -18,7 +18,7 @@
|
||||
<script>
|
||||
import { Icon } from 'veui'
|
||||
import i18n from 'veui/mixins/i18n'
|
||||
import 'veui-theme-dls-icons/arrow-up'
|
||||
import 'veui-theme-dls-icons/chevron-up'
|
||||
import { debounce } from 'lodash'
|
||||
|
||||
export default {
|
||||
|
65
components/OneEditLink.vue
Normal file
65
components/OneEditLink.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<a
|
||||
class="one-edit-link"
|
||||
:href="href"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{{ t('editOnGitHub') }}
|
||||
<veui-icon
|
||||
class="icon"
|
||||
name="external-link"
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from 'veui'
|
||||
import i18n from 'veui/mixins/i18n'
|
||||
import 'veui-theme-dls-icons/external-link'
|
||||
|
||||
const BASE_URL = 'https://github.com/ecomfe/veui-docs/edit/master/one/docs/'
|
||||
|
||||
export default {
|
||||
name: 'one-edit-link',
|
||||
components: {
|
||||
'veui-icon': Icon
|
||||
},
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
path: String
|
||||
},
|
||||
computed: {
|
||||
href () {
|
||||
return `${BASE_URL}${this.path}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.one-edit-link
|
||||
display inline-flex
|
||||
align-items center
|
||||
padding 4px 6px
|
||||
border-radius 4px
|
||||
background-color #fff
|
||||
color #848b99
|
||||
border 1px solid #e2e6f0
|
||||
transition background 0.2s, color 0.2s, border-color 0.2s
|
||||
text-decoration none
|
||||
|
||||
&:hover
|
||||
&[data-focus-visible-added]
|
||||
background-color #f6f7fa
|
||||
color #282c33
|
||||
border-color #d3d9e6
|
||||
|
||||
&:active
|
||||
background-color #e2e6f0
|
||||
color #000
|
||||
border-color #d3d9e6
|
||||
|
||||
.icon
|
||||
margin-left 4px
|
||||
</style>
|
@ -74,7 +74,7 @@ export function renderDocToPage (file) {
|
||||
add({ [dep]: { [src]: true } })
|
||||
})
|
||||
|
||||
let { layout, style } = meta
|
||||
let { layout, style = 'post' } = meta
|
||||
let componentList = Object.keys(components)
|
||||
let demoList = Object.keys(demos)
|
||||
let result = renderPage({
|
||||
@ -92,9 +92,10 @@ export function renderDocToPage (file) {
|
||||
}),
|
||||
components: componentList,
|
||||
alert: hasAlert,
|
||||
boilerplate: demoList.length || componentList.length || hasAlert,
|
||||
boilerplate: demoList.length || componentList.length || hasAlert || style === 'post',
|
||||
layout,
|
||||
style: style || 'post'
|
||||
style,
|
||||
path: file
|
||||
})
|
||||
|
||||
writeFileSync(dest, result)
|
||||
|
@ -1,22 +1,28 @@
|
||||
<template>
|
||||
<article class="content ${style}">
|
||||
${content | raw}</article>
|
||||
${content | raw}
|
||||
<section class="meta">
|
||||
<one-edit-link path="${path}"/>
|
||||
</section>
|
||||
</article>
|
||||
</template><!-- if: ${boilerplate} -->
|
||||
<script>
|
||||
import { htmlAttrs } from '~/common/i18n'<!-- for: ${components} as ${component} -->
|
||||
import ${component} from '~/components/${component}'<!-- /for --><!-- for: ${demos} as ${demo}, ${index} -->
|
||||
import Demo${index} from '${demo.src}'<!-- /for --><!-- if: ${demos.length} -->
|
||||
import OneDemo from '~/components/OneDemo'<!-- /if --><!-- if: ${alert} -->
|
||||
import OneDemo from '~/components/OneDemo'<!-- /if --><!-- if: ${path} -->
|
||||
import OneEditLink from '~/components/OneEditLink'<!-- /if --><!-- if: ${alert} -->
|
||||
import { VeuiAlert } from 'veui'<!-- /if -->
|
||||
|
||||
export default {
|
||||
mixins: [htmlAttrs],
|
||||
components: {
|
||||
<!-- for: ${components} as ${component}, ${index} -->${component}<!-- if: (${index} < ${component.length} - 1) && ${demos.length} -->,
|
||||
<!-- /if--><!-- /for --><!-- for: ${demos} as ${demo}, ${index} -->'${demo.name}': Demo${index},
|
||||
<!-- /for --><!-- if: ${demos.length} -->OneDemo<!-- /if --><!-- if: (${components.length} || ${demos.length}) && ${alert} -->,<!-- /if --><!-- if: ${alert} -->
|
||||
VeuiAlert<!-- /if -->
|
||||
}
|
||||
VeuiAlert<!-- /if --><!-- if: (${components.length} || ${demos.length}) || ${alert} && ${path} -->,<!-- /if --><!-- if: ${path} -->
|
||||
OneEditLink<!-- /if -->
|
||||
},
|
||||
mixins: [htmlAttrs]
|
||||
}
|
||||
</script><!-- else -->
|
||||
<script>
|
||||
|
@ -45,3 +45,23 @@ i18n.register(
|
||||
ns: 'onebacktotop'
|
||||
}
|
||||
)
|
||||
|
||||
i18n.register(
|
||||
'zh-Hans',
|
||||
{
|
||||
editOnGitHub: '在 GitHub 上编辑此页'
|
||||
},
|
||||
{
|
||||
ns: 'oneeditlink'
|
||||
}
|
||||
)
|
||||
|
||||
i18n.register(
|
||||
'en-US',
|
||||
{
|
||||
editOnGitHub: 'Edit this page on GitHub'
|
||||
},
|
||||
{
|
||||
ns: 'oneeditlink'
|
||||
}
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user