feat: adds blog archive route (#5428)

* [feature] adds blog archive route

* Update plugin-content-blog.md

* fix TS issues + minor refactors

* remove useless css

* add translation apis

* add missing translations

Co-authored-by: slorber <lorber.sebastien@gmail.com>

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

@@ -225,6 +225,8 @@ export default function pluginContentBlog(
         blogPostComponent,
         blogTagsListComponent,
         blogTagsPostsComponent,
+        routeBasePath,
+        archiveBasePath,
       } = options;
 
       const {addRoute, createData} = actions;
@@ -243,6 +245,26 @@ export default function pluginContentBlog(
           ? blogPosts
           : take(blogPosts, options.blogSidebarCount);
 
+      const archiveUrl = normalizeUrl([
+        baseUrl,
+        routeBasePath,
+        archiveBasePath,
+      ]);
+
+      // creates a blog archive route
+      const archiveProp = await createData(
+        `${docuHash(archiveUrl)}.json`,
+        JSON.stringify({blogPosts}, null, 2),
+      );
+      addRoute({
+        path: archiveUrl,
+        component: '@theme/BlogArchivePage',
+        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

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

@@ -70,10 +70,6 @@ declare module '@theme/BlogListPage' {
   import type {Content} from '@theme/BlogPostPage';
   import type {BlogSidebar} from '@theme/BlogSidebar';
 
-  export type Item = {
-    readonly content: () => JSX.Element;
-  };
-
   export type Metadata = {
     readonly blogTitle: string;
     readonly blogDescription: string;
@@ -130,3 +126,17 @@ declare module '@theme/BlogTagsPostsPage' {
   const BlogTagsPostsPage: (props: Props) => JSX.Element;
   export default BlogTagsPostsPage;
 }
+
+declare module '@theme/BlogArchivePage' {
+  import type {Content} from '@theme/BlogPostPage';
+
+  export type ArchiveBlogPost = Content;
+
+  export type Props = {
+    readonly archive: {
+      blogPosts: readonly ArchiveBlogPost[];
+    };
+  };
+
+  export default function BlogArchivePage(props: Props): JSX.Element;
+}

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

@@ -36,6 +36,7 @@ export const DEFAULT_OPTIONS: PluginOptions = {
   include: ['**/*.{md,mdx}'],
   exclude: GlobExcludeDefault,
   routeBasePath: 'blog',
+  archiveBasePath: 'archive',
   path: 'blog',
   editLocalizedFiles: false,
   authorsMapPath: 'authors.yml',
@@ -43,6 +44,7 @@ export const DEFAULT_OPTIONS: PluginOptions = {
 
 export const PluginOptionSchema = Joi.object<PluginOptions>({
   path: Joi.string().default(DEFAULT_OPTIONS.path),
+  archiveBasePath: Joi.string().default(DEFAULT_OPTIONS.archiveBasePath),
   routeBasePath: Joi.string()
     // '' not allowed, see https://github.com/facebook/docusaurus/issues/3374
     // .allow('')

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

@@ -35,6 +35,7 @@ export interface PluginOptions extends RemarkAndRehypePluginOptions {
   id?: string;
   path: string;
   routeBasePath: string;
+  archiveBasePath: string;
   include: string[];
   exclude: string[];
   postsPerPage: number | 'ALL';