Add canonical URLs to home page, reviews, and blocks

bradystroud · Apr 17, 2024 · 91a30a8 · 91a30a8
1 parent bce92dc
commit 91a30a8
Show file tree

Hide file tree

Showing 22 changed files with 176 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,9 @@
 test change
+
 <!-- Generated by ChatGPT-4 -->
+
 🤖
+
 # 🐔 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<string, string> = {
+  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 = <span className="mx-2">/</span>;
+  return (
+    pathNames.length > 0 && (
+      <div className="mx-20">
+        <ul className="flex py-5">
+          <li className="hover:opacity-70 hover:underline mx-2">
+            <Link href={"/"}>
+              <FaHome className="mt-1" />
+            </Link>
+          </li>
+          {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 (
+              <React.Fragment key={index}>
+                <li className="mx-2">
+                  <Link className={itemClasses} href={href}>
+                    {cleanUpLink(link)}
+                  </Link>
+                </li>
+                {pathNames.length !== index + 1 && separator}
+              </React.Fragment>
+            );
+          })}
+        </ul>
+      </div>
+    )
+  );
+};
+
+export default NextBreadcrumb;
diff --git 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 (
     <div className={`relative overflow-hidden bg-gradient-to-b`}>
       <Container size="custom" className="py-0 relative z-10 max-w-8xl">
         <nav className="flex items-center justify-between flex-wrap p-6">
           <div className="flex items-center flex-shrink-0 text-white mr-6">
-            <FaSearchLocation className="fill-current h-8 w-8 mr-2" />
+            <FaSearchLocation className="fill-current h-8 w-8 mr-2" />{" "}
+            {/* Weird stuff happens when i removed the above line, so it stays */}
             <span className="font-semibold text-xl tracking-tight text-black ">
               <Link href="/" className="flex">
                 <FaUtensils className="fill-current h-8 w-8 mr-2" />
@@ -33,15 +34,19 @@ export const Header = ({ data }) => {
           </div>
           <div className="block md:hidden">
             <button className="flex items-center px-3 py-2 text-teal-20 hover:text-gray-400">
-              <FaBars onClick={() => setExpanded(!expanded)} />
+              {expanded ? (
+                <FaTimes onClick={() => setExpanded(!expanded)} />
+              ) : (
+                <FaBars onClick={() => setExpanded(!expanded)} />
+              )}
             </button>
           </div>
           <div
-            className={`w-full block flex-grow md:items-center md:w-auto ${
+            className={`w-full block md:items-center md:w-auto ${
               expanded ? "" : "hidden md:flex"
             }`}
           >
-            <div className="text-sm lg:flex-grow">
+            <div className="text-sm lg:flex-grow mx-10">
               {data.nav &&
                 data.nav.map((item, i) => {
                   const activeItem =

diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
@@ -3,6 +3,7 @@ import Head from "next/head";
 import { Header } from "./header";
 import { Footer } from "./footer";
 import layoutData from "../../content/global/index.json";
+import NextBreadcrumb from "./breadcrumb";
 
 export const Layout = ({ data = layoutData, children }) => {
   return (
@@ -15,7 +16,6 @@ export const Layout = ({ data = layoutData, children }) => {
           content="Chicken parmi reviews - my personal list of every parmi I've tried and rated. Browse through my reviews to find the best"
           key="desc"
         />
-        <link rel="canonical" href="https://parmipicks.com/" />
         <meta property="og:site_name" content="Parmi Picks" />
         <meta property="og:url" content="https://parmipicks.com/" />
         <meta property="og:type" content="website" />
@@ -36,7 +36,8 @@ export const Layout = ({ data = layoutData, children }) => {
       </Head>
       <div>
         <Header data={data?.header} />
-        <div className="flex-1 text-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000 flex flex-col">
+        <div className="flex-1 text-gray-80 flex flex-col">
+          <NextBreadcrumb homeElement={"Home"} />
           {children}
         </div>
         <Footer

diff --git a/components/posts/reviews.tsx b/components/posts/reviews.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Link from "next/link";
-import { BsArrowRight, BsPinMap } from "react-icons/bs";
+import { BsArrowRight } from "react-icons/bs";
 
 export const Reviews = ({ data }) => {
   return (
@@ -24,9 +24,9 @@ export const Reviews = ({ data }) => {
             passHref
             legacyBehavior
           >
-            <a
+            <div
               key={post.id}
-              className="group block px-6 sm:px-8 md:px-10 py-10 mb-8 last:mb-0 bg-gray-50 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-1000 rounded-md shadow-sm transition-all duration-150 ease-out hover:shadow-md hover:to-gray-50 dark:hover:to-gray-800"
+              className="group block px-6 sm:px-8 md:px-10 py-10 mb-8 last:mb-0 bg-gray-50 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-1000 rounded-md shadow-sm transition-all duration-150 ease-out hover:shadow-md hover:to-gray-50 dark:hover:to-gray-800 hover:cursor-pointer"
             >
               <h3
                 className={`text-gray-700 dark:text-white text-3xl lg:text-4xl title-font mb-5 transition-all duration-150 ease-out group-hover:text-blue-600 dark:group-hover:text-blue-300`}
@@ -37,34 +37,29 @@ export const Reviews = ({ data }) => {
                   <BsArrowRight className="inline-block h-8 -mt-1 ml-1 w-auto opacity-70" />
                 </span>
               </h3>
-              <div className="flex justify-between items-center">
-                <div className="flex items-center">
-                  <div className="flex-shrink-0 mr-2">
-                    <img
-                      className="h-10 w-10 object-cover rounded-full shadow-sm"
-                      src={post?.author?.avatar}
-                      alt={post?.author?.name}
-                    />
-                  </div>
-                  <p className="text-base font-medium text-gray-600 group-hover:text-gray-800 dark:text-gray-200 dark:group-hover:text-white">
-                    {post?.author?.name}
-                  </p>
-                  {formattedDate !== "" && (
-                    <>
-                      <span className="font-bold text-gray-200 dark:text-gray-500 mx-2">
-                        —
-                      </span>
-                      <p className="text-base text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-150">
-                        {formattedDate}
-                      </p>
-                    </>
-                  )}
+              <div className="flex items-center">
+                <div className="flex-shrink-0 mr-2">
+                  <img
+                    className="h-10 w-10 object-cover rounded-full shadow-sm"
+                    src={post?.author?.avatar}
+                    alt={post?.author?.name}
+                  />
                 </div>
-                <a href={post?.restaurant?.url} target="_blank">
-                  <BsPinMap className="inline-block h-8 -mt-1 ml-1 w-auto opacity-70 hover:opacity-20" />
-                </a>
+                <p className="text-base font-medium text-gray-600 group-hover:text-gray-800 dark:text-gray-200 dark:group-hover:text-white">
+                  {post?.author?.name}
+                </p>
+                {formattedDate !== "" && (
+                  <>
+                    <span className="font-bold text-gray-200 dark:text-gray-500 mx-2">
+                      —
+                    </span>
+                    <p className="text-base text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-150">
+                      {formattedDate}
+                    </p>
+                  </>
+                )}
               </div>
-            </a>
+            </div>
           </Link>
         );
       })}

diff --git a/components/util/actions.tsx b/components/util/actions.tsx
@@ -13,7 +13,7 @@ export const Actions = ({ parentField = "", className = "", actions }) => {
               <Link key={index} href={action.link ? action.link : "/"}>
                 <button
                   data-tinafield={`${parentField}.${index}`}
-                  className={`z-10 relative flex items-center px-7 py-3 font-semibold text-lg transition duration-150 ease-out rounded-lg transform focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 whitespace-nowrap`}
+                  className={`z-10 relative flex items-center px-7 py-3 font-semibold text-lg transition duration-150 ease-out rounded-lg transform focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 whitespace-nowrap hover:opacity-80 bg-gradient-to-br from-blue-600 to-blue-800 text-white shadow-md hover:shadow-lg`}
                 >
                   {action.label}
                   {action.icon && (
@@ -35,7 +35,7 @@ export const Actions = ({ parentField = "", className = "", actions }) => {
               >
                 <a
                   data-tinafield={`${parentField}.${index}`}
-                  className={`group inline-flex items-center font-semibold text-lg transition duration-150 ease-out`}
+                  className={`group inline-flex items-center font-semibold text-lg transition duration-150 ease-out hover:opacity-70`}
                   style={{
                     textShadow: `0 3px 7px rgba(var(--color-rgb-blue-400),0.2)`,
                   }}

diff --git a/content/pages/about.md b/content/pages/about.md
@@ -1,9 +1,8 @@
 ---
 title: "About"
+cannonicalUrl: https://parmipicks.com/about
 blocks:
   - body: "# \U0001F4D6 About\n\nI appreciate a good chicken parmi, and ParmiPicks is my way of sharing my experiences with others. There was a restaurant near where I grew up that had a memorable parmi with quality chicken, a good amount of sauce, and diced bacon instead of ham. The generous portion size and tasty sides made it stand out.\n\n## ⚖️ The Rating System\n\nI rate each parmi on a scale of 0 to 10, allowing for one decimal point (e.g., 4.5). Here's what goes into each rating:\n\n* \U0001F35B The whole package: Everything on the plate counts, from the chicken and toppings to the chips and salad.\n* \U0001F31F Focus on the parmi: Nothing off the plate matters. Even if I have a bad experience at the restaurant, it won't affect the rating. The parmi is the star of the show.\n\n\U0001F3AF I believe this rating system is fair and reasonable because it focuses solely on the quality and taste of the chicken parmi and its accompanying sides. By not allowing external factors to influence the rating, I can provide a more objective assessment of each parmi. \n\n\U0001F4E3 That being said, I appreciate any feedback or suggestions for improving the rating system.\n\n\n\U0001F37D️ Feel free to browse my reviews and discover various chicken parmis from different places. Enjoy!\n"
     color: default
     _template: content
 ---
-
-
diff --git a/content/pages/home.md b/content/pages/home.md
@@ -1,5 +1,6 @@
 ---
 title: Parmi Picks Home
+cannonicalUrl: https://parmipicks.com
 blocks:
   - tagline: ""
     headline: Parmi Picks

diff --git a/content/reviews/EmbassyBarKitchen.mdx b/content/reviews/EmbassyBarKitchen.mdx
@@ -4,6 +4,7 @@ author: content/authors/brady.md
 restaurant: content/restaurant/Embassy-Bar--Kitchen.md
 date: '2023-04-11T14:00:00.000Z'
 parmiImg: /uploads/IMG_2568.jpeg
+cannonicalUrl: https://parmipicks.com/reviews/EmbassyBarKitchen
 ---
 
 * Thick layer of mozzarella cheese