✨ use page number as href

Author: StarHeartHunt

packages/plugin-changelog/src/index.ts

@@ -19,13 +19,19 @@ import type {
 import type { Options, PluginOptions } from "./options";
 import type { ChangelogChunk } from "./types";
 
-export const HEADER = `---
-{{extraHeader}}
+export const HEADER = ({
+  extraHeader,
+  chunkTitle,
+}: {
+  extraHeader: string;
+  chunkTitle: string;
+}): string => `---
+${extraHeader}
 ---
 
 import DocPaginator from "@theme/DocPaginator"
 
-# {{chunkTitle}}
+# ${chunkTitle}
 `;
 
 function processSection(section: string) {
@@ -95,12 +101,13 @@ export default async function pluginChangelog(
   await Promise.all(
     chunks.map((chunk, index) =>
       fs.outputFile(
-        path.join(generateDir, getChunkFilename(chunk, index)),
+        path.join(generateDir, getChunkFilename(index)),
         getChunkContent(
           chunk,
-          HEADER.replaceAll("{{extraHeader}}", options.changelogHeader)
-            .replaceAll("{{position}}", index.toString())
-            .replaceAll("{{chunkTitle}}", getChunkTitle(chunk)),
+          HEADER({
+            extraHeader: options.changelogHeader,
+            chunkTitle: getChunkTitle(chunk),
+          }),
         ) + getPaginator(chunks, index - 1, index + 1),
       ),
     ),
@@ -116,6 +123,7 @@ const pluginOptionsSchema = Joi.object<PluginOptions>({
   changelogDestPath: Joi.string().default("src/pages/changelog"),
   changelogHeader: Joi.string().default(""),
   changelogPerPage: Joi.number().default(10),
+  changelogSidebarID: Joi.string().default("changelog"),
 });
 
 export function validateOptions({

packages/plugin-changelog/src/options.ts

@@ -3,6 +3,7 @@ export type PluginOptions = {
   changelogDestPath: string;
   changelogHeader: string;
   changelogPerPage: number;
+  changelogSidebarID: string;
 };
 
 export type Options = Partial<PluginOptions>;

packages/plugin-changelog/src/utils.ts

@@ -18,17 +18,16 @@ export function getPaginator(
   if (prevIdx >= 0 && prevIdx < chunks.length) {
     const chunk = chunks?.[prevIdx]?.[0];
     if (chunk) {
-      const title = prevIdx === 0 ? "" : encodeURIComponent(chunk.title);
-      content += ` previous={{ title: "${chunk.title}", permalink: "/changelog/${title}" }}`;
+      const href = prevIdx > 0 ? prevIdx.toString() : "";
+      content += ` previous={{ title: "${chunk.title}", permalink: "/changelog/${href}" }}`;
     }
   }
 
   if (nextIdx >= 0 && nextIdx < chunks.length) {
     const chunk = chunks?.[nextIdx]?.[0];
     if (chunk) {
-      content += ` next={{ title: "${
-        chunk.title
-      }", permalink: "/changelog/${encodeURIComponent(chunk.title)}" }}`;
+      const href = nextIdx > 0 ? nextIdx.toString() : "";
+      content += ` next={{ title: "${chunk.title}", permalink: "/changelog/${href}" }}`;
     }
   }
 
@@ -49,8 +48,8 @@ export function getChunkContent(chunk: Section[], header: string): string {
   return header + finalContent;
 }
 
-export function getChunkFilename(chunk: Section[], index: number): string {
-  return index > 0 ? `${chunk[0]!.title}.mdx` : "index.mdx";
+export function getChunkFilename(index: number): string {
+  return index > 0 ? `${index}.mdx` : "index.mdx";
 }
 
 export function getChunkTitle(chunk: Section[]): string {

website/sidebars.ts

@@ -54,9 +54,7 @@ const sidebars: SidebarsConfig = {
         (chunk, index) => ({
           type: "link",
           label: chunk[0]!.title,
-          href: `/changelog/${
-            index > 0 ? encodeURIComponent(chunk[0]!.title) : ""
-          }`,
+          href: `/changelog/${index > 0 ? index.toString() : ""}`,
         }),
       ),
     },