Merge sync f2b590a

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     'no-console': 'off',
     semi: ['error', 'always'],
     quotes: ['error', 'single'],
+    'no-duplicate-imports': 'error',
     'react/jsx-uses-react': 'off', // no longer needed with new jsx transform
     'react/react-in-jsx-scope': 'off', // ditto
     'react-hooks/rules-of-hooks': 'error',
@@ -50,6 +51,7 @@ module.exports = {
         'no-constant-condition': 'off',
         'no-useless-escape': 'off',
         'no-dupe-keys': 'off',
+        'no-duplicate-imports': 'off',
       },
     },
   ],

.github/workflows/deploy.yml

@@ -31,7 +31,7 @@ jobs:
       - run: yarn lint:links
 
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@4.1.5
+        uses: JamesIves/github-pages-deploy-action@4.1.8
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages

package.json

@@ -73,7 +73,7 @@
     "@babel/core": "^7.16.5",
     "@babel/eslint-parser": "^7.16.5",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
     "@mdx-js/loader": "^2.0.0-next.9",
     "@octokit/auth-action": "^1.3.3",
@@ -82,26 +82,26 @@
     "@svgr/webpack": "^6.1.2",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.2.3",
-    "copy-webpack-plugin": "^10.1.0",
+    "copy-webpack-plugin": "^10.2.0",
     "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "cypress": "^9.1.1",
+    "css-minimizer-webpack-plugin": "^3.3.1",
+    "cypress": "^9.2.0",
     "directory-tree": "^3.0.1",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.4.1",
+    "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-mdx": "^1.16.0",
-    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "front-matter": "^4.0.2",
     "html-webpack-plugin": "^5.5.0",
     "http-server": "^14.0.0",
     "husky": "^7.0.4",
     "hyperlink": "^5.0.3",
     "jest": "^27.4.5",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^12.1.4",
     "lodash": "^4.17.21",
     "markdownlint": "^0.24.0",
     "markdownlint-cli": "^0.30.0",
@@ -121,37 +121,36 @@
     "remark-extract-anchors": "1.1.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^1.0.0",
-    "remark-html": "^15.0.0",
+    "remark-html": "^15.0.1",
     "remark-refractor": "montogeek/remark-refractor",
     "remark-slug": "^7.0.1",
     "rimraf": "^3.0.2",
-    "sass": "^1.45.0",
+    "sass": "^1.45.1",
     "sass-loader": "^12.4.0",
     "sirv-cli": "^1.0.14",
     "sitemap-static": "^0.4.2",
     "start-server-and-test": "^1.14.0",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.2",
+    "tailwindcss": "^3.0.7",
     "tap-spot": "^1.1.1",
     "unist-util-visit": "^4.1.0",
     "webpack": "^5.65.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.6.0",
+    "webpack-dev-server": "^4.7.1",
     "webpack-merge": "^5.8.0",
     "workbox-webpack-plugin": "^6.4.2"
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.42",
     "path-browserify": "^1.0.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-g-analytics": "0.4.2",
     "react-helmet-async": "^1.2.2",
-    "react-router-dom": "^5.3.0",
-    "react-spring": "^9.3.2",
+    "react-router-dom": "^6.2.1",
+    "react-spring": "^9.3.3",
     "react-tiny-popover": "5",
     "react-use": "^17.3.1",
     "react-visibility-sensor": "^5.0.2",

src/AnalyticsRouter.jsx

@@ -0,0 +1,105 @@
+/**
+ * based on https://github.com/seeden/react-g-analytics
+ * refactored against new version of react/react-router-dom
+ */
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { useEffect } from 'react';
+AnalyticsRouter.propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  set: PropTypes.object,
+};
+export default function AnalyticsRouter(props) {
+  const { id, set, children } = props;
+
+  return (
+    <BrowserRouter>
+      <GoogleAnalytics id={id} set={set}>
+        {children}
+      </GoogleAnalytics>
+    </BrowserRouter>
+  );
+}
+
+function loadScript() {
+  const gads = document.createElement('script');
+  gads.async = true;
+  gads.type = 'text/javascript';
+  gads.src = '//www.google-analytics.com/analytics.js';
+
+  const head = document.getElementsByTagName('head')[0];
+  head.appendChild(gads);
+}
+
+function initGoogleAnalytics(id, set) {
+  if (window.ga || !id) {
+    return;
+  }
+
+  window.ga =
+    window.ga ||
+    function () {
+      (ga.q = ga.q || []).push(arguments); // eslint-disable-line
+    };
+  ga.l = +new Date(); // eslint-disable-line
+
+  loadScript();
+
+  window.ga('create', id, 'auto');
+
+  if (set) {
+    Object.keys(set).forEach((key) => {
+      window.ga('set', key, set[key]);
+    });
+  }
+}
+GoogleAnalytics.propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  set: PropTypes.object,
+};
+
+function googleAnalyticsCommand(what, options, ...args) {
+  if (!window.ga) {
+    throw new Error('Google analytics is not initialized');
+  }
+
+  if (typeof options === 'string') {
+    return window.ga(what, options, ...args);
+  }
+
+  return window.ga(what, options);
+}
+function googleAnalyticsSet(...options) {
+  return googleAnalyticsCommand('set', ...options);
+}
+function googleAnalyticsSend(...options) {
+  return googleAnalyticsCommand('send', ...options);
+}
+
+function GoogleAnalytics(props) {
+  const { id, set, children } = props;
+
+  const location = useLocation();
+
+  useEffect(() => {
+    initGoogleAnalytics(id, set);
+  }, [id, set]);
+
+  useEffect(() => {
+    const path = location.pathname + location.search;
+
+    googleAnalyticsSet({
+      page: path,
+      title: document.title,
+      location: document.location,
+    });
+
+    googleAnalyticsSend({
+      hitType: 'pageview',
+    });
+  }, [location]);
+
+  return <>{children}</>;
+}

src/App.jsx

@@ -1,12 +1,4 @@
-import { Route } from 'react-router-dom';
 import Site from './components/Site/Site';
 export default function App() {
-  return (
-    <Route
-      path="/"
-      render={(props) => (
-        <Site {...props} import={(path) => import(`./content/${path}`)} />
-      )}
-    />
-  );
+  return <Site import={(path) => import(`./content/${path}`)} />;
 }

src/components/Navigation/Navigation.jsx

@@ -2,7 +2,7 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { DocSearch } from '@docsearch/react';
-import { Link as ReactDOMLink } from 'react-router-dom';
+import { Link as ReactDOMLink, NavLink, useLocation } from 'react-router-dom';
 
 // Import Components
 import Link from '../Link/Link';
@@ -16,22 +16,21 @@ import GithubIcon from '../../styles/icons/github.svg';
 import TwitterIcon from '../../styles/icons/twitter.svg';
 import StackOverflowIcon from '../../styles/icons/stack-overflow.svg';
 import Hamburger from '../../styles/icons/hamburger.svg';
-import { NavLink, useLocation } from 'react-router-dom';
 import HelloDarkness from '../HelloDarkness';
 
 NavigationItem.propTypes = {
   children: PropTypes.node.isRequired,
   url: PropTypes.string.isRequired,
-  isActive: PropTypes.func,
+  isactive: PropTypes.func,
 };
 
-function NavigationItem({ children, url, isActive }) {
+function NavigationItem({ children, url, isactive }) {
   let obj = {};
   // decide if the link is active or not by providing a function
   // otherwise we'll let react-dom makes the decision for us
-  if (isActive) {
+  if (isactive) {
     obj = {
-      isActive,
+      isactive,
     };
   }
   const classes =
@@ -51,9 +50,10 @@ function NavigationItem({ children, url, isActive }) {
   return (
     <NavLink
       {...obj}
-      activeClassName="active-menu"
+      className={({ isActive }) =>
+        isActive ? `${classes} !text-blue-200` : classes
+      }
       to={url}
-      className={classes}
     >
       {children}
     </NavLink>
@@ -195,9 +195,9 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) {
             return link.children;
           })
           .map((link) => {
-            if (link.isActive) {
+            if (link.isactive) {
               // hide the children if the link is not active
-              if (!link.isActive({}, location)) {
+              if (!link.isactive({}, location)) {
                 return null;
               }
             }
@@ -210,19 +210,26 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) {
                   className="md:max-w-[1024px] md:mx-auto md:grid md:grid-flow-col md:justify-end md:gap-x-[20px] md:px-[24px]"
                   data-testid="sub-navigation"
                 >
-                  {link.children.map((child) => (
-                    <NavLink
-                      key={child.url}
-                      to={child.url}
-                      title={child.title}
-                      className="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white"
-                      activeClassName="active-submenu"
-                    >
-                      {child.content === 'api'
-                        ? child.content.toUpperCase()
-                        : child.content}
-                    </NavLink>
-                  ))}
+                  {link.children.map((child) => {
+                    const classNames =
+                      'text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white';
+                    return (
+                      <NavLink
+                        key={child.url}
+                        to={child.url}
+                        title={child.title}
+                        className={({ isActive }) =>
+                          isActive
+                            ? `!text-black dark:!text-white ${classNames}`
+                            : classNames
+                        }
+                      >
+                        {child.content === 'api'
+                          ? child.content.toUpperCase()
+                          : child.content}
+                      </NavLink>
+                    );
+                  })}
                 </div>
               </div>
             );

src/components/SidebarItem/SidebarItem.jsx

@@ -80,7 +80,7 @@ export default class SidebarItem extends Component {
         )}
 
         <NavLink
-          exact
+          end
           key={this.props.url}
           className={`${block}__title`}
           to={this.props.url}