housekeeping: update docs deps

docs/_website/docusaurus.config.js

@@ -109,14 +109,11 @@ module.exports = {
     colorMode: {
       disableSwitch: true,
     },
-    googleAnalytics: {
-      trackingID: 'UA-170615678-4',
-      anonymizeIP: true,
-    },
     algolia : {
       // This is a read-only, search-only key served directly by the front-end, managed by Algolia via their
       // free DocSearch program. The key is not sensitive. See https://docsearch.algolia.com/ for more details.
-      apiKey: '32f1f7956b3d2c3c90fbe259c7901d94',
+      apiKey: 'e9fd4dc1b48bb4b9e8763d3adc9df6d1',
+      appId: 'XFPMTG0051',
       indexName: 'lyft_clutch',
     },
     prism : {
@@ -221,6 +218,10 @@ module.exports = {
           path: "generated/docs",
           sidebarPath: require.resolve('../sidebars.json'),
         },
+        googleAnalytics: {
+          trackingID: 'UA-170615678-4',
+          anonymizeIP: true,
+        },
         blog: {
           path: "generated/blog",
           blogTitle: 'Clutch Open-source Developer Blog',

docs/_website/netlify.toml

@@ -3,4 +3,4 @@
    ignore = "/bin/false"
 
 [build.environment]
-  NODE_VERSION = "14"
+  NODE_VERSION = "16"

docs/_website/package.json

@@ -39,5 +39,8 @@
     "chokidar": "^3.5.1",
     "react-tiny-popover": "^7.0.0",
     "typescript": "^4.1.3"
+  },
+  "engines": {
+    "node": ">=16.0.0 <17"
   }
 }

docs/_website/src/components/Share/index.tsx

@@ -45,9 +45,10 @@ interface ShareProps {
     url: string;
     twitter_username?: string;
   }[];
+  style: {[key: string]: unknown}
 }
 
-const Share = ({title, authors}: ShareProps) => {
+const Share = ({ title, authors, style }: ShareProps) => {
   const [open, setOpen] = React.useState(false);
 
   return (

docs/_website/src/theme/BlogPostItem/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
 import { MDXProvider } from '@mdx-js/react';
-import Seo from '@theme/Seo';
+import { PageMetadata } from '@docusaurus/theme-common';
+// @ts-ignore
+import { useBlogPost } from '@docusaurus/theme-common/internal';
 import Link from '@docusaurus/Link';
 import MDXComponents from '@theme/MDXComponents';
 import Share from '@site/src/components/Share';
@@ -23,15 +25,11 @@ const MONTHS = [
 ];
 
 function BlogPostItem(props) {
-  const {
-    children,
-    frontMatter,
-    metadata,
-    truncated,
-    isBlogPostPage = false,
-  } = props;
-  const { date, permalink, tags, readingTime } = metadata;
-  const { authors, title, image, keywords } = frontMatter;
+  const { children } = props;
+  const post = useBlogPost()
+  const isBlogPostPage = post.isBlogPostPage;
+  const { date, permalink, tags, readingTime, hasTruncateMarker } = post.metadata;
+  const { authors, title, image, keywords } = post.frontMatter;
 
   const renderPostHeader = () => {
     const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
@@ -51,7 +49,7 @@ function BlogPostItem(props) {
             {month} {day}, {year}{' '}
             {readingTime && <> · {Math.ceil(readingTime)} min read</>}
           </time>
-          {!truncated && <>&nbsp;·&nbsp;<Share title={title} authors={authors} style={{margin: "0 7px"}} /></>}
+          {isBlogPostPage && <>&nbsp;·&nbsp;<Share title={title} authors={authors} style={{margin: "0 7px"}} /></>}
         </div>
 
 
@@ -83,14 +81,14 @@ function BlogPostItem(props) {
 
   return (
     <MDXProvider components={{ ...MDXComponents, img: Image }}>
-      <Seo {...{keywords, image}} />
+      <PageMetadata {...{keywords, image}} />
 
       <article className={clsx(!isBlogPostPage && 'margin-bottom--lg', !isBlogPostPage && styles.blogPostPreview)}>
         {renderPostHeader()}
         <section className="markdown">
           {children}
         </section>
-        {(tags.length > 0 || truncated) && (
+        {(tags.length > 0 || hasTruncateMarker) && (
           <footer className="row margin-vert--md">
             {tags.length > 0 && (
               <div className="col">
@@ -104,10 +102,10 @@ function BlogPostItem(props) {
                 ))}
               </div>
             )}
-            {truncated && (
+            {hasTruncateMarker && (
               <div className="col text--right">
                 <Link
-                  to={metadata.permalink}
+                  to={permalink}
                   aria-label={`Read more about ${title}`}>
                   <strong>Read More</strong>
                 </Link>

docs/_website/src/theme/Footer/index.tsx

@@ -7,6 +7,7 @@ import type { NavbarLogo } from '@docusaurus/theme-common'
 import { useThemeConfig } from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
+import { ThemeConfig } from '../types';
 
 var socialLinks = [
   {
@@ -139,9 +140,8 @@ function Links({ links }) {
 };
 
 function Footer() {
-  const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
-  const {themeConfig = {}} = siteConfig;
+  const { siteConfig } = useDocusaurusContext();
+  const themeConfig = {...siteConfig.themeConfig} as ThemeConfig;
   const {footer} = themeConfig;
 
   const {copyright, links = []} = footer || {};

docs/_website/src/theme/Footer/styles.module.css

@@ -8,12 +8,14 @@
 }
 
 .noGradient {
-  border-top: 1px solid var(--ifm-hr-border-color);
+  border-top: 1px solid #bec3c9;
 }
 
 .footerAdditional {
   white-space: nowrap;
   font-size: .9rem;
+  list-style: none;
+  padding: 0;
 }
 
 .navbarLogo {

docs/_website/src/theme/Navbar/index.tsx

@@ -4,15 +4,20 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
+import ColorModeToggle from '@theme/ColorModeToggle';
 import SearchBar from '@theme/SearchBar';
-import Toggle from '@theme/Toggle';
-import useThemeContext from '@theme/hooks/useThemeContext';
-import useHideableNavbar from '@theme/hooks/useHideableNavbar';
-import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
-import useWindowSize from '@theme/hooks/useWindowSize';
+import { useColorMode, useWindowSize } from '@docusaurus/theme-common';
+import type { NavLinkProps as BaseNavLinkProps } from '@docusaurus/Link';
+import {
+  useHideableNavbar,
+  useLockBodyScroll,
+  // @ts-ignore
+} from '@docusaurus/theme-common/internal';
+
 import Logo from '@theme/Logo';
 
 import styles from './styles.module.css';
+import { ThemeConfig } from '../types';
 
 // retrocompatible with v1
 const DefaultNavItemPosition = 'right';
@@ -50,13 +55,13 @@ var items = [
     icon: "fe fe-github",
     label: 'GitHub',
   },
-];
+] as ItemProps[];
 
-interface NavLinkProps {
+interface NavLinkProps extends BaseNavLinkProps {
   to: string;
-  href?: string;
   label: string;
   activeClassName?: string;
+  className?: string;
   prependBaseUrlToHref?: boolean;
   icon: string;
 }
@@ -69,7 +74,7 @@ function NavLink({
   prependBaseUrlToHref = false,
   icon,
   ...props
-}) {
+}: NavLinkProps) {
   const toUrl = useBaseUrl(to);
   const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true });
 
@@ -129,7 +134,7 @@ function NavItem({
         onClick={(e) => e.preventDefault()}
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
-            e.target.parentNode.classList.toggle('dropdown--show');
+            e.currentTarget.parentElement.classList.toggle('dropdown--show');
           }
         }}>
         {props.label}
@@ -209,20 +214,13 @@ function splitLinks(links) {
 }
 
 function Navbar() {
-  const {
-    siteConfig: {
-      themeConfig: {
-        navbar: { hideOnScroll = false } = {},
-        colorMode: {disableSwitch: disableColorModeSwitch = false} = {},
-      },
-    },
-    isClient,
-  } = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
+  const themeConfig = {...siteConfig.themeConfig} as ThemeConfig;
+  const hideOnScroll = themeConfig.navbar.hideOnScroll || false;
+  const disableColorModeSwitch = themeConfig.colorMode.disableSwitch || false;
   const [sidebarShown, setSidebarShown] = useState(false);
-  const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
 
-  const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
-  const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
+  const { colorMode, setLightTheme, setDarkTheme } = useColorMode();
 
   useLockBodyScroll(sidebarShown);
 
@@ -250,11 +248,9 @@ function Navbar() {
 
   return (
     <nav
-      ref={navbarRef}
-      className={clsx('navbar', 'navbar--light', 'navbar--fixed-top', styles.navbarCustom, {
+      className={clsx('navbar', colorMode === "light" ? 'navbar--light' : 'navbar--dark', 'navbar--fixed-top', styles.navbarCustom, {
         'navbar-sidebar--show': sidebarShown,
         [styles.navbarHideable]: hideOnScroll,
-        [styles.navbarHidden]: !isNavbarVisible,
       })}>
       <div className="navbar__inner">
         <div className="navbar__items">
@@ -286,25 +282,21 @@ function Navbar() {
           )}
           <div className={clsx("navbar__brand", styles.navbarLogoCustom)}>
             <Logo imageClassName={clsx("navbar__logo", styles.navbarLogoCustom)} />
-            <img className={clsx('navbar__title', styles.navbarLogoTextCustom, {[styles.hideLogoText]: isSearchBarExpanded})} src={useBaseUrl("img/navigation/logoText.svg")} />
+            <img className={clsx('navbar__title', styles.navbarLogoTextCustom)} src={useBaseUrl("img/navigation/logoText.svg")} />
           </div>
           {leftLinks.map((linkItem, i) => (
             <NavItem {...linkItem} key={i} />
           ))}
         </div>
         <div className="navbar__items navbar__items--right">
-          <SearchBar
-            handleSearchBarToggle={setIsSearchBarExpanded}
-            isSearchBarExpanded={isSearchBarExpanded}
-          />
+          <SearchBar />
           {rightLinks.map((linkItem, i) => (
             <NavItem {...linkItem} key={i} />
           ))}
           {!disableColorModeSwitch && (
-            <Toggle
+            <ColorModeToggle
+              value={colorMode}
               className={styles.displayOnlyInLargeViewport}
-              aria-label="Dark mode toggle"
-              checked={isDarkTheme}
               onChange={onToggleChange}
             />
           )}
@@ -319,14 +311,10 @@ function Navbar() {
         <div className="navbar-sidebar__brand">
           <div className={clsx("navbar__brand", styles.navbarLogoCustom)} onClick={hideSidebar}>
             <Logo imageClassName={clsx("navbar__logo", styles.navbarLogoCustom)} />
-            <img className={clsx('navbar__title', styles.navbarLogoTextCustom, {[styles.hideLogoText]: isSearchBarExpanded})} src={useBaseUrl("img/navigation/logoText.svg")} />
+            <img className={clsx('navbar__title', styles.navbarLogoTextCustom)} src={useBaseUrl("img/navigation/logoText.svg")} />
           </div>
           {!disableColorModeSwitch && sidebarShown && (
-            <Toggle
-              aria-label="Dark mode toggle in sidebar"
-              checked={isDarkTheme}
-              onChange={onToggleChange}
-            />
+            <ColorModeToggle value={colorMode} onChange={onToggleChange} />
           )}
         </div>
         <div className="navbar-sidebar__items">

docs/_website/src/theme/Navbar/styles.module.css

@@ -11,20 +11,10 @@
   }
 }
 
-@media (max-width: 768px) {
-  .hideLogoText {
-    display: none;
-  }
-}
-
 .navbarHideable {
   transition: top 0.2s ease-in-out;
 }
 
-.navbarHidden {
-  top: calc(var(--ifm-navbar-height) * -1) !important;
-}
-
 /* Customization */
 .navbarItemIcon {
   margin-right: .33rem;

docs/_website/src/theme/types.tsx

@@ -0,0 +1,36 @@
+import type { ThemeConfig as AlgoliaThemeConfig } from '@docusaurus/theme-search-algolia';
+import type { ThemeConfig as BaseThemeConfig } from '@docusaurus/preset-classic';
+
+export interface FooterLink {
+  title: string;
+  items: {
+    label: string;
+    to: string;
+  }[];
+}
+
+export interface ThemeConfig extends BaseThemeConfig {
+  image: string;
+  colorMode: {
+    disableSwitch?: boolean;
+  };
+  algolia: AlgoliaThemeConfig;
+  prism: {
+    additionalLanguages: string[];
+  };
+  navbar: {
+    logo: {
+      alt: string;
+      src: string;
+    };
+    hideOnScroll?: boolean;
+  };
+  footer: {
+    style: 'light' | 'dark';
+    logo: {
+      src: string;
+    };
+    links: FooterLink[];
+    copyright: string;
+  }
+}

docs/_website/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "@tsconfig/docusaurus/tsconfig.json",
-  "include": ["src/", "."],
+  "include": ["src/"],
+  "compilerOptions": {
+    "baseUrl": "."
+  }
 }