refactor(v2): increase content area if blog sidebar is off (#5171)

* refactor(v2): increase content area if blog sidebar is off

* Replace render prop with children to simplicity sake

* Revert to previous layout

packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+
+import Layout from '@theme/Layout';
+import BlogSidebar from '@theme/BlogSidebar';
+import TOC from '@theme/TOC';
+
+import type {Props} from '@theme/BlogLayout';
+
+function BlogLayout(props: Props): JSX.Element {
+  const {sidebar, toc, children, ...layoutProps} = props;
+  const hasSidebar = sidebar && sidebar.items.length > 0;
+
+  return (
+    <Layout {...layoutProps}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          {hasSidebar && (
+            <aside className="col col--3">
+              <BlogSidebar sidebar={sidebar!} />
+            </aside>
+          )}
+          <main
+            className={clsx('col', {
+              'col--7': hasSidebar,
+              'col--9 col--offset-1': !hasSidebar,
+            })}>
+            {children}
+          </main>
+          {toc && (
+            <div className="col col--2">
+              <TOC toc={toc} />
+            </div>
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default BlogLayout;

packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx

@@ -8,11 +8,10 @@
 import React from 'react';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
+import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import type {Props} from '@theme/BlogListPage';
-import BlogSidebar from '@theme/BlogSidebar';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 
 function BlogListPage(props: Props): JSX.Element {
@@ -23,8 +22,9 @@ function BlogListPage(props: Props): JSX.Element {
   const {blogDescription, blogTitle, permalink} = metadata;
   const isBlogOnlyMode = permalink === '/';
   const title = isBlogOnlyMode ? siteTitle : blogTitle;
+
   return (
-    <Layout
+    <BlogLayout
       title={title}
       description={blogDescription}
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
@@ -32,27 +32,19 @@ function BlogListPage(props: Props): JSX.Element {
       searchMetadatas={{
         // assign unique search tag to exclude this page from search results!
         tag: 'blog_posts_list',
-      }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <aside className="col col--3">
-            <BlogSidebar sidebar={sidebar} />
-          </aside>
-          <main className="col col--7">
-            {items.map(({content: BlogPostContent}) => (
-              <BlogPostItem
-                key={BlogPostContent.metadata.permalink}
-                frontMatter={BlogPostContent.frontMatter}
-                metadata={BlogPostContent.metadata}
-                truncated={BlogPostContent.metadata.truncated}>
-                <BlogPostContent />
-              </BlogPostItem>
-            ))}
-            <BlogListPaginator metadata={metadata} />
-          </main>
-        </div>
-      </div>
-    </Layout>
+      }}
+      sidebar={sidebar}>
+      {items.map(({content: BlogPostContent}) => (
+        <BlogPostItem
+          key={BlogPostContent.metadata.permalink}
+          frontMatter={BlogPostContent.frontMatter}
+          metadata={BlogPostContent.metadata}
+          truncated={BlogPostContent.metadata.truncated}>
+          <BlogPostContent />
+        </BlogPostItem>
+      ))}
+      <BlogListPaginator metadata={metadata} />
+    </BlogLayout>
   );
 }
 

packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx

@@ -6,12 +6,10 @@
  */
 
 import React from 'react';
-import Layout from '@theme/Layout';
+import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import type {Props} from '@theme/BlogPostPage';
-import BlogSidebar from '@theme/BlogSidebar';
-import TOC from '@theme/TOC';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 
 function BlogPostPage(props: Props): JSX.Element {
@@ -21,37 +19,27 @@ function BlogPostPage(props: Props): JSX.Element {
   const {hide_table_of_contents: hideTableOfContents} = frontMatter;
 
   return (
-    <Layout
+    <BlogLayout
       title={title}
       description={description}
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogPostPage}>
-      {BlogPostContents && (
-        <div className="container margin-vert--lg">
-          <div className="row">
-            <aside className="col col--3">
-              <BlogSidebar sidebar={sidebar} />
-            </aside>
-            <main className="col col--7">
-              <BlogPostItem
-                frontMatter={frontMatter}
-                metadata={metadata}
-                isBlogPostPage>
-                <BlogPostContents />
-              </BlogPostItem>
-              {(nextItem || prevItem) && (
-                <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
-              )}
-            </main>
-            {!hideTableOfContents && BlogPostContents.toc && (
-              <div className="col col--2">
-                <TOC toc={BlogPostContents.toc} />
-              </div>
-            )}
-          </div>
-        </div>
+      pageClassName={ThemeClassNames.page.blogPostPage}
+      sidebar={sidebar}
+      toc={
+        !hideTableOfContents && BlogPostContents.toc
+          ? BlogPostContents.toc
+          : undefined
+      }>
+      <BlogPostItem
+        frontMatter={frontMatter}
+        metadata={metadata}
+        isBlogPostPage>
+        <BlogPostContents />
+      </BlogPostItem>
+      {(nextItem || prevItem) && (
+        <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
       )}
-    </Layout>
+    </BlogLayout>
   );
 }
 

packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx

@@ -7,10 +7,9 @@
 
 import React from 'react';
 
-import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
+import BlogLayout from '@theme/BlogLayout';
 import type {Props} from '@theme/BlogTagsListPage';
-import BlogSidebar from '@theme/BlogSidebar';
 import {translate} from '@docusaurus/Translate';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 
@@ -54,26 +53,18 @@ function BlogTagsListPage(props: Props): JSX.Element {
     .filter((item) => item != null);
 
   return (
-    <Layout
+    <BlogLayout
       title={title}
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
       pageClassName={ThemeClassNames.page.blogTagsListPage}
       searchMetadatas={{
         // assign unique search tag to exclude this page from search results!
         tag: 'blog_tags_list',
-      }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <aside className="col col--3">
-            <BlogSidebar sidebar={sidebar} />
-          </aside>
-          <main className="col col--7">
-            <h1>{title}</h1>
-            <section className="margin-vert--lg">{tagsSection}</section>
-          </main>
-        </div>
-      </div>
-    </Layout>
+      }}
+      sidebar={sidebar}>
+      <h1>{title}</h1>
+      <section className="margin-vert--lg">{tagsSection}</section>
+    </BlogLayout>
   );
 }
 

packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx

@@ -7,11 +7,10 @@
 
 import React from 'react';
 
-import Layout from '@theme/Layout';
-import BlogPostItem from '@theme/BlogPostItem';
 import Link from '@docusaurus/Link';
+import BlogLayout from '@theme/BlogLayout';
+import BlogPostItem from '@theme/BlogPostItem';
 import type {Props} from '@theme/BlogTagsPostsPage';
-import BlogSidebar from '@theme/BlogSidebar';
 import Translate, {translate} from '@docusaurus/Translate';
 import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common';
 
@@ -47,45 +46,37 @@ function BlogTagsPostPage(props: Props): JSX.Element {
   );
 
   return (
-    <Layout
+    <BlogLayout
       title={title}
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
       pageClassName={ThemeClassNames.page.blogTagsPostPage}
       searchMetadatas={{
         // assign unique search tag to exclude this page from search results!
         tag: 'blog_tags_posts',
-      }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <aside className="col col--3">
-            <BlogSidebar sidebar={sidebar} />
-          </aside>
-          <main className="col col--7">
-            <header className="margin-bottom--xl">
-              <h1>{title}</h1>
+      }}
+      sidebar={sidebar}>
+      <header className="margin-bottom--xl">
+        <h1>{title}</h1>
 
-              <Link href={allTagsPath}>
-                <Translate
-                  id="theme.tags.tagsPageLink"
-                  description="The label of the link targeting the tag list page">
-                  View All Tags
-                </Translate>
-              </Link>
-            </header>
+        <Link href={allTagsPath}>
+          <Translate
+            id="theme.tags.tagsPageLink"
+            description="The label of the link targeting the tag list page">
+            View All Tags
+          </Translate>
+        </Link>
+      </header>
 
-            {items.map(({content: BlogPostContent}) => (
-              <BlogPostItem
-                key={BlogPostContent.metadata.permalink}
-                frontMatter={BlogPostContent.frontMatter}
-                metadata={BlogPostContent.metadata}
-                truncated>
-                <BlogPostContent />
-              </BlogPostItem>
-            ))}
-          </main>
-        </div>
-      </div>
-    </Layout>
+      {items.map(({content: BlogPostContent}) => (
+        <BlogPostItem
+          key={BlogPostContent.metadata.permalink}
+          frontMatter={BlogPostContent.frontMatter}
+          metadata={BlogPostContent.metadata}
+          truncated>
+          <BlogPostContent />
+        </BlogPostItem>
+      ))}
+    </BlogLayout>
   );
 }
 

packages/docusaurus-theme-classic/src/types.d.ts

@@ -50,6 +50,20 @@ declare module '@theme/BlogPostPaginator' {
   export default BlogPostPaginator;
 }
 
+declare module '@theme/BlogLayout' {
+  import type {Props as LayoutProps} from '@theme/Layout';
+  import type {BlogSidebar} from '@theme/BlogSidebar';
+  import type {TOCItem} from '@docusaurus/types';
+
+  export type Props = LayoutProps & {
+    readonly sidebar?: BlogSidebar;
+    readonly toc?: readonly TOCItem[];
+  };
+
+  const BlogLayout: (props: Props) => JSX.Element;
+  export default BlogLayout;
+}
+
 declare module '@theme/CodeBlock' {
   export type Props = {
     readonly children: string;