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 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,11 +62,12 @@ function DocLegacyItem(props) {
         {permalink && <meta property="og:url" content={siteUrl + permalink} />}
       </Head>
       <div className="padding-vert--lg">
+        <div className="container">
           <div className="row">
             <div className="col">
               <div className={styles.docItemContainer}>
                 <header>
-                <h1 className="margin-bottom--lg">{metadata.title}</h1>
+                  <h1 className={styles.docTitle}>{metadata.title}</h1>
                 </header>
                 <article>
                   <div className="markdown">
@@ -88,6 +89,7 @@ function DocLegacyItem(props) {
           </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,30 +13,29 @@ 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 =
+  const sidebar = permalinkToSidebar[location.pathname.replace(/\/$/, '')];
-    permalinkToSidebar[location.pathname] ||
+
-    permalinkToSidebar[location.pathname.replace(/\/$/, '')];
   return (
     <Layout noFooter>
-      <div className="container container--fluid">
+      <div className={styles.docPage}>
-        <div className="row">
+        <div className={styles.docSidebarContainer}>
-          <div className="col col--3">
           <DocLegacySidebar
             docsSidebars={docsSidebars}
             location={location}
             sidebar={sidebar}
           />
         </div>
-          <main className="col">
+        <main className={styles.docMainContainer}>
           <MDXProvider components={MDXComponents}>
             {renderRoutes(route.routes)}
           </MDXProvider>
         </main>
       </div>
-      </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;
 }