feat: add hash anchor to changelog versions

one/docs/changelog.vue

@@ -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
 

plugins/target.js

@@ -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)