From 9464c2f2d8afdb5ed323375eaba287895ac24e85 Mon Sep 17 00:00:00 2001 From: zxuqian Date: Fri, 6 Mar 2020 15:31:41 +0800 Subject: [PATCH] feat(v2): allow additional props to pass to route components --- packages/docusaurus-plugin-content-blog/src/index.ts | 9 +++++++-- packages/docusaurus-plugin-content-blog/src/types.ts | 2 ++ .../src/theme/BlogListPage/index.js | 7 +++---- packages/docusaurus-types/src/index.d.ts | 1 + .../docusaurus/src/client/exports/ComponentCreator.js | 4 ++-- packages/docusaurus/src/server/routes.ts | 6 ++++-- website/docusaurus.config.js | 1 + 7 files changed, 20 insertions(+), 10 deletions(-) diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts index 0772a6a79b8ac..55046ef860a14 100644 --- 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: //, // 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 index 61b82f03588e8..2cfb23fe97735 100644 --- 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 index 170a014ebffa8..1a0bbfb5a4b1b 100644 --- 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 ( - +
diff --git a/packages/docusaurus-types/src/index.d.ts b/packages/docusaurus-types/src/index.d.ts index 2ee518bf3488f..f54399bb1462d 100644 --- 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 index f67bff8e32dfc..6e596e91afdc3 100644 --- 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 ; + return ; }, }); } diff --git a/packages/docusaurus/src/server/routes.ts b/packages/docusaurus/src/server/routes.ts index 67e00e5797898..27d6f49bb52a0 100644 --- 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 index 880cf8afe0ce7..89e99bbf6dd8b 100644 --- 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'),