From e583858edb544461868f92a58bd35c5c67494ac0 Mon Sep 17 00:00:00 2001 From: Skydust Date: Tue, 19 Sep 2023 14:56:09 +0200 Subject: [PATCH] Cleaned up some code and added a somewhat responsive header burger --- components/blocks/carousel.tsx | 6 +- components/blocks/content.tsx | 1 - components/inline/block-quote.tsx | 3 +- components/inline/image.tsx | 2 +- components/inline/inline-definitions.tsx | 4 - components/inline/newsletter-signup.tsx | 82 -- components/layout/{footer => }/footer.tsx | 22 +- components/layout/footer/index.tsx | 1 - components/layout/footer/rawRenderer.tsx | 92 -- components/layout/header.tsx | 24 +- components/layout/index.tsx | 1 - components/layout/layout.tsx | 5 +- components/util/anchoring.tsx | 2 +- content/pages/home.mdx | 2 + next.config.js | 9 - package.json | 3 - pages/404.js | 2 +- pages/[filename].tsx | 2 +- pages/_app.tsx | 4 +- pages/posts.tsx | 2 +- pages/posts/[filename].tsx | 2 +- public/icons/bars-solid.svg | 1 + {assets/img => public/icons}/facebook.svg | 0 {assets/img => public/icons}/instagram.svg | 0 styles/header.scss | 50 + tina/config.tsx | 2 +- tina/tina-lock.json | 2 +- yarn.lock | 1313 +------------------- 28 files changed, 112 insertions(+), 1527 deletions(-) delete mode 100644 components/inline/newsletter-signup.tsx rename components/layout/{footer => }/footer.tsx (88%) delete mode 100644 components/layout/footer/index.tsx delete mode 100644 components/layout/footer/rawRenderer.tsx delete mode 100644 components/layout/index.tsx create mode 100644 public/icons/bars-solid.svg rename {assets/img => public/icons}/facebook.svg (100%) rename {assets/img => public/icons}/instagram.svg (100%) diff --git a/components/blocks/carousel.tsx b/components/blocks/carousel.tsx index b88c21c..5fc6b08 100644 --- a/components/blocks/carousel.tsx +++ b/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 = ({ data }) => { +export const Carousel: PageBlockFunction = ({ + data +}: { data: PageBlocksCarousel}): React.ReactElement => { return (
diff --git a/components/blocks/content.tsx b/components/blocks/content.tsx index d6e305c..c55fc64 100644 --- a/components/blocks/content.tsx +++ b/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 = ({ data }) => { return ( diff --git a/components/inline/block-quote.tsx b/components/inline/block-quote.tsx index c19df81..66186af 100644 --- a/components/inline/block-quote.tsx +++ b/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 => (
diff --git a/components/inline/image.tsx b/components/inline/image.tsx index f764ef2..8a374b9 100644 --- a/components/inline/image.tsx +++ b/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], diff --git a/components/inline/inline-definitions.tsx b/components/inline/inline-definitions.tsx index 772ae43..975d020 100644 --- a/components/inline/inline-definitions.tsx +++ b/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) => , @@ -38,14 +36,12 @@ const inlineComponents: Components<{ ), BlockQuote, DateTime, - NewsletterSignup, Image }; export const richTextTemplates: RichTextTemplate[] = [ dateTimeSchema, blockQuoteSchema, - newsletterSignupSchema, imageSchema ]; diff --git a/components/inline/newsletter-signup.tsx b/components/inline/newsletter-signup.tsx deleted file mode 100644 index 3b1a3d7..0000000 --- a/components/inline/newsletter-signup.tsx +++ /dev/null @@ -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) => ( -
-
-
- -
-
-
- - -
- -
-
-
- { props.disclaimer && } -
-
-
-
-); - -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; \ No newline at end of file diff --git a/components/layout/footer/footer.tsx b/components/layout/footer.tsx similarity index 88% rename from components/layout/footer/footer.tsx rename to components/layout/footer.tsx index c15939b..90079bb 100644 --- a/components/layout/footer/footer.tsx +++ b/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 instagramImage from "../../../assets/img/instagram.svg"; +import facebookImage from "../../public/icons/facebook.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 (
-

+

© { data?.copyright?.year } { data?.copyright?.subtext?.children?.length > 0 && - <> –
+ <> – -
+ } -

+
diff --git a/components/layout/footer/index.tsx b/components/layout/footer/index.tsx deleted file mode 100644 index 25eaacd..0000000 --- a/components/layout/footer/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { Footer } from "./footer"; diff --git a/components/layout/footer/rawRenderer.tsx b/components/layout/footer/rawRenderer.tsx deleted file mode 100644 index 452b958..0000000 --- a/components/layout/footer/rawRenderer.tsx +++ /dev/null @@ -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 ( - <> - - - -
- -
- -
- - - -
- 
-                                    { JSON.stringify(rawData, null, 2) }
-
- -
- -
- - - - ); -}; diff --git a/components/layout/header.tsx b/components/layout/header.tsx index 5296d75..6537c85 100644 --- a/components/layout/header.tsx +++ b/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 }) => { - const navbarToggler: JSX.Element = ( - ); return ( -