fix(content-blog): remove double leading slash in blog-only paginated view (#6918)

* fix(content-blog): Fix permalink function of paginateBlogPosts

* add test

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/blogUtils.test.ts.snap

@@ -22,3 +22,138 @@ title: This post links to another one!
 
 [Linked post](/blog/2018/12/14/Happy-First-Birthday-Slash)"
 `;
+
+exports[`paginateBlogPosts generates right pages 1`] = `
+[
+  {
+    "items": [
+      "post1",
+      "post2",
+    ],
+    "metadata": {
+      "blogDescription": "Blog Description",
+      "blogTitle": "Blog Title",
+      "nextPage": "/blog/page/2",
+      "page": 1,
+      "permalink": "/blog",
+      "postsPerPage": 2,
+      "previousPage": null,
+      "totalCount": 5,
+      "totalPages": 3,
+    },
+  },
+  {
+    "items": [
+      "post3",
+      "post4",
+    ],
+    "metadata": {
+      "blogDescription": "Blog Description",
+      "blogTitle": "Blog Title",
+      "nextPage": "/blog/page/3",
+      "page": 2,
+      "permalink": "/blog/page/2",
+      "postsPerPage": 2,
+      "previousPage": "/blog",
+      "totalCount": 5,
+      "totalPages": 3,
+    },
+  },
+  {
+    "items": [
+      "post5",
+    ],
+    "metadata": {
+      "blogDescription": "Blog Description",
+      "blogTitle": "Blog Title",
+      "nextPage": null,
+      "page": 3,
+      "permalink": "/blog/page/3",
+      "postsPerPage": 2,
+      "previousPage": "/blog/page/2",
+      "totalCount": 5,
+      "totalPages": 3,
+    },
+  },
+]
+`;
+
+exports[`paginateBlogPosts generates right pages 2`] = `
+[
+  {
+    "items": [
+      "post1",
+      "post2",
+    ],
+    "metadata": {
+      "blogDescription": "Blog Description",
+      "blogTitle": "Blog Title",
+      "nextPage": "/page/2",
+      "page": 1,
+      "permalink": "/",
+      "postsPerPage": 2,
+      "previousPage": null,
+      "totalCount": 5,
+      "totalPages": 3,
+    },
+  },
+  {
+    "items": [
+      "post3",
+      "post4",
+    ],
+    "metadata": {
+      "blogDescription": "Blog Description",
+      "blogTitle": "Blog Title",
+      "nextPage": "/page/3",
+      "page": 2,
+      "permalink": "/page/2",
+      "postsPerPage": 2,
+      "previousPage": "/",
+      "totalCount": 5,
+      "totalPages": 3,
+    },
+  },
+  {
+    "items": [
+      "post5",
+    ],
+    "metadata": {
+      "blogDescription": "Blog Description",
+      "blogTitle": "Blog Title",
+      "nextPage": null,
+      "page": 3,
+      "permalink": "/page/3",
+      "postsPerPage": 2,
+      "previousPage": "/page/2",
+      "totalCount": 5,
+      "totalPages": 3,
+    },
+  },
+]
+`;
+
+exports[`paginateBlogPosts generates right pages 3`] = `
+[
+  {
+    "items": [
+      "post1",
+      "post2",
+      "post3",
+      "post4",
+      "post5",
+    ],
+    "metadata": {
+      "blogDescription": "Blog Description",
+      "blogTitle": "Blog Title",
+      "nextPage": null,
+      "page": 1,
+      "permalink": "/",
+      "postsPerPage": 10,
+      "previousPage": null,
+      "totalCount": 5,
+      "totalPages": 1,
+    },
+  },
+]
+`;

packages/docusaurus-plugin-content-blog/src/__tests__/blogUtils.test.ts

@@ -11,6 +11,7 @@ import {
   parseBlogFileName,
   linkify,
   getSourceToPermalink,
+  paginateBlogPosts,
   type LinkifyParams,
 } from '../blogUtils';
 import fs from 'fs-extra';
@@ -21,56 +22,6 @@ import type {
   BlogPost,
 } from '../types';
 
-const siteDir = path.join(__dirname, '__fixtures__', 'website');
-const contentPaths: BlogContentPaths = {
-  contentPath: path.join(siteDir, 'blog-with-ref'),
-  contentPathLocalized: path.join(siteDir, 'blog-with-ref-localized'),
-};
-const pluginDir = 'blog-with-ref';
-const blogPosts: BlogPost[] = [
-  {
-    id: 'Happy 1st Birthday Slash!',
-    metadata: {
-      permalink: '/blog/2018/12/14/Happy-First-Birthday-Slash',
-      source: path.posix.join(
-        '@site',
-        pluginDir,
-        '2018-12-14-Happy-First-Birthday-Slash.md',
-      ),
-      title: 'Happy 1st Birthday Slash!',
-      description: `pattern name`,
-      date: new Date('2018-12-14'),
-      tags: [],
-      prevItem: {
-        permalink: '/blog/2019/01/01/date-matter',
-        title: 'date-matter',
-      },
-      truncated: false,
-    },
-  },
-];
-
-const transform = async (
-  filePath: string,
-  options?: Partial<LinkifyParams>,
-) => {
-  const fileContent = await fs.readFile(filePath, 'utf-8');
-  const transformedContent = linkify({
-    filePath,
-    fileString: fileContent,
-    siteDir,
-    contentPaths,
-    sourceToPermalink: getSourceToPermalink(blogPosts),
-    onBrokenMarkdownLink: (brokenMarkdownLink) => {
-      throw new Error(
-        `Broken markdown link found: ${JSON.stringify(brokenMarkdownLink)}`,
-      );
-    },
-    ...options,
-  });
-  return [fileContent, transformedContent];
-};
-
 describe('truncate', () => {
   it('truncates texts', () => {
     expect(
@@ -89,6 +40,45 @@ describe('truncate', () => {
   });
 });
 
+describe('paginateBlogPosts', () => {
+  it('generates right pages', () => {
+    const blogPosts = [
+      {id: 'post1', metadata: {}, content: 'Foo 1'},
+      {id: 'post2', metadata: {}, content: 'Foo 2'},
+      {id: 'post3', metadata: {}, content: 'Foo 3'},
+      {id: 'post4', metadata: {}, content: 'Foo 4'},
+      {id: 'post5', metadata: {}, content: 'Foo 5'},
+    ] as BlogPost[];
+    expect(
+      paginateBlogPosts({
+        blogPosts,
+        basePageUrl: '/blog',
+        blogTitle: 'Blog Title',
+        blogDescription: 'Blog Description',
+        postsPerPageOption: 2,
+      }),
+    ).toMatchSnapshot();
+    expect(
+      paginateBlogPosts({
+        blogPosts,
+        basePageUrl: '/',
+        blogTitle: 'Blog Title',
+        blogDescription: 'Blog Description',
+        postsPerPageOption: 2,
+      }),
+    ).toMatchSnapshot();
+    expect(
+      paginateBlogPosts({
+        blogPosts,
+        basePageUrl: '/',
+        blogTitle: 'Blog Title',
+        blogDescription: 'Blog Description',
+        postsPerPageOption: 10,
+      }),
+    ).toMatchSnapshot();
+  });
+});
+
 describe('parseBlogFileName', () => {
   it('parses file', () => {
     expect(parseBlogFileName('some-post.md')).toEqual({
@@ -198,6 +188,54 @@ describe('parseBlogFileName', () => {
 });
 
 describe('linkify', () => {
+  const siteDir = path.join(__dirname, '__fixtures__', 'website');
+  const contentPaths: BlogContentPaths = {
+    contentPath: path.join(siteDir, 'blog-with-ref'),
+    contentPathLocalized: path.join(siteDir, 'blog-with-ref-localized'),
+  };
+  const pluginDir = 'blog-with-ref';
+
+  const blogPosts: BlogPost[] = [
+    {
+      id: 'Happy 1st Birthday Slash!',
+      metadata: {
+        permalink: '/blog/2018/12/14/Happy-First-Birthday-Slash',
+        source: path.posix.join(
+          '@site',
+          pluginDir,
+          '2018-12-14-Happy-First-Birthday-Slash.md',
+        ),
+        title: 'Happy 1st Birthday Slash!',
+        description: `pattern name`,
+        date: new Date('2018-12-14'),
+        tags: [],
+        prevItem: {
+          permalink: '/blog/2019/01/01/date-matter',
+          title: 'date-matter',
+        },
+        truncated: false,
+      },
+    },
+  ];
+
+  async function transform(filePath: string, options?: Partial<LinkifyParams>) {
+    const fileContent = await fs.readFile(filePath, 'utf-8');
+    const transformedContent = linkify({
+      filePath,
+      fileString: fileContent,
+      siteDir,
+      contentPaths,
+      sourceToPermalink: getSourceToPermalink(blogPosts),
+      onBrokenMarkdownLink: (brokenMarkdownLink) => {
+        throw new Error(
+          `Broken markdown link found: ${JSON.stringify(brokenMarkdownLink)}`,
+        );
+      },
+      ...options,
+    });
+    return [fileContent, transformedContent];
+  }
+
   it('transforms to correct link', async () => {
     const post = path.join(contentPaths.contentPath, 'post.md');
     const [content, transformedContent] = await transform(post);

packages/docusaurus-plugin-content-blog/src/blogUtils.ts

@@ -72,7 +72,9 @@ export function paginateBlogPosts({
   const pages: BlogPaginated[] = [];
 
   function permalink(page: number) {
-    return page > 0 ? `${basePageUrl}/page/${page + 1}` : basePageUrl;
+    return page > 0
+      ? normalizeUrl([basePageUrl, `page/${page + 1}`])
+      : basePageUrl;
   }
 
   for (let page = 0; page < numberOfPages; page += 1) {