feat(v2): blog sidebar (#3593)

* blog sidebar POC

* polish blog post sidebar

* add doc for blogSidebarCount

* Update packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
This commit is contained in:
Sébastien Lorber 2020-10-16 19:12:05 +02:00 committed by GitHub
parent da6268911c
commit e4c1626106
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 226 additions and 14 deletions

View file

@ -6,7 +6,6 @@
*/
import fs from 'fs-extra';
import kebabCase from 'lodash.kebabcase';
import path from 'path';
import admonitions from 'remark-admonitions';
import {normalizeUrl, docuHash, aliasedSitePath} from '@docusaurus/utils';
@ -15,6 +14,7 @@ import {
DEFAULT_PLUGIN_ID,
} from '@docusaurus/core/lib/constants';
import {ValidationError} from '@hapi/joi';
import {take, kebabCase} from 'lodash';
import {
PluginOptions,
@ -50,12 +50,13 @@ export default function pluginContentBlog(
const {siteDir, generatedFilesDir} = context;
const contentPath = path.resolve(siteDir, options.path);
const pluginId = options.id ?? DEFAULT_PLUGIN_ID;
const pluginDataDirRoot = path.join(
generatedFilesDir,
'docusaurus-plugin-content-blog',
);
const dataDir = path.join(pluginDataDirRoot, options.id ?? DEFAULT_PLUGIN_ID);
const dataDir = path.join(pluginDataDirRoot, pluginId);
const aliasedSource = (source: string) =>
`~blog/${path.relative(pluginDataDirRoot, source)}`;
@ -217,6 +218,29 @@ export default function pluginContentBlog(
const blogItemsToMetadata: BlogItemsToMetadata = {};
const sidebarBlogPosts =
options.blogSidebarCount === 'ALL'
? blogPosts
: take(blogPosts, options.blogSidebarCount);
// 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: options.blogSidebarTitle,
items: sidebarBlogPosts.map((blogPost) => ({
title: blogPost.metadata.title,
permalink: blogPost.metadata.permalink,
})),
},
null,
2,
),
);
// Create routes for blog entries.
await Promise.all(
loadedBlogPosts.map(async (blogPost) => {
@ -233,6 +257,7 @@ export default function pluginContentBlog(
component: blogPostComponent,
exact: true,
modules: {
sidebar: sidebarProp,
content: metadata.source,
},
});
@ -256,6 +281,7 @@ export default function pluginContentBlog(
component: blogListComponent,
exact: true,
modules: {
sidebar: sidebarProp,
items: items.map((postID) => {
// To tell routes.js this is an import and not a nested object to recurse.
return {
@ -303,6 +329,7 @@ export default function pluginContentBlog(
component: blogTagsPostsComponent,
exact: true,
modules: {
sidebar: sidebarProp,
items: items.map((postID) => {
const metadata = blogItemsToMetadata[postID];
return {
@ -333,6 +360,7 @@ export default function pluginContentBlog(
component: blogTagsListComponent,
exact: true,
modules: {
sidebar: sidebarProp,
tags: aliasedSource(tagsListPath),
},
});