docs(changelog): implement individual changelog page

Author: nikolovlazar

Diff for: .github/workflows/changelog.yml

@@ -170,6 +170,7 @@ const Changelog = defineDocumentType(() => ({
     title: { type: 'string', required: true },
     description: { type: 'string', required: true },
     slug: { type: 'string' },
+    version: { type: 'string' },
   },
   computedFields: {
     frontMatter: {
@@ -178,6 +179,7 @@ const Changelog = defineDocumentType(() => ({
         title: doc.title,
         description: doc.description,
         slug: '/changelog',
+        version: doc.version,
       }),
     },
   },

Diff for: contentlayer.config.ts

@@ -431,6 +431,11 @@ async function redirect() {
       destination: '/community/recipes/:slug',
       permanent: true,
     },
+    {
+      source: '/changelog',
+      destination: '/changelog/latest',
+      permanent: true,
+    },
   ]
 }
 

Diff for: next-redirect.js

@@ -12,7 +12,6 @@
     "former-members:gen": "tsx scripts/get-former-members.ts",
     "search-meta:gen": "tsx scripts/get-search-meta.ts",
     "showcase-data:gen": "tsx scripts/get-showcase-data.ts",
-    "changelog:gen": "tsx scripts/get-changelog.ts",
     "contributing:gen": "tsx scripts/build-contributing-page.ts",
     "start": "next start",
     "cache:clean": "rm -rf .next .contentlayer",
@@ -97,6 +96,7 @@
     "pnpm-deduplicate": "^0.3.1",
     "prettier": "^2.7.1",
     "react-multi-ref": "^1.0.0",
+    "semver": "^7.3.7",
     "sharp": "^0.30.7",
     "tsx": "^3.8.2",
     "unified": "^10.1.2",

Diff for: package.json

@@ -0,0 +1,49 @@
+import { allChangelogs } from 'contentlayer/generated'
+import { InferGetStaticPropsType } from 'next'
+import semverMaxSatisfying from 'semver/ranges/max-satisfying'
+import { useMDXComponent } from 'next-contentlayer/hooks'
+import React from 'react'
+import { MDXComponents } from 'components/mdx-components'
+import MDXLayout from 'layouts/mdx'
+
+export default function Page({
+  doc,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  const Component = useMDXComponent(doc.body.code)
+  return (
+    <MDXLayout frontmatter={doc.frontMatter}>
+      <Component components={MDXComponents} />
+    </MDXLayout>
+  )
+}
+
+export const getStaticPaths = () => {
+  return {
+    paths: [
+      ...allChangelogs.map((doc) => ({
+        params: { version: doc.version },
+      })),
+      {
+        params: { version: 'latest' },
+      },
+    ],
+    fallback: false,
+  }
+}
+
+export const getStaticProps = async (ctx) => {
+  let versionParam = ctx.params.version
+
+  if (versionParam === 'latest') {
+    versionParam = semverMaxSatisfying(
+      allChangelogs.map(({ version }) => version),
+      '*',
+    )
+  }
+
+  const doc = allChangelogs.find(({ version }) => version === versionParam)
+
+  return {
+    props: { doc },
+  }
+}