[PM-7918] Design Feedback and other cleanup (#136)

* add forms sidebar to homepage and center docs content blocks

* remove workaround for preventing unused searchbar from taking up whitespace

* redorder forms sidebar items, collapse all but login by default, and fix incorrect filename for Create items

client/docs/forms/create/__category__.json → client/docs/forms/create/_category_.json

@@ -1,8 +1,9 @@
 {
+  "collapsed": true,
   "label": "Create",
   "link": {
     "type": "generated-index",
     "description": "Common patterns for account creation forms"
   },
-  "collapsed": false
+  "position": 5
 }

client/docs/forms/identity/_category_.json

@@ -1,8 +1,9 @@
 {
+  "collapsed": true,
   "label": "Identity",
   "link": {
     "type": "generated-index",
     "description": "Common patterns for identity forms"
   },
-  "collapsed": false
+  "position": 2
 }

client/docs/forms/login/_category_.json

@@ -1,9 +1,9 @@
 {
+  "collapsed": false,
   "label": "Login",
-  "position": 1,
   "link": {
     "type": "generated-index",
     "description": "Common patterns for login forms"
   },
-  "collapsed": false
+  "position": 1
 }

client/docs/forms/payment/_category_.json

@@ -1,8 +1,9 @@
 {
+  "collapsed": true,
   "label": "Payment",
   "link": {
     "type": "generated-index",
     "description": "Common patterns for payment forms"
   },
-  "collapsed": false
+  "position": 3
 }

client/docs/forms/search/_category_.json

@@ -1,8 +1,9 @@
 {
+  "collapsed": true,
   "label": "Search",
   "link": {
     "type": "generated-index",
     "description": "Common patterns for search inputs"
   },
-  "collapsed": false
+  "position": 4
 }

client/docs/forms/update/_category_.json

@@ -1,8 +1,9 @@
 {
+  "collapsed": true,
   "label": "Update",
   "link": {
     "type": "generated-index",
     "description": "Common patterns for authentication update forms"
   },
-  "collapsed": false
+  "position": 6
 }

client/src/pages/index.md → client/docs/index.md

@@ -1,5 +1,6 @@
 ---
 title: Intro
+displayed_sidebar: formsSidebar
 ---
 
 # Let's test the web!

client/docusaurus.config.ts

@@ -51,6 +51,10 @@ const config: Config = {
       {
         docs: {
           breadcrumbs: false,
+          // @TODO there is a known issue where docs `routeBasePath` set to "/" breaks 404 pages
+          // https://github.com/facebook/docusaurus/issues/9665
+          // https://github.com/facebook/docusaurus/issues/9688
+
           routeBasePath: "/",
           sidebarPath: require.resolve("./sidebars.js"),
         },

client/sidebars.js

@@ -1,33 +1,9 @@
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
-
- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
-
 // @ts-check
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   formsSidebar: [{ type: "autogenerated", dirName: "forms" }],
-
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
-    'intro',
-    'hello',
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
-    },
-  ],
-   */
 };
 
 module.exports = sidebars;

client/src/css/custom.css

@@ -59,25 +59,18 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
-.theme-doc-markdown > header:first-of-type details > summary {
-  list-style: none;
-}
-.theme-doc-markdown > header:first-of-type details > summary::after {
-  font-size: 24px;
-  content: " ▸";
-}
-.theme-doc-markdown > header:first-of-type details[open] > summary::after {
-  font-size: 24px;
-  content: " ▾";
-}
-
 .theme-doc-markdown > header:first-of-type h1:first-of-type {
   display: inline-block;
   cursor: pointer;
   font-size: 24px;
   margin-bottom: 5px;
 }
 
+main [class^="docItemCol_"],
+main [class*=" docItemCol_"] {
+  margin: auto;
+}
+
 select,
 input:not([type]), /* text type is stripped from built html */
 input[type="url"],