@rileybathurst/paddle 0.0.50 → 0.0.52

package/package.json

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

package/src/PaddleSEO.tsx

@@ -10,9 +10,6 @@ interface BreadcrumbsTypes {
 }[]
 // 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
@@ -44,13 +41,13 @@ function Breadcrumbs(breadcrumbs: BreadcrumbsTypes) {
 }
 
 type SEOtypes = {
-  title?: string;
-  description?: string;
-  url?: string;
-  image?: string;
-  imageAlt?: string;
-  breadcrumbs?: object;
-  children?: React.ReactNode;
+  title: string;
+  description: string;
+  url: string;
+  ogImage: string;
+  ogimagedescription: string;
+  breadcrumbs: BreadcrumbsTypes;
+  children: React.ReactNode;
 
   strapiLocale: {
     name: string;
@@ -58,13 +55,10 @@ type SEOtypes = {
       topbar: string;
     };
     url: string;
-    ogImage: string;
-    ogimagedescription: string;
     themeColor: string;
     latitude: string;
     longitude: string;
     geoRadius: string;
-    phone: string;
   };
 
   strapiLocation: {
@@ -72,25 +66,23 @@ type SEOtypes = {
     addressLocality: string;
     addressRegion: string;
     postalCode: string;
+    paymentAccepted: string;
+    phone: string;
     opening_time: string;
     closing_time: string;
-    paymentAccepted: string;
   };
 }
 
-export const SEO = (strapiLocale, strapiLocation: SEOtypes) => {
+export const PaddleSEO = (title, description, image, imageAlt, breadcrumbs, 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 PaddleTitle = title ? `${title} | ${businessName}` : `${businessName} | ${strapiLocale.topbar.topbar} `;
+  // TODO: tagline would be a better fallback description
+  const PaddleDescription = description || businessName;
+  // url: `${strapiLocale.url}${SE0.url}` || strapiLocale.url,
+  const PaddleImage = image || strapiLocale.ogImage;
+  const PaddleImageAlt = imageAlt || strapiLocale.ogimagedescription;
 
   // const query = '- cash\n - credit card';
   // const formatted = query.split('\n').map((item) => item.trim().replace('- ', '')).join(', ');
@@ -103,15 +95,15 @@ export const SEO = (strapiLocale, strapiLocation: SEOtypes) => {
 
   return (
     <>
-      <title>{seo.title}</title>
-      <meta name="description" content={seo.description} />
+      <title>{PaddleTitle}</title>
+      <meta name="description" content={PaddleDescription} />
 
       <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 property="og:url" content={url} /> */}
+      <meta property="og:title" content={PaddleTitle} />
+      <meta property="og:description" content={PaddleDescription} />
+      <meta property="og:image" content={PaddleImage} />
+      <meta property="og:image:alt" content={PaddleImageAlt} />
       <meta name="theme-color" content={strapiLocale.themeColor} />
 
       <Script type="application/ld+json">
@@ -122,7 +114,7 @@ export const SEO = (strapiLocale, strapiLocation: SEOtypes) => {
             "name": "${businessName}",
             "url": "${strapiLocale.url}",
             "description": "${strapiLocale.name}",
-            "image": "${seo.image}",
+            "image": "${PaddleImage}",
             "address": {
               "@type": "PostalAddress",
               "streetAddress": "${strapiLocation.streetAddress}",
@@ -153,11 +145,8 @@ export const SEO = (strapiLocale, strapiLocation: SEOtypes) => {
         `}
       </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}
+      <Breadcrumbs {...breadcrumbs} />
+      {/* {SE0.children} */}
     </>
   );
 };