feat(v2): add option for blog meta title #3571

* feat(blog-meta-title): add support for additional meta title * retrocompatible blog title Co-authored-by: slorber <lorber.sebastien@gmail.com>
facebook · Oct 12, 2020 · d151077 · d151077
1 parent 2e51034
commit d151077
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 6 deletions.
diff --git a/packages/docusaurus-plugin-content-blog/index.d.ts b/packages/docusaurus-plugin-content-blog/index.d.ts
@@ -65,6 +65,7 @@ declare module '@theme/BlogListPage' {
   };
 
   export type Metadata = {
+    readonly blogTitle: string;
     readonly blogDescription: string;
     readonly nextPage?: string;
     readonly page: number;

diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts
@@ -140,6 +140,7 @@ export default function pluginContentBlog(
                 ? blogPaginationPermalink(page + 1)
                 : null,
             blogDescription: options.blogDescription,
+            blogTitle: options.blogTitle,
           },
           items: blogPosts
             .slice(page * postsPerPage, (page + 1) * postsPerPage)

diff --git a/packages/docusaurus-plugin-content-blog/src/pluginOptionSchema.ts b/packages/docusaurus-plugin-content-blog/src/pluginOptionSchema.ts
@@ -27,6 +27,7 @@ export const DEFAULT_OPTIONS = {
   blogPostComponent: '@theme/BlogPostPage',
   blogListComponent: '@theme/BlogListPage',
   blogDescription: 'Blog',
+  blogTitle: 'Blog',
   postsPerPage: 10,
   include: ['*.md', '*.mdx'],
   routeBasePath: 'blog',
@@ -52,6 +53,7 @@ export const PluginOptionSchema = Joi.object({
   blogTagsPostsComponent: Joi.string().default(
     DEFAULT_OPTIONS.blogTagsPostsComponent,
   ),
+  blogTitle: Joi.string().allow('').default(DEFAULT_OPTIONS.blogTitle),
   blogDescription: Joi.string()
     .allow('')
     .default(DEFAULT_OPTIONS.blogDescription),

diff --git a/packages/docusaurus-plugin-content-blog/src/types.ts b/packages/docusaurus-plugin-content-blog/src/types.ts
@@ -29,6 +29,7 @@ export interface PluginOptions {
   blogPostComponent: string;
   blogTagsListComponent: string;
   blogTagsPostsComponent: string;
+  blogTitle: string;
   blogDescription: string;
   remarkPlugins: ([Function, object] | Function)[];
   beforeDefaultRehypePlugins: ([Function, object] | Function)[];
@@ -70,6 +71,7 @@ export interface BlogPaginatedMetadata {
   totalCount: number;
   previousPage: string | null;
   nextPage: string | null;
+  blogTitle: string;
   blogDescription: string;
 }
 

diff --git a/packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.tsx b/packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.tsx
@@ -17,11 +17,12 @@ function BlogListPage(props: Props): JSX.Element {
   const {
     siteConfig: {title: siteTitle},
   } = useDocusaurusContext();
-  const isBlogOnlyMode = metadata.permalink === '/';
-  const title = isBlogOnlyMode ? siteTitle : 'Blog';
+  const {blogDescription, blogTitle, permalink} = metadata;
+  const isBlogOnlyMode = permalink === '/';
+  const title = isBlogOnlyMode ? siteTitle : blogTitle;
 
   return (
-    <Layout title={title} description="Blog">
+    <Layout title={title} description={blogDescription}>
       <div className="container-fluid mt-4">
         <div className="row row-cols-1 row-cols-sm-1">
           {items.map(({content: BlogPostContent}) => (

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
@@ -18,9 +18,9 @@ function BlogListPage(props: Props): JSX.Element {
   const {
     siteConfig: {title: siteTitle},
   } = useDocusaurusContext();
-  const isBlogOnlyMode = metadata.permalink === '/';
-  const title = isBlogOnlyMode ? siteTitle : 'Blog';
-  const {blogDescription} = metadata;
+  const {blogDescription, blogTitle, permalink} = metadata;
+  const isBlogOnlyMode = permalink === '/';
+  const title = isBlogOnlyMode ? siteTitle : blogTitle;
   return (
     <Layout title={title} description={blogDescription}>
       <div className="container margin-vert--lg">

diff --git a/website/docs/blog.md b/website/docs/blog.md
@@ -175,6 +175,7 @@ module.exports = {
       '@docusaurus/preset-classic',
       {
         blog: {
+          blogTitle: 'Docusaurus blog!',
           blogDescription: 'A docusaurus powered blog!',
         },
       },

diff --git a/website/docs/using-plugins.md b/website/docs/using-plugins.md
@@ -200,6 +200,10 @@ module.exports = {
          */
         editUrl:
           'https://github.com/facebook/docusaurus/edit/master/website/blog/',
+        /**
+         * Blog page title for better SEO
+         */
+        blogTitle: 'Blog title',
         /**
          * Blog page meta description for better SEO
          */