From 91a30a8450a1a5804193a650611be5fa4206c4a7 Mon Sep 17 00:00:00 2001 From: "Brady Stroud [SSW]" Date: Wed, 17 Apr 2024 22:28:05 +0200 Subject: [PATCH] Add canonical URLs to home page, reviews, and blocks --- README.md | 11 +++ _docs/HelpfulLocations.md | 4 + components/blocks/content.tsx | 4 +- components/blocks/hero.tsx | 4 +- components/blocks/testimonial.tsx | 4 +- components/layout/breadcrumb.tsx | 73 +++++++++++++++++++ components/layout/header.tsx | 23 +++--- components/layout/layout.tsx | 5 +- components/posts/reviews.tsx | 53 ++++++-------- components/util/actions.tsx | 4 +- content/pages/about.md | 3 +- content/pages/home.md | 1 + content/reviews/EmbassyBarKitchen.mdx | 1 + content/reviews/SBBG.mdx | 5 +- .../reviews/awesome-parmi-and-steakhouse.mdx | 1 + content/reviews/club-kawana.mdx | 1 + content/reviews/duporth-tavern.mdx | 1 + content/reviews/samford-hotel.mdx | 1 + pages/[filename].tsx | 4 + pages/reviews/[filename].tsx | 14 +++- tina/config.tsx | 12 +++ tina/tina-lock.json | 2 +- 22 files changed, 176 insertions(+), 55 deletions(-) create mode 100644 _docs/HelpfulLocations.md create mode 100644 components/layout/breadcrumb.tsx diff --git a/README.md b/README.md index 43291fd..f45915b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ test change + + 🤖 + # 🐔 ParmiPicks: Chicken Parmi Review Website ParmiPicks is your ultimate guide to the best chicken parmi reviews, ratings, and recommendations. Explore and discover the finest chicken parmis in town. @@ -9,6 +12,8 @@ ParmiPicks is your ultimate guide to the best chicken parmi reviews, ratings, an These instructions will help you set up the project on your local machine for development and testing purposes. +The `_docs` folder contains further documentation on the project. + ### 📋 Prerequisites Make sure you have the following installed on your system: @@ -21,19 +26,25 @@ Make sure you have the following installed on your system: Follow these steps to set up the project on your local machine: 1. Install the required dependencies: + ```bash yarn ``` + 2. Run the development server: + ```bash yarn dev ``` + Now you can open your browser and navigate to http://localhost:3000 to see the project running. ### 📚 Built With + - Next.js - The React framework used for building the website - TinaCMS - The content management system used for editing content - OpenAI API - The API used for integrating ChatGPT/GPT-4 ### 📖 License + This project is licensed under the MIT License - see the LICENSE file for details. diff --git a/_docs/HelpfulLocations.md b/_docs/HelpfulLocations.md new file mode 100644 index 0000000..6e237b4 --- /dev/null +++ b/_docs/HelpfulLocations.md @@ -0,0 +1,4 @@ +# Helpful Locations + +Icon Library - Try stick to the FA5 icons, for consistency. +https://react-icons.github.io/react-icons/icons/fa/ diff --git a/components/blocks/content.tsx b/components/blocks/content.tsx index cdbecbb..fb7bbad 100644 --- a/components/blocks/content.tsx +++ b/components/blocks/content.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Container } from "../util/container"; import { Section } from "../util/section"; import { TinaMarkdown } from "tinacms/dist/rich-text"; -import type { TinaTemplate } from "tinacms"; +import type { Template } from "tinacms"; export const Content = ({ data, parentField = "" }) => { return ( @@ -21,7 +21,7 @@ export const Content = ({ data, parentField = "" }) => { ); }; -export const contentBlockSchema: TinaTemplate = { +export const contentBlockSchema: Template = { name: "content", label: "Content", ui: { diff --git a/components/blocks/hero.tsx b/components/blocks/hero.tsx index 5cf4d0b..8ca0741 100644 --- a/components/blocks/hero.tsx +++ b/components/blocks/hero.tsx @@ -3,7 +3,7 @@ import { Actions } from "../util/actions"; import { Container } from "../util/container"; import { Section } from "../util/section"; import { TinaMarkdown } from "tinacms/dist/rich-text"; -import type { TinaTemplate } from "tinacms"; +import type { Template } from "tinacms"; export const Hero = ({ data, parentField }) => { return ( @@ -70,7 +70,7 @@ export const Hero = ({ data, parentField }) => { ); }; -export const heroBlockSchema: TinaTemplate = { +export const heroBlockSchema: Template = { name: "hero", label: "Hero", ui: { diff --git a/components/blocks/testimonial.tsx b/components/blocks/testimonial.tsx index 8185441..84ebfc9 100644 --- a/components/blocks/testimonial.tsx +++ b/components/blocks/testimonial.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Container } from "../util/container"; import { Section } from "../util/section"; -import type { TinaTemplate } from "tinacms"; +import type { Template } from "tinacms"; export const Testimonial = ({ data, parentField = "" }) => { return ( @@ -59,7 +59,7 @@ export const Testimonial = ({ data, parentField = "" }) => { ); }; -export const testimonialBlockSchema: TinaTemplate = { +export const testimonialBlockSchema: Template = { name: "testimonial", label: "Testimonial", ui: { diff --git a/components/layout/breadcrumb.tsx b/components/layout/breadcrumb.tsx new file mode 100644 index 0000000..8ff3943 --- /dev/null +++ b/components/layout/breadcrumb.tsx @@ -0,0 +1,73 @@ +// /components/NextBreadcrumb.tsx +"use client"; + +import React, { ReactNode } from "react"; + +import { usePathname } from "next/navigation"; +import Link from "next/link"; +import { FaHome } from "react-icons/fa"; + +type TBreadCrumbProps = { + homeElement: ReactNode; +}; + +const replacements: Record = { + EmbassyBarKitchen: "Embassy Bar & Kitchen", + SBBG: "South Bank Beer Garden", +}; + +function cleanUpLink(link: string) { + if (replacements[link]) { + return replacements[link]; + } else { + return link + .split("-") + .map((word) => { + if (word === "and" || word === "or" || word === "the") { + return word; + } else { + return word.charAt(0).toUpperCase() + word.slice(1); + } + }) + .join(" "); + } +} + +const NextBreadcrumb = () => { + const paths = usePathname(); + const pathNames = paths.split("/").filter((path) => path); + const separator = /; + return ( + pathNames.length > 0 && ( +
+
    +
  • + + + +
    • + {pathNames.length > 0 && separator} + {pathNames.map((link, index) => { + const href = `/${pathNames.slice(0, index + 1).join("/")}`; + const itemClasses = + paths === href + ? "opacity-70 cursor-default" + : "hover:opacity-70 hover:underline"; + return ( + +
  • + + {cleanUpLink(link)} + +
    • + {pathNames.length !== index + 1 && separator} +     + ); + })} +
+
+ ) + ); +}; + +export default NextBreadcrumb; diff --git a/components/layout/header.tsx b/components/layout/header.tsx index 609be0b..e9239b1 100644 --- a/components/layout/header.tsx +++ b/components/layout/header.tsx @@ -1,29 +1,30 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import { Container } from "../util/container"; -import { FaBars, FaSearchLocation, FaUtensils } from "react-icons/fa"; +import { FaBars, FaSearchLocation, FaTimes, FaUtensils } from "react-icons/fa"; import Link from "next/link"; export const Header = ({ data }) => { const router = useRouter(); - // If we're on an admin path, other links should also link to their admin paths // eslint-disable-next-line @typescript-eslint/no-unused-vars const [prefix, setPrefix] = useState(""); const [expanded, setExpanded] = useState(false); - React.useEffect(() => { + useEffect(() => { if (window && window.location.pathname.startsWith("/admin")) { setPrefix("/admin"); } - }, []); + console.log("Menu expanded state changed to:", expanded); + }, [expanded]); return (