feat(v2): allow additional props to pass to route components

facebook · Mar 6, 2020 · 9464c2f · 9464c2f
1 parent df2c980
commit 9464c2f
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 10 deletions.
diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts
@@ -43,6 +43,7 @@ const DEFAULT_OPTIONS: PluginOptions = {
   remarkPlugins: [],
   rehypePlugins: [],
   truncateMarker: /<!--\s*(truncate)\s*-->/, // Regex.
+  blogSiteDescription: 'Blog',
 };
 
 function assertFeedTypes(val: any): asserts val is FeedType {
@@ -89,7 +90,7 @@ export default function pluginContentBlog(
 
     // Fetches blog contents and returns metadata for the necessary routes.
     async loadContent() {
-      const {postsPerPage, routeBasePath} = options;
+      const {postsPerPage, routeBasePath, blogSiteDescription} = options;
 
       blogPosts = await generateBlogPosts(contentPath, context, options);
       if (!blogPosts.length) {
@@ -150,6 +151,7 @@ export default function pluginContentBlog(
           items: blogPosts
             .slice(page * postsPerPage, (page + 1) * postsPerPage)
             .map(item => item.id),
+          blogSiteDescription,
         });
       }
 
@@ -258,7 +260,7 @@ export default function pluginContentBlog(
       // Create routes for blog's paginated list entries.
       await Promise.all(
         blogListPaginated.map(async listPage => {
-          const {metadata, items} = listPage;
+          const {metadata, items, blogSiteDescription} = listPage;
           const {permalink} = metadata;
           const pageMetadataPath = await createData(
             `${docuHash(permalink)}.json`,
@@ -285,6 +287,9 @@ export default function pluginContentBlog(
               }),
               metadata: aliasedSource(pageMetadataPath),
             },
+            props: {
+              blogSiteDescription,
+            },
           });
         }),
       );

diff --git a/packages/docusaurus-plugin-content-blog/src/types.ts b/packages/docusaurus-plugin-content-blog/src/types.ts
@@ -28,6 +28,7 @@ export interface PluginOptions {
   blogPostComponent: string;
   blogTagsListComponent: string;
   blogTagsPostsComponent: string;
+  blogSiteDescription: string;
   remarkPlugins: string[];
   rehypePlugins: string[];
   truncateMarker: RegExp;
@@ -68,6 +69,7 @@ export interface BlogPaginatedMetadata {
 export interface BlogPaginated {
   metadata: BlogPaginatedMetadata;
   items: string[];
+  blogSiteDescription: string;
 }
 
 export interface MetaData {

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.js b/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.js
@@ -13,15 +13,14 @@ import BlogPostItem from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
 
 function BlogListPage(props) {
-  const {metadata, items} = props;
+  const {metadata, items, blogSiteDescription} = props;
   const {
-    siteConfig: {title: siteTitle, customFields = {}},
+    siteConfig: {title: siteTitle},
   } = useDocusaurusContext();
   const isBlogOnlyMode = metadata.permalink === '/';
   const title = isBlogOnlyMode ? siteTitle : 'Blog';
-
   return (
-    <Layout title={title} description={customFields.description}>
+    <Layout title={title} description={blogSiteDescription}>
       <div className="container margin-vert--xl">
         <div className="row">
           <div className="col col--8 col--offset-2">

diff --git a/packages/docusaurus-types/src/index.d.ts b/packages/docusaurus-types/src/index.d.ts
@@ -149,6 +149,7 @@ export interface RouteConfig {
   routes?: RouteConfig[];
   exact?: boolean;
   priority?: number;
+  props?: object;
 }
 
 export interface ThemeAlias {

diff --git a/packages/docusaurus/src/client/exports/ComponentCreator.js b/packages/docusaurus/src/client/exports/ComponentCreator.js
@@ -12,7 +12,7 @@ import routesChunkNames from '@generated/routesChunkNames';
 import registry from '@generated/registry';
 import flat from '../flat';
 
-function ComponentCreator(path) {
+function ComponentCreator(path, routeProps) {
   // 404 page
   if (path === '*') {
     return Loadable({
@@ -77,7 +77,7 @@ function ComponentCreator(path) {
 
       const Component = loadedModules.component;
       delete loadedModules.component;
-      return <Component {...loadedModules} {...props} />;
+      return <Component {...loadedModules} {...props} {...routeProps} />;
     },
   });
 }

diff --git a/packages/docusaurus/src/server/routes.ts b/packages/docusaurus/src/server/routes.ts
@@ -62,8 +62,8 @@ export async function loadRoutes(
       modules = {},
       routes,
       exact,
+      props,
     } = routeConfig;
-
     if (!_.isString(routePath) || !component) {
       throw new Error(
         `Invalid routeConfig (Path must be a string and component is required) \n${JSON.stringify(
@@ -127,7 +127,9 @@ export async function loadRoutes(
     return `
 {
   path: '${routePath}',
-  component: ComponentCreator('${routePath}'),
+  component: ComponentCreator('${routePath}'${
+      props ? `, ${JSON.stringify(props)}` : ''
+    }),
   ${exactStr}
   ${routesStr}
 }`;

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -51,6 +51,7 @@ module.exports = {
             type: 'all',
             copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
           },
+          blogSiteDescription: 'Test description....',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),