Add Site Footer

components/FooterNavigation.jsx

@@ -0,0 +1,40 @@
+import { gql } from '@apollo/client'
+import clsx from 'clsx'
+import Link from 'next/link'
+import * as React from 'react'
+
+import styles from '@/styles/footer-navigation.module.css';
+
+export function FooterNavigation({ navigation }) {
+  return (
+    <>
+     {navigation.map((item) => (
+        <Link
+          className={clsx(
+            styles.socialIconLink,
+            'gap-4',
+          )}
+          href={item.href}
+          key={item.id}
+          target={item.target}>
+          {item.label}
+        </Link>
+      ))}
+    </>
+  )
+}
+
+FooterNavigation.fragment = gql`
+  fragment FooterNavigationFragment on RootQuery {
+    footerMenuItems: menuItems(first: 100, where: { location: FOOTER }) {
+      nodes {
+        id
+        label
+        title: label
+        href: uri
+        parentId
+        target
+      }
+    }
+  }
+`

components/Layout.jsx

@@ -5,18 +5,22 @@ import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
 
 import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation'
+import { FooterNavigation } from '@/components/FooterNavigation'
 import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { Prose } from '@/components/Prose'
+import { SiteFooter } from '@/components/SiteFooter'
 import { SiteHeader } from '@/components/SiteHeader'
 import { collectHeadings } from '@/lib/utils'
 
 Layout.fragment = gql`
   fragment LayoutFragment on RootQuery {
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment
+    ...FooterNavigationFragment
   }
   ${PrimaryNavigation.fragment}
   ${DocsSidebarNavigation.fragment}
+  ${FooterNavigation.fragment}
 `
 
 function useTableOfContents(tableOfContents) {
@@ -79,6 +83,14 @@ export function Layout({ data, children, toc, title }) {
         parentKey: 'parentId',
       })
     : []
+  const footerMenuItems = data?.footerMenuItems ?? []
+  const footerNavigation = footerMenuItems?.nodes
+    ? flatListToHierarchical(footerMenuItems.nodes, {
+        idKey: 'id',
+        childrenKey: 'links',
+        parentKey: 'parentId',
+      })
+    : []
   const docsSidebarMenuItems = data?.docsSidebarMenuItems ?? []
   const docsSidebarNavigation = docsSidebarMenuItems?.nodes
     ? flatListToHierarchical(docsSidebarMenuItems.nodes, {
@@ -231,6 +243,8 @@ export function Layout({ data, children, toc, title }) {
           </nav>
         </div>
       </div>
+
+      <SiteFooter navigation={footerNavigation} />
     </>
   )
 }

components/LayoutArchive.jsx

@@ -1,20 +1,23 @@
 import { gql } from '@apollo/client'
 import { flatListToHierarchical } from '@faustwp/core'
 
+import { FooterNavigation } from './FooterNavigation'
 import { PrimaryNavigation } from './PrimaryNavigation'
 
 import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation'
 import { Prose } from '@/components/Prose'
+import { SiteFooter } from '@/components/SiteFooter'
 import { SiteHeader } from '@/components/SiteHeader'
 
-
 LayoutArchive.fragment = gql`
   fragment LayoutArchiveFragment on RootQuery {
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment
+    ...FooterNavigationFragment
   }
   ${PrimaryNavigation.fragment}
   ${DocsSidebarNavigation.fragment}
+  ${FooterNavigation.fragment}
 `
 
 export function LayoutArchive({ data, children, title }) {
@@ -26,6 +29,14 @@ export function LayoutArchive({ data, children, title }) {
         parentKey: 'parentId',
       })
     : []
+  const footerMenuItems = data?.footerMenuItems ?? []
+  const footerNavigation = footerMenuItems?.nodes
+    ? flatListToHierarchical(footerMenuItems.nodes, {
+        idKey: 'id',
+        childrenKey: 'links',
+        parentKey: 'parentId',
+      })
+    : []
   const docsSidebarMenuItems = data?.docsSidebarMenuItems ?? []
   const docsSidebarNavigation = docsSidebarMenuItems?.nodes
     ? flatListToHierarchical(docsSidebarMenuItems.nodes, {
@@ -75,6 +86,7 @@ export function LayoutArchive({ data, children, title }) {
           </article>
         </div>
       </div>
+      <SiteFooter navigation={footerNavigation} />
     </>
   )
 }

components/LayoutFrontPage.jsx

@@ -1,14 +1,20 @@
 import { gql } from '@apollo/client'
 import { flatListToHierarchical } from '@faustwp/core'
 
+import { FooterNavigation } from './FooterNavigation'
+import { SiteFooter } from './SiteFooter'
+
 import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { SiteHeader } from '@/components/SiteHeader'
 
+
 LayoutFrontPage.fragment = gql`
   fragment LayoutFrontPageFragment on RootQuery {
     ...PrimaryNavigationFragment
+    ...FooterNavigationFragment
   }
   ${PrimaryNavigation.fragment}
+  ${FooterNavigation.fragment}
 `
 
 export function LayoutFrontPage({ data, children }) {
@@ -20,10 +26,19 @@ export function LayoutFrontPage({ data, children }) {
         parentKey: 'parentId',
       })
     : []
+  const footerMenuItems = data?.footerMenuItems ?? []
+  const footerNavigation = footerMenuItems?.nodes
+    ? flatListToHierarchical(footerMenuItems.nodes, {
+        idKey: 'id',
+        childrenKey: 'links',
+        parentKey: 'parentId',
+      })
+    : []
   return (
     <>
       <SiteHeader navigation={primaryNavigation} data={data} />
-      <>{children}</>
+      {children}
+      <SiteFooter navigation={footerNavigation} />
     </>
   )
 }

components/SiteFooter.jsx

@@ -1,15 +1,19 @@
-import clsx from 'clsx'
+import { Container } from '@/components/Container'
+import { FooterNavigation } from '@/components/FooterNavigation'
 
 export function SiteFooter({ navigation }) {
-  // eslint-disable-next-line no-console
-  console.log({ navigation })
   return (
-    <footer
-      className={clsx(
-        'flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
-      )}
-    >
-      <p>Footer</p>
+    <footer className="py-6 md:px-8 md:py-0">
+      <Container>
+        <div className="flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+          <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
+            &copy; 2023 WPGraphQL. All rights reserved. | Development sponsored by <a href="https://www.wpengine.com/atlas" target="_blank" rel="noreferrer" className="font-medium underline underline-offset-4">WP Engine</a>
+          </p>
+          <div className="text-muted-foreground flex flex-row gap-4">
+            <FooterNavigation navigation={navigation} />
+          </div>
+        </div>
+      </Container>
     </footer>
   )
 }

styles/footer-navigation.module.css

@@ -0,0 +1,50 @@
+.socialIconLink {
+  color: transparent;
+  display: inline-flex;
+  margin-left: 0.8rem;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+}
+
+.socialIconLink::after {
+  background-color: hsl(var(--muted-foreground));
+  content: "";
+  height: 100%;
+  left: 0;
+  opacity: 0.8;
+  position: absolute;
+  top: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.socialIconLink:hover::after,
+.socialIconLink:focus::after {
+  opacity: 1;
+}
+
+.socialIconLink[href*="github.com"]::after {
+  mask: url("/social-icons/github.svg");
+}
+
+.socialIconLink[href*="slack.com"]::after {
+  mask: url("/social-icons/slack.svg");
+}
+
+.socialIconLink[href*="twitter.com"]::after,
+.socialIconLink[href*="x.com"]::after {
+  mask: url("/social-icons/twitter.svg");
+}
+
+.socialIconLink[href*="wordpress.org"]::after {
+  mask: url("/social-icons/wordpress.svg");
+}
+
+.socialIconLink[href*="youtube.com"]::after {
+  mask: url("/social-icons/youtube.svg");
+}