Merge pull request #91 from samvera/new-navigation

Create new navigation and update the app with the new nav structure

app-config.js

@@ -1,15 +1,3 @@
-export const primaryNavigation = [
-  { name: "About Samvera", href: "/about/samvera-community-sourced-software" },
-  {
-    name: "What is Samvera?",
-    href: "/what-is-samvera/samvera-open-source-repository-framework",
-  },
-  { name: "Why Use Samvera?", href: "/why-use-samvera" },
-  { name: "Who Uses Samvera?", href: "/who-uses-samvera" },
-  { name: "Getting Started", href: "/getting-started" },
-  { name: "News and Events", href: "/news" },
-];
-
 export const SAMVERA_PARTNERS = [
   {
     label: "Boston Public Library",

components/home/CommunityNewsEvents.jsx

@@ -41,15 +41,15 @@ export default function CommunityNewsEvents({ items }) {
             <ul className="ml-0 list-none">
               {items.map((item) => (
                 <li key={item.slug} className="mb-3">
-                  <Link legacyBehavior href={`/news/${item.slug}`}>
+                  <Link legacyBehavior href={`/news-and-events/${item.slug}`}>
                     <a className="text-samGreyDark font-cooperBold">
                       {item.title}
                     </a>
                   </Link>
                 </li>
               ))}
             </ul>
-            <Link legacyBehavior href="/news">
+            <Link legacyBehavior href="/news-and-events">
               <a className="button">View all news</a>
             </Link>
           </div>

components/layout/HeaderNew.jsx

@@ -13,11 +13,11 @@ import { siteNavigation } from "site-navigation";
 const newsNavigation = [
   {
     label: "News & Events",
-    slug: "news",
+    slug: "news-and-events",
     items: [
       {
         label: "News and events",
-        href: "/news",
+        href: "/news-and-events",
       },
       {
         label: "Samvera calendar",
@@ -237,14 +237,6 @@ export default function HeaderNew() {
               siteNavIndex={siteNavigation.length}
             />
           ))}
-          {softwareSolutionsNavigation.map((navItem) => (
-            <PopOverWrapper
-              key={navItem.slug}
-              label={navItem.label}
-              items={navItem.items}
-              siteNavIndex={siteNavigation.length + 1}
-            />
-          ))}
         </Popover.Group>
       </nav>
 
@@ -302,13 +294,6 @@ export default function HeaderNew() {
                     items={parentPage.items}
                   />
                 ))}
-                {softwareSolutionsNavigation.map((parentPage) => (
-                  <DisclosureWrapper
-                    key={parentPage.slug}
-                    label={parentPage.label}
-                    items={parentPage.items}
-                  />
-                ))}
               </div>
             </div>
           </div>

components/layout/Main.jsx

@@ -1,5 +1,5 @@
 import React from "react";
 
 export default function Main({ children }) {
-  return <main className="pb-4">{children}</main>;
+  return <main className="pb-4 min-h-[50vh]">{children}</main>;
 }

components/sidebar/Sidebar.jsx

@@ -13,20 +13,20 @@ export default function Sidebar({
   const router = useRouter();
 
   return (
-    <aside className="sidebar bg-white -mt-4 p-8 border-t-4 border-samDarkRed col-span-1 md:col-span-4 text-center z-10">
+    <aside className="z-10 col-span-1 p-8 -mt-4 text-center bg-white border-t-4 sidebar border-samDarkRed md:col-span-4">
       {/* Only display parent / child links if NOT on News & Events page */}
-      {router.pathname !== "/news/[slug]" && (
+      {router.pathname !== "/news-and-events/[slug]" && (
         <SidebarGeneric items={sideNav} parentDir={parentDir} title={title} />
       )}
 
       <SidebarLinks />
 
-      {router.pathname !== "/news" && (
+      {router.pathname !== "/news-and-events" && (
         <>
           <hr />
           <SidebarGeneric
             items={sideNewsAndEvents}
-            parentDir="news"
+            parentDir="news-and-events"
             title="News and Events"
           />
         </>

lib/build-nav.js

@@ -3,6 +3,39 @@ const matter = require("gray-matter");
 
 const fileToWrite = "site-navigation.js";
 
+const softwareSolutionsNavigation = [
+  {
+    label: "Avalon Media System",
+    href: "https://www.avalonmediasystem.org/",
+    isExternal: true,
+    slug: "",
+  },
+  {
+    label: "Hyku",
+    href: "https://hyku.samvera.org/",
+    isExternal: true,
+    slug: "",
+  },
+  {
+    label: "Hyrax",
+    href: "https://hyrax.samvera.org/",
+    isExternal: true,
+    slug: "",
+  },
+  {
+    label: "Samvera Community Github",
+    href: "https://github.com/samvera",
+    isExternal: true,
+    slug: "",
+  },
+  {
+    label: "Samvera Labs",
+    href: "https://github.com/samvera-labs",
+    isExternal: true,
+    slug: "",
+  },
+];
+
 function getNavMap() {
   const navMap = [];
 
@@ -26,8 +59,11 @@ function getNavMap() {
     /**
      * Exclude creating navigation for Home, Contact and News
      */
-    if (!["home", "contact-us", "news"].includes(directory)) {
+    if (!["home", "contact-us", "news-and-events"].includes(directory)) {
       const files = fs.readdirSync(`markdown/${directory}`);
+
+      // If there is only one file and it is index.md, then there are no children
+      // pages to create navigation for
       const hasNoChildren = files.length === 1 && files[0] === "index.md";
 
       const navItems = files.map((fileName) => {
@@ -44,6 +80,11 @@ function getNavMap() {
         return { href: `/${directory}/${slug}`, label, slug };
       });
 
+      // Add on Software Solutions nav items to 'repository-solutions' nav item
+      if (directory === "repository-solutions") {
+        navItems.push(...softwareSolutionsNavigation);
+      }
+
       navMap.push({
         label: directory.replaceAll("-", " "),
         items: hasNoChildren ? [] : navItems,

lib/markdown-helpers.js

@@ -19,7 +19,7 @@ module.exports = {
       file.excerpt = file.content.split("\n").slice(0, 3).join(" ");
     }
 
-    const dirPath = "markdown/news";
+    const dirPath = "markdown/news-and-events";
     const files = fs.readdirSync(dirPath);
     const previews = files.map((file) => {
       const slug = file.replace(".md", "");

pages/what-is-samvera/[slug].jsx → pages/get-started/[slug].jsx

@@ -4,21 +4,14 @@ import DynamicPage from "components/layout/DynamicPage";
 import { buildWorkOpenGraphData } from "lib/open-graph";
 
 /**
- * This is where the magic happens.
- * 'parentDir' is the value of this file's parent directory
- * along with a matching directory title which exists in
- * /markdown.
- *
- * For example:
- * /markdown/my-cool-directory/...
- * /pages/my-cool-directory/...
+ * Customize this info per dynamic page
  */
 const CONFIG = {
-  parentDir: "what-is-samvera",
-  parentDirLabel: "What is Samvera?",
+  parentDir: "get-started",
+  parentDirLabel: "Get Started",
 };
 
-export default function WhatIsSamveraPage({ content, frontmatter }) {
+export default function GetStartedPage({ content, frontmatter, slug }) {
   return (
     <DynamicPage config={CONFIG} content={content} frontmatter={frontmatter} />
   );
@@ -48,6 +41,7 @@ export async function getStaticProps({ params: { slug } }) {
       content,
       frontmatter,
       openGraphData,
+      slug,
     },
   };
 }

pages/index.jsx

@@ -1,8 +1,8 @@
 import Applications from "components/home/Applications";
 import BenefitHow from "components/home/BenefitHow";
 import CommunityNewsEvents from "components/home/CommunityNewsEvents";
-import HomeLayout from "components/home/Layout";
 import HomeHero from "components/home/Hero";
+import HomeLayout from "components/home/Layout";
 import { getSideNav } from "lib/markdown-helpers";
 
 export default function Home({ sideNav }) {
@@ -19,7 +19,7 @@ export default function Home({ sideNav }) {
 }
 
 export async function getStaticProps() {
-  const { sideNav } = getSideNav(`markdown/news`);
+  const { sideNav } = getSideNav(`markdown/news-and-events`);
 
   return {
     props: { sideNav },

pages/news/[slug].jsx → pages/news-and-events/[slug].jsx

@@ -7,7 +7,7 @@ import { buildWorkOpenGraphData } from "lib/open-graph";
  * Customize this info per dynamic page
  */
 const CONFIG = {
-  parentDir: "news",
+  parentDir: "news-and-events",
   parentDirLabel: "News and Events",
 };
 

pages/news/index.jsx → pages/news-and-events/index.jsx

@@ -7,7 +7,7 @@ import NewsMeta from "components/news/Meta";
 import { getNewsPreviews } from "lib/markdown-helpers";
 
 const CONFIG = {
-  parentDir: "news",
+  parentDir: "news-and-events",
   parentDirLabel: "News and Events",
 };
 
@@ -36,9 +36,9 @@ export default function NewsAndEventsPage({ previews }) {
           } = preview;
 
           return (
-            <article key={title} className="mb-12">
+            <article key={title} className="mb-12 break-words">
               <h2>
-                <Link legacyBehavior href={`/news/${slug}`}>
+                <Link legacyBehavior href={`/news-and-events/${slug}`}>
                   <a className="normal-case text-samGreyDark hover:text-samDarkRed">
                     {title}
                   </a>

pages/who-uses-samvera/[slug].jsx → pages/repository-solutions/[slug].jsx

@@ -4,21 +4,14 @@ import DynamicPage from "components/layout/DynamicPage";
 import { buildWorkOpenGraphData } from "lib/open-graph";
 
 /**
- * This is where the magic happens.
- * 'parentDir' is the value of this file's parent directory
- * along with a matching directory title which exists in
- * /markdown.
- *
- * For example:
- * /markdown/my-cool-directory/...
- * /pages/my-cool-directory/...
+ * Customize this info per dynamic page
  */
 const CONFIG = {
-  parentDir: "who-uses-samvera",
-  parentDirLabel: "Who uses Samvera?",
+  parentDir: "repository-solutions",
+  parentDirLabel: "Repository Solutions",
 };
 
-export default function WhatIsSamveraPage({ content, frontmatter }) {
+export default function TheCommunityPage({ content, frontmatter, slug }) {
   return (
     <DynamicPage config={CONFIG} content={content} frontmatter={frontmatter} />
   );
@@ -48,6 +41,7 @@ export async function getStaticProps({ params: { slug } }) {
       content,
       frontmatter,
       openGraphData,
+      slug,
     },
   };
 }

pages/about/[slug].jsx → pages/the-community/[slug].jsx

@@ -9,11 +9,11 @@ import { buildWorkOpenGraphData } from "lib/open-graph";
  * Customize this info per dynamic page
  */
 const CONFIG = {
-  parentDir: "about",
-  parentDirLabel: "About Samvera",
+  parentDir: "the-community",
+  parentDirLabel: "The Community",
 };
 
-export default function AboutPage({ content, frontmatter, slug }) {
+export default function TheCommunityPage({ content, frontmatter, slug }) {
   /**
    * The following pages use customized layouts
    */