Feature/past knits dropdown

package.json

@@ -41,6 +41,8 @@
     "@mdx-js/react": "^3.0.1",
     "@mui/joy": "^5.0.0-beta.27",
     "core-js": "^3.35.1",
+    "html-react-parser": "^5.2.2",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",

src/app.js

@@ -9,59 +9,55 @@ import {
   NotFoundView,
   RegistrationView,
   TravelView,
+  Knit9View,
 } from './views'
 
-import { Header, Footer } from '@components/layout'
+import { Header, Footer, Banner } from '@components/layout'
 
-const menuOptions = [
-  {
-    path: '/',
-    label: 'Home',
-    view: <HomeView />,
-  },
-  {
-    path: '/registration',
-    label: 'Registration',
-    view: <RegistrationView />,
-  },
+const pastKnits = [
+  { path: '/past-knits/knit9', label: 'KNIT 9'},
+  { path: 'https://learn.fabric-testbed.net/knowledge-base/knit-8-a-fabric-community-workshop/', label: 'KNIT 8' },
+  { path: 'https://learn.fabric-testbed.net/knowledge-base/knit-7-a-fabric-community-workshop/', label: 'KNIT 7' },
   {
-    path: '/travel',
-    label: 'Travel Info',
-    view: <TravelView />,
+    label: 'Additional KNITs',
+    subsubItems: [
+      { path: 'https://learn.fabric-testbed.net/knowledge-base/knit-6-a-fabric-community-workshop/', label: 'KNIT 6' },
+      { path: 'https://learn.fabric-testbed.net/knowledge-base/knit-5-a-fabric-community-workshop/', label: 'KNIT 5' },
+      { path: 'https://learn.fabric-testbed.net/knowledge-base/knit-winter-21-a-fabric-community-workshop', label: 'KNIT 4' },
+    ],
   },
-  {
-    path: '/cfa',
-    label: 'Calls for Action',
-    view: <CfaView />,
-  }
-  // {
-  //   path: '/agenda',
-  //   label: 'Agenda',
-  //   view: <AgendaView />,
-  // }
 ]
 
-//
+const menuOptions = [
+  { path: '/', label: 'Home' },
+  { path: '/registration', label: 'Registration' },
+  { path: '/travel', label: 'Travel Info' },
+  { path: '/cfa', label: 'Calls for Action' },
+  { path: '/agenda', label: 'Agenda' },
+  {
+    label: 'Past KNITs',
+    path: '/past-knits', // Parent path
+    subItems: pastKnits,
+  },
+];
 
 export const App = () => {
   return (
     <Fragment>
       <Header />
+      <Banner />
       <Menu options={ menuOptions } />
       <main>
         <Routes>
-          {
-            // we'll build the routes from the main menu items.
-            // note this implementation only supports a flat,
-            // one-level navigation structure.
-            menuOptions.map(({ path, view, label }) => (
-              <Route
-                key={ `route-${ label }` }
-                path={ path }
-                element={ view }
-              />
-            ))
-          }
+          <Route path="/" element={ <HomeView /> } />
+          <Route path="/registration" element={ <RegistrationView /> } />
+          <Route path="/travel" element={ <TravelView /> } />
+          <Route path="/cfa" element={ <CfaView /> } />
+          <Route path="/agenda" element={ <AgendaView /> } />
+          <Route path="/past-knits">
+            <Route path="knit9" element={ <Knit9View /> } />
+          </Route>
+
           <Route path="__markdown" element={ <MarkdownView /> } />
           <Route path="*" element={ <NotFoundView /> } />
         </Routes>

src/components/icons/chevron-icons.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const ChevronIcon = ({ size = 24, fill = "#000", children, ...rest }) => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    height={`${size}px`}
+    width={`${size}px`}
+    fill={fill}
+    viewBox="0 0 24 24"
+    {...rest}
+  >
+    {children}
+  </svg>
+);
+
+export const ChevronUpIcon = props => (
+  <ChevronIcon {...props}>
+    <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+    <path d="M0 0h24v24H0z" fill="none" />
+  </ChevronIcon>
+);
+
+export const ChevronDownIcon = props => (
+  <ChevronIcon {...props}>
+    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+    <path d="M0 0h24v24H0z" fill="none" />
+  </ChevronIcon>
+);
+
+export const ChevronLeftIcon = props => (
+  <ChevronIcon {...props}>
+    <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" />
+  </ChevronIcon>
+);
+
+export const ChevronRightIcon = props => (
+  <ChevronIcon {...props}>
+    <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+  </ChevronIcon>
+);
+
+const requiredProps = {
+  fill: PropTypes.string,
+  size: PropTypes.number,
+  children: PropTypes.node,
+};
+
+ChevronIcon.propTypes = requiredProps;

src/components/icons/index.js

@@ -0,0 +1,2 @@
+export * from './chevron-icons'
+export * from './link-icons'

src/components/layout/banner.js

@@ -0,0 +1,41 @@
+import { Alert as MUIAlert} from '@mui/joy'
+import Link from '@mui/joy/Link'
+import Parser from 'html-react-parser'
+import moment from 'moment';
+
+const checkNotExpired = (start, end) => {
+  const startUTC = start.substring(0, 19);
+  const stillStartUTC = moment.utc(startUTC).toDate();
+  const endUTC = end.substring(0, 19);
+  const stillEndUTC = moment.utc(endUTC).toDate();
+  return stillEndUTC > new Date() && stillStartUTC < new Date();
+}
+
+export const Banner = () => {
+  const bannerContent = {
+    "content": "FABRIC invites nominations for four awards recognizing innovative uses of FABRIC resources—Best Published Paper, Best FABRIC Matrix, Best FABRIC Experiment, and Best Classroom Use of FABRIC — submissions due by <b>Monday, February 24 at 11:59 PM ET</b>, and winners announced at KNIT10.",
+    "end_date": "2025-02-25 00:00:00+00:00",
+    "link": "https://docs.google.com/forms/d/e/1FAIpQLSeTp3i2iDhB7bHgN8ryMxZci8ya87yjeQd7_JMZImUodNinVA/viewform",
+    "start_date": "2025-01-22 00:00:00+00:00",
+    "button": ">>> Submit Form"
+  }
+
+  return (
+    checkNotExpired(bannerContent.start_date, bannerContent.end_date) &&
+    <MUIAlert
+      color="warning"
+      size="md"
+      variant="soft"
+    >
+      <span>{Parser(bannerContent.content)}
+      <Link 
+        href={bannerContent.link}
+        target="_blank"
+        rel="noreferrer"
+        sx={{ marginLeft: '20px' }}
+      >
+        {bannerContent.button}
+      </Link></span>
+    </MUIAlert>
+  )
+}

src/components/layout/index.js

@@ -2,3 +2,4 @@ export * from './container'
 export * from './header'
 export * from './footer'
 export * from './page'
+export * from './banner'

src/components/link/external-link.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 import { BaseLinkPropTypes } from './'
-import { ExternalLinkIcon } from './'
+import { ExternalLinkIcon } from '../icons'
 import { Button, Link } from '@mui/joy'
 
 export const ExternalLink = ({ to, children, button, ...props }) => {
@@ -25,8 +25,8 @@ export const ExternalLink = ({ to, children, button, ...props }) => {
             target="_blank"
             rel="noopener noreferrer"
             { ...props }
-          >{ children }</Link>
-          <ExternalLinkIcon /> 
+          >{ children }<ExternalLinkIcon /> </Link>
+
         </Fragment>
       )}
     </Fragment>

src/components/link/index.js

@@ -1,4 +1,3 @@
 export * from './link'
-export * from './link-icon'
 export * from './external-link'
 export * from './mail-to-link'

src/components/link/mail-to-link.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 import { BaseLinkPropTypes } from './'
-import { MailtoLinkIcon } from './'
+import { MailtoLinkIcon } from '../icons'
 
 export const MailtoLink = ({ to, children }) => {
   return (

src/components/menu/desktop-menu/index.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { NavLink, useLocation } from 'react-router-dom'
+import { ChevronDownIcon } from '../../icons/chevron-icons'
+import { MenuContainer, MenuLink, MenuItem  } from './menuComponents'
+import { Submenu, SubmenuHeader } from './submenuComponents'
+
+export const DesktopMenu = ({ options = [] }) => {
+  const location = useLocation() // used to determine active paths
+  const [openSubmenu, setOpenSubmenu] = useState(-1)
+
+  const handleOpenSubmenu = (index) => () => setOpenSubmenu(index)
+  const handleCloseSubmenu = () => setOpenSubmenu(-1)
+
+  // determine if a path is active
+  const isActive = (path, subItems) => {
+    if (location.pathname === path) return true; // direct match
+    if (subItems) {
+      return subItems.some((item) =>
+        location.pathname.startsWith(item.path)
+      )
+    }
+    return false
+  }
+
+  return (
+    <MenuContainer role="navigation" aria-label="Desktop menu">
+      {options.map(({ label, path, subItems }, index) => (
+        <MenuItem
+          key={path || label}
+          onMouseOver={subItems ? handleOpenSubmenu(index) : undefined}
+          onMouseOut={subItems ? handleCloseSubmenu : undefined}
+        >
+          {subItems ? (
+            <>
+              <SubmenuHeader
+                active={isActive(path, subItems)}
+                open={openSubmenu === index}
+                aria-label={`${label} submenu`}
+              >
+                {label}
+                <ChevronDownIcon size={ 16 } fill="var(--knit-palette-primary-900)"/>
+              </SubmenuHeader>
+              {openSubmenu === index && <Submenu items={subItems} />}
+            </>
+          ) : (
+            <MenuLink as={NavLink} to={path} active={isActive(path)}>
+              {label}
+            </MenuLink>
+          )}
+        </MenuItem>
+      ))}
+    </MenuContainer>
+  )
+}
+
+DesktopMenu.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      path: PropTypes.string,
+      subItems: PropTypes.arrayOf(
+        PropTypes.shape({
+          label: PropTypes.string.isRequired,
+          path: PropTypes.string.isRequired,
+        })
+      ),
+    })
+  ),
+}