@docusaurus/plugin-content-blog 3.2.1 → 3.3.0

package/lib/authors.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/// <reference path="../src/plugin-content-blog.d.ts" />
 import type { BlogContentPaths } from './types';
 import type { Author, BlogPostFrontMatter } from '@docusaurus/plugin-content-blog';
 export type AuthorsMap = {

package/lib/blogUtils.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/// <reference path="../src/plugin-content-blog.d.ts" />
 import type { LoadContext } from '@docusaurus/types';
 import type { PluginOptions, BlogPost, BlogTags, BlogPaginated } from '@docusaurus/plugin-content-blog';
 import type { BlogContentPaths, BlogMarkdownLoaderOptions } from './types';

package/lib/client/index.d.ts

@@ -4,5 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/// <reference path="../../src/plugin-content-blog.d.ts" />
 import type { BlogMetadata } from '@docusaurus/plugin-content-blog';
 export declare function useBlogMetadata(): BlogMetadata;

package/lib/feed.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/// <reference path="../src/plugin-content-blog.d.ts" />
 import type { DocusaurusConfig } from '@docusaurus/types';
 import type { PluginOptions, BlogPost } from '@docusaurus/plugin-content-blog';
 export declare function createBlogFeedFiles({ blogPosts: allBlogPosts, options, siteConfig, outDir, locale, }: {

package/lib/frontMatter.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../src/plugin-content-blog.d.ts" />
 import type { BlogPostFrontMatter } from '@docusaurus/plugin-content-blog';
 export declare function validateBlogPostFrontMatter(frontMatter: {
     [key: string]: unknown;

package/lib/index.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/// <reference path="../src/plugin-content-blog.d.ts" />
 import type { LoadContext, Plugin } from '@docusaurus/types';
 import type { PluginOptions, BlogContent } from '@docusaurus/plugin-content-blog';
 export default function pluginContentBlog(context: LoadContext, options: PluginOptions): Promise<Plugin<BlogContent>>;

package/lib/index.js

@@ -15,7 +15,7 @@ const blogUtils_1 = require("./blogUtils");
 const footnoteIDFixer_1 = tslib_1.__importDefault(require("./remark/footnoteIDFixer"));
 const translations_1 = require("./translations");
 const feed_1 = require("./feed");
-const props_1 = require("./props");
+const routes_1 = require("./routes");
 async function pluginContentBlog(context, options) {
     const { siteDir, siteConfig, generatedFilesDir, localizationDir, i18n: { currentLocale }, } = context;
     const { onBrokenMarkdownLinks, baseUrl } = siteConfig;
@@ -30,6 +30,9 @@ async function pluginContentBlog(context, options) {
     const pluginId = options.id ?? utils_1.DEFAULT_PLUGIN_ID;
     const pluginDataDirRoot = path_1.default.join(generatedFilesDir, 'docusaurus-plugin-content-blog');
     const dataDir = path_1.default.join(pluginDataDirRoot, pluginId);
+    // TODO Docusaurus v4 breaking change
+    //  module aliasing should be automatic
+    //  we should never find local absolute FS paths in the codegen registry
     const aliasedSource = (source) => `~blog/${(0, utils_1.posixPath)(path_1.default.relative(pluginDataDirRoot, source))}`;
     const authorsMapFilePath = await (0, utils_1.getDataFilePath)({
         filePath: options.authorsMapPath,
@@ -107,143 +110,14 @@ async function pluginContentBlog(context, options) {
                 blogTagsListPath,
             };
         },
-        async contentLoaded({ content: blogContents, actions }) {
-            const { blogListComponent, blogPostComponent, blogTagsListComponent, blogTagsPostsComponent, blogArchiveComponent, routeBasePath, archiveBasePath, blogTitle, } = options;
-            const { addRoute, createData } = actions;
-            const { blogSidebarTitle, blogPosts, blogListPaginated, blogTags, blogTagsListPath, } = blogContents;
-            const listedBlogPosts = blogPosts.filter(blogUtils_1.shouldBeListed);
-            const blogItemsToMetadata = {};
-            const sidebarBlogPosts = options.blogSidebarCount === 'ALL'
-                ? blogPosts
-                : blogPosts.slice(0, options.blogSidebarCount);
-            function blogPostItemsModule(items) {
-                return items.map((postId) => {
-                    const blogPostMetadata = blogItemsToMetadata[postId];
-                    return {
-                        content: {
-                            __import: true,
-                            path: blogPostMetadata.source,
-                            query: {
-                                truncated: true,
-                            },
-                        },
-                    };
-                });
-            }
-            if (archiveBasePath && listedBlogPosts.length) {
-                const archiveUrl = (0, utils_1.normalizeUrl)([
-                    baseUrl,
-                    routeBasePath,
-                    archiveBasePath,
-                ]);
-                // Create a blog archive route
-                const archiveProp = await createData(`${(0, utils_1.docuHash)(archiveUrl)}.json`, JSON.stringify({ blogPosts: listedBlogPosts }, null, 2));
-                addRoute({
-                    path: archiveUrl,
-                    component: blogArchiveComponent,
-                    exact: true,
-                    modules: {
-                        archive: aliasedSource(archiveProp),
-                    },
-                });
-            }
-            // This prop is useful to provide the blog list sidebar
-            const sidebarProp = await createData(
-            // Note that this created data path must be in sync with
-            // metadataPath provided to mdx-loader.
-            `blog-post-list-prop-${pluginId}.json`, JSON.stringify({
-                title: blogSidebarTitle,
-                items: sidebarBlogPosts.map((blogPost) => ({
-                    title: blogPost.metadata.title,
-                    permalink: blogPost.metadata.permalink,
-                    unlisted: blogPost.metadata.unlisted,
-                })),
-            }, null, 2));
-            const blogMetadata = {
-                blogBasePath: (0, utils_1.normalizeUrl)([baseUrl, routeBasePath]),
-                blogTitle,
-            };
-            const blogMetadataPath = await createData(`blogMetadata-${pluginId}.json`, JSON.stringify(blogMetadata, null, 2));
-            function createBlogPostRouteMetadata(blogPostMeta) {
-                return {
-                    sourceFilePath: (0, utils_1.aliasedSitePathToRelativePath)(blogPostMeta.source),
-                    lastUpdatedAt: blogPostMeta.lastUpdatedAt,
-                };
-            }
-            // Create routes for blog entries.
-            await Promise.all(blogPosts.map(async (blogPost) => {
-                const { id, metadata } = blogPost;
-                await createData(
-                // Note that this created data path must be in sync with
-                // metadataPath provided to mdx-loader.
-                `${(0, utils_1.docuHash)(metadata.source)}.json`, JSON.stringify(metadata, null, 2));
-                addRoute({
-                    path: metadata.permalink,
-                    component: blogPostComponent,
-                    exact: true,
-                    modules: {
-                        sidebar: aliasedSource(sidebarProp),
-                        content: metadata.source,
-                    },
-                    metadata: createBlogPostRouteMetadata(metadata),
-                    context: {
-                        blogMetadata: aliasedSource(blogMetadataPath),
-                    },
-                });
-                blogItemsToMetadata[id] = metadata;
-            }));
-            // Create routes for blog's paginated list entries.
-            await Promise.all(blogListPaginated.map(async (listPage) => {
-                const { metadata, items } = listPage;
-                const { permalink } = metadata;
-                const pageMetadataPath = await createData(`${(0, utils_1.docuHash)(permalink)}.json`, JSON.stringify(metadata, null, 2));
-                addRoute({
-                    path: permalink,
-                    component: blogListComponent,
-                    exact: true,
-                    modules: {
-                        sidebar: aliasedSource(sidebarProp),
-                        items: blogPostItemsModule(items),
-                        metadata: aliasedSource(pageMetadataPath),
-                    },
-                });
-            }));
-            // Tags. This is the last part so we early-return if there are no tags.
-            if (Object.keys(blogTags).length === 0) {
-                return;
-            }
-            async function createTagsListPage() {
-                const tagsPropPath = await createData(`${(0, utils_1.docuHash)(`${blogTagsListPath}-tags`)}.json`, JSON.stringify((0, props_1.toTagsProp)({ blogTags }), null, 2));
-                addRoute({
-                    path: blogTagsListPath,
-                    component: blogTagsListComponent,
-                    exact: true,
-                    modules: {
-                        sidebar: aliasedSource(sidebarProp),
-                        tags: aliasedSource(tagsPropPath),
-                    },
-                });
-            }
-            async function createTagPostsListPage(tag) {
-                await Promise.all(tag.pages.map(async (blogPaginated) => {
-                    const { metadata, items } = blogPaginated;
-                    const tagPropPath = await createData(`${(0, utils_1.docuHash)(metadata.permalink)}.json`, JSON.stringify((0, props_1.toTagProp)({ tag, blogTagsListPath }), null, 2));
-                    const listMetadataPath = await createData(`${(0, utils_1.docuHash)(metadata.permalink)}-list.json`, JSON.stringify(metadata, null, 2));
-                    addRoute({
-                        path: metadata.permalink,
-                        component: blogTagsPostsComponent,
-                        exact: true,
-                        modules: {
-                            sidebar: aliasedSource(sidebarProp),
-                            items: blogPostItemsModule(items),
-                            tag: aliasedSource(tagPropPath),
-                            listMetadata: aliasedSource(listMetadataPath),
-                        },
-                    });
-                }));
-            }
-            await createTagsListPage();
-            await Promise.all(Object.values(blogTags).map(createTagPostsListPage));
+        async contentLoaded({ content, actions }) {
+            await (0, routes_1.createAllRoutes)({
+                baseUrl,
+                content,
+                actions,
+                options,
+                aliasedSource,
+            });
         },
         translateContent({ content, translationFiles }) {
             return (0, translations_1.translateContent)(content, translationFiles);

package/lib/options.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/// <reference path="../src/plugin-content-blog.d.ts" />
 import type { PluginOptions, Options } from '@docusaurus/plugin-content-blog';
 import type { OptionValidationContext } from '@docusaurus/types';
 export declare const DEFAULT_OPTIONS: PluginOptions;

package/lib/props.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../src/plugin-content-blog.d.ts" />
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *

package/lib/routes.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../src/plugin-content-blog.d.ts" />
+import type { PluginContentLoadedActions, RouteConfig } from '@docusaurus/types';
+import type { BlogContent, PluginOptions } from '@docusaurus/plugin-content-blog';
+type CreateAllRoutesParam = {
+    baseUrl: string;
+    content: BlogContent;
+    options: PluginOptions;
+    actions: PluginContentLoadedActions;
+    aliasedSource: (str: string) => string;
+};
+export declare function createAllRoutes(param: CreateAllRoutesParam): Promise<void>;
+export declare function buildAllRoutes({ baseUrl, content, actions, options, aliasedSource, }: CreateAllRoutesParam): Promise<RouteConfig[]>;
+export {};

package/lib/routes.js

@@ -0,0 +1,182 @@
+"use strict";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildAllRoutes = exports.createAllRoutes = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("@docusaurus/utils");
+const blogUtils_1 = require("./blogUtils");
+const props_1 = require("./props");
+async function createAllRoutes(param) {
+    const routes = await buildAllRoutes(param);
+    routes.forEach(param.actions.addRoute);
+}
+exports.createAllRoutes = createAllRoutes;
+async function buildAllRoutes({ baseUrl, content, actions, options, aliasedSource, }) {
+    const { blogListComponent, blogPostComponent, blogTagsListComponent, blogTagsPostsComponent, blogArchiveComponent, routeBasePath, archiveBasePath, blogTitle, } = options;
+    const pluginId = options.id;
+    const { createData } = actions;
+    const { blogSidebarTitle, blogPosts, blogListPaginated, blogTags, blogTagsListPath, } = content;
+    const listedBlogPosts = blogPosts.filter(blogUtils_1.shouldBeListed);
+    const blogPostsById = lodash_1.default.keyBy(blogPosts, (post) => post.id);
+    function getBlogPostById(id) {
+        const blogPost = blogPostsById[id];
+        if (!blogPost) {
+            throw new Error(`unexpected, can't find blog post id=${id}`);
+        }
+        return blogPost;
+    }
+    const sidebarBlogPosts = options.blogSidebarCount === 'ALL'
+        ? blogPosts
+        : blogPosts.slice(0, options.blogSidebarCount);
+    async function createSidebarModule() {
+        const sidebar = {
+            title: blogSidebarTitle,
+            items: sidebarBlogPosts.map((blogPost) => ({
+                title: blogPost.metadata.title,
+                permalink: blogPost.metadata.permalink,
+                unlisted: blogPost.metadata.unlisted,
+            })),
+        };
+        const modulePath = await createData(`blog-post-list-prop-${pluginId}.json`, sidebar);
+        return aliasedSource(modulePath);
+    }
+    async function createBlogMetadataModule() {
+        const blogMetadata = {
+            blogBasePath: (0, utils_1.normalizeUrl)([baseUrl, routeBasePath]),
+            blogTitle,
+        };
+        const modulePath = await createData(`blogMetadata-${pluginId}.json`, blogMetadata);
+        return aliasedSource(modulePath);
+    }
+    // TODO we should have a parent blog route,
+    //  and inject blog metadata + sidebar as a parent context
+    //  unfortunately we can't have a parent route for blog yet
+    //  because if both blog/docs are using routeBasePath /,
+    //  React router config rendering doesn't support that well
+    const sidebarModulePath = await createSidebarModule();
+    const blogMetadataModulePath = await createBlogMetadataModule();
+    function blogPostItemsModule(ids) {
+        return ids.map((id) => {
+            return {
+                content: {
+                    __import: true,
+                    path: getBlogPostById(id).metadata.source,
+                    query: {
+                        truncated: true,
+                    },
+                },
+            };
+        });
+    }
+    function createArchiveRoute() {
+        if (archiveBasePath && listedBlogPosts.length) {
+            return [
+                {
+                    path: (0, utils_1.normalizeUrl)([baseUrl, routeBasePath, archiveBasePath]),
+                    component: blogArchiveComponent,
+                    exact: true,
+                    props: {
+                        archive: { blogPosts: listedBlogPosts },
+                    },
+                },
+            ];
+        }
+        return [];
+    }
+    function createBlogPostRouteMetadata(blogPostMeta) {
+        return {
+            sourceFilePath: (0, utils_1.aliasedSitePathToRelativePath)(blogPostMeta.source),
+            lastUpdatedAt: blogPostMeta.lastUpdatedAt,
+        };
+    }
+    await Promise.all(blogPosts.map(async (blogPost) => {
+        const { metadata } = blogPost;
+        await createData(
+        // Note that this created data path must be in sync with
+        // metadataPath provided to mdx-loader.
+        `${(0, utils_1.docuHash)(metadata.source)}.json`, metadata);
+    }));
+    function createBlogPostRoute(blogPost) {
+        return {
+            path: blogPost.metadata.permalink,
+            component: blogPostComponent,
+            exact: true,
+            modules: {
+                sidebar: sidebarModulePath,
+                content: blogPost.metadata.source,
+            },
+            metadata: createBlogPostRouteMetadata(blogPost.metadata),
+            context: {
+                blogMetadata: blogMetadataModulePath,
+            },
+        };
+    }
+    function createBlogPostRoutes() {
+        return blogPosts.map(createBlogPostRoute);
+    }
+    function createBlogPostsPaginatedRoutes() {
+        return blogListPaginated.map((paginated) => {
+            return {
+                path: paginated.metadata.permalink,
+                component: blogListComponent,
+                exact: true,
+                modules: {
+                    sidebar: sidebarModulePath,
+                    items: blogPostItemsModule(paginated.items),
+                },
+                props: {
+                    metadata: paginated.metadata,
+                },
+            };
+        });
+    }
+    function createTagsRoutes() {
+        // Tags. This is the last part so we early-return if there are no tags.
+        if (Object.keys(blogTags).length === 0) {
+            return [];
+        }
+        const tagsListRoute = {
+            path: blogTagsListPath,
+            component: blogTagsListComponent,
+            exact: true,
+            modules: {
+                sidebar: sidebarModulePath,
+            },
+            props: {
+                tags: (0, props_1.toTagsProp)({ blogTags }),
+            },
+        };
+        function createTagPaginatedRoutes(tag) {
+            return tag.pages.map((paginated) => {
+                return {
+                    path: paginated.metadata.permalink,
+                    component: blogTagsPostsComponent,
+                    exact: true,
+                    modules: {
+                        sidebar: sidebarModulePath,
+                        items: blogPostItemsModule(paginated.items),
+                    },
+                    props: {
+                        tag: (0, props_1.toTagProp)({ tag, blogTagsListPath }),
+                        listMetadata: paginated.metadata,
+                    },
+                };
+            });
+        }
+        const tagsPaginatedRoutes = Object.values(blogTags).flatMap(createTagPaginatedRoutes);
+        return [tagsListRoute, ...tagsPaginatedRoutes];
+    }
+    return [
+        ...createBlogPostRoutes(),
+        ...createBlogPostsPaginatedRoutes(),
+        ...createTagsRoutes(),
+        ...createArchiveRoute(),
+    ];
+}
+exports.buildAllRoutes = buildAllRoutes;

package/lib/translations.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/// <reference path="../src/plugin-content-blog.d.ts" />
 import type { TranslationFile } from '@docusaurus/types';
 import type { PluginOptions, BlogContent } from '@docusaurus/plugin-content-blog';
 export declare function getTranslationFiles(options: PluginOptions): TranslationFile[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/plugin-content-blog",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Blog plugin for Docusaurus.",
   "main": "lib/index.js",
   "types": "src/plugin-content-blog.d.ts",
@@ -31,13 +31,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "3.2.1",
-    "@docusaurus/logger": "3.2.1",
-    "@docusaurus/mdx-loader": "3.2.1",
-    "@docusaurus/types": "3.2.1",
-    "@docusaurus/utils": "3.2.1",
-    "@docusaurus/utils-common": "3.2.1",
-    "@docusaurus/utils-validation": "3.2.1",
+    "@docusaurus/core": "3.3.0",
+    "@docusaurus/logger": "3.3.0",
+    "@docusaurus/mdx-loader": "3.3.0",
+    "@docusaurus/types": "3.3.0",
+    "@docusaurus/utils": "3.3.0",
+    "@docusaurus/utils-common": "3.3.0",
+    "@docusaurus/utils-validation": "3.3.0",
     "cheerio": "^1.0.0-rc.12",
     "feed": "^4.2.2",
     "fs-extra": "^11.1.1",
@@ -59,5 +59,5 @@
   "devDependencies": {
     "@total-typescript/shoehorn": "^0.1.2"
   },
-  "gitHead": "f268e15264e208e6faf26117258162e988b53773"
+  "gitHead": "2ec4e078b5ca0c57f2cc04f2fe564d524bb5e858"
 }

package/src/index.ts

@@ -11,7 +11,6 @@ import {
   normalizeUrl,
   docuHash,
   aliasedSitePath,
-  aliasedSitePathToRelativePath,
   getPluginI18nPath,
   posixPath,
   addTrailingPathSeparator,
@@ -32,24 +31,17 @@ import footnoteIDFixer from './remark/footnoteIDFixer';
 import {translateContent, getTranslationFiles} from './translations';
 import {createBlogFeedFiles} from './feed';
 
-import {toTagProp, toTagsProp} from './props';
+import {createAllRoutes} from './routes';
 import type {BlogContentPaths, BlogMarkdownLoaderOptions} from './types';
-import type {
-  LoadContext,
-  Plugin,
-  HtmlTags,
-  RouteMetadata,
-} from '@docusaurus/types';
+import type {LoadContext, Plugin, HtmlTags} from '@docusaurus/types';
 import type {
   PluginOptions,
   BlogPostFrontMatter,
   BlogPostMetadata,
   Assets,
-  BlogTag,
   BlogTags,
   BlogContent,
   BlogPaginated,
-  BlogMetadata,
 } from '@docusaurus/plugin-content-blog';
 
 export default async function pluginContentBlog(
@@ -80,6 +72,9 @@ export default async function pluginContentBlog(
     'docusaurus-plugin-content-blog',
   );
   const dataDir = path.join(pluginDataDirRoot, pluginId);
+  // TODO Docusaurus v4 breaking change
+  //  module aliasing should be automatic
+  //  we should never find local absolute FS paths in the codegen registry
   const aliasedSource = (source: string) =>
     `~blog/${posixPath(path.relative(pluginDataDirRoot, source))}`;
 
@@ -185,213 +180,14 @@ export default async function pluginContentBlog(
       };
     },
 
-    async contentLoaded({content: blogContents, actions}) {
-      const {
-        blogListComponent,
-        blogPostComponent,
-        blogTagsListComponent,
-        blogTagsPostsComponent,
-        blogArchiveComponent,
-        routeBasePath,
-        archiveBasePath,
-        blogTitle,
-      } = options;
-
-      const {addRoute, createData} = actions;
-      const {
-        blogSidebarTitle,
-        blogPosts,
-        blogListPaginated,
-        blogTags,
-        blogTagsListPath,
-      } = blogContents;
-
-      const listedBlogPosts = blogPosts.filter(shouldBeListed);
-
-      const blogItemsToMetadata: {[postId: string]: BlogPostMetadata} = {};
-
-      const sidebarBlogPosts =
-        options.blogSidebarCount === 'ALL'
-          ? blogPosts
-          : blogPosts.slice(0, options.blogSidebarCount);
-
-      function blogPostItemsModule(items: string[]) {
-        return items.map((postId) => {
-          const blogPostMetadata = blogItemsToMetadata[postId]!;
-          return {
-            content: {
-              __import: true,
-              path: blogPostMetadata.source,
-              query: {
-                truncated: true,
-              },
-            },
-          };
-        });
-      }
-
-      if (archiveBasePath && listedBlogPosts.length) {
-        const archiveUrl = normalizeUrl([
-          baseUrl,
-          routeBasePath,
-          archiveBasePath,
-        ]);
-        // Create a blog archive route
-        const archiveProp = await createData(
-          `${docuHash(archiveUrl)}.json`,
-          JSON.stringify({blogPosts: listedBlogPosts}, null, 2),
-        );
-        addRoute({
-          path: archiveUrl,
-          component: blogArchiveComponent,
-          exact: true,
-          modules: {
-            archive: aliasedSource(archiveProp),
-          },
-        });
-      }
-
-      // This prop is useful to provide the blog list sidebar
-      const sidebarProp = await createData(
-        // Note that this created data path must be in sync with
-        // metadataPath provided to mdx-loader.
-        `blog-post-list-prop-${pluginId}.json`,
-        JSON.stringify(
-          {
-            title: blogSidebarTitle,
-            items: sidebarBlogPosts.map((blogPost) => ({
-              title: blogPost.metadata.title,
-              permalink: blogPost.metadata.permalink,
-              unlisted: blogPost.metadata.unlisted,
-            })),
-          },
-          null,
-          2,
-        ),
-      );
-
-      const blogMetadata: BlogMetadata = {
-        blogBasePath: normalizeUrl([baseUrl, routeBasePath]),
-        blogTitle,
-      };
-      const blogMetadataPath = await createData(
-        `blogMetadata-${pluginId}.json`,
-        JSON.stringify(blogMetadata, null, 2),
-      );
-
-      function createBlogPostRouteMetadata(
-        blogPostMeta: BlogPostMetadata,
-      ): RouteMetadata {
-        return {
-          sourceFilePath: aliasedSitePathToRelativePath(blogPostMeta.source),
-          lastUpdatedAt: blogPostMeta.lastUpdatedAt,
-        };
-      }
-
-      // Create routes for blog entries.
-      await Promise.all(
-        blogPosts.map(async (blogPost) => {
-          const {id, metadata} = blogPost;
-          await createData(
-            // Note that this created data path must be in sync with
-            // metadataPath provided to mdx-loader.
-            `${docuHash(metadata.source)}.json`,
-            JSON.stringify(metadata, null, 2),
-          );
-
-          addRoute({
-            path: metadata.permalink,
-            component: blogPostComponent,
-            exact: true,
-            modules: {
-              sidebar: aliasedSource(sidebarProp),
-              content: metadata.source,
-            },
-            metadata: createBlogPostRouteMetadata(metadata),
-            context: {
-              blogMetadata: aliasedSource(blogMetadataPath),
-            },
-          });
-
-          blogItemsToMetadata[id] = metadata;
-        }),
-      );
-
-      // Create routes for blog's paginated list entries.
-      await Promise.all(
-        blogListPaginated.map(async (listPage) => {
-          const {metadata, items} = listPage;
-          const {permalink} = metadata;
-          const pageMetadataPath = await createData(
-            `${docuHash(permalink)}.json`,
-            JSON.stringify(metadata, null, 2),
-          );
-
-          addRoute({
-            path: permalink,
-            component: blogListComponent,
-            exact: true,
-            modules: {
-              sidebar: aliasedSource(sidebarProp),
-              items: blogPostItemsModule(items),
-              metadata: aliasedSource(pageMetadataPath),
-            },
-          });
-        }),
-      );
-
-      // Tags. This is the last part so we early-return if there are no tags.
-      if (Object.keys(blogTags).length === 0) {
-        return;
-      }
-
-      async function createTagsListPage() {
-        const tagsPropPath = await createData(
-          `${docuHash(`${blogTagsListPath}-tags`)}.json`,
-          JSON.stringify(toTagsProp({blogTags}), 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 tagPropPath = await createData(
-              `${docuHash(metadata.permalink)}.json`,
-              JSON.stringify(toTagProp({tag, blogTagsListPath}), null, 2),
-            );
-
-            const listMetadataPath = await createData(
-              `${docuHash(metadata.permalink)}-list.json`,
-              JSON.stringify(metadata, null, 2),
-            );
-
-            addRoute({
-              path: metadata.permalink,
-              component: blogTagsPostsComponent,
-              exact: true,
-              modules: {
-                sidebar: aliasedSource(sidebarProp),
-                items: blogPostItemsModule(items),
-                tag: aliasedSource(tagPropPath),
-                listMetadata: aliasedSource(listMetadataPath),
-              },
-            });
-          }),
-        );
-      }
-
-      await createTagsListPage();
-      await Promise.all(Object.values(blogTags).map(createTagPostsListPage));
+    async contentLoaded({content, actions}) {
+      await createAllRoutes({
+        baseUrl,
+        content,
+        actions,
+        options,
+        aliasedSource,
+      });
     },
 
     translateContent({content, translationFiles}) {

package/src/routes.ts

@@ -0,0 +1,263 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import _ from 'lodash';
+import {
+  normalizeUrl,
+  docuHash,
+  aliasedSitePathToRelativePath,
+} from '@docusaurus/utils';
+import {shouldBeListed} from './blogUtils';
+
+import {toTagProp, toTagsProp} from './props';
+import type {
+  PluginContentLoadedActions,
+  RouteConfig,
+  RouteMetadata,
+} from '@docusaurus/types';
+import type {
+  BlogPostMetadata,
+  BlogTag,
+  BlogMetadata,
+  BlogContent,
+  PluginOptions,
+  BlogPost,
+  BlogSidebar,
+} from '@docusaurus/plugin-content-blog';
+
+type CreateAllRoutesParam = {
+  baseUrl: string;
+  content: BlogContent;
+  options: PluginOptions;
+  actions: PluginContentLoadedActions;
+  aliasedSource: (str: string) => string;
+};
+
+export async function createAllRoutes(
+  param: CreateAllRoutesParam,
+): Promise<void> {
+  const routes = await buildAllRoutes(param);
+  routes.forEach(param.actions.addRoute);
+}
+
+export async function buildAllRoutes({
+  baseUrl,
+  content,
+  actions,
+  options,
+  aliasedSource,
+}: CreateAllRoutesParam): Promise<RouteConfig[]> {
+  const {
+    blogListComponent,
+    blogPostComponent,
+    blogTagsListComponent,
+    blogTagsPostsComponent,
+    blogArchiveComponent,
+    routeBasePath,
+    archiveBasePath,
+    blogTitle,
+  } = options;
+  const pluginId = options.id!;
+  const {createData} = actions;
+  const {
+    blogSidebarTitle,
+    blogPosts,
+    blogListPaginated,
+    blogTags,
+    blogTagsListPath,
+  } = content;
+
+  const listedBlogPosts = blogPosts.filter(shouldBeListed);
+
+  const blogPostsById = _.keyBy(blogPosts, (post) => post.id);
+  function getBlogPostById(id: string): BlogPost {
+    const blogPost = blogPostsById[id];
+    if (!blogPost) {
+      throw new Error(`unexpected, can't find blog post id=${id}`);
+    }
+    return blogPost;
+  }
+
+  const sidebarBlogPosts =
+    options.blogSidebarCount === 'ALL'
+      ? blogPosts
+      : blogPosts.slice(0, options.blogSidebarCount);
+
+  async function createSidebarModule() {
+    const sidebar: BlogSidebar = {
+      title: blogSidebarTitle,
+      items: sidebarBlogPosts.map((blogPost) => ({
+        title: blogPost.metadata.title,
+        permalink: blogPost.metadata.permalink,
+        unlisted: blogPost.metadata.unlisted,
+      })),
+    };
+    const modulePath = await createData(
+      `blog-post-list-prop-${pluginId}.json`,
+      sidebar,
+    );
+    return aliasedSource(modulePath);
+  }
+
+  async function createBlogMetadataModule() {
+    const blogMetadata: BlogMetadata = {
+      blogBasePath: normalizeUrl([baseUrl, routeBasePath]),
+      blogTitle,
+    };
+    const modulePath = await createData(
+      `blogMetadata-${pluginId}.json`,
+      blogMetadata,
+    );
+    return aliasedSource(modulePath);
+  }
+
+  // TODO we should have a parent blog route,
+  //  and inject blog metadata + sidebar as a parent context
+  //  unfortunately we can't have a parent route for blog yet
+  //  because if both blog/docs are using routeBasePath /,
+  //  React router config rendering doesn't support that well
+  const sidebarModulePath = await createSidebarModule();
+  const blogMetadataModulePath = await createBlogMetadataModule();
+
+  function blogPostItemsModule(ids: string[]) {
+    return ids.map((id) => {
+      return {
+        content: {
+          __import: true,
+          path: getBlogPostById(id).metadata.source,
+          query: {
+            truncated: true,
+          },
+        },
+      };
+    });
+  }
+
+  function createArchiveRoute(): RouteConfig[] {
+    if (archiveBasePath && listedBlogPosts.length) {
+      return [
+        {
+          path: normalizeUrl([baseUrl, routeBasePath, archiveBasePath]),
+          component: blogArchiveComponent,
+          exact: true,
+          props: {
+            archive: {blogPosts: listedBlogPosts},
+          },
+        },
+      ];
+    }
+    return [];
+  }
+
+  function createBlogPostRouteMetadata(
+    blogPostMeta: BlogPostMetadata,
+  ): RouteMetadata {
+    return {
+      sourceFilePath: aliasedSitePathToRelativePath(blogPostMeta.source),
+      lastUpdatedAt: blogPostMeta.lastUpdatedAt,
+    };
+  }
+
+  await Promise.all(
+    blogPosts.map(async (blogPost) => {
+      const {metadata} = blogPost;
+      await createData(
+        // Note that this created data path must be in sync with
+        // metadataPath provided to mdx-loader.
+        `${docuHash(metadata.source)}.json`,
+        metadata,
+      );
+    }),
+  );
+
+  function createBlogPostRoute(blogPost: BlogPost): RouteConfig {
+    return {
+      path: blogPost.metadata.permalink,
+      component: blogPostComponent,
+      exact: true,
+      modules: {
+        sidebar: sidebarModulePath,
+        content: blogPost.metadata.source,
+      },
+      metadata: createBlogPostRouteMetadata(blogPost.metadata),
+      context: {
+        blogMetadata: blogMetadataModulePath,
+      },
+    };
+  }
+
+  function createBlogPostRoutes(): RouteConfig[] {
+    return blogPosts.map(createBlogPostRoute);
+  }
+
+  function createBlogPostsPaginatedRoutes(): RouteConfig[] {
+    return blogListPaginated.map((paginated) => {
+      return {
+        path: paginated.metadata.permalink,
+        component: blogListComponent,
+        exact: true,
+        modules: {
+          sidebar: sidebarModulePath,
+          items: blogPostItemsModule(paginated.items),
+        },
+        props: {
+          metadata: paginated.metadata,
+        },
+      };
+    });
+  }
+
+  function createTagsRoutes(): RouteConfig[] {
+    // Tags. This is the last part so we early-return if there are no tags.
+    if (Object.keys(blogTags).length === 0) {
+      return [];
+    }
+
+    const tagsListRoute: RouteConfig = {
+      path: blogTagsListPath,
+      component: blogTagsListComponent,
+      exact: true,
+      modules: {
+        sidebar: sidebarModulePath,
+      },
+      props: {
+        tags: toTagsProp({blogTags}),
+      },
+    };
+
+    function createTagPaginatedRoutes(tag: BlogTag): RouteConfig[] {
+      return tag.pages.map((paginated) => {
+        return {
+          path: paginated.metadata.permalink,
+          component: blogTagsPostsComponent,
+          exact: true,
+          modules: {
+            sidebar: sidebarModulePath,
+            items: blogPostItemsModule(paginated.items),
+          },
+          props: {
+            tag: toTagProp({tag, blogTagsListPath}),
+            listMetadata: paginated.metadata,
+          },
+        };
+      });
+    }
+
+    const tagsPaginatedRoutes: RouteConfig[] = Object.values(blogTags).flatMap(
+      createTagPaginatedRoutes,
+    );
+
+    return [tagsListRoute, ...tagsPaginatedRoutes];
+  }
+
+  return [
+    ...createBlogPostRoutes(),
+    ...createBlogPostsPaginatedRoutes(),
+    ...createTagsRoutes(),
+    ...createArchiveRoute(),
+  ];
+}