@rileybathurst/paddle 0.0.49 → 0.0.50

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "0.0.49",
+  "version": "0.0.50",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/PaddleSEO.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import { Script } from "gatsby";
+
+interface BreadcrumbsTypes {
+  url: string;
+  [key: number]: {
+    name: string;
+    item: string;
+  };
+}[]
+// I could probably pass it two arguments instead but for now
+function Breadcrumbs(breadcrumbs: BreadcrumbsTypes) {
+
+  // console.log(breadcrumbs);
+  // console.log(Object.entries(breadcrumbs).length);
+  if (!Object.entries(breadcrumbs).length) return null;
+
+  // remove the breadcrumbs.url from the Object.entries
+  // console.log(breadcrumbs.url);
+  const { url, ...rest } = breadcrumbs;
+
+  // console.log(rest);
+
+  return (
+    <Script type="application/ld+json">
+      {`
+        {
+          "@context": "https://schema.org",
+          "@type": "BreadcrumbList",
+          "itemListElement": [
+            ${Object.entries(rest).map(([key, breadcrumb]) => {
+        return `{
+          "@type": "ListItem",
+          "position": ${Number.parseInt(key) + 1},
+          "name": "${breadcrumb.name}",
+          "item": "${breadcrumbs.url}/${breadcrumb.item}"
+        }`
+      })}
+          ]
+        }
+      `}
+    </Script>
+  );
+}
+
+type SEOtypes = {
+  title?: string;
+  description?: string;
+  url?: string;
+  image?: string;
+  imageAlt?: string;
+  breadcrumbs?: object;
+  children?: React.ReactNode;
+
+  strapiLocale: {
+    name: string;
+    topbar: {
+      topbar: string;
+    };
+    url: string;
+    ogImage: string;
+    ogimagedescription: string;
+    themeColor: string;
+    latitude: string;
+    longitude: string;
+    geoRadius: string;
+    phone: string;
+  };
+
+  strapiLocation: {
+    streetAddress: string;
+    addressLocality: string;
+    addressRegion: string;
+    postalCode: string;
+    opening_time: string;
+    closing_time: string;
+    paymentAccepted: string;
+  };
+}
+
+export const SEO = (strapiLocale, strapiLocation: SEOtypes) => {
+
+  const businessName = `${strapiLocale.name} Kayak & Paddleboard rentals and tours`;
+
+  const seo = {
+    title: SE0.title ? `${SE0.title} | ${businessName}` : `${businessName} | ${strapiLocale.topbar.topbar} `,
+    // TODO: tagline would be a better fallback description
+    description: SE0.description || businessName,
+    url: `${strapiLocale.url}${SE0.url}` || strapiLocale.url,
+    image: strapiLocale.ogImage || SEO.image,
+    imageAlt: strapiLocale.ogimagedescription || SEO.imageAlt,
+    breadcrumbs: SE0.breadcrumbs || null,
+  };
+
+  // const query = '- cash\n - credit card';
+  // const formatted = query.split('\n').map((item) => item.trim().replace('- ', '')).join(', ');
+  // console.log(formatted);
+
+  // console.log(strapiLocation.paymentAccepted);
+  const paymentAcceptedQuery = strapiLocation.paymentAccepted;
+  const paymentAcceptedFormatted = paymentAcceptedQuery.split('\n').map((payment: string) => payment.trim().replace('- ', '')).join(', ');
+  // console.log(paymentAcceptedFormatted);
+
+  return (
+    <>
+      <title>{seo.title}</title>
+      <meta name="description" content={seo.description} />
+
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content={seo.url} />
+      <meta property="og:title" content={seo.title} />
+      <meta property="og:description" content={seo.description} />
+      <meta property="og:image" content={seo.image} />
+      <meta property="og:image:alt" content={seo.imageAlt} />
+      <meta name="theme-color" content={strapiLocale.themeColor} />
+
+      <Script type="application/ld+json">
+        {`
+          {
+            "@context": "https://schema.org/",
+            "@type": "LocalBusiness",
+            "name": "${businessName}",
+            "url": "${strapiLocale.url}",
+            "description": "${strapiLocale.name}",
+            "image": "${seo.image}",
+            "address": {
+              "@type": "PostalAddress",
+              "streetAddress": "${strapiLocation.streetAddress}",
+              "addressLocality": "${strapiLocation.addressLocality}",
+              "addressRegion": "${strapiLocation.addressRegion}",
+              "postalCode": "${strapiLocation.postalCode}"
+            },
+            "geo": {
+              "@type": "GeoCoordinates",
+              "latitude": "${strapiLocale.latitude}",
+              "longitude": "${strapiLocale.longitude}"
+            },
+            "areaServed": {
+              "@type": "GeoCircle",
+              "geoMidpoint": {
+                "@type": "GeoCoordinates",
+                "latitude": "${strapiLocale.latitude}",
+                "longitude": "${strapiLocale.longitude}"
+              },
+              "geoRadius": "${strapiLocale.geoRadius}"
+            },
+            "paymentAccepted": "${paymentAcceptedFormatted}",
+            "telephone": "${strapiLocale.phone}",
+            "numberOfEmployees": "10",
+            "openingHours": "Mo, Tu, We, Th, Fr, Sa, Su ${strapiLocation.opening_time}-${strapiLocation.closing_time}",
+            "priceRange": "$30-$375"
+          }
+        `}
+      </Script>
+
+      {/* // ? do I have anything but two levels deep? with this maybe */}
+      {/* this was being weird inline so i put it in a function i might not need to */}
+      {/* {seo?.breadcrumbs ?? */}
+      <Breadcrumbs breadcrumbs={seo.breadcrumbs} />
+      {SE0.children}
+    </>
+  );
+};

package/src/index.tsx

@@ -25,6 +25,9 @@ export * from "./PaddleTestimonials";
 
 // Pages
 
+// 
+export * from "./PaddleSEO";
+
 // TODO: test
 // Types
 export * from "./types/ticket-types";

package/src/styles/layout.css

@@ -42,14 +42,14 @@ footer {
 }
 
 .pelican,
-.react-aria-Breadcrumbs {
+.react-aria-Breadcrumbs.pelican {
   max-width: min(var(--pelican), calc(100vw - var(--denali)));
   flex-basis: var(--pelican);
 }
 
 .albatross,
 .deck,
-.react-aria-Breadcrumbs.albatross {
+.react-aria-Breadcrumbs {
   max-width: min(var(--albatross), calc(100vw - var(--denali)));
   flex-basis: var(--albatross);
 }
@@ -165,6 +165,10 @@ header {
   margin-block-end: var(--kosciuszko);
 }
 
+.zero-block-end {
+  margin-block-end: 0;
+}
+
 /*------------------*/
 /* #TOP BAR */
 /*------------------*/

package/src/styles/lists.css

@@ -61,7 +61,7 @@ ol {
   }
 
   li:not(:last-child)::after {
-    margin-inline: var(--kosciuszko);
+    margin-inline-start: var(--kosciuszko);
     content: ">";
   }
 }

package/src/styles/typography.css

@@ -147,6 +147,7 @@ p {
 hr {
   border: none; /* reset */
   border-bottom: 1px solid;
+  margin-block-end: var(--kosciuszko);
 
   @media (prefers-color-scheme: dark) {
     border-bottom: 1px solid;