Cleaned up some code and added a somewhat responsive header burger

components/blocks/carousel.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Section } from "../util/section";
-import { PageBlocks, PageBlocksCarousel, PageBlocksMutation } from "../../tina/__generated__/types";
+import { PageBlocksCarousel } from "../../tina/__generated__/types";
 import { Anchoring, anchoringSchema } from "../util/anchoring";
 import { Template } from "tinacms";
 import { PageBlockFunction } from "../blocks-renderer";
@@ -12,7 +12,9 @@ import "react-responsive-carousel/lib/styles/carousel.min.css";
  * @param {PageBlocksCarousel} data The data from the carousel
  * @constructor
  */
-export const Carousel: PageBlockFunction<PageBlocksCarousel> = ({ data }) => {
+export const Carousel: PageBlockFunction<PageBlocksCarousel> = ({
+    data
+}: { data: PageBlocksCarousel}): React.ReactElement => {
     return (
         <Section>
             <div className="w-[100%]">

components/blocks/content.tsx

@@ -7,7 +7,6 @@ import { PageBlocksContent } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 import { PageBlockFunction } from "../blocks-renderer";
 import inlineComponents, { richTextTemplates } from "../inline/inline-definitions";
-import sanitizeHtml from "sanitize-html";
 
 export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (

components/inline/block-quote.tsx

@@ -1,12 +1,13 @@
 import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
 import { RichTextTemplate } from "@tinacms/schema-tools";
+import React from "react";
 
 export interface BlockQuoteProps {
     children: TinaMarkdownContent;
     authorName: string;
 }
 
-const BlockQuote = (props: BlockQuoteProps) => (
+const BlockQuote = (props: BlockQuoteProps): React.ReactElement => (
     <div>
         <blockquote>
             <TinaMarkdown content={ props.children } />

components/inline/image.tsx

@@ -89,7 +89,7 @@ const Image = (props: ImageProps) => {
 
 export const imageSchema: RichTextTemplate = {
     name: "Image",
-    label: "Image",
+    label: "Advanced Image",
     ui: {
         defaultItem: {
             size: Object.values(imageSize)[0],

components/inline/inline-definitions.tsx

@@ -1,7 +1,6 @@
 import { Components } from "tinacms/dist/rich-text";
 import BlockQuote, { BlockQuoteProps, blockQuoteSchema } from "./block-quote";
 import DateTime, { DateTimeProps, dateTimeSchema } from "./date-time";
-import NewsletterSignup, { NewsletterSignupProps, newsletterSignupSchema } from "./newsletter-signup";
 import { Prism } from "tinacms/dist/rich-text/prism";
 import React from "react";
 import Image, { ImageProps, imageSchema } from "./image";
@@ -23,7 +22,6 @@ const HTMLInline = (props: { value: string }) => {
 const inlineComponents: Components<{
     BlockQuote: BlockQuoteProps;
     DateTime: DateTimeProps;
-    NewsletterSignup: NewsletterSignupProps;
     Image: ImageProps;
 }> = {
     code_block: (props) => <Prism { ...props } />,
@@ -38,14 +36,12 @@ const inlineComponents: Components<{
     ),
     BlockQuote,
     DateTime,
-    NewsletterSignup,
     Image
 };
 
 export const richTextTemplates: RichTextTemplate[] = [
     dateTimeSchema,
     blockQuoteSchema,
-    newsletterSignupSchema,
     imageSchema
 ];
 

components/inline/newsletter-signup.tsx

@@ -1,82 +0,0 @@
-import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
-import React from "react";
-import { RichTextTemplate } from "@tinacms/schema-tools";
-
-export interface NewsletterSignupProps {
-    placeholder: string;
-    buttonText: string;
-    children: TinaMarkdownContent;
-    disclaimer?: TinaMarkdownContent;
-}
-
-const NewsletterSignup = (props: NewsletterSignupProps) => (
-    <div className="bg-white">
-        <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
-            <div className="">
-                <TinaMarkdown content={ props.children } />
-            </div>
-            <div className="mt-8 ">
-                <form className="sm:flex">
-                    <label htmlFor="email-address" className="sr-only">
-                        Email address
-                    </label>
-                    <input
-                        id="email-address"
-                        name="email-address"
-                        type="email"
-                        autoComplete="email"
-                        required
-                        className="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-1 focus:ring-teal-500 focus:border-teal-500 sm:max-w-xs rounded-md"
-                        placeholder={ props.placeholder }
-                    />
-                    <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
-                        <button
-                            type="submit"
-                            className="w-full flex items-center justify-center py-3 px-5 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
-                        >
-                            { props.buttonText }
-                        </button>
-                    </div>
-                </form>
-                <div className="mt-3 text-sm text-gray-500">
-                    { props.disclaimer && <TinaMarkdown content={ props.disclaimer } /> }
-                </div>
-            </div>
-        </div>
-    </div>
-);
-
-export const newsletterSignupSchema: RichTextTemplate = {
-    name: "NewsletterSignup",
-    label: "Newsletter Sign Up",
-    fields: [
-        {
-            name: "children",
-            label: "CTA",
-            type: "rich-text"
-        },
-        {
-            name: "placeholder",
-            label: "Placeholder",
-            type: "string"
-        },
-        {
-            name: "buttonText",
-            label: "Button Text",
-            type: "string"
-        },
-        {
-            name: "disclaimer",
-            label: "Disclaimer",
-            type: "rich-text"
-        }
-    ],
-    ui: {
-        defaultItem: {
-            placeholder: "Enter your email",
-            buttonText: "Notify Me"
-        }
-    }
-};
-
-export default NewsletterSignup;

components/layout/footer.tsx

@@ -1,12 +1,14 @@
 import React from "react";
-import { Container } from "../../util/container";
+import { Container } from "../util/container";
 import { ObjectField } from "@tinacms/schema-tools/dist/types";
-import facebookImage from "../../../assets/img/facebook.svg";
+import facebookImage from "../../public/icons/facebook.svg";
-import instagramImage from "../../../assets/img/instagram.svg";
+import instagramImage from "../../public/icons/instagram.svg";
+import NextImage from "next/image";
 import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
+import { GlobalFooter } from "../../tina/__generated__/types";
 
-export const Footer = ({ data, rawData }) => {
+export const Footer = ({ data }: { data: GlobalFooter }): React.ReactElement => {
     return (
         <footer>
             <Container className="relative" size="small">
@@ -44,26 +46,26 @@ export const Footer = ({ data, rawData }) => {
                                 <a href={ data?.social?.facebook }
                                     onClick={ () => { /* window.dataLayer.push({ socials: "fb-click" });*/ } }
                                     className="py-2 me-2">
-                                    <img src={ facebookImage } alt="Facebook"/>
+                                    <NextImage src={ facebookImage } alt={ "Facebook" }/>
                                 </a> }
 
                             { data?.social?.instagram &&
                                 <a href={ data?.social?.instagram }
                                     onClick={ () => { /* window.dataLayer.push({ socials: "insta-click" });*/ } }
                                     className="py-2">
-                                    <img src={ instagramImage } alt="Instagram"/>
+                                    <NextImage src={ instagramImage } alt={ "Facebook" }/>
                                 </a> }
                         </div>
                     </div>
                     <div>
-                        <p data-tina-field={ tinaField(data, "copyright") }>
+                        <div className="flex flex-row" data-tina-field={ tinaField(data, "copyright") }>
                             &copy; { data?.copyright?.year }
                             { data?.copyright?.subtext?.children?.length > 0 &&
-                                <> &#8211;<div className={ "ml-1 float-right" }>
+                                <> &#8211;<span className={ "ml-1" }>
                                     <TinaMarkdown content={ data.copyright?.subtext } />
-                                </div>
+                                </span>
                                 </> }
-                        </p>
+                        </div>
                     </div>
                 </div>
             </Container>

components/layout/footer/index.tsx

@@ -1 +0,0 @@
-export { Footer } from "./footer";

components/layout/footer/rawRenderer.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-export const RawRenderer = ({ rawData, parentColor }) => {
-    const buttonColorClasses = {
-        blue: "text-blue-500",
-        teal: "text-teal-500",
-        green: "text-green-500",
-        red: "text-red-500",
-        pink: "text-pink-500",
-        purple: "text-purple-500",
-        orange: "text-orange-500",
-        yellow: "text-yellow-600"
-    };
-    const [isOpen, setIsOpen] = useState(false);
-
-    function closeModal() {
-        setIsOpen(false);
-    }
-
-    function openModal() {
-        setIsOpen(true);
-    }
-
-    return (
-        <>
-            <button
-                type="button"
-                onClick={ openModal }
-                className={ `z-10 relative flex items-center px-5 py-2 mx-3 my-2 font-semibold shadow-sm text-sm transition duration-150 ease-out rounded transform focus:shadow-outline focus:outline-none whitespace-nowrap opacity-80 hover:opacity-100 shadow-md ${
-                    buttonColorClasses[buttonColorClasses.blue]
-                }` }
-            >
-        View Raw Data
-                <span
-                    className={ `absolute w-full h-full left-0 top-0 rounded -z-1 ${
-                        parentColor === "primary"
-                            ? "bg-white opacity-80"
-                            : "bg-current opacity-15"
-                    }` }
-                />
-            </button>
-            <Transition appear show={ isOpen } as={ Fragment }>
-                <Dialog
-                    as="div"
-                    className="fixed inset-0 z-10 overflow-y-auto"
-                    onClose={ closeModal }
-                >
-                    <div className="min-h-screen max-h-screen px-4 py-12 text-center flex flex-col items-center justify-center">
-                        <Transition.Child
-                            as={ Fragment }
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0"
-                            enterTo="opacity-100"
-                            leave="ease-out duration-300"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
-                        >
-                            <div className="">
-                                <Dialog.Overlay className="fixed inset-0 bg-gradient-to-br from-gray-800 to-gray-1000 opacity-80" />
-                            </div>
-                        </Transition.Child>
-
-                        <Transition.Child
-                            as={ Fragment }
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0 scale-95"
-                            enterTo="opacity-100 scale-100"
-                            leave="ease-in duration-200"
-                            leaveFrom="opacity-100 scale-100"
-                            leaveTo="opacity-0 scale-95"
-                        >
-                            <div className="flex-1 w-full prose dark:prose-dark max-w-3xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-1000 shadow-xl rounded-xl inline-flex flex-col max-h-full">
-                                <pre className="flex-1 overflow-y-auto">
-                                    <code>{ JSON.stringify(rawData, null, 2) }</code>
-                                </pre>
-                                <button
-                                    type="button"
-                                    className="flex-0 font-semibold text-lg transition duration-150 ease-out opacity-80 hover:opacity-100"
-                                    onClick={ closeModal }
-                                >
-                  Great, thanks!
-                                </button>
-                            </div>
-                        </Transition.Child>
-                    </div>
-                </Dialog>
-            </Transition>
-        </>
-    );
-};

components/layout/header.tsx

@@ -1,20 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { tinaField } from "tinacms/dist/react";
 import defaultLogo from "../../public/logo.png";
 import { GlobalHeader } from "../../tina/__generated__/types";
 import { ObjectField } from "@tinacms/schema-tools/dist/types";
 
-export const Header = ({ data }: { data: GlobalHeader }) => {
+export const Header = ({ data }: { data: GlobalHeader }): React.ReactElement => {
-    const navbarToggler: JSX.Element = (
+    const [expanded, setExpanded] = useState(false);
-        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+    const navbarToggler: React.ReactElement = (
-            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+        <button
+            className="navbar-toggler"
+            type="button"
+            onClick={ () => { setExpanded(!expanded); } }
             aria-label="Toggle navigation">
             <span className="navbar-toggler-icon" />
         </button>
     );
     return (
-        <nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
+        <nav className={ `navbar${ expanded ? " navbar-expanded": "" } flex flex-wrap content-between sticky top-0 py-2` }>
             <div className="flex grow justify-between px-6 h-full">
                 <div className="flex navbar-brand">
                     <Link
@@ -29,8 +32,7 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                     </Link>
                 </div>
                 { navbarToggler }
-                <div className={ "navbar-items flex items-center" } id="navbarSupportedContent">
+                <ul className="navbar-items">
-                    <ul className="flex md:flex-row">
                     { data.nav &&
               data.nav.map((item, i) => {
                   return (
@@ -42,6 +44,7 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                               data-tina-field={ tinaField(item, "label") }
                               href={ `${ item.external? "" : "/" }${ item.href }` }
                               className={ `nav-link p-2 ${ item.external ? "external-link-icon" : "" }` }
+                              onClick={ () => setExpanded(false) }
                           >
                               { item.label }
                           </Link>
@@ -50,7 +53,6 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
               }) }
                 </ul>
             </div>
-            </div>
         </nav>
     );
 };

components/layout/index.tsx

@@ -1 +0,0 @@
-export { Layout } from "./layout";

components/layout/layout.tsx

@@ -34,10 +34,7 @@ export const Layout = ({
                 <div className="flex-1 flex flex-col">
                     { children }
                 </div>
-                <Footer
+                <Footer data={ data?.footer } />
-                    rawData={ rawData }
-                    data={ data?.footer }
-                />
             </div>
         </>
     );

components/util/anchoring.tsx

@@ -48,7 +48,7 @@ export const Anchoring: React.FC<AnchoringProps> = (props) => {
             ref={ anchoringRef }
             style={ { opacity: opacity } }
         >
-            <a onClick={ handleScrollClick }>
+            <a role="button" onClick={ handleScrollClick }>
                 <h1 data-tina-field={ tinaField(props, "text") }>{ props.text }</h1>
                 <img
                     src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjI1OCAxNi4yNDItNi02YTEuMDUgMS4wNSAwIDEgMSAxLjQ4NC0xLjQ4NEwxMiAxNC4wMTVsNS4yNTgtNS4yNTdhMS4wNSAxLjA1IDAgMSAxIDEuNDg0IDEuNDg0bC02IDZhMS4wNSAxLjA1IDAgMCAxLTEuNDg0IDBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg=="/>

content/pages/home.mdx

@@ -184,6 +184,8 @@ url: home
 
 
 
+
+
 
 
 

next.config.js

@@ -1,14 +1,5 @@
 module.exports = {
     distDir: "build",
-    webpack(config) {
-        config.module.rules.push({
-            test: /\.svg$/i,
-            issuer: /\.[jt]sx?$/,
-            use: ["@svgr/webpack"]
-        });
-
-        return config;
-    },
     async rewrites() {
         return [
             {

package.json

@@ -11,7 +11,6 @@
     "bullshit:build": "tinacms dev -c \"next build\""
   },
   "devDependencies": {
-    "@svgr/webpack": "^8.0.1",
     "@tinacms/cli": "^1.5.29",
     "@types/js-cookie": "^3.0.0",
     "@types/node": "^16.11.7",
@@ -30,14 +29,12 @@
     "postcss-nesting": "^10.1.0"
   },
   "dependencies": {
-    "@headlessui/react": "1.7.5",
     "@tailwindcss/typography": "^0.5.8",
     "date-fns": "^2.23.0",
     "next": "^13.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-gtm-module": "^2.0.11",
-    "react-icons": "^4.2.0",
     "react-responsive-carousel": "^3.2.23",
     "sanitize-html": "^2.11.0",
     "sass": "^1.66.1",

pages/404.js

@@ -1,5 +1,5 @@
 import { Hero } from "../components/blocks/hero";
-import { Layout } from "../components/layout";
+import { Layout } from "../components/layout/layout";
 
 export default function FourOhFour() {
     return (

pages/[filename].tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { InferGetStaticPropsType } from "next";
 import { Blocks } from "../components/blocks-renderer";
 import { useTina } from "tinacms/dist/react";
-import { Layout } from "../components/layout";
+import { Layout } from "../components/layout/layout";
 import { client } from "../tina/__generated__/client";
 
 export default function HomePage(

pages/_app.tsx

@@ -1,7 +1,7 @@
 import "../styles/_styles.scss";
-import TagManager from "react-gtm-module";
+// import TagManager from "react-gtm-module";
 
-// TagManager.initialize({ gtmId: "" });
+// TagManager.initialize({ gtmId: "G-GGBB2SV4YC" });
 const App = ({ Component, pageProps }) => {
     return <Component { ...pageProps } />;
 };

pages/posts.tsx

@@ -2,7 +2,7 @@ import { Container } from "../components/util/container";
 import { Section } from "../components/util/section";
 import { Posts } from "../components/posts";
 import { client } from "../tina/__generated__/client";
-import { Layout } from "../components/layout";
+import { Layout } from "../components/layout/layout";
 import { InferGetStaticPropsType } from "next";
 
 export default function HomePage(

pages/posts/[filename].tsx

@@ -1,7 +1,7 @@
 import { Post } from "../../components/posts/post";
 import { client } from "../../tina/__generated__/client";
 import { useTina } from "tinacms/dist/react";
-import { Layout } from "../../components/layout";
+import { Layout } from "../../components/layout/layout";
 import { InferGetStaticPropsType } from "next";
 
 // Use the props returned by get static props

public/icons/bars-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>

styles/header.scss

@@ -26,10 +26,60 @@
     }
 
     .navbar-items {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
     }
     .navbar-toggler {
         display: none;
     }
+    @media screen and (max-width: 900px) {
+        .navbar-toggler {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: auto 0;
+            border: #ffd39c solid .2rem;
+            border-radius: 1rem;
+            width: 3rem;
+            height: 3rem;
+            .navbar-toggler-icon {
+                mask-image: url("../public/icons/bars-solid.svg");
+                -webkit-mask-image: url("../public/icons/bars-solid.svg");
+                mask-repeat: no-repeat;
+                -webkit-mask-repeat: no-repeat;
+                mask-position: center;
+                -webkit-mask-position: center;
+
+                background-color: #d8ac74;
+
+                width: 2rem;
+                height: 2rem;
+                position: relative;
+            }
+        }
+        .navbar-items {
+            display: none;
+        }
+
+        &.navbar-expanded {
+            .navbar-items {
+                display: flex;
+                position: absolute;
+                top: 100%;
+                left: 0;
+                right: 0;
+                width: 100%;
+                transition: height 0.15s ease-in-out;
+                flex-direction: column;
+                background: var(--header-BackgroundColor);
+
+                .nav-item {
+                    margin: .5rem 0;
+                }
+            }
+        }
+    }
 
     .nav-item .nav-link {
         font-family: 'Nunito', sans-serif;

tina/config.tsx

@@ -5,7 +5,7 @@ import { heroBlockSchema } from "../components/blocks/hero";
 import { testimonialBlockSchema } from "../components/blocks/testimonial";
 import { carouselBlockSchema } from "../components/blocks/carousel";
 import { headerSchema } from "../components/layout/header";
-import { footerSchema } from "../components/layout/footer/footer";
+import { footerSchema } from "../components/layout/footer";
 import { richTextTemplates } from "../components/inline/inline-definitions";
 import { mainTitleBlockSchema } from "../components/blocks/main-title";