Merge branch 'master' into endiliey/editUrl

facebook · Oct 10, 2019 · 89ee3c1 · 89ee3c1
2 parents 0f8d25c + aba9edc
commit 89ee3c1
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 61 deletions.
diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md
@@ -3,10 +3,13 @@
 ## Unreleased
 
 - Docs, pages plugin is rewritten in TypeScript
-- Docs sidebar can now be more than one level deep - theoretically up to infinity, but 3-4 layers is the practical limit
-- Collapsible docs sidebar! This is ideal for projects with a long list of docs
-- Add `editUrl` option (URL for editing) to docs plugin. If this field is set, there will be an "Edit this page" link for each doc page. Example: 'https://github.com/facebook/docusaurus/edit/master/docs'.
-- More documentation...
+- Docs improvements and tweaks
+  - Docs sidebar can now be more than one level deep, theoretically up to infinity
+  - Collapsible docs sidebar!
+  - Make doc page title larger
+  - Add `editUrl` option (URL for editing) to docs plugin. If this field is set, there will be an "Edit this page" link for each doc page. Example: 'https://github.com/facebook/docusaurus/edit/master/docs'.
+- More documentation ...
+- Slight tweaks to the Blog components - blog title is larger now
 
 ## 2.0.0-alpha.25
 

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
@@ -6,11 +6,14 @@
  */
 
 import React from 'react';
+import classnames from 'classnames';
 import {MDXProvider} from '@mdx-js/react';
 
 import Link from '@docusaurus/Link';
 import MDXComponents from '@theme/MDXComponents';
 
+import styles from './styles.module.css';
+
 function BlogPostItem(props) {
   const {children, frontMatter, metadata, truncated} = props;
   const {date, permalink, tags} = metadata;
@@ -41,7 +44,7 @@ function BlogPostItem(props) {
 
     return (
       <header>
-        <h1 className="margin-bottom--xs">
+        <h1 className={classnames('margin-bottom--sm', styles.blogPostTitle)}>
           <Link to={permalink}>{title}</Link>
         </h1>
         <div className="margin-bottom--sm">

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/styles.module.css
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.blogPostTitle {
+  font-size: 3rem;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.js b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.js
@@ -29,7 +29,9 @@ function BlogTagsPostPage(props) {
             <div className="margin-vert--xl">
               {items.map(
                 ({content: BlogPostContent, metadata: blogPostMetadata}) => (
-                  <div key={blogPostMetadata.permalink}>
+                  <div
+                    className="margin-vert--xl"
+                    key={blogPostMetadata.permalink}>
                     <BlogPostItem
                       frontMatter={BlogPostContent.frontMatter}
                       metadata={blogPostMetadata}

diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacyItem/index.js b/packages/docusaurus-theme-classic/src/theme/DocLegacyItem/index.js
@@ -62,45 +62,47 @@ function DocLegacyItem(props) {
         {permalink && <meta property="og:url" content={siteUrl + permalink} />}
       </Head>
       <div className="padding-vert--lg">
-        <div className="row">
-          <div className="col">
-            <div className={styles.docItemContainer}>
-              <header>
-                <h1 className="margin-bottom--lg">{metadata.title}</h1>
-              </header>
-              <article>
-                <div className="markdown">
-                  <DocContent />
-                </div>
-              </article>
-              {editUrl && (
-                <div className="margin-vert--xl">
-                  <div className="row">
-                    <div className="col">
-                      {editUrl && (
-                        <a
-                          href={editUrl}
-                          target="_blank"
-                          rel="noreferrer noopener">
-                          Edit this page
-                        </a>
-                      )}
+        <div className="container">
+          <div className="row">
+            <div className="col">
+              <div className={styles.docItemContainer}>
+                <header>
+                  <h1 className={styles.docTitle}>{metadata.title}</h1>
+                </header>
+                <article>
+                  <div className="markdown">
+                    <DocContent />
+                  </div>
+                </article>
+                {editUrl && (
+                  <div className="margin-vert--xl">
+                    <div className="row">
+                      <div className="col">
+                        {editUrl && (
+                          <a
+                            href={editUrl}
+                            target="_blank"
+                            rel="noreferrer noopener">
+                            Edit this page
+                          </a>
+                        )}
+                      </div>
                     </div>
                   </div>
+                )}
+                <div className="margin-vert--lg">
+                  <DocLegacyPaginator metadata={metadata} />
                 </div>
-              )}
-              <div className="margin-vert--lg">
-                <DocLegacyPaginator metadata={metadata} />
               </div>
             </div>
-          </div>
-          {DocContent.rightToc && (
-            <div className="col col--3">
-              <div className={styles.tableOfContents}>
-                <Headings headings={DocContent.rightToc} />
+            {DocContent.rightToc && (
+              <div className="col col--3">
+                <div className={styles.tableOfContents}>
+                  <Headings headings={DocContent.rightToc} />
+                </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
     </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacyItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocLegacyItem/styles.module.css
@@ -5,6 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.docTitle {
+  font-size: 3rem;
+  margin-bottom: 3rem;
+}
+
+@media only screen and (max-width: 996px) {
+  .docTitle {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+  }
+}
+
 .docItemContainer {
   margin: 0 auto;
   max-width: 45em;

diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/index.js b/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/index.js
@@ -13,29 +13,28 @@ import Layout from '@theme/Layout';
 import DocLegacySidebar from '@theme/DocLegacySidebar';
 import MDXComponents from '@theme/MDXComponents';
 
+import styles from './styles.module.css';
+
 function DocLegacyPage(props) {
   const {route, docsMetadata, location} = props;
   const {permalinkToSidebar, docsSidebars} = docsMetadata;
-  const sidebar =
-    permalinkToSidebar[location.pathname] ||
-    permalinkToSidebar[location.pathname.replace(/\/$/, '')];
+  const sidebar = permalinkToSidebar[location.pathname.replace(/\/$/, '')];
+
   return (
     <Layout noFooter>
-      <div className="container container--fluid">
-        <div className="row">
-          <div className="col col--3">
-            <DocLegacySidebar
-              docsSidebars={docsSidebars}
-              location={location}
-              sidebar={sidebar}
-            />
-          </div>
-          <main className="col">
-            <MDXProvider components={MDXComponents}>
-              {renderRoutes(route.routes)}
-            </MDXProvider>
-          </main>
+      <div className={styles.docPage}>
+        <div className={styles.docSidebarContainer}>
+          <DocLegacySidebar
+            docsSidebars={docsSidebars}
+            location={location}
+            sidebar={sidebar}
+          />
         </div>
+        <main className={styles.docMainContainer}>
+          <MDXProvider components={MDXComponents}>
+            {renderRoutes(route.routes)}
+          </MDXProvider>
+        </main>
       </div>
     </Layout>
   );

diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/styles.module.css
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.docPage {
+  display: flex;
+}
+
+.docSidebarContainer {
+  border-right: 1px solid var(--ifm-contents-border-color);
+  box-sizing: border-box;
+  width: 300px;
+}
+
+.docMainContainer {
+  flex-grow: 1;
+}
+
+@media (max-width: 996px) {
+  .docPage {
+    display: inherit;
+  }
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js
@@ -104,7 +104,9 @@ function DocLegacySidebar(props) {
   const sidebarData = docsSidebars[currentSidebar];
 
   if (!sidebarData) {
-    throw new Error(`Can not find ${currentSidebar} config`);
+    throw new Error(
+      `Cannot find the sidebar "${currentSidebar}" in the sidebar config!`,
+    );
   }
 
   sidebarData.forEach(sidebarItem =>

diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/styles.module.css
@@ -15,10 +15,6 @@
   }
 }
 
-.sidebar {
-  border-right: 1px solid var(--ifm-contents-border-color);
-}
-
 .sidebarMenuIcon {
   vertical-align: middle;
 }