Fix docs deep linking (nodejs#910)

* add link to documentation, fix styling and use hook for mq, fix docs deep linking * change routing to be all hashed based * only use matchMedia if available * remove set page * removed some console log errors * adding in explicit lint rules, and snaps * revert back to current docs link * snaps
Harshha7 · Sep 5, 2020 · 215d204 · 215d204
1 parent a03e6ff
commit 215d204
Show file tree

Hide file tree

Showing 8 changed files with 553 additions and 506 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -27,6 +27,8 @@ module.exports = {
     jest: true,
   },
   rules: {
+    'react/no-unused-prop-types': 'off',
+    'react/require-default-props': 'off',
     'react/jsx-filename-extension': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',

diff --git a/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap b/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`Tests for Header component renders correctly 1`] = `
           </a>
         </li>
         <li
-          className="nav__tabs only-desktop"
+          className="nav__tabs"
         >
           <a
             className="activeStyleTab"
@@ -56,18 +56,6 @@ exports[`Tests for Header component renders correctly 1`] = `
             Documentation
           </a>
         </li>
-        <li
-          className="nav__tabs only-mobile"
-        >
-          <a
-            className="activeStyleTab only-mobile"
-            href="https://nodejs.org/en/docs/"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Docs
-          </a>
-        </li>
         <li
           className="nav__tabs"
         >

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -3,112 +3,106 @@ import React from 'react';
 import logoLight from '../../images/logos/nodejs-logo-light-mode.svg';
 import logoDark from '../../images/logos/nodejs-logo-dark-mode.svg';
 import defaultDarkModeController from '../../util/darkModeController';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 
 interface Props {
   darkModeController?: typeof defaultDarkModeController;
 }
 
 const Header = ({
   darkModeController = defaultDarkModeController,
-}: Props): JSX.Element => (
-  <nav aria-label="Primary" className="nav">
-    <div className="nav__container">
-      <div className="nav__startwrapper">
-        <Link to="/">
-          <div className="logo">
-            <img
-              src={logoLight}
-              alt="Node.js"
-              className="nav__logo light-mode-only"
-            />
-            <img
-              src={logoDark}
-              alt="Node.js"
-              className="nav__logo dark-mode-only"
-            />
-          </div>
-        </Link>
+}: Props): JSX.Element => {
+  const isMobile = useMediaQuery('(max-width: 870px)');
+  return (
+    <nav aria-label="Primary" className="nav">
+      <div className="nav__container">
+        <div className="nav__startwrapper">
+          <Link to="/">
+            <div className="logo">
+              <img
+                src={logoLight}
+                alt="Node.js"
+                className="nav__logo light-mode-only"
+              />
+              <img
+                src={logoDark}
+                alt="Node.js"
+                className="nav__logo dark-mode-only"
+              />
+            </div>
+          </Link>
 
-        <ul className="nav__tabs__container">
-          <li className="nav__tabs">
-            <Link
-              to="/learn"
-              className="activeStyleTab"
-              activeClassName="active"
-              partiallyActive
-            >
-              Learn
-            </Link>
-          </li>
-          <li className="nav__tabs only-desktop">
-            <a
-              className="activeStyleTab"
-              target="_blank"
-              href="https://nodejs.org/en/docs/"
-              rel="noopener noreferrer"
-            >
-              Documentation
-            </a>
-          </li>
-          <li className="nav__tabs only-mobile">
-            <a
-              className="activeStyleTab only-mobile"
-              target="_blank"
-              href="https://nodejs.org/en/docs/"
-              rel="noopener noreferrer"
-            >
-              Docs
-            </a>
-          </li>
-          <li className="nav__tabs">
-            <a
-              href="https://nodejs.org/en/download/"
-              className="activeStyleTab"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Download
-            </a>
-          </li>
-        </ul>
-      </div>
+          <ul className="nav__tabs__container">
+            <li className="nav__tabs">
+              <Link
+                to="/learn"
+                className="activeStyleTab"
+                activeClassName="active"
+                partiallyActive
+              >
+                Learn
+              </Link>
+            </li>
+            <li className="nav__tabs">
+              <a
+                className="activeStyleTab"
+                target="_blank"
+                href="https://nodejs.org/en/docs/"
+                rel="noopener noreferrer"
+              >
+                {isMobile ? 'Docs' : 'Documentation'}
+              </a>
+            </li>
+            <li className="nav__tabs">
+              <a
+                href="https://nodejs.org/en/download/"
+                className="activeStyleTab"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Download
+              </a>
+            </li>
+          </ul>
+        </div>
 
-      <div className="nav__endwrapper">
-        <ul className="right-container">
-          <li className="nav__tabs nav__tabs--right">
-            <button
-              type="button"
-              className="dark-mode-toggle"
-              onMouseDown={darkModeController.handleEvent}
-              onMouseUp={darkModeController.handleEvent}
-            >
-              <span className="sr-only">Toggle Dark Mode</span>
-              <i className="material-icons light-mode-only">nights_stay</i>
-              <i className="material-icons dark-mode-only">wb_sunny</i>
-            </button>
-          </li>
+        <div className="nav__endwrapper">
+          <ul className="right-container">
+            <li className="nav__tabs nav__tabs--right">
+              <button
+                type="button"
+                className="dark-mode-toggle"
+                onMouseDown={darkModeController.handleEvent}
+                onMouseUp={darkModeController.handleEvent}
+              >
+                <span className="sr-only">Toggle Dark Mode</span>
+                <i className="material-icons light-mode-only">nights_stay</i>
+                <i className="material-icons dark-mode-only">wb_sunny</i>
+              </button>
+            </li>
 
-          <li className="nav__tabs">
-            <a
-              target="_blank"
-              href="https://github.com/nodejs/nodejs.dev"
-              rel="noopener noreferrer"
-            >
-              <span className="sr-only">GitHub</span>
-              <svg
-                width="2.2rem"
-                height="2.2rem"
-                viewBox="0 0 438.549 438.549"
-                style={{ fill: 'var(--color-text-accent)' }}
+            <li className="nav__tabs">
+              <a
+                target="_blank"
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
               >
-                <path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365   c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63   c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996   c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136   c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559   c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559   c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997   c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851   c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136   c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41   c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126   c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817   c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994   c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849   c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24   c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979   c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146   c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995   c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906   C438.536,184.851,428.728,148.168,409.132,114.573z" />
-              </svg>
-            </a>
-          </li>
-        </ul>
+                <span className="sr-only">GitHub</span>
+                <svg
+                  width="2.2rem"
+                  height="2.2rem"
+                  viewBox="0 0 438.549 438.549"
+                  style={{ fill: 'var(--color-text-accent)' }}
+                >
+                  <path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365   c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63   c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996   c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136   c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559   c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559   c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997   c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851   c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136   c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41   c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126   c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817   c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994   c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849   c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24   c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979   c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146   c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995   c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906   C438.536,184.851,428.728,148.168,409.132,114.573z" />
+                </svg>
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
-  </nav>
-);
+    </nav>
+  );
+};
 
 export default Header;
diff --git a/src/containers/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap b/src/containers/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`AuthorsList component renders correctly 1`] = `
   css={
     Object {
       "map": undefined,
-      "name": "ekkwel",
+      "name": "al6qib",
       "next": undefined,
       "styles": "
   display: flex;
@@ -16,7 +16,7 @@ exports[`AuthorsList component renders correctly 1`] = `
   text-transform: uppercase;
   padding-left: 0;
 
-  li:first-child a {
+  li:first-of-type a {
     margin-left: 0 !important;
   }
 

diff --git a/src/containers/AuthorList/index.tsx b/src/containers/AuthorList/index.tsx
@@ -11,7 +11,7 @@ const list: SerializedStyles = css`
   text-transform: uppercase;
   padding-left: 0;
 
-  li:first-child a {
+  li:first-of-type a {
     margin-left: 0 !important;
   }
 

diff --git a/src/hooks/useMediaQuery.tsx b/src/hooks/useMediaQuery.tsx
@@ -0,0 +1,17 @@
+import { useState, useLayoutEffect } from 'react';
+
+export const useMediaQuery = (query: string): boolean | undefined => {
+  const [matches, setMatches] = useState<boolean>();
+
+  useLayoutEffect(() => {
+    if (typeof window.matchMedia === 'function') {
+      const mq = window.matchMedia(query);
+      setMatches(mq.matches);
+      const handler = (): void => setMatches(mq.matches);
+      mq.addListener(handler);
+      return (): void => mq.removeListener(handler);
+    }
+  }, [query]);
+
+  return matches;
+};