Add Beta changelogs

Author: Soitora

website/src/.vitepress/config.ts

@@ -76,6 +76,37 @@ export default defineConfig({
         pageData.description = pageData.frontmatter.description
       }
     }
+    else if (pageData.filePath === 'changelogs/beta/[tag].md') {
+      const tag = (pageData as any).params?.tag as string | undefined
+      if (tag) {
+        pageData.frontmatter ||= {}
+        pageData.frontmatter.title = tag
+
+        let publishedAt = releaseDateCache.get(`beta-${tag}`)
+        if (!publishedAt) {
+          try {
+            const { data } = await octokit.repos.getReleaseByTag({ owner: 'mihonapp', repo: 'mihon-preview', tag })
+            publishedAt = data.published_at || data.created_at || ''
+            if (publishedAt)
+              releaseDateCache.set(`beta-${tag}`, publishedAt)
+          }
+          catch {}
+        }
+
+        const prettyDate = publishedAt
+          ? new Date(publishedAt).toLocaleDateString('en', { month: 'short', day: 'numeric', year: 'numeric' })
+          : undefined
+
+        const versionLabel = tag
+        const desc = prettyDate
+          ? `Beta changelog for Mihon ${versionLabel}, released on ${prettyDate}`
+          : `Beta changelog for Mihon ${versionLabel}`
+
+        pageData.frontmatter.description = pageData.frontmatter.description || desc
+        pageData.title = pageData.frontmatter.title
+        pageData.description = pageData.frontmatter.description
+      }
+    }
     return pageData
   },
   transformHead: async context => generateMeta(context, hostname),

website/src/.vitepress/config/hooks/generateOgImages.ts

@@ -57,13 +57,41 @@ async function generateOgImages(config: SiteConfig) {
   }
 
   // Extract first H3 section title and its bullet points from a changelog body
-  function extractChangelogSnippet(body: string | null | undefined): string | undefined {
+  function extractChangelogSnippet(body: string | null | undefined, options: { includeHeading?: boolean } = {}): string | undefined {
+    const { includeHeading = true } = options
     if (!body)
       return undefined
     const src = body.replace(/\r/g, '')
     // Cut off checksum sections to avoid noise
     const cleaned = src.split(/---\n\n###\s*Checksums|---\n\nMD5/i)[0] || src
-    // Find first H3 section
+
+    const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;')
+
+    if (!includeHeading) {
+      // For beta changelogs: extract first 3 bullet points from anywhere in the body
+      let bullets = cleaned
+        .split('\n')
+        .map(l => l.trim())
+        .filter(l => /^[-*]\s+/.test(l))
+        .map(l => l.replace(/^[-*]\s+/, ''))
+
+      // Sanitize bullets: remove images, links (keep label), inline code, and parenthetical content
+      bullets = bullets.map((b) => {
+        const t = b
+          .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+          .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+          .replace(/`([^`]+)`/g, '$1')
+          .trim()
+        return stripParens(t)
+      }).filter(Boolean)
+
+      const top = bullets.slice(0, 3)
+      if (top.length === 0)
+        return undefined
+      return top.map(b => `<div>• ${esc(b)}</div>`).join('')
+    }
+
+    // Find first H3 section for stable changelogs
     const match = cleaned.match(/^###\s+(\S[^\n]*)\n([\s\S]*?)(?=^#{1,3}\s|Z)/m)
     if (!match)
       return undefined
@@ -76,7 +104,6 @@ async function generateOgImages(config: SiteConfig) {
       .map(l => l.trim())
       .filter(l => /^[-*]\s+/.test(l))
       .map(l => l.replace(/^[-*]\s+/, ''))
-    const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;')
     if (bullets.length === 0) {
       return `<div style="font-weight:700">${esc(heading.slice(0, 220))}</div>`
     }
@@ -104,7 +131,7 @@ async function generateOgImages(config: SiteConfig) {
     return s.replace(/\s*\([^)]*\)/g, '').trim()
   }
 
-  // Generate OG images for dynamic changelog pages
+  // Generate OG images for dynamic changelog pages (stable)
   const octokit = new Octokit()
   const releases = await octokit.paginate(octokit.repos.listReleases, {
     owner: 'mihonapp',
@@ -131,6 +158,33 @@ async function generateOgImages(config: SiteConfig) {
       fonts,
     })
   }
+
+  // Generate OG images for dynamic changelog pages (beta)
+  const betaReleases = await octokit.paginate(octokit.repos.listReleases, {
+    owner: 'mihonapp',
+    repo: 'mihon-preview',
+    per_page: 100,
+  })
+
+  for (const r of betaReleases) {
+    if (!r.tag_name)
+      continue
+    const pageLike: Pick<ContentData, 'url' | 'frontmatter'> = {
+      url: `/changelogs/beta/${r.tag_name}`,
+      frontmatter: {
+        // Prefer release name; fallback to tag
+        title: r.name || `Mihon ${r.tag_name}`,
+        description: extractChangelogSnippet(r.body, { includeHeading: false }),
+      } as any,
+    }
+
+    await generateImage({
+      page: pageLike,
+      template,
+      outDir: config.outDir,
+      fonts,
+    })
+  }
 }
 
 export default generateOgImages

website/src/.vitepress/config/navigation/sidebar.ts

@@ -21,6 +21,10 @@ function defaultSidebar(): DefaultTheme.SidebarItem[] {
         {
           text: 'Changelogs',
           link: '/changelogs/',
+          collapsed: true,
+          items: [
+            { text: 'Beta', link: '/changelogs/beta/' },
+          ],
         },
         {
           text: 'Forks',

website/src/.vitepress/theme/components/ChangelogByTag.vue

@@ -2,22 +2,27 @@
 import MarkdownIt from 'markdown-it'
 import moment from 'moment'
 import { computed, toRefs } from 'vue'
-import { data as changelogs } from '../data/changelogs.data'
+import { data as betaChangelogs } from '../data/changelogs-beta.data'
+import { data as stableChangelogs } from '../data/changelogs.data'
 import { formatChangelog } from '../utils/formatChangelog'
 import Contributors from './Contributors.vue'
 
-const props = defineProps<{ tag: string }>()
-const { tag } = toRefs(props)
+const props = defineProps<{ tag: string, repo?: string }>()
+const { tag, repo } = toRefs(props)
+
+const changelogs = computed(() => {
+  return repo?.value === 'mihon-preview' ? betaChangelogs : stableChangelogs
+})
 
 const md = new MarkdownIt({ html: true })
 
 function renderMarkdown(string: string | null | undefined) {
   return formatChangelog(md, string, { stripChecksums: true })
 }
 
-const release = computed(() => changelogs.find(r => r.tag_name === tag.value))
+const release = computed(() => changelogs.value.find(r => r.tag_name === tag.value))
 const latestStableTag = computed(() => {
-  const stable = changelogs
+  const stable = changelogs.value
     .filter(r => !r.draft && !r.prerelease)
     .toSorted((a, b) => new Date(b.published_at!).getTime() - new Date(a.published_at!).getTime())
   return stable[0]?.tag_name
@@ -47,7 +52,7 @@ function assetDate(dateStr?: string) {
 <template>
   <div v-if="release">
     <h1 :id="isLatest ? 'latest' : release.tag_name">
-      {{ release.tag_name.substring(1) }}
+      {{ repo === 'mihon-preview' ? release.tag_name : release.tag_name.substring(1) }}
       <Badge v-if="isLatest" type="tip" text="Latest" />
       <a
         class="header-anchor"

website/src/.vitepress/theme/components/ChangelogsList.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import MarkdownIt from 'markdown-it'
-import { data as changelogs } from '../data/changelogs.data'
+import { computed } from 'vue'
+import { data as betaChangelogs } from '../data/changelogs-beta.data'
+import { data as stableChangelogs } from '../data/changelogs.data'
 import { formatChangelog } from '../utils/formatChangelog'
 import Contributors from './Contributors.vue'
 
+const props = defineProps<{ repo?: string }>()
+
+const changelogs = computed(() => {
+  return props.repo === 'mihon-preview' ? betaChangelogs : stableChangelogs
+})
+
 const md = new MarkdownIt({ html: true })
 
 function renderMarkdown(string: string | null | undefined) {
@@ -26,9 +34,9 @@ const dateFormatter = new Intl.DateTimeFormat('en', {
   >
     <h2 :id="index === 0 ? 'latest' : release.tag_name">
       <a
-        :href="`/changelogs/${release.tag_name}`"
+        :href="props.repo === 'mihon-preview' ? `/changelogs/beta/${release.tag_name}` : `/changelogs/${release.tag_name}`"
       >
-        {{ release.tag_name.substring(1) }}
+        {{ props.repo === 'mihon-preview' ? release.tag_name : release.tag_name.substring(1) }}
       </a>
       <Badge v-if="index === 0" type="tip" text="Latest" />
       <a

website/src/.vitepress/theme/components/OgImageTemplate.vue

@@ -21,6 +21,7 @@ defineProps<{ title: string, description?: string, dir?: string }>()
           <svg v-else-if="dir === 'Guide'" width="48" height="48" viewBox="0 -960 960 960" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M831-327.5V-558L516-386.5q-17 9-36 9t-36-9l-329.5-180q-10-5.5-14.5-14.25t-4.5-18.75q0-10 4.5-18.75t14.5-14.25l330-179.5q8.5-5 17.25-7t18.25-2q9.5 0 18.25 2t17.25 7l371 202q9 5 14.25 13.75T906-577v249.5q0 15.5-11 26.5t-26.5 11q-15.5 0-26.5-11t-11-26.5Zm-387 173-197-107q-18.5-10-28.75-27.75T208-328v-149.5L444-349q17 9 36 9t36-9l236-128.5V-328q0 21-10.25 38.75T713-261.5l-197 107q-8.5 5-17.5 7t-18.5 2q-9.5 0-18.5-2t-17.5-7Z" /></svg>
           <svg v-else-if="dir === 'News'" width="48" height="48" viewBox="0 -960 960 960" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M157.5-122.5q-31 0-53-22t-22-53v-614q0-6.5 5.5-9t10.5 2.5l35.5 35.5q5.5 5.5 13 5.25t13-5.75l40-40q5.5-5.5 13-5.75t13 5.25l41 41q5.5 5.5 13 5.5t13-5.5l41-41q5.5-5.5 13-5.25t13 5.75l40 40q5.5 5.5 13 5.75t13-5.25l41-41q5.5-5.5 13-5.5t13 5.5l41 41q5.5 5.5 13 5.25t13-5.75l40-40q5.5-5.5 13-5.75t13 5.25l41 41q5.5 5.5 13 5.5t13-5.5l41-41q5.5-5.5 13-5.25t13 5.75l40 40q5.5 5.5 13 5.75t13-5.25l35.5-35.5q5-5 10.5-2.5t5.5 9v614q0 31-22 53t-53 22h-645Zm0-75h285v-245h-285v245Zm360 0h285v-85h-285v85Zm0-160h285v-85h-285v85Zm-360-160h645v-125h-645v125Z" /></svg>
           <svg v-else-if="dir === 'Changelog'" width="48" height="48" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M20 3H4c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2M5 7h5v6H5zm14 10H5v-2h14zm0-4h-7v-2h7zm0-4h-7V7h7z" /></svg>
+          <svg v-else-if="dir === 'Changelog'" width="48" height="48" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M20 3H4c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2M5 7h5v6H5zm14 10H5v-2h14zm0-4h-7v-2h7zm0-4h-7V7h7z" /></svg>
         </div>
       </div>
       <div

website/src/.vitepress/theme/data/changelogs-beta.data.ts

@@ -0,0 +1,22 @@
+import type { GetResponseDataTypeFromEndpointMethod } from '@octokit/types'
+import { Octokit } from '@octokit/rest'
+import { defineLoader } from 'vitepress'
+
+const octokit = new Octokit()
+
+type GitHubReleaseList = GetResponseDataTypeFromEndpointMethod<typeof octokit.repos.listReleases>
+
+declare const data: GitHubReleaseList
+export { data }
+
+export default defineLoader({
+  async load(): Promise<GitHubReleaseList> {
+    const releases = await octokit.paginate(octokit.repos.listReleases, {
+      owner: 'mihonapp',
+      repo: 'mihon-preview',
+      per_page: 100,
+    })
+
+    return releases
+  },
+})

website/src/changelogs/beta/[tag].md

@@ -0,0 +1,23 @@
+---
+# This is a dynamic route template. Title/description can be generic; content uses params.
+outline: false
+lastUpdated: false
+editLink: false
+prev:
+  text: 'Beta Changelogs'
+  link: '/changelogs/beta'
+next:
+  text: 'Download'
+  link: '/download'
+---
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import ChangelogByTag from "@theme/components/ChangelogByTag.vue";
+
+const { page } = useData()
+const tag = page.value.params.tag as string
+</script>
+
+<!-- markdownlint-disable-file -->
+<ChangelogByTag :tag="tag" repo="mihon-preview" />

website/src/changelogs/beta/[tag].paths.ts

@@ -0,0 +1,16 @@
+import { Octokit } from '@octokit/rest'
+
+export default {
+  async paths() {
+    const octokit = new Octokit()
+    const releases = await octokit.paginate(octokit.repos.listReleases, {
+      owner: 'mihonapp',
+      repo: 'mihon-preview',
+      per_page: 100,
+    })
+
+    return releases
+      .filter(r => !!r.tag_name)
+      .map(r => ({ params: { tag: r.tag_name } }))
+  },
+}

website/src/changelogs/beta/index.md

@@ -0,0 +1,19 @@
+---
+title: Changelogs for Beta
+description: Changelogs of all Mihon beta releases.
+lastUpdated: false
+editLink: false
+prev: false
+next: false
+---
+
+<script setup>
+import ChangelogsList from "@theme/components/ChangelogsList.vue";
+</script>
+
+# Changelogs for Beta
+
+Changelogs of all Mihon beta releases, which are also available [on GitHub](https://github.com/mihonapp/mihon-preview/releases).<br>
+Stable releases can be seen [on the main changelogs page](/changelogs/).
+
+<ChangelogsList repo="mihon-preview" />