Merge branch 'source' of https://github.com/gulpjs/gulpjs.github.io into source

Author: donghwi park

.github/workflows/deploy.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Deploy
         # Use the SHA because I am untrustworthy
         # TODO: We probably should fork any non-GitHub owned actions
-        uses: peaceiris/actions-gh-pages@1828d86
+        uses: peaceiris/actions-gh-pages@1828d864aeb7ba79a37f40035aa6d0b7ff66254f
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./build

src/css/docs.css

@@ -4,7 +4,7 @@
   --ifm-global-shadow-lw: 1px 2px 5px 1px rgba(0, 0, 0, 0.1);
   /* Font */
   /* TODO: maybe  this should be --ifm-font-family-primary */
-  --ifm-font-family-base: 'Poppins', sans-serif;
+  --ifm-font-family-base: "Poppins", sans-serif;
   /* TODO: add to ifm as ifm-font-family-secondary? */
   --font-family-secondary: "Roboto", sans-serif;
   --font-weight-secondary: 900;
@@ -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);
@@ -170,29 +170,39 @@ table tr td + td + td:last-child {
   border-radius: var(--ifm-global-radius);
 }
 
-/* Search */
-.DocSearch.DocSearch-Button {
-  width: 12.5rem;
+/* Navbar search */
+.navbar__items .DocSearch-Button {
   height: 2.25rem;
   font-size: 1rem;
-  border-radius: 0;
-  color: #ffffff;
-  background-color: #9a2829;
+  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);
 }
-.DocSearch.DocSearch-Button:hover {
-  background-color: #9a2829;
-  color: #ffffff;
-  height: 2.25rem;
+.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: #ffffff;
+  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);
+}
 
 /* Footer (for logo) */
 .footer__col:first-of-type .footer__item {
@@ -208,43 +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) {
-  .DocSearch.DocSearch-Button {
+  .navbar__items .DocSearch-Button {
     width: 100%;
     margin: 0;
-    height: 2.25rem;
-    font-size: 1rem;
-    border-radius: 0;
-    color: #ffffff;
-    background-color: #9a2829;
-    font-family: var(--ifm-font-family-base);
   }
-  span.DocSearch-Button-Placeholder {
+  .navbar__items .DocSearch-Button-Placeholder {
     display: block;
   }
-  .navbar .navbar__search {
-    width: 100%;
-  }
-  .search-icon-hidden {
-    display: none !important;
-  }
-  .navbar .navbar__search .navbar__search-input {
-    width: 100% !important;
-  }
-
-  .navbar .algolia-autocomplete {
-    width: 100%;
-    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;
@@ -256,31 +239,17 @@ 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;
   }
 }
 
@@ -331,8 +300,3 @@ table tr td + td + td:last-child {
   box-shadow: 6px 6px 0 0 var(--ifm-color-secondary);
   transition: box-shadow 0.1s ease-in, transform 0.1s ease-in;
 }
-
-/* Fix: show "Copy to clipboard" button */
-button.copyButton_node_modules-\@docusaurus-theme-classic-src-theme-CodeBlock- {
-  color: var(--ifm-color-white);
-}

src/theme/Navbar/index.js

@@ -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,7 +14,6 @@ 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 Logo from '@theme/Logo';
@@ -119,26 +118,18 @@ function Navbar() {
   const {
     siteConfig: {
       themeConfig: {
-        navbar: { title, items = [], 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 onToggleChange = useCallback(
-  //   e => (e.target.checked ? setDarkTheme() : setLightTheme()),
-  //   [setLightTheme, setDarkTheme],
-  // );
-
   return (
     <nav
       ref={navbarRef}
@@ -148,7 +139,7 @@ function Navbar() {
       })}>
       <div className="navbar__inner">
         <div className="navbar__items">
-          <Logo 
+          <Logo
             className="navbar__brand"
             imageClassName="navbar__logo"
           />
@@ -164,14 +155,6 @@ function Navbar() {
             .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}