feat: add hash anchor to changelog versions

This commit is contained in:
Justineo 2021-10-21 14:40:06 +08:00
parent e7f935b652
commit 6112f81c46
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
2 changed files with 43 additions and 3 deletions

View File

@ -77,15 +77,21 @@
<section
v-for="{ version, codeName, changeset } of filteredChangelog"
:key="version"
class="version-item"
data-markdown
>
<h2
:id="getHash(version)"
:class="{
major: isMajor(version),
minor: isMinor(version),
}"
>
<nuxt-link
:to="`#${getHash(version)}`"
>
{{ version }}<small v-if="codeName">{{ codeName }}</small>
</nuxt-link>
</h2>
<ul class="changeset">
<li
@ -97,7 +103,9 @@
<span
class="emoji"
:title="getTypeLabel(type)"
>{{ getTypeEmoji(type) }}</span>
>{{
getTypeEmoji(type)
}}</span>
<div v-html="content"/>
</li>
</ul>
@ -222,6 +230,9 @@ export default {
},
updateShrugger () {
this.shrugger = getShrugger()
},
getHash (version) {
return `v${version.replace(/\./g, '-')}`
}
}
}
@ -248,6 +259,27 @@ export default {
& >>> .veui-field .veui-field-no-label
margin-bottom 0
.version-item
position relative
&::before
content ""
position absolute
top -2px
bottom -2px
left -12px
width 3px
background-color #e1edff
border-radius 1px
opacity 0
transform-origin 50% 0
transform scaleY(0)
transition opacity 0.3s, transform 0.3s
&[data-target]::before
opacity 1
transform none
h2
display flex
align-items center
@ -265,6 +297,9 @@ h2
&::before
content "§"
a
color #333 !important
small
font-size 14px

View File

@ -8,7 +8,7 @@ function clearTarget () {
delete target.dataset.target
}
export default ({ app }) => {
export default ({ app, route }) => {
document.documentElement.addEventListener('click', clearTarget)
app.router.afterEach(to => {
@ -24,6 +24,11 @@ export default ({ app }) => {
if (anchor.tagName === 'CODE') {
target = anchor.closest('tr')
} else if (route.name === 'changelog' && anchor.tagName === 'H2') {
target = anchor.closest('.version-item')
}
if (target) {
target.dataset.target = ''
}
}, 0)