refactor(v2): convert blog page to be added to routes by plugin lifecycle

v2/lib/load/routes.js

@@ -11,16 +11,14 @@ async function genRoutesConfig({
   siteConfig = {},
   docsMetadatas = {},
   pagesMetadatas = [],
-  contentsStore = {},
   pluginRouteConfigs = [],
 }) {
-  const modules = [
+  const imports = [
     `import React from 'react';`,
     `import Loadable from 'react-loadable';`,
     `import Loading from '@theme/Loading';`,
     `import Doc from '@theme/Doc';`,
     `import DocBody from '@theme/DocBody';`,
-    `import BlogPage from '@theme/BlogPage';`,
     `import Pages from '@theme/Pages';`,
     `import NotFound from '@theme/NotFound';`,
   ];
@@ -34,7 +32,7 @@ async function genRoutesConfig({
   path: '${permalink}',
   exact: true,
   component: Loadable({
-    loader: () => import(/* webpackPrefetch: true */ '${source}'),
+    loader: () => import('${source}'),
     loading: Loading,
     render(loaded, props) {
       let Content = loaded.default;
@@ -66,7 +64,7 @@ async function genRoutesConfig({
   path: '${permalink}',
   exact: true,
   component: Loadable({
-    loader: () => import(/* webpackPrefetch: true */ '${source}'),
+    loader: () => import('${source}'),
     loading: Loading,
     render(loaded, props) {
       let Content = loaded.default;
@@ -80,40 +78,6 @@ async function genRoutesConfig({
 }`;
   }
 
-  // Blog.
-  function genBlogPageRoute(metadata) {
-    const {permalink} = metadata;
-    const {posts} = metadata;
-    return `
-{
-  path: '${permalink}',
-  exact: true,
-  component: Loadable.Map({
-    loader: {
-      ${posts
-        .map(
-          (post, index) =>
-            `post${index}: () => import(/* webpackPrefetch: true */ '${
-              post.source
-            }')`,
-        )
-        .join(',\n\t\t\t\t')}
-    },
-    loading: Loading,
-    render(loaded, props) {
-      ${posts
-        .map((p, i) => `const Post${i} = loaded.post${i}.default;`)
-        .join('\n\t\t\t\t')}
-      return (
-        <BlogPage {...props} metadata={${JSON.stringify(metadata)}} >
-          ${posts.map((p, i) => `<Post${i} />`).join(' ')}
-        </BlogPage>
-      )
-    }
-  })
-}`;
-  }
-
   const notFoundRoute = `
 {
   path: '*',
@@ -121,47 +85,46 @@ async function genRoutesConfig({
 }`;
 
   const routes = pluginRouteConfigs.map(pluginRouteConfig => {
-    const {path, component, metadata, content} = pluginRouteConfig;
+    const {path, component, metadata, modules} = pluginRouteConfig;
     return `
 {
   path: '${path}',
   exact: true,
   component: Loadable.Map({
     loader: {
-      Content: () => import('${content}'),
+${modules
+      .map(
+        (module, index) => `      Module${index}: () => import('${module}'),`,
+      )
+      .join('\n')}
       Component: () => import('${component}'),
     },
     loading: Loading,
     render(loaded, props) {
-      const Content = loaded.Content.default;
       const Component = loaded.Component.default;
+      const modules = [
+${modules
+      .map((module, index) => `        loaded.Module${index}.default,`)
+      .join('\n')}
+      ];
       return (
-        <Component {...props} metadata={${JSON.stringify(metadata)}}>
-          <Content />
-        </Component>
-      )
+        <Component {...props} metadata={${JSON.stringify(
+          metadata,
+        )}} modules={modules}/>
+      );
     }
   })
 }`;
   });
 
   return `
-${modules.join('\n')}
+${imports.join('\n')}
 
 const routes = [
 // Docs.${pagesMetadatas.map(genPagesRoute).join(',')},
 
 // Pages.${docsRoutes},
 
-// Blog.${
-    contentsStore.blog
-      ? contentsStore.blog.contents
-          .filter(metadata => metadata.isBlogPage)
-          .map(genBlogPageRoute)
-          .join(',')
-      : ''
-  },
-
 // Plugins.${routes.join(',')},
 
 // Not Found.${notFoundRoute},

v2/lib/theme/BlogPage/index.js

@@ -9,7 +9,6 @@ import React, {useContext} from 'react';
 import Link from '@docusaurus/Link';
 import Head from '@docusaurus/Head';
 import Layout from '@theme/Layout'; // eslint-disable-line
-import BlogPost from '@theme/BlogPost'; // eslint-disable-line
 
 import DocusaurusContext from '@docusaurus/context';
 
@@ -17,6 +16,7 @@ function BlogPage(props) {
   const context = useContext(DocusaurusContext);
   const {blogMetadata, language, siteConfig = {}} = context;
   const {baseUrl, favicon} = siteConfig;
+  const {modules: BlogPosts} = props;
 
   return (
     <Layout>
@@ -34,7 +34,9 @@ function BlogPage(props) {
             </li>
           ))}
         </ul>
-        {props.children}
+        {BlogPosts.map(BlogPost => (
+          <BlogPost />
+        ))}
       </div>
     </Layout>
   );

v2/lib/theme/BlogPost/index.js

@@ -88,6 +88,9 @@ class BlogPost extends React.Component {
     const {metadata = {}, siteConfig = {}} = this.context;
     const {baseUrl, favicon} = siteConfig;
     const {language, title} = metadata;
+    const {modules} = this.props;
+    const BlogPostContents = modules[0];
+
     return (
       <Layout>
         <Head defaultTitle={siteConfig.title}>
@@ -96,7 +99,7 @@ class BlogPost extends React.Component {
           {language && <html lang={language} />}
         </Head>
         {this.renderPostHeader()}
-        {this.props.children}
+        <BlogPostContents />
       </Layout>
     );
   }

v2/plugins/docusaurus-content-blog.js

@@ -105,12 +105,17 @@ class DocusaurusContentBlogPlugin {
   }
 
   async generateRoutes({contents, actions}) {
-    const {blogPostComponent} = this.options;
+    const {blogPageComponent, blogPostComponent} = this.options;
     const {addRoute} = actions;
     contents.forEach(metadata => {
-      const {permalink, source} = metadata;
-      if (metadata.isBlogPage) {
-        // TODO: Handle blog page.
+      const {isBlogPage, permalink} = metadata;
+      if (isBlogPage) {
+        addRoute({
+          path: permalink,
+          component: blogPageComponent,
+          metadata,
+          modules: metadata.posts.map(post => post.source),
+        });
         return;
       }
 
@@ -118,7 +123,7 @@ class DocusaurusContentBlogPlugin {
         path: permalink,
         component: blogPostComponent,
         metadata,
-        content: source,
+        modules: [metadata.source],
       });
     });
   }