fix: releases page

src/defaultTheme/components/atoms/Alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm" :class="[type]">
+  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
     <div class="flex items-start">
       <div class="flex-grow alert-content">
         <Markdown :node="$slots.default" unwrap="p" />

src/defaultTheme/components/templates/Releases.vue

@@ -1,22 +1,22 @@
 <template>
   <AppContainer aside>
     <AppPage>
-      <div class="mb-10">
-        <h1
-          class="flex items-center justify-between text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
-        >
+      <div class="">
+        <h1 class="flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
           <span class="flex-1">Releases</span>
         </h1>
       </div>
       <div class="prose max-w-none dark:prose-dark">
         <div v-for="release of releases" :key="release.name">
-          <h2 :id="release.name" class="flex items-center justify-between">
-            <a :href="`#${release.name}`">
-              {{ release.name }}
-            </a>
-            <span class="text-base font-normal text-gray-500">{{ formatDate($i18n.local, release) }}</span>
-          </h2>
-          <NuxtContent :document="release" />
+          <div class="flex items-baseline justify-between">
+            <ProseH2 :id="release.name">
+              <a :href="`#${release.name}`">
+                {{ release.name }}
+              </a>
+            </ProseH2>
+            <span class="text-sm font-normal text-gray-500">{{ formatDate($i18n.local, release) }}</span>
+          </div>
+          <NuxtContent :document="release" class="docus-content" />
         </div>
       </div>
       <hr class="mt-10 mb-4 border-gray-200 dark:border-gray-800" />
@@ -28,7 +28,8 @@
 </template>
 
 <script>
-import { defineComponent, ref, useContext, useFetch } from '@nuxtjs/composition-api'
+import { defineComponent, ref, useContext, useFetch, onMounted } from '@nuxtjs/composition-api'
+import { scrollToHeading } from '../../utils'
 
 export default defineComponent({
   props: {
@@ -53,6 +54,33 @@ export default defineComponent({
       }))
     })
 
+    onMounted(() => {
+      if (window.location.hash) {
+        const hash = window.location.hash.replace('#', '')
+
+        // do not remove setTimeout (wrong scroll pos)
+        setTimeout(() => {
+          scrollToHeading(hash, '--docs-scroll-margin-block')
+        }, 300)
+      }
+
+      // do not remove setTimeout (no headers)
+      setTimeout(() => {
+        const headings = [
+          ...document.querySelectorAll('.prose h1'),
+          ...document.querySelectorAll('.prose h2'),
+          ...document.querySelectorAll('.prose h3')
+        ]
+        headings.forEach(heading => {
+          heading.addEventListener('click', e => {
+            e.preventDefault()
+            const hash = e.target.href.split('#').pop()
+            scrollToHeading(hash, '--docs-scroll-margin-block')
+          })
+        })
+      }, 500)
+    })
+
     const formatDate = (locale, release) => {
       const currentLocale = locale || 'en'
 

src/defaultTheme/utils/dom.ts

@@ -15,7 +15,8 @@ export function scrollToHeading(id: string, scrollMarginCssVar: string) {
 
   // do not remove setTimeout (does not work in Safari)
   setTimeout(() => {
-    const offset = (document.querySelector(`#${id}`) as any).offsetTop - convertPropToPixels(scrollMarginCssVar)
+    const escapedId = id.replace(/\./g, '\\.')
+    const offset = (document.querySelector(`#${escapedId}`) as any).offsetTop - convertPropToPixels(scrollMarginCssVar)
     window.scrollTo(0, offset)
   })
 }

src/github/github.ts

@@ -1,6 +1,7 @@
 import { $fetch, FetchOptions } from 'ohmyfetch/node'
 import { GithubRelease, GithubReleaseOptions } from '../types/github'
 import { useMarkdownParser } from '../core/parser'
+import { normalizeReleaseName } from './utils'
 
 interface GithubRawRelease {
   draft: boolean
@@ -75,7 +76,7 @@ export async function fetchGitHubReleases({ apiUrl, repo, token }: GithubRelease
     .filter((r: any) => !r.draft)
     .map(release => {
       return {
-        name: (release.name || release.tag_name).replace('Release ', ''),
+        name: normalizeReleaseName(release.name || release.tag_name),
         date: release.published_at,
         body: release.body
       }

src/github/utils.ts

@@ -0,0 +1,10 @@
+export function normalizeReleaseName(name: string) {
+  // remove "Release " prefix from release name
+  name = name.replace('Release ', '')
+
+  // make sure release name starts with an alphabetical character
+  if (!name.match(/^[a-zA-Z]/)) {
+    name = `v${name}`
+  }
+  return name
+}