refactor(content-{blog,docs}): unify handling of tags (#7117)

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

@@ -30,7 +30,13 @@ import type {
   BlogContentPaths,
   BlogMarkdownLoaderOptions,
 } from './types';
-import type {LoadContext, Plugin, HtmlTags} from '@docusaurus/types';
+import type {
+  LoadContext,
+  Plugin,
+  HtmlTags,
+  TagsListItem,
+  TagModule,
+} from '@docusaurus/types';
 import {
   generateBlogPosts,
   getSourceToPermalink,
@@ -43,7 +49,6 @@ import type {
   BlogPostFrontMatter,
   BlogPostMetadata,
   Assets,
-  TagModule,
 } from '@docusaurus/plugin-content-blog';
 
 export default async function pluginContentBlog(
@@ -117,6 +122,8 @@ export default async function pluginContentBlog(
         blogSidebarTitle,
       } = options;
 
+      const baseBlogUrl = normalizeUrl([baseUrl, routeBasePath]);
+      const blogTagsListPath = normalizeUrl([baseBlogUrl, tagsBasePath]);
       const blogPosts = await generateBlogPosts(contentPaths, context, options);
 
       if (!blogPosts.length) {
@@ -125,7 +132,7 @@ export default async function pluginContentBlog(
           blogPosts: [],
           blogListPaginated: [],
           blogTags: {},
-          blogTagsListPath: null,
+          blogTagsListPath,
           blogTagsPaginated: [],
         };
       }
@@ -150,8 +157,6 @@ export default async function pluginContentBlog(
         }
       });
 
-      const baseBlogUrl = normalizeUrl([baseUrl, routeBasePath]);
-
       const blogListPaginated: BlogPaginated[] = paginateBlogPosts({
         blogPosts,
         blogTitle,
@@ -167,11 +172,6 @@ export default async function pluginContentBlog(
         blogTitle,
       });
 
-      const tagsPath = normalizeUrl([baseBlogUrl, tagsBasePath]);
-
-      const blogTagsListPath =
-        Object.keys(blogTags).length > 0 ? tagsPath : null;
-
       return {
         blogSidebarTitle,
         blogPosts,
@@ -307,30 +307,47 @@ export default async function pluginContentBlog(
         }),
       );
 
-      // Tags.
-      if (blogTagsListPath === null) {
+      // Tags. This is the last part so we early-return if there are no tags.
+      if (Object.keys(blogTags).length === 0) {
         return;
       }
 
-      const tagsModule: {[tagName: string]: TagModule} = Object.fromEntries(
-        Object.entries(blogTags).map(([, tag]) => {
-          const tagModule: TagModule = {
-            allTagsPath: blogTagsListPath,
-            name: tag.name,
-            count: tag.items.length,
-            permalink: tag.permalink,
-          };
-          return [tag.name, tagModule];
-        }),
-      );
+      async function createTagsListPage() {
+        const tagsProp: TagsListItem[] = Object.values(blogTags).map((tag) => ({
+          label: tag.label,
+          permalink: tag.permalink,
+          count: tag.items.length,
+        }));
 
-      async function createTagRoutes(tag: BlogTag): Promise<void> {
+        const tagsPropPath = await createData(
+          `${docuHash(`${blogTagsListPath}-tags`)}.json`,
+          JSON.stringify(tagsProp, null, 2),
+        );
+
+        addRoute({
+          path: blogTagsListPath,
+          component: blogTagsListComponent,
+          exact: true,
+          modules: {
+            sidebar: aliasedSource(sidebarProp),
+            tags: aliasedSource(tagsPropPath),
+          },
+        });
+      }
+
+      async function createTagPostsListPage(tag: BlogTag): Promise<void> {
         await Promise.all(
           tag.pages.map(async (blogPaginated) => {
             const {metadata, items} = blogPaginated;
-            const tagsMetadataPath = await createData(
+            const tagProp: TagModule = {
+              label: tag.label,
+              permalink: tag.permalink,
+              allTagsPath: blogTagsListPath,
+              count: tag.items.length,
+            };
+            const tagPropPath = await createData(
               `${docuHash(metadata.permalink)}.json`,
-              JSON.stringify(tagsModule[tag.name], null, 2),
+              JSON.stringify(tagProp, null, 2),
             );
 
             const listMetadataPath = await createData(
@@ -356,7 +373,7 @@ export default async function pluginContentBlog(
                     },
                   };
                 }),
-                metadata: aliasedSource(tagsMetadataPath),
+                tag: aliasedSource(tagPropPath),
                 listMetadata: aliasedSource(listMetadataPath),
               },
             });
@@ -364,25 +381,8 @@ export default async function pluginContentBlog(
         );
       }
 
-      await Promise.all(Object.values(blogTags).map(createTagRoutes));
-
-      // Only create /tags page if there are tags.
-      if (Object.keys(blogTags).length > 0) {
-        const tagsListPath = await createData(
-          `${docuHash(`${blogTagsListPath}-tags`)}.json`,
-          JSON.stringify(tagsModule, null, 2),
-        );
-
-        addRoute({
-          path: blogTagsListPath,
-          component: blogTagsListComponent,
-          exact: true,
-          modules: {
-            sidebar: aliasedSource(sidebarProp),
-            tags: aliasedSource(tagsListPath),
-          },
-        });
-      }
+      await createTagsListPage();
+      await Promise.all(Object.values(blogTags).map(createTagPostsListPage));
     },
 
     translateContent({content, translationFiles}) {