cmsify footer

pluralsh · Dec 3, 2024 · 278b111 · 278b111
1 parent 2477718
commit 278b111
Show file tree

Hide file tree

Showing 6 changed files with 1,388 additions and 320 deletions.
diff --git a/src/components/FooterFull.tsx b/src/components/FooterFull.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 
 import { mqs } from '@src/breakpoints'
+import { type FooterFragment } from '@src/generated/graphqlDirectus'
 
 import { BasicFooter, MinAltFooter } from './BasicFooter'
 import { FooterNav } from './FooterNav'
@@ -21,11 +22,13 @@ export enum HeaderVariant {
 }
 
 export function FullFooter({
+  footerData,
   className,
   variant = FooterVariant.withNav,
 }: {
   className?: string
   variant?: FooterVariant
+  footerData: Nullable<FooterFragment>
 }) {
   if (variant === FooterVariant.none) {
     return null
@@ -55,7 +58,7 @@ export function FullFooter({
         role="contentinfo"
         className="relative z-20 flex flex-col gap-y-xxxlarge pt-xxxxlarge"
       >
-        {showNav && <FooterNav />}
+        {showNav && <FooterNav footerData={footerData} />}
         <BasicFooter />
       </div>
     </StickyFooterSC>

diff --git a/src/components/FooterNav.tsx b/src/components/FooterNav.tsx
@@ -1,115 +1,16 @@
-import { type ComponentProps, type ReactNode } from 'react'
-
 import Link from 'next/link'
 
 import styled from 'styled-components'
-import { type ReadonlyDeep } from 'type-fest'
 
 import { mqs } from '@src/breakpoints'
-import { DISCORD_LINK } from '@src/consts'
+import {
+  type FooterFragment,
+  type FooterLinkFragment,
+} from '@src/generated/graphqlDirectus'
 
 import { FullPageWidth } from './layout/LayoutHelpers'
 import { NewsletterSignupForm } from './NewsletterSignupForm'
 
-type NavItemT = {
-  heading: ReactNode
-  links: ComponentProps<typeof Link>[]
-}
-
-const navItems = [
-  {
-    heading: 'Product',
-    links: [
-      {
-        children: 'Login',
-        href: 'https://app.plural.sh/login',
-        target: '_blank',
-      },
-      {
-        children: 'GitHub',
-        href: 'https://github.com/pluralsh/plural',
-        target: '_blank',
-      },
-      {
-        children: 'Pricing',
-        href: '/pricing',
-      },
-      {
-        children: 'Support',
-        href: '/contact',
-      },
-    ],
-  },
-  {
-    heading: 'Company',
-    links: [
-      {
-        children: 'About',
-        href: '/about',
-      },
-      {
-        children: 'Careers',
-        href: '/careers',
-      },
-      {
-        children: 'In the news',
-        href: 'https://www.plural.sh/blog',
-        target: '_blank',
-      },
-    ],
-  },
-  {
-    heading: 'Resources',
-    links: [
-      {
-        children: 'Docs',
-        href: 'https://docs.plural.sh',
-        target: '_blank',
-      },
-      {
-        children: 'Blog',
-        href: 'https://www.plural.sh/blog',
-        target: '_blank',
-      },
-      {
-        children: 'Releases',
-        href: 'https://github.com/pluralsh/plural/releases',
-        target: '_blank',
-      },
-      //   {
-      //     children: 'Security & Trust Portal',
-      //     href: 'https://github.com/pluralsh/plural/releases',
-      //     target: '_blank',
-      //   },
-    ] as const,
-  },
-  {
-    heading: 'Contact',
-    links: [
-      {
-        children: 'Discord',
-        href: DISCORD_LINK,
-        target: '_blank',
-      },
-      {
-        children: 'Twitter',
-        href: 'https://www.twitter.com/plural_sh',
-        target: '_blank',
-      },
-      {
-        children: 'LinkedIn',
-        href: 'https://www.linkedin.com/company/pluralsh',
-        target: '_blank',
-      },
-      {
-        children: 'Email',
-        href: '/contact',
-        target: '_blank',
-      },
-    ],
-  },
-] as const satisfies ReadonlyDeep<NavItemT[]>
-
 const NavSections = styled.ul(({ theme }) => ({
   ...theme.partials.reset.list,
   display: 'grid',
@@ -149,6 +50,7 @@ const NavItems = styled.ul(({ theme }) => ({
   flexDirection: 'column',
   gap: theme.spacing.xsmall,
 }))
+
 const NavItem = styled.li(({ theme }) => ({
   ...theme.partials.reset.li,
   margin: 0,
@@ -166,29 +68,83 @@ export const FooterNavLink = styled(Link)(({ theme }) => ({
   },
 }))
 
-export const FooterNav = styled(({ ...props }: ComponentProps<'div'>) => (
-  <div {...props}>
-    <FullPageWidth>
-      <NavSections>
-        {navItems.map((navItem) => (
-          <NavSection key={navItem.heading}>
-            <FooterHeading>{navItem.heading}</FooterHeading>
-            <NavItems>
-              {navItem.links.map((link) => (
-                <NavItem key={`${link.children}${link.href}`}>
-                  <FooterNavLink {...link} />
-                </NavItem>
-              ))}
-            </NavItems>
+export function FooterNav({
+  footerData,
+}: {
+  footerData: Nullable<FooterFragment>
+}) {
+  if (!footerData) return null
+
+  return (
+    <FooterNavWrapSC>
+      <FullPageWidth>
+        <NavSections>
+          <FooterColumn
+            title={footerData.column_1_title}
+            links={sanitizeFooterLinks(footerData.column_1_links)}
+          />
+          <FooterColumn
+            title={footerData.column_2_title}
+            links={sanitizeFooterLinks(footerData.column_2_links)}
+          />
+          <FooterColumn
+            title={footerData.column_3_title}
+            links={sanitizeFooterLinks(footerData.column_3_links)}
+          />
+          <FooterColumn
+            title={footerData.column_4_title}
+            links={sanitizeFooterLinks(footerData.column_4_links)}
+          />
+          <NavSection className="newsletter">
+            <NewsletterSignupForm />
           </NavSection>
+        </NavSections>
+      </FullPageWidth>
+    </FooterNavWrapSC>
+  )
+}
+
+const sanitizeFooterLinks = (
+  links: Nullable<
+    Nullable<{ footer_links_id?: Nullable<FooterLinkFragment> }>[]
+  >
+) =>
+  links
+    ?.filter((link): link is { footer_links_id: FooterLinkFragment } => !!link)
+    .map((link) => ({
+      name: link.footer_links_id?.name ?? '',
+      url: link.footer_links_id?.url ?? '',
+    })) ?? []
+
+function FooterColumn({
+  title,
+  links,
+}: {
+  title: Nullable<string>
+  links: { name: string; url: string }[]
+}) {
+  if (!title) return null
+
+  return (
+    <NavSection>
+      <FooterHeading>{title}</FooterHeading>
+      <NavItems>
+        {links?.map((link) => (
+          <NavItem key={link?.url}>
+            <FooterNavLink
+              href={link?.url || ''}
+              target={link?.url.charAt(0) === '/' ? '_self' : '_blank'}
+            >
+              {link?.name}
+            </FooterNavLink>
+          </NavItem>
         ))}
-        <NavSection className="newsletter">
-          <NewsletterSignupForm />
-        </NavSection>
-      </NavSections>
-    </FullPageWidth>
-  </div>
-))(({ theme }) => {
+      </NavItems>
+    </NavSection>
+  )
+}
+
+const FooterNavWrapSC = styled.div(({ theme }) => {
   const outlineOffset = -4
 
   return {

diff --git a/src/components/PrimaryPage.tsx b/src/components/PrimaryPage.tsx
@@ -51,7 +51,10 @@ export default function PrimaryPage({
           />
           {children}
           <ExternalScripts />
-          <FullFooter variant={pageProps.footerVariant} />
+          <FullFooter
+            variant={pageProps.footerVariant}
+            footerData={globalProps.footerData}
+          />
         </PagePropsContext.Provider>
       </GlobalPropsContext.Provider>
     </NavDataProvider>