docs: Landing page update and fix nav tabs routing (#1095)

cengage · Jun 27, 2023 · 4f45985 · 4f45985
1 parent 542ea71
commit 4f45985
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 44 deletions.
diff --git a/.changeset/chart-keyboardevent.md b/.changeset/chart-keyboardevent.md
@@ -0,0 +1,5 @@
+---
+'@react-magma/charts': patch
+---
+
+Fix handleKeyboardInstructionsButtonKeydown type error
diff --git a/.changeset/docs-route.md b/.changeset/docs-route.md
@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+Fix routing in implementation and design component tabs
diff --git a/.changeset/landing.md b/.changeset/landing.md
@@ -0,0 +1,6 @@
+---
+'react-magma-landing': patch
+---
+
+- Display latest version based on React compatibility
+- Remove old versions from list that don't have docs sites
diff --git a/packages/charts/src/components/LineChart/Chart.tsx b/packages/charts/src/components/LineChart/Chart.tsx
@@ -121,7 +121,7 @@ function BaseChart<T>(props: ChartProps<T>, ref: React.Ref<HTMLDivElement>) {
     setIsKeyboardInstructionsOpen(prevOpen => !prevOpen);
   }
 
-  function handleKeyboardInstructionsButtonKeydown(event: React.KeyboardEvent) {
+  function handleKeyboardInstructionsButtonKeydown(event: { preventDefault?: any; key?: any; shiftKey?: any; }) {
     const { key, shiftKey } = event;
 
     switch (key) {

diff --git a/website/react-magma-docs/src/components/PageContent/index.js b/website/react-magma-docs/src/components/PageContent/index.js
@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { graphql, StaticQuery } from 'gatsby';
+import { Link } from 'gatsby';
 import { SubPageTabs } from '../SubPageTabs';
 import { convertTextToId } from '../../utils';
 import {
@@ -28,7 +29,11 @@ const NAV_TABS = {
 };
 
 // Special case pages that don't have secondary navigation.
-const PAGES_NO_NAV = ['contribution_guidelines', 'getting_started_patterns', 'select_migration'];
+const PAGES_NO_NAV = [
+  'contribution_guidelines',
+  'getting_started_patterns',
+  'select_migration',
+];
 
 const TabsWrapper = styled.div`
   position: sticky;
@@ -255,21 +260,21 @@ export const PageContent = ({ children, componentName, type }) => {
                     <StyledTabs aria-label="">
                       {apiDocs || patternsDocs ? (
                         <NavTab
-                          to={apiNavTabToLink}
+                          component={
+                            <Link to={apiNavTabToLink}>Implementation</Link>
+                          }
                           isActive={type === NAV_TABS.API}
-                        >
-                          Implementation
-                        </NavTab>
+                        />
                       ) : (
                         <></>
                       )}
                       {designDocs || designPatternDocs ? (
                         <NavTab
-                          to={designNavTabToLink}
+                          component={
+                            <Link to={designNavTabToLink}>Design</Link>
+                          }
                           isActive={type === NAV_TABS.DESIGN}
-                        >
-                          Design
-                        </NavTab>
+                        />
                       ) : (
                         <></>
                       )}

diff --git a/website/react-magma-docs/src/pages/design/alert.mdx b/website/react-magma-docs/src/pages/design/alert.mdx
@@ -127,7 +127,7 @@ When the viewport is 600px wide and smaller, we automatically reduce the icon an
 
 ## Accessibility
 
-(WAI-ARIA: <Link to="https://www.w3.org/WAI/ARIA/apg/patterns/alert/">https://www.w3.org/WAI/ARIA/apg/patterns/alert/</Link>)
+(WAI-ARIA: <a href="https://www.w3.org/WAI/ARIA/apg/patterns/alert/">https://www.w3.org/WAI/ARIA/apg/patterns/alert/</a>)
 
 Alerts have a number of measures built into them to improve accessibility. Starting with the colors, we make sure that text always has at least a 4.5:1 contrast ratio with the background color. All of the alerts can be navigated with a keyboard or screen reader.
 

diff --git a/website/react-magma-docs/src/pages/design/banner.mdx b/website/react-magma-docs/src/pages/design/banner.mdx
@@ -37,7 +37,7 @@ When the viewport is 600px wide and smaller, we automatically reduce the icon an
 
 ## Accessibility
 
-(WAI-ARIA: <Link to="https://www.w3.org/WAI/ARIA/apg/patterns/alert/">https://www.w3.org/WAI/ARIA/apg/patterns/alert/</Link>)
+(WAI-ARIA: <a href="https://www.w3.org/WAI/ARIA/apg/patterns/alert/">https://www.w3.org/WAI/ARIA/apg/patterns/alert/</a>)
 
 Alerts have a number of measures built into them to improve accessibility. Starting with the colors, we make sure that text always has at least a 4.5:1 contrast ratio with the background color. All of the alerts can be navigated with a keyboard or screen reader.
 

diff --git a/website/react-magma-docs/src/pages/design/toast.mdx b/website/react-magma-docs/src/pages/design/toast.mdx
@@ -11,7 +11,8 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 <PageContent componentName="toast" type="design">
 
 <LeadParagraph>
-  Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
+  Toasts are lightweight notifications designed to mimic the push notifications
+  that have been popularized by mobile and desktop operating systems.
 </LeadParagraph>
 
 ## Usage
@@ -131,7 +132,7 @@ When the viewport is 600px wide and smaller, we automatically reduce the icon an
 
 ## Accessibility
 
-(WAI-ARIA: <Link to="https://www.w3.org/WAI/ARIA/apg/patterns/alert/">https://www.w3.org/WAI/ARIA/apg/patterns/alert/</Link>)
+(WAI-ARIA: <a href="https://www.w3.org/WAI/ARIA/apg/patterns/alert/">https://www.w3.org/WAI/ARIA/apg/patterns/alert/</a>)
 
 Alerts have a number of measures built into them to improve accessibility. Starting with the colors, we make sure that text always has at least a 4.5:1 contrast ratio with the background color. All of the alerts can be navigated with a keyboard or screen reader.
 

diff --git a/website/react-magma-landing/scripts/build.js b/website/react-magma-landing/scripts/build.js
@@ -11,6 +11,7 @@ const cleanVersions = ({ versions, time, tags }) => {
   return semver
     .sort(Object.keys(versions))
     .filter(a => a.match(/^\d+\.\d+\.\d+$/))
+    .filter(a => semver.gte(a, '2.3.2'))
     .map(version => {
       return {
         version,
@@ -22,10 +23,31 @@ const cleanVersions = ({ versions, time, tags }) => {
             return value === version ? key : null;
           })
           .filter(a => a),
+        reactDependency: versions[version]?.peerDependencies?.react,
       };
     });
 };
 
+const versionsByReactDependency = ({ versions, time, tags }) => {
+  const allVersions = cleanVersions({ versions, time, tags });
+
+  var versionsByReactDep = new Map();
+  allVersions.forEach(versionObj => {
+    if (!versionsByReactDep.has(versionObj?.reactDependency)) {
+      versionsByReactDep.set(versionObj?.reactDependency, []);
+    }
+    versionsByReactDep.get(versionObj?.reactDependency).push(versionObj);
+  });
+
+  const latestVersions = [];
+  for (let [, value] of versionsByReactDep) {
+    const latest = value.reverse()[0];
+    latestVersions.push(latest);
+  }
+
+  return latestVersions;
+};
+
 const enhanceTags = ({ tags, time }) => {
   return Object.fromEntries(
     Object.entries(tags).map(([key, value]) => {
@@ -45,7 +67,8 @@ const enhanceTags = ({ tags, time }) => {
 const filterNPM = ({ versions, 'dist-tags': tags, time }) => {
   return {
     tags: enhanceTags({ tags, time }),
-    versions: cleanVersions({ versions, time, tags }),
+    versions: cleanVersions({ versions, time, tags }).reverse(),
+    reactSupport: versionsByReactDependency({ versions, time, tags }),
   };
 };
 
@@ -61,7 +84,7 @@ getAllVersions().then(versions => {
     copy(
       path.resolve(__dirname, '../static/**'),
       path.resolve(__dirname, '../dist'),
-      function(err, files) {
+      function (err, files) {
         if (err) throw err;
         Promise.resolve(files);
       }

diff --git a/website/react-magma-landing/static/styles.css b/website/react-magma-landing/static/styles.css
@@ -148,7 +148,7 @@ header h1 {
 
 .container {
   margin: 0 auto;
-  max-width: 700px;
+  max-width: 800px;
   padding: 10px 20px;
   text-align: center;
 }
@@ -173,7 +173,8 @@ header h1 {
 
 .box {
   padding: 20px;
-  width: 45%;
+  margin: 4px;
+  width: 31%;
   border: 1px solid #D4D4D4;
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
   border-radius: 8px;
@@ -184,14 +185,14 @@ header h1 {
 
 .box-icon {
   width: 80px;
+  margin-top: 12px;
   margin-bottom: 24px;
 }
 
 .box .subtext {
   color: #707070;
   font-size: 14px;
   line-height: 20px;
-
   margin: 4px 0;
 }
 

diff --git a/website/react-magma-landing/templates/index.html b/website/react-magma-landing/templates/index.html
@@ -29,38 +29,32 @@ <h2>Get started with React Magma</h2>
           for students and instructors using Cengage&nbsp;products.
         </p>
         <div class="boxes">
+          <% reactSupport.forEach(function(version){ %>
+            <div class="box">
+              <p class="subtext">Latest version compatible with React <strong><%= version.reactDependency %></strong></p>
+              <span class="box-icon"><svg height="84" viewBox="0 0 128 141" width="80" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="m56 2-48 27c-4.89637641 3.2426324-8 8.5702979-8 14v55c0 5.429702 3.10362359 10.757368 8 14l48 27c4.9460027 2.708226 11.0539973 2.708226 16 0l48-27c4.896376-3.242632 8-8.570298 8-14v-55c0-5.4297021-3.103624-10.7573676-8-14l-48-27c-4.9460027-2.70822571-11.0539973-2.70822571-16 0z" fill="#292f7c"/><path d="m70.0242225 5.59403143 47.8712255 27.26130367c3.775273 2.1499106 6.104552 6.1469726 6.104552 10.4754615v54.3384068c0 4.3284886-2.329279 8.3255506-6.104552 10.4754616l-47.8712255 27.261304c-3.7321883 2.125375-8.3162567 2.125375-12.048445 0l-47.8712259-27.261304c-3.77527271-2.149911-6.1045516-6.146973-6.1045516-10.4754617v-54.3384066c0-4.328489 2.32927889-8.325551 6.1045516-10.4754616l47.8712259-27.26130367c3.7321883-2.12537524 8.3162567-2.12537524 12.048445 0z" fill="#cddeff"/><path d="m64 127.744437v-22.530832-10.5698157-22.6191502c0-7.1878166 0-14.3756332 0-21.5634498 0-4.5467319 0-6.0965502 0-9.4302752-1.5427177 0-3.0829677.7321382-4.4678415 1.524104l-51.5321585 29.469621v25.274887c0 3.2544669 1.75697269 6.2554059 4.5949747 7.8482959l47.0047162 26.38241c1.3729528.770599 2.8761637 1.154518 4.4003091 1.152374 0-1.836331 0-3.044961 0-4.938169z" fill="#292f7c"/><path d="m120 127.744437v-22.530832-10.5698157-22.6191502c0-7.1878166 0-14.3756332 0-21.5634498 0-4.5467319 0-6.0965502 0-9.4302752-1.542718 0-3.082968.7321382-4.467842 1.524104l-51.532158 29.469621v25.274887c0 3.2544669 1.7569727 6.2554059 4.5949747 7.8482959l47.0047163 26.38241c1.372953.770599 2.876164 1.154518 4.400309 1.152469 0-1.836426 0-3.045056 0-4.938264z" fill="#3942b0" transform="matrix(-1 0 0 1 184 0)"/><path d="m68.375447 42.1837818 14.624553 8.6813629-14.6743211 7.9718478c-2.7588952 1.5595987-6.1373174 1.5500402-8.8873148-.0251447l-14.4383641-7.9467031 14.4209381-8.6593592c2.7676752-1.5998192 6.1789795-1.6082018 8.9545089-.0220037z" fill="#1a1e51"/><path d="m68.5069962 50.0061455c.3194632.1957327 2.8198302 1.7447285 7.501101 4.6469874l-7.6824183 4.1838596c-2.7588952 1.5595987-6.1373174 1.5500402-8.8873148-.0251447l-7.4357749-4.0978595c4.7368523-2.9805392 7.2419675-4.5498201 7.5153456-4.7078428.4100671-.2370341 2.8101779-1.5134039 4.4820652-1.4985056 1.6718873.0148982 4.0737982 1.2553173 4.5069962 1.4985056z" fill="#fee449"/></g></svg></span>
+              <a
+                class="btn"
+                href="https://react-magma.cengage.com/version/<%= version.version %>"
+                >View <%= version.version %></a
+              >
+
+              <p class="subtext">
+                Published <%= version.date %>
+              </p>
+            </div>    
+          <% }); %>
           <div class="box">
-            <span class="box-icon"><svg height="84" viewBox="0 0 128 141" width="80" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="m56 2-48 27c-4.89637641 3.2426324-8 8.5702979-8 14v55c0 5.429702 3.10362359 10.757368 8 14l48 27c4.9460027 2.708226 11.0539973 2.708226 16 0l48-27c4.896376-3.242632 8-8.570298 8-14v-55c0-5.4297021-3.103624-10.7573676-8-14l-48-27c-4.9460027-2.70822571-11.0539973-2.70822571-16 0z" fill="#292f7c"/><path d="m70.0242225 5.59403143 47.8712255 27.26130367c3.775273 2.1499106 6.104552 6.1469726 6.104552 10.4754615v54.3384068c0 4.3284886-2.329279 8.3255506-6.104552 10.4754616l-47.8712255 27.261304c-3.7321883 2.125375-8.3162567 2.125375-12.048445 0l-47.8712259-27.261304c-3.77527271-2.149911-6.1045516-6.146973-6.1045516-10.4754617v-54.3384066c0-4.328489 2.32927889-8.325551 6.1045516-10.4754616l47.8712259-27.26130367c3.7321883-2.12537524 8.3162567-2.12537524 12.048445 0z" fill="#cddeff"/><path d="m64 127.744437v-22.530832-10.5698157-22.6191502c0-7.1878166 0-14.3756332 0-21.5634498 0-4.5467319 0-6.0965502 0-9.4302752-1.5427177 0-3.0829677.7321382-4.4678415 1.524104l-51.5321585 29.469621v25.274887c0 3.2544669 1.75697269 6.2554059 4.5949747 7.8482959l47.0047162 26.38241c1.3729528.770599 2.8761637 1.154518 4.4003091 1.152374 0-1.836331 0-3.044961 0-4.938169z" fill="#292f7c"/><path d="m120 127.744437v-22.530832-10.5698157-22.6191502c0-7.1878166 0-14.3756332 0-21.5634498 0-4.5467319 0-6.0965502 0-9.4302752-1.542718 0-3.082968.7321382-4.467842 1.524104l-51.532158 29.469621v25.274887c0 3.2544669 1.7569727 6.2554059 4.5949747 7.8482959l47.0047163 26.38241c1.372953.770599 2.876164 1.154518 4.400309 1.152469 0-1.836426 0-3.045056 0-4.938264z" fill="#3942b0" transform="matrix(-1 0 0 1 184 0)"/><path d="m68.375447 42.1837818 14.624553 8.6813629-14.6743211 7.9718478c-2.7588952 1.5595987-6.1373174 1.5500402-8.8873148-.0251447l-14.4383641-7.9467031 14.4209381-8.6593592c2.7676752-1.5998192 6.1789795-1.6082018 8.9545089-.0220037z" fill="#1a1e51"/><path d="m68.5069962 50.0061455c.3194632.1957327 2.8198302 1.7447285 7.501101 4.6469874l-7.6824183 4.1838596c-2.7588952 1.5595987-6.1373174 1.5500402-8.8873148-.0251447l-7.4357749-4.0978595c4.7368523-2.9805392 7.2419675-4.5498201 7.5153456-4.7078428.4100671-.2370341 2.8101779-1.5134039 4.4820652-1.4985056 1.6718873.0148982 4.0737982 1.2553173 4.5069962 1.4985056z" fill="#fee449"/></g></svg></span>
-            <a
-              class="btn"
-              href="https://react-magma.cengage.com/version/latest"
-              >View Latest Version</a
-            >
-            <p class="subtext">
-              v<%= tags.latest.version %>
-              &ndash;
-              Published <%= tags.latest.date %>
-            </p>
-            <p class="subtext">Latest stable version</p>
-          </div>
-          <div class="box">
+            <p class="subtext">Current development version</p>
             <img class="box-icon" src="images/RM-Next.svg" alt="" />
             <a class="btn" href="https://next--upbeat-sinoussi-f675aa.netlify.app/"
-              >View Next Version</a
-            >
-            <p class="subtext">
-              v<%= tags.next.version %>
-              &ndash;
-              Published <%= tags.next.date %>
-            </p>
-            <p class="subtext">In development</p>
+              >Dev Version</a>
           </div>
-        </div>
       </section>
       <section>
-        <h3>Older versions</h3>
+        <h3>All versions</h3>
         <ul>
-          <% versions.reverse().forEach(function(version){ %>
+          <% versions.forEach(function(version){ %>
           <li><a href="/version/<%= version.version %>">Version <%= version.version %></a></li>
           <% }); %>
         </ul>