@rileybathurst/paddle 0.0.56 → 0.0.58

package/package.json

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

package/src/PaddleSEO.tsx

@@ -45,7 +45,7 @@ type SEOtypes = {
   description?: string;
   url: string;
   ogImage?: string;
-  ogImagedescription?: string;
+  ogImageDescription?: string;
   breadcrumbs?: BreadcrumbsTypes;
   // children: React.ReactNode;
 
@@ -60,8 +60,13 @@ type SEOtypes = {
     longitude: string;
     geoRadius: string;
     phone: string;
+    email: string;
     ogImage: string;
-    ogImagedescription: string;
+    ogImageDescription: string;
+    paymentAccepted: string;
+    numberOfEmployees: string;
+    priceRange: string;
+    slogan: string;
   };
 
   allStrapiLocation: {
@@ -78,16 +83,16 @@ type SEOtypes = {
   };
 }
 
-export const PaddleSEO = ({ title, description, ogImage, ogImagedescription, breadcrumbs, strapiLocale, allStrapiLocation }: SEOtypes) => {
+export const PaddleSEO = ({ title, description, ogImage, ogImageDescription, breadcrumbs, strapiLocale, allStrapiLocation }: SEOtypes) => {
 
   const businessName = `${strapiLocale.name} Kayak & Paddleboard rentals and tours`;
 
   const PaddleTitle = title ? `${title} | ${businessName}` : `${businessName} | ${strapiLocale.topbar.topbar} `;
   // TODO: tagline would be a better fallback description
-  const PaddleDescription = description || businessName;
+  const PaddleDescription = description || strapiLocale.slogan;
   // url: `${strapiLocale.url}${SE0.url}` || strapiLocale.url,
   const PaddleImage = ogImage || strapiLocale.ogImage;
-  const PaddleImageAlt = ogImagedescription || strapiLocale.ogImagedescription;
+  const PaddleImageAlt = ogImageDescription || strapiLocale.ogImageDescription;
 
   // const query = '- cash\n - credit card';
   // const formatted = query.split('\n').map((item) => item.trim().replace('- ', '')).join(', ');
@@ -95,10 +100,10 @@ export const PaddleSEO = ({ title, description, ogImage, ogImagedescription, bre
 
   // TODO: this is now allStrapiLocation.nodes
   // TODO: I think this will be a keylocation piece
-  // console.log(strapiLocation.paymentAccepted);
-  // const paymentAcceptedQuery = strapiLocation.paymentAccepted ? strapiLocation.paymentAccepted : '';
-  // const paymentAcceptedFormatted = paymentAcceptedQuery.split('\n').map((payment: string) => payment.trim().replace('- ', '')).join(', ');
-  // console.log(paymentAcceptedFormatted);
+  console.log(strapiLocale.paymentAccepted);
+  const paymentAcceptedQuery = strapiLocale.paymentAccepted ? strapiLocale.paymentAccepted : '';
+  const paymentAcceptedFormatted = paymentAcceptedQuery.split('\n').map((payment: string) => payment.trim().replace('- ', '')).join(', ');
+  console.log(paymentAcceptedFormatted);
 
   return (
     <>
@@ -149,6 +154,12 @@ export const PaddleSEO = ({ title, description, ogImage, ogImagedescription, bre
               "geoRadius": "${strapiLocale.geoRadius}"
             },
             "telephone": "${strapiLocale.phone}",
+            "email": "${strapiLocale.email}",
+
+            "numberOfEmployees" : "${strapiLocale.numberOfEmployees}",
+            "priceRange": "${strapiLocale.priceRange}",
+            "slogan": "${strapiLocale.slogan}",
+            "paymentAccepted": "${paymentAcceptedFormatted}",
           }
         `}
       </Script>
@@ -157,4 +168,25 @@ export const PaddleSEO = ({ title, description, ogImage, ogImagedescription, bre
       {/* {SE0.children} */}
     </>
   );
-};
+};
+
+// TODO: image alt in rich data
+
+/* "openingHoursSpecification": [
+  ${allStrapiLocation.nodes.map((location) => {
+return `{
+    "@type": "OpeningHoursSpecification",
+    "dayOfWeek": [
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+      "Sunday"
+    ],
+    "opens": "${location.opening_time}",
+    "closes": "${location.closing_time}"
+  }`
+  })}
+], */

package/src/styles/layout.css

@@ -57,6 +57,8 @@ footer,
 
 /*------------------------------------*/
 
+/* TODO: media queries for the nested wraps */
+
 .wrap,
 .deck,
 footer {
@@ -261,11 +263,13 @@ header {
   /* max-height: 23rem; TODO: guess and check can I use a variable */
   /* overflow: hidden; */
 
+  .gatsby-image-wrapper,
+  .storybook-gatsby-image {
+    max-width: 100%;
+  }
+
   > img {
     display: block;
-
-    /* ! test */
-    opacity: 0.5;
   }
 
   .paddler {
@@ -276,9 +280,6 @@ header {
     box-shadow: none;
     margin-block: 1rem;
 
-    /* ! test */
-    background-color: hotpink;
-
     img {
       border-radius: 50%;
       border: 2px solid;
@@ -299,18 +300,12 @@ header {
     border: 2px solid;
     width: calc(100% - 4px);
     height: calc(100% - 4px);
-
-    /* ! test */
-    background-color: hotpink;
   }
 
   .t1 {
     grid-column: 1/5;
     grid-row: 1/3;
     aspect-ratio: 16/9;
-
-    /* ! test */
-    background-color: greenyellow;
   }
 
   .t2 {
@@ -319,17 +314,8 @@ header {
     aspect-ratio: 16/9;
     place-self: end;
 
-    /* ! test */
-    background-color: aquamarine;
-
     img {
       object-fit: cover !important;
     }
   }
 }
-
-/* ! testing */
-.composition .gatsby-image-wrapper,
-.composition img {
-  max-width: 100%;
-}