misc(v2): improve docs styles (#1820)

* misc(v2): make doc title larger

* misc(v2): make doc layout better

* misc(v2): update changelog for docs

CHANGELOG-2.x.md

@@ -3,8 +3,10 @@
 ## Unreleased
 
 - Docs, pages plugin is rewritten in TypeScript
-- Docs sidebar can now be more than one level deep, theoretically up to infinity
-- Collapsible docs sidebar!
+- 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
 - More documentation ...
 - Slight tweaks to the Blog components - blog title is larger now
 

packages/docusaurus-theme-classic/src/theme/DocLegacyItem/index.js

@@ -62,29 +62,31 @@ 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 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>
+                <div className="margin-top--xl margin-bottom--lg">
+                  <DocLegacyPaginator metadata={metadata} />
                 </div>
-              </article>
-              <div className="margin-top--xl margin-bottom--lg">
-                <DocLegacyPaginator metadata={metadata} />
               </div>
             </div>
+            {DocContent.rightToc && (
+              <div className="col col--3">
+                <div className={styles.tableOfContents}>
+                  <Headings headings={DocContent.rightToc} />
+                </div>
+              </div>
+            )}
           </div>
-          {DocContent.rightToc && (
-            <div className="col col--3">
-              <div className={styles.tableOfContents}>
-                <Headings headings={DocContent.rightToc} />
-              </div>
-            </div>
-          )}
         </div>
       </div>
     </div>

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;

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>
   );

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;
+  }
+}

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 =>

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;
 }