Footer

app/layout.tsx

@@ -1,8 +1,9 @@
 import { Antonio, Libre_Baskerville, Open_Sans } from "next/font/google"
-import Nav from "components/Nav"
 import "styles/tailwind.css"
 import "styles/global.css"
 
+import Footer from "components/Footer"
+import Nav from "components/Nav"
 import { WipTag } from "components/WipTag"
 
 // import Transitions, { Animate } from "components/Transition"
@@ -38,6 +39,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         {/* </Animate> */}
         <WipTag />
         {/* </Transitions> */}
+        <Footer />
       </body>
     </html>
   )

components/AutoComplete/AutoComplete.tsx

@@ -72,10 +72,9 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         onFocus={() => {
           setIsFocused(true)
           if (onFocusValue) {
-            setQuery(p => !p?.length ? onFocusValue : p)
+            setQuery((p) => (!p?.length ? onFocusValue : p))
           }
         }}
-
         onBlur={handleBlur}
         placeholder={placeholder || "Search..."}
         className="
@@ -92,10 +91,10 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         (isLoading ? (
           <Box className="absolute mt-1 w-full rounded border border-gray-300 bg-neutral-900 p-2">Loading...</Box>
         ) : noResults ? (
-          <Box className="absolute mt-1 w-full rounded border border-gray-300 bg-neutral-900 p-2">No matches found. Please search again.</Box>
-
-        )
-        : (
+          <Box className="absolute mt-1 w-full rounded border border-gray-300 bg-neutral-900 p-2">
+            No matches found. Please search again.
+          </Box>
+        ) : (
           results.length > 0 && (
             <Box className="absolute mt-1 w-full rounded border border-gray-300 bg-neutral-900 p-2">
               <ul>

components/Footer/Client.tsx

@@ -0,0 +1,23 @@
+"use client"
+import React from "react"
+import { useTina } from "tinacms/dist/react"
+import { FooterRenderer } from "./Renderer"
+import { FooterProps } from "./types"
+
+export const FooterClient: React.FC<FooterProps> = ({ nav, content }) => {
+  const _nav = useTina({
+    query: nav.query,
+    variables: nav.variables,
+    data: nav.data,
+  })
+  const _content = useTina({
+    query: content.query,
+    variables: content.variables,
+    data: content.data,
+  })
+
+  return (
+    // @ts-ignore
+    <FooterRenderer nav={_nav} content={_content} />
+  )
+}

components/Footer/Renderer.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import { TinaMarkdown } from "tinacms/dist/rich-text"
+import { FooterProps } from "./types"
+
+export const FooterRenderer: React.FC<FooterProps> = ({ nav, content }) => {
+  const column1 = content.data.page.sections.find((section: any) => section.title === "column1")
+  const column2 = content.data.page.sections.find((section: any) => section.title === "column2")
+  return (
+    <footer className="prose max-w-none bg-theme-navy-500 text-white">
+      {/* three columns 40 / 40 / 20 */}
+      {/* one col on mobile */}
+      <div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-6">
+        <div className="col-span-1 md:col-span-2">
+          <h1 className="text-white">Grocery Gap Atlas</h1>
+          <TinaMarkdown content={content.data.page.body} />
+        </div>
+        <div className="col-span-1 md:col-span-2">
+          <TinaMarkdown content={column1.body} />
+        </div>
+        <div className="col-span-1 md:col-span-2">
+          <TinaMarkdown content={column2.body} />
+        </div>
+      </div>
+      <div className="bg-white/25">
+        {/* horizontal ul of nav.data.links */}
+        <ul className="flex list-none space-x-4 py-2 pl-4 text-white ">
+          {nav.data.nav.links.map((link: any) => (
+            <li key={link.title}>
+              <a href={link.path} className="text-white">
+                {link.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </footer>
+  )
+}

components/Footer/index.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { getMdxContent } from "hooks/useMdxContent"
+import { FooterClient } from "./Client"
+import { FooterRenderer } from "./Renderer"
+import { FooterProps } from "./types"
+
+const Rendererer = process.env.NODE_ENV === "development" ? FooterClient : FooterRenderer
+
+const Footer: React.FC = async () => {
+  const footerNav = await getMdxContent<FooterProps["footerNav"]>("nav", "footer-nav.mdx")
+  const footerContent = await getMdxContent<FooterProps["footerContent"]>("page", "footer.mdx")
+  // @ts-ignore
+  return <Rendererer nav={footerNav} content={footerContent} />
+}
+
+export default Footer

components/Footer/types.ts

@@ -0,0 +1 @@
+export type FooterProps = any

components/Pages/Home/Renderer.tsx

@@ -70,16 +70,16 @@ export const Renderer: React.FC<HomeProps> = ({ pageInfo }) => {
                 ))}
               </h1>
             </div>
-            <div className="my-12 mx-4 flex flex-col justify-end lg:my-0">
+            <div className="mx-4 my-12 flex flex-col justify-end lg:my-0">
               <h2 className="text-4xl font-bold">{getFirstTextElement(sections, "Subtitle")}</h2>
             </div>
           </div>
           <div className="z-20 grid grid-flow-col grid-rows-2 gap-8 lg:grid-cols-2 lg:grid-rows-1">
             <div>{getFirstTextElement(sections, "Main description")}</div>
             <div>
               {getFirstTextElement(sections, "Search CTA")}
-              <br/>
-              <br/>
+              <br />
+              <br />
               <PlaceSearch />
             </div>
           </div>
@@ -91,7 +91,7 @@ export const Renderer: React.FC<HomeProps> = ({ pageInfo }) => {
         {/* reports, trends, toolkit, about */}
         <div className={`my-4 grid grid-cols-1 justify-between gap-4 ${getGridcols(fourUpSections.length)}`}>
           {fourUpSections.map((title: string, i: number) => (
-            <div key={i} className="flex flex-col border-2 p-4 mb-4 lg:mb-0">
+            <div key={i} className="mb-4 flex flex-col border-2 p-4 lg:mb-0">
               <TinaMarkdown content={sections.find((f: any) => f.title === title)?.body} />
             </div>
           ))}

content/nav/footer-nav.mdx

@@ -0,0 +1,19 @@
+---
+title: Footer
+links:
+  - title: Home
+    path: /
+  - title: County
+    path: /county
+  - title: State
+    path: /state
+  - title: National
+    path: /national
+  - title: Case Studies
+    path: /posts
+  - title: About
+    path: /about
+  - title: Contact
+    path: /contact
+---
+

content/page/footer.mdx

@@ -0,0 +1,18 @@
+---
+sections:
+  - title: column2
+    body: |
+      Funding provided in part by:
+
+      [![](</uploads/Artboard 1.png>)](https://www.rwjf.org/)
+  - title: column1
+    body: |
+      Feeding Fairness is a collaboration of:
+      [![](/uploads/rafi-logo.png)](https://www.rafiusa.org/)
+
+      [![](/uploads/dsilogo.png)](https://datascience.uchicago.edu/)
+---
+
+Understanding the impacts of structural racism & unfair markets on food access.
+
+This tool enables advocates, analytics, and decision-makers to unravel the landscape of inequitable access to food across the US. Use this tool to find opportunities to improve access, break down potential relationships of factors driving inequity, and utilize our data for further analysis and research.

package.json

@@ -20,6 +20,7 @@
     "e2e:ui": "playwright test --ui",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "postinstall": "npx patch-package -y",
+    "pre-commit": "pnpm prettier --write && pnpm lint && pnpm build",
     "coupling-graph": "npx madge --extensions js,jsx,ts,tsx,css,md,mdx ./ --exclude '.next|tailwind.config.js|reset.d.ts|prettier.config.js|postcss.config.js|playwright.config.ts|next.config.js|next-env.d.ts|instrumentation.ts|e2e/|README.md|.storybook/|.eslintrc.js' --image graph.svg"
   },
   "dependencies": {

styles/global.css

@@ -0,0 +1,3 @@
+footer img {
+  max-width: 50%;
+}