@rileybathurst/paddle 0.0.54 → 0.0.56

package/package.json

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

package/src/PaddleSEO.tsx

@@ -64,19 +64,21 @@ type SEOtypes = {
     ogImagedescription: string;
   };
 
-  strapiLocation: {
-    streetAddress: string;
-    addressLocality: string;
-    addressRegion: string;
-    postalCode: string;
-    paymentAccepted: string;
-    phone: string;
-    opening_time: string;
-    closing_time: string;
+  allStrapiLocation: {
+    nodes: {
+      streetAddress: string;
+      addressLocality: string;
+      addressRegion: string;
+      postalCode: string;
+      paymentAccepted: string;
+      phone: string;
+      opening_time: string;
+      closing_time: string;
+    }[];
   };
 }
 
-export const PaddleSEO = ({ title, description, ogImage, ogImagedescription, breadcrumbs, strapiLocale, strapiLocation }: SEOtypes) => {
+export const PaddleSEO = ({ title, description, ogImage, ogImagedescription, breadcrumbs, strapiLocale, allStrapiLocation }: SEOtypes) => {
 
   const businessName = `${strapiLocale.name} Kayak & Paddleboard rentals and tours`;
 
@@ -91,9 +93,11 @@ export const PaddleSEO = ({ title, description, ogImage, ogImagedescription, bre
   // const formatted = query.split('\n').map((item) => item.trim().replace('- ', '')).join(', ');
   // console.log(formatted);
 
+  // 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(', ');
+  // const paymentAcceptedQuery = strapiLocation.paymentAccepted ? strapiLocation.paymentAccepted : '';
+  // const paymentAcceptedFormatted = paymentAcceptedQuery.split('\n').map((payment: string) => payment.trim().replace('- ', '')).join(', ');
   // console.log(paymentAcceptedFormatted);
 
   return (
@@ -118,13 +122,18 @@ export const PaddleSEO = ({ title, description, ogImage, ogImagedescription, bre
             "url": "${strapiLocale.url}",
             "description": "${strapiLocale.name}",
             "image": "${PaddleImage}",
-            "address": {
-              "@type": "PostalAddress",
-              "streetAddress": "${strapiLocation.streetAddress}",
-              "addressLocality": "${strapiLocation.addressLocality}",
-              "addressRegion": "${strapiLocation.addressRegion}",
-              "postalCode": "${strapiLocation.postalCode}"
-            },
+            
+            ${allStrapiLocation.nodes.map((location) => {
+          return `{
+                "address": {
+                  "@type": "PostalAddress",
+                  "streetAddress": "${location.streetAddress}",
+                  "addressLocality": "${location.addressLocality}",
+                  "addressRegion": "${location.addressRegion}",
+                  "postalCode": "${location.postalCode}"
+                },
+              }`
+        })},
             "geo": {
               "@type": "GeoCoordinates",
               "latitude": "${strapiLocale.latitude}",
@@ -139,11 +148,7 @@ export const PaddleSEO = ({ title, description, ogImage, ogImagedescription, bre
               },
               "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>

package/src/styles/layout.css

@@ -15,7 +15,8 @@ body {
 header,
 main,
 footer,
-.deck {
+.deck,
+.react-aria-Breadcrumbs {
   margin-inline: auto;
   padding-inline: var(--kosciuszko);
   width: calc(100% - var(--kosciuszko) * 2);
@@ -26,15 +27,14 @@ footer,
   flex-basis: var(--vulture);
 }
 
-.stork,
-header,
-main,
-footer {
+.stork {
   max-width: min(var(--stork), calc(100vw - var(--denali)));
   flex-basis: var(--stork);
 }
 
 .condor,
+header,
+main,
 .location,
 .react-aria-Breadcrumbs.condor {
   max-width: min(var(--condor), calc(100vw - var(--denali)));
@@ -48,6 +48,7 @@ footer {
 }
 
 .albatross,
+footer,
 .deck,
 .react-aria-Breadcrumbs {
   max-width: min(var(--albatross), calc(100vw - var(--denali)));
@@ -57,7 +58,8 @@ footer {
 /*------------------------------------*/
 
 .wrap,
-.deck {
+.deck,
+footer {
   display: flex;
   flex-flow: row wrap;
   gap: clamp(var(--kosciuszko), 1.667vw, var(--denali));
@@ -72,8 +74,9 @@ footer {
 
 .pelican.wrap > *,
 .albatross.wrap > *,
-.deck > * {
-  max-width: none;
+.deck > *,
+footer > * {
+  max-width: none; /* TODO: this is breaking .composition on storybook */
   margin-inline: 0;
   padding-inline: 0;
 }
@@ -87,6 +90,10 @@ footer {
   flex: 1 1 calc(var(--albatross) / 2 - var(--vinson));
 }
 
+.albatross.wrap .composition {
+  max-width: fit-content;
+}
+
 /*------------------------------------*/
 /* #NESTED */
 /*------------------------------------*/
@@ -237,3 +244,92 @@ header {
   border-block-end: 1px solid;
   border-radius: 0;
 }
+
+/*------------------*/
+/* #COMPOSITION */
+/*------------------*/
+
+.composition {
+  /* grid-area: composition; /* ? is this still used */
+  display: grid;
+  grid-template-columns: 5% 10% 70% 10% 5%;
+  grid-template-rows: 5% 90% 5%;
+  margin-block-end: var(--vinson);
+
+  /* these dont obey the max height at all */
+  /* max-height: var(--stork); ? */
+  /* max-height: 23rem; TODO: guess and check can I use a variable */
+  /* overflow: hidden; */
+
+  > img {
+    display: block;
+
+    /* ! test */
+    opacity: 0.5;
+  }
+
+  .paddler {
+    grid-column: 3;
+    grid-row: 2;
+    aspect-ratio: 1;
+    border: none;
+    box-shadow: none;
+    margin-block: 1rem;
+
+    /* ! test */
+    background-color: hotpink;
+
+    img {
+      border-radius: 50%;
+      border: 2px solid;
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+    }
+  }
+
+  /* gatsby nesting breaks the design */
+  .storybook-paddler {
+    grid-column: 3;
+    grid-row: 2;
+    aspect-ratio: 1;
+    border: none;
+    box-shadow: none;
+    margin-block: 1rem;
+    border-radius: 50%;
+    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 {
+    grid-column: 2/6;
+    grid-row: 2/4;
+    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%;
+}