Styles & Plausible (#70)

* Update Zed Doc Styles

* Add plausable analytics

* Add Node Version Fix Mobile & Footer

.github/workflows/deploy.yaml

@@ -17,7 +17,7 @@ jobs:
       - name: Build site
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version-file: .node-version
           cache: yarn
       - name: Build
         run: make build

.github/workflows/test-deploy.yaml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version-file: .node-version
           cache: yarn
 
       - name: Build

.node-version

@@ -0,0 +1 @@
+20.5.0

docusaurus.config.js

@@ -17,6 +17,13 @@ const config = {
   organizationName: "brimdata",
   projectName: "zed",
   trailingSlash: false,
+  scripts: [
+    {
+      src: 'https://plausible.io/js/script.js',
+      defer: true,
+      "data-domain": "zed.brimdata.io",
+    },
+  ],
 
   plugins: [
     // This plugin allows, e.g, docs/ to be a symlink to ../zed/docs/.
@@ -43,9 +50,6 @@ const config = {
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
         },
-        gtag: {
-          trackingID: "G-CV1VB9VF13",
-        },
       }),
     ],
   ],

src/css/custom.css

@@ -6,18 +6,18 @@
 
 /* You can override the default Infima variables here. */
 :root {
-
   --blue: #2F4770;
   --orange: hsl(30, 100%, 50%);
-  --black: #111824;
-
+  --black: rgba(17, 24, 36);
+  --transparent-black: rgba(17, 24, 36, 0.50);
+
   --ifm-color-primary: var(--orange);
   --ifm-font-family-base: "protipo", "sans-serif";
-  --imf-font-color-base: var(--black)
   --ifm-color-content: var(--black);
   --ifm-hero-text-color: var(--black);
-  --ifm-heading-font-weight: 900;
+  --ifm-heading-font-weight: 700;
   --ifm-color-primary-darkest: #702D00;
+  --ifm-menu-color: var(--ifm-font-color-base);
 
   --ifm-color-primary: #eb7500;
   --ifm-color-primary-dark: #d36900;
@@ -27,18 +27,40 @@
   --ifm-color-primary-lighter: #ff870f;
   --ifm-color-primary-lightest: #ff9832;
 
-  --ifm-font-size-base: 110%;
+  --ifm-font-size-base: 15px;
+  --ifm-toc-border-color: var(--ifm-hover-overlay);
+  --doc-sidebar-width: 240px !important;
+  --ifm-menu-link-padding-vertical: 0.2rem;
+  --ifm-breadcrumb-item-background-active: none;
+
+  --ifm-background-color: white;
+  --ifm-navbar-background-color: var(--ifm-background-color);
+  --ifm-container-width: 1200px;
+
+  --ifm-container-width-xl: 1200px;
+  --ifm-footer-link-color: var(--ifm-color-content);
+  --ifm-footer-background-color: var(--ifm-color-gray-900);
 }
 
-@media screen and (max-width: 996px) {
-  :root {
-    --ifm-font-size-base: 100%;
+[data-theme='dark']:root {
+  --ifm-background-color: var(--black);
+  --ifm-footer-background-color: var(--black);
+
+  .footer--dark {
+    --ifm-footer-background-color: var(--black);
   }
+}
+
+@media screen and (max-width: 996px) {
   .markdown h1:first-child {
     --ifm-h1-font-size: 2.4rem
   }
 }
 
+h1 {
+  font-weight: 900;
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;
@@ -50,10 +72,254 @@
   background-color: var(--black);
 }
 
-.footer--dark {
-  --ifm-footer-background-color: var(--black);
+
+.footer {
+  border-top: 1px solid var(--ifm-toc-border-color);
 }
 
 .markdown a {
   font-weight: 500;
-}
+}
+
+.main-wrapper {
+  margin: 0 auto;
+  max-width: var(--ifm-container-width);
+  width: 100%;
+}
+
+
+.navbar--fixed-top {
+  margin-bottom: 2rem;
+  box-shadow: none;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+}
+
+.navbar__link {
+  font-weight: normal;
+  color: currentColor;
+  border-radius: 0.25rem;
+  transition: all var(--ifm-transition-fast);
+
+  &:hover {
+    color: currentColor;
+    background: var(--ifm-color-emphasis-200);
+  }
+}
+
+.navbar__brand:hover {
+  color: var(--ifm-color-content);
+}
+
+.navbar__link--active {
+  font-weight: 900;
+}
+
+/** Desktop Navbar **/
+
+@media screen and (min-width: 996px) {
+  :root {
+    --ifm-navbar-background-color: rgba(255, 255, 255, 0.8);
+  }
+
+  [data-theme='dark']:root {
+    --ifm-navbar-background-color: var(--transparent-black);
+  }
+
+  .navbar--fixed-top {
+    backdrop-filter: blur(6px);
+  }
+
+  .navbar__inner {
+    margin: 0 auto;
+    max-width: var(--ifm-container-width);
+  }
+
+  .theme-doc-sidebar-container {
+    padding-top: 0.9rem;
+    border-right: none !important;
+  }
+
+  .theme-doc-sidebar-container .menu {
+    padding-right: 1rem;
+    padding-left: 1rem;
+    padding-bottom: 5rem;
+  }
+}
+
+
+.theme-doc-sidebar-menu {
+  border-left: 1px solid var(--ifm-toc-border-color);
+  padding-left: 0.825rem;
+}
+
+.menu__list {
+  font-weight: normal;
+  font-size: 0.9rem;
+}
+
+.menu__link--sublist-caret:after,
+.menu__caret:before {
+  background-size: 1.3rem 1.3rem;
+  transition: all 250ms;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.menu__list-item-collapsible a {
+  flex: 0;
+}
+
+.menu__list-item-collapsible button {
+  padding: 0 0.4em;
+
+  &:hover {
+    background: none;
+  }
+}
+
+.menu__link {
+  padding-right: 0.375rem;
+}
+
+.menu__link--sublist::after {
+  margin-left: 0.375rem;
+}
+
+.menu__link--active.menu__link--active,
+.menu__list-item-collapsible--active {
+  font-weight: 900;
+  background: none;
+  color: currentColor;
+
+  /* Add hover styles */
+}
+
+.theme-doc-version-badge {
+  display: none;
+}
+
+.theme-doc-toc-desktop {
+  --ifm-toc-padding-vertical: 0;
+  margin-top: 0rem;
+  border-left: 1px solid var(--ifm-hover-overlay);
+
+  .table-of-contents {
+    padding-top: 0;
+    padding-left: 0;
+  }
+
+  .table-of-contents__link {
+    opacity: 0.5;
+    transition: opacity 400ms;
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.25rem;
+  }
+
+  &:hover .table-of-contents__link {
+    opacity: 0.8;
+  }
+
+  .table-of-contents__link:hover {
+    color: currentColor;
+    opacity: 1;
+    background: var(--ifm-menu-color-background-hover);
+  }
+
+  .table-of-contents__link--active {
+    opacity: 1;
+    color: currentColor;
+    font-weight: 900;
+  }
+
+}
+
+div.theme-doc-toc-mobile {
+  margin-bottom: 2.5rem;
+}
+
+a[aria-label="Home page"] {
+  padding-left: 0;
+  margin-left: 0;
+  margin-left: -3px;
+}
+
+nav.theme-doc-breadcrumbs {
+  margin-top: 0.25rem;
+  margin-bottom: 3rem;
+}
+
+.breadcrumbs {
+  margin: 0;
+  margin-top: 4px;
+}
+
+.breadcrumbs__link {
+  padding: 0;
+  color: var(--ifm-color-gray-600);
+
+  &:after {
+    color: var(--ifm-color-gray-500);
+  }
+}
+
+.breadcrumbs__item--active .breadcrumbs__link {
+  color: var(--ifm-font-color-base);
+}
+
+.footer__col {
+  text-align: center;
+}
+
+.footer__bottom {
+  margin-top: 4rem;
+  opacity: 0.5;
+}
+
+
+.menu__link--sublist-caret:after,
+.menu__caret:before {
+  background-size: 1rem 1rem;
+  background-position: center center;
+}
+
+.menu__caret.menu__caret {
+  padding: 0;
+}
+
+.navbar-sidebar {
+  background: var(--ifm-background-color);
+}
+
+@media screen and (min-width: 996px) {
+  .menu__link:not(.menu__link--active) {
+    transition: opacity 400ms;
+    opacity: 0.5;
+  }
+
+  .theme-doc-sidebar-container:hover {
+    .menu__link:not(.menu__link--active) {
+      opacity: 0.8;
+    }
+
+    .menu__link:not(.menu__link--active):hover {
+      opacity: 19
+    }
+  }
+
+  .menu__link:hover {
+    opacity: 1;
+  }
+}
+
+.main-wrapper .col.col--3 {
+  padding-left: 4rem;
+}
+
+
+@media screen and (min-width: 966px) {
+  .main-wrapper .col:not(.col--3) {
+    padding-left: 4rem;
+  }
+}