Upgrade Docusaurus to alpha.70 (#133)

* Docusaurus upgrade debugging

1. docusaurus-plugin-sass"from  ^0.1.08 to 0.1.11
2. config modification
3. Implement Navbar/index.js accordingly

* Additional fix on the docusaurus update

* fixup some search box styles & cleanup css

* remove commented and unused code

Co-authored-by: Blaine Bublitz <blaine.bublitz@gmail.com>

Author: donghwi park

docusaurus.config.js

@@ -13,15 +13,18 @@ module.exports = {
   projectName: 'gulpjs.github.io',
   // The theme
   themeConfig: {
-    disableDarkMode: true,
+    colorMode: {
+      defaultMode: 'light',
+      disableSwitch: true,
+    },
     navbar: {
       logo: {
         alt: 'gulp',
         src: 'img/gulp.svg',
         href: '/',
         target: '_self',
       },
-      links: [
+      items: [
         {
           to: 'docs/en/getting-started/quick-start',
           label: 'Get Started',
@@ -196,7 +199,7 @@ module.exports = {
       // to support translations and v2 doesn't support them yet
       routeBasePath: 'docs/en/',
     }],
-    "docusaurus-plugin-sass",
+    ['docusaurus-plugin-sass', {}],
     ['@docusaurus/plugin-content-pages', {}],
     isProd && ['@docusaurus/plugin-google-analytics', {}],
     isProd && ['@docusaurus/plugin-google-gtag', {}],

package-lock.json

@@ -16,18 +16,18 @@
     "swizzle": "docusaurus swizzle"
   },
   "devDependencies": {
-    "@docusaurus/core": "2.0.0-alpha.50",
-    "@docusaurus/plugin-content-docs": "2.0.0-alpha.50",
-    "@docusaurus/plugin-content-pages": "2.0.0-alpha.50",
-    "@docusaurus/plugin-google-analytics": "2.0.0-alpha.50",
-    "@docusaurus/plugin-google-gtag": "2.0.0-alpha.50",
-    "@docusaurus/plugin-sitemap": "2.0.0-alpha.50",
-    "@docusaurus/theme-classic": "2.0.0-alpha.50",
-    "@docusaurus/theme-search-algolia": "2.0.0-alpha.50",
-    "@docusaurus/types": "2.0.0-alpha.50",
-    "@docusaurus/utils": "2.0.0-alpha.50",
+    "@docusaurus/core": "2.0.0-alpha.70",
+    "@docusaurus/plugin-content-docs": "2.0.0-alpha.70",
+    "@docusaurus/plugin-content-pages": "2.0.0-alpha.70",
+    "@docusaurus/plugin-google-analytics": "2.0.0-alpha.70",
+    "@docusaurus/plugin-google-gtag": "2.0.0-alpha.70",
+    "@docusaurus/plugin-sitemap": "2.0.0-alpha.70",
+    "@docusaurus/theme-classic": "2.0.0-alpha.70",
+    "@docusaurus/theme-search-algolia": "2.0.0-alpha.70",
+    "@docusaurus/types": "2.0.0-alpha.70",
+    "@docusaurus/utils": "2.0.0-alpha.70",
     "del": "^5.1.0",
-    "docusaurus-plugin-sass": "^0.1.8",
+    "docusaurus-plugin-sass": "^0.1.11",
     "github-download-directory": "^1.2.0",
     "gray-matter": "^3.1.1",
     "gulp": "^4.0.2",

package.json

@@ -6,7 +6,7 @@
   /* TODO: maybe  this should be --ifm-font-family-primary */
   --ifm-font-family-base: 'Poppins', sans-serif;
   /* TODO: add to ifm as ifm-font-family-secondary? */
-  --font-family-secondary: 'Roboto', sans-serif;
+  --font-family-secondary: "Roboto", sans-serif;
   --font-weight-secondary: 900;
   /* Primary color */
   --ifm-color-primary: #cf4647;
@@ -27,7 +27,7 @@
   --ifm-navbar-link-color: var(--ifm-color-white);
   --ifm-navbar-link-hover-color: var(--ifm-color-white);
   --ifm-navbar-link-hover-decoration: underline;
-  /* Search */
+  /* Plugin(?) Search */
   --ifm-navbar-search-input-background-color: var(--ifm-color-primary-darkest);
   --ifm-navbar-search-input-color: var(--ifm-color-white);
   --ifm-navbar-search-input-placeholder-color: var(--ifm-color-white);
@@ -51,7 +51,10 @@
 }
 
 /* Element defaults */
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
   font-family: var(--font-family-secondary);
   font-weight: var(--font-weight-secondary);
 }
@@ -134,7 +137,8 @@ h1 .hash-link {
 }
 
 /* Tables */
-th, td {
+th,
+td {
   text-align: start;
 }
 
@@ -166,11 +170,37 @@ table tr td + td + td:last-child {
   border-radius: var(--ifm-global-radius);
 }
 
-/* Search */
-.navbar .navbar__search .navbar__search-input {
-  width: 15.5rem;
+/* Navbar search */
+.navbar__items .DocSearch-Button {
+  height: 2.25rem;
   font-size: 1rem;
+  border-radius: var(--ifm-global-radius);
+  color: var(--ifm-color-white);
+  background-color: var(--ifm-color-primary-darkest);
   font-family: var(--ifm-font-family-base);
+}
+.navbar__items .DocSearch-Button:active,
+.navbar__items .DocSearch-Button:focus,
+.navbar__items .DocSearch-Button:hover {
+  color: var(--ifm-color-primary-darkest);
+}
+.navbar__items .DocSearch-Button .DocSearch-Search-Icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--ifm-color-white);
+}
+.navbar__items .DocSearch-Button:active .DocSearch-Search-Icon ,
+.navbar__items .DocSearch-Button:focus .DocSearch-Search-Icon ,
+.navbar__items .DocSearch-Button:hover .DocSearch-Search-Icon  {
+  color: var(--ifm-color-primary-darkest);
+}
+.DocSearch .DocSearch-Button-Keys {
+  display: none;
+}
+/* More qualifiers than built-in styles */
+.DocSearch-Modal .DocSearch-Form,
+.DocSearch-Modal .DocSearch-Hit,
+.DocSearch-Modal .DocSearch-Hit a {
   border-radius: var(--ifm-global-radius);
 }
 
@@ -188,30 +218,16 @@ table tr td + td + td:last-child {
   }
 }
 
-  /* Tons of hacks for the algolia search to look good on mobile */
 @media only screen and (max-width: 600px) {
-  .navbar .navbar__search {
+  .navbar__items .DocSearch-Button {
     width: 100%;
+    margin: 0;
   }
-  .search-icon-hidden {
-    display: none !important;
-  }
-  .navbar .navbar__search .navbar__search-input {
-    width: 100% !important;
-  }
-
-  .navbar .algolia-autocomplete {
-    width: 100%;
+  .navbar__items .DocSearch-Button-Placeholder {
     display: block;
   }
-  .navbar .algolia-autocomplete .ds-dropdown-menu {
-    position: absolute !important;
-    right: 0.5rem !important;
-    max-width: calc(100% - 1rem);
-  }
 }
 
-/* TODO: These will need to be update when "Enterprise" is added */
 @media only screen and (max-width: 767px) {
   .navbar .navbar__inner {
     display: block;
@@ -223,35 +239,20 @@ table tr td + td + td:last-child {
     justify-content: space-around;
     flex-wrap: wrap;
   }
-
-  /* .navbar .navbar__items.navbar__items--right {
-    justify-content: space-around;
-  } */
-
-  .navbar .navbar__search {
-    padding-left: 0;
-  }
 }
 
 @media only screen and (min-width: 768px) {
-  .navbar .navbar__search .navbar__search-input {
+  .navbar__items .DocSearch-Button {
     width: 9.5rem;
   }
 }
 
 @media only screen and (min-width: 996px) {
-  .navbar .navbar__search .navbar__search-input {
+  .navbar .DocSearch-Button {
     width: 12.5rem;
-    transition: width 0.5s ease 0s;
-  }
-
-  .navbar .navbar__search .navbar__search-input:active,
-  .navbar .navbar__search .navbar__search-input:focus {
-    width: 16.5rem;
   }
 }
 
-
 @media only screen and (max-width: 996px) {
   .footer .col.col.col {
     --ifm-col-width: 33%;
@@ -289,18 +290,13 @@ table tr td + td + td:last-child {
   color: var(--ifm-color-secondary);
   border: 2px solid var(--ifm-color-secondary);
   box-shadow: 7px 7px 0 2px var(--ifm-color-secondary);
-  transition: box-shadow .1s ease-in, transform .1s ease-in;
+  transition: box-shadow 0.1s ease-in, transform 0.1s ease-in;
 }
 .tidelift-button:hover {
   text-decoration: none;
   color: var(--ifm-color-secondary);
   outline: none;
   transform: translate(2px, 10%);
   box-shadow: 6px 6px 0 0 var(--ifm-color-secondary);
-  transition: box-shadow .1s ease-in, transform .1s ease-in;
-}
-
-/* Fix: show "Copy to clipboard" button */
-button.copyButton_node_modules-\@docusaurus-theme-classic-src-theme-CodeBlock- {
-	color: var(--ifm-color-white);
+  transition: box-shadow 0.1s ease-in, transform 0.1s ease-in;
 }

src/css/docs.css

@@ -98,7 +98,7 @@ function PluginFooter({ keywords = [] }) {
     return (
       <div className="card__footer">
         <ul className={classnames('pills padding-top--sm text--normal text--right', styles.pluginCardKeywords)}>
-          {keywords.map((keyword) => <li key={keyword} className="pill-item">{keyword}</li>)}
+          {keywords.map((keyword) => <li key={keyword} className={styles.pillsItem}>{keyword}</li>)}
         </ul>
       </div>
     );

src/pages/plugins/index.js

@@ -44,7 +44,6 @@
   }
 }
 
-
 .deprecatedMessage {
   color: var(--ifm-color-primary-dark);
   background-color: var(--ifm-color-white);
@@ -71,3 +70,11 @@
 .primaryUrl {
   color: var(--ifm-font-base-color);
 }
+
+.pillsItem {
+  border-radius: 0.5rem;
+  cursor: pointer;
+  display: inline-block;
+  list-style-type: none;
+  padding: 0.25rem 1rem;
+}

src/pages/plugins/plugins.module.scss

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -14,11 +14,9 @@ import isInternalUrl from '@docusaurus/isInternalUrl';
 import { useLocation } from '@docusaurus/router';
 
 import SearchBar from '@theme/SearchBar';
-import Toggle from '@theme/Toggle';
 import useThemeContext from '@theme/hooks/useThemeContext';
 import useHideableNavbar from '@theme/hooks/useHideableNavbar';
-import useLogo from '@theme/hooks/useLogo';
-
+import Logo from '@theme/Logo';
 import styles from './styles.module.css';
 
 function noop() { }
@@ -120,25 +118,17 @@ function Navbar() {
   const {
     siteConfig: {
       themeConfig: {
-        navbar: { title, links = [], hideOnScroll = false } = {},
-        disableDarkMode = false,
+        navbar: { items = [], hideOnScroll = false } = {},
       },
     },
-    isClient,
   } = useDocusaurusContext();
 
   const location = useLocation();
   const [enableSearch, setEnableSearch] = useState(notPluginPage(location.pathname));
   useEffect(() => {
     setEnableSearch(notPluginPage(location.pathname));
   }, [location]);
-  const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
   const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
-  const { logoLink, logoLinkProps, logoImageUrl, logoAlt } = useLogo();
-  const onToggleChange = useCallback(
-    e => (e.target.checked ? setDarkTheme() : setLightTheme()),
-    [setLightTheme, setDarkTheme],
-  );
 
   return (
     <nav
@@ -149,36 +139,22 @@ function Navbar() {
       })}>
       <div className="navbar__inner">
         <div className="navbar__items">
-          <Link className="navbar__brand" to={logoLink} {...logoLinkProps}>
-            {logoImageUrl != null && (
-              <img
-                key={isClient}
-                className="navbar__logo"
-                src={logoImageUrl}
-                alt={logoAlt}
-              />
-            )}
-          </Link>
-          {links
+          <Logo
+            className="navbar__brand"
+            imageClassName="navbar__logo"
+          />
+          {items
             .filter(linkItem => linkItem.position === 'left')
             .map((linkItem, i) => (
               <NavItem {...linkItem} key={i} />
             ))}
         </div>
         <div className="navbar__items navbar__items--right">
-          {links
+          {items
             .filter(linkItem => linkItem.position === 'right')
             .map((linkItem, i) => (
               <NavItem {...linkItem} key={i} />
             ))}
-          {!disableDarkMode && (
-            <Toggle
-              className={styles.displayOnlyInLargeViewport}
-              aria-label="Dark mode toggle"
-              checked={isDarkTheme}
-              onChange={onToggleChange}
-            />
-          )}
           {enableSearch && (
             <SearchBar
               handleSearchBarToggle={noop}