Updated to latest astro and fixing checkout modal

astro.config.ts

@@ -37,8 +37,11 @@ export default defineConfig({
   output: "static",
   vite: {
     optimizeDeps: {
-      exclude: ["@resvg/resvg-js"],
+      exclude: ["@resvg/resvg-js", "fsevents"],
     },
+    ssr: {
+      noExternal: [],
+    }
   },
   scopedStyleStrategy: "where",
   outDir: "./dist",

package.json

@@ -15,37 +15,38 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.3",
-    "@astrojs/rss": "^4.0.7",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/react": "^4.2.0",
+    "@astrojs/rss": "^4.0.11",
     "@resvg/resvg-js": "^2.6.2",
     "@strapi/blocks-react-renderer": "^1.0.1",
     "@tabler/icons-react": "^3.29.0",
-    "astro": "5.0.0-beta.5",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.21",
+    "astro": "^5.3.0",
     "dotenv": "^16.4.7",
     "fuse.js": "^7.0.0",
     "github-slugger": "^2.0.0",
     "marked": "^15.0.3",
+    "react": "^18.0.21",
+    "react-dom": "^18.0.21",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
     "satori": "^0.10.14",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.5.3"
   },
   "devDependencies": {
-    "@astrojs/react": "^3.6.2",
-    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/tailwind": "^5.1.1",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/tailwind": "^6.0.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/github-slugger": "^1.3.0",
-    "@types/react": "^18.3.3",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/parser": "^8.24.1",
     "astro-eslint-parser": "^0.16.2",
-    "eslint": "^8.56.0",
+    "eslint": "^9.20.1",
     "eslint-plugin-astro": "^0.31.3",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "prettier-plugin-tailwindcss": "^0.6.5"
   }
 }

src/pages/checkout/CheckoutModal.tsx → src/components/checkout/CheckoutModal.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import  {type FC, useEffect, useState } from 'react';
 import { ProductForm } from "scripts/ui.product"
 
 interface Props {
   prices: any;
   product: any;
 }
 
-const CheckoutModal = ({ prices, product }: Props) => {
+const CheckoutModal: FC<Props> = ({ prices, product }: Props)  => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedPrice, setSelectedPrice] = useState(0);
   const [quantity, setQuantity] = useState(1);

src/config.ts

@@ -1,23 +1,36 @@
 import type { Site, SocialObjects } from "./types";
 
-const BASE_URL = ((process.env.BASE_URL || import.meta.env.BASE_URL) as string);
+// import { loadEnv } from "vite";
 
-const url = BASE_URL.startsWith('http') ? BASE_URL : 'https://markket.place/';
+// hack because Astro doesn't read the .env file before their config file
+const {
+  BASE_URL,
+  PUBLIC_STRIPE_PUBLISHABLE_KEY,
+  STRAPI_URL,
+  STORE_SLUG,
+  COLOR_PRIMARY,
+  COLOR_ACCENT,
+  POSTHOG_ID,
+} = import.meta.env;
 
-console.log({ url, BASE_URL });
+
+console.info('Loading Astro config',
+  { BASE_URL, PUBLIC_STRIPE_PUBLISHABLE_KEY, STRAPI_URL, STORE_SLUG, COLOR_PRIMARY, COLOR_ACCENT, POSTHOG_ID }
+);
 
 /**
  * @type {{[string]: string}} Global Configuration attributes for the markket instance
  */
 export const markketplace = {
-  STRAPI_URL: (import.meta.env.STRAPI_URL || '').replace(/\/$/, '') || 'https://api.markket.place',
-  STORE_SLUG: import.meta.env.STORE_SLUG as string || 'fika',
+  STRAPI_URL: (STRAPI_URL || '').replace(/\/$/, '') || 'https://api.markket.place',
+  STORE_SLUG: (STORE_SLUG as string) || 'fika',
   colors: {
-    primary: import.meta.env.COLOR_PRIMARY as string || '#fbda0c',
-    accent: import.meta.env.COLOR_ACCENT as string || '#38b2ac',
+    primary: COLOR_PRIMARY as string || '#fbda0c',
+    accent: COLOR_ACCENT as string || '#38b2ac',
   },
-  POSTHOG_ID: import.meta.env.POSTHOG_ID as string || '',
-  url,
+  POSTHOG_ID: POSTHOG_ID as string || '',
+  url: BASE_URL.startsWith('http') ? BASE_URL : 'https://markket.place/',
+  STRIPE_PUBLISHABLE_KEY: PUBLIC_STRIPE_PUBLISHABLE_KEY || '',
 };
 
 /**

src/env.d.ts

@@ -11,6 +11,8 @@ export interface ImportMetaEnv {
   readonly STORE_DESCRIPTION: string;
   readonly STORE_TITLE: string;
   readonly STORE_OG_IMAGE: string;
+  readonly PUBLIC_BASE_URL: string;
+  readonly PUBLIC_STRIPE_PUBLISHABLE_KEY: string;
 }
 
 export interface ImportMeta {

src/pages/products/[slug].astro

@@ -6,7 +6,7 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import { markketplace } from "@config";
 import HeroImage from "@components/HeroImage.astro";
-import CheckoutModal from "@pages/checkout/CheckoutModal"
+import CheckoutModal from "@components/checkout/CheckoutModal";
 
 import { marked } from "marked";
 
@@ -74,43 +74,43 @@ const selectedImage =
     pageTitle={product?.data?.Name as string}
     pageDesc={product?.data?.SEO?.metaDescription || "Product Details"}
   />
-  <main class="lg:px-8 product-page px-4 py-12 sm:px-6">
+  <main class="product-page px-4 py-12 sm:px-6 lg:px-8">
     <div class="mx-auto w-full px-6">
-      <div class="lg:grid lg:grid-cols-2 lg:gap-x-8 lg:items-start mb-10">
+      <div class="mb-10 lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
         <div class="flex flex-col">
-          <div
-            class="aspect-w-3 aspect-h-4 overflow-hidden rounded-l pr-3"
-          >
+          <div class="aspect-w-3 aspect-h-4 overflow-hidden rounded-l pr-3">
             <HeroImage
               title={product?.data?.Name as string}
               image={selectedImage}
             />
           </div>
-          <div class="flex flex-col w-full mt-10 justify-end">
+          <div class="mt-10 flex w-full flex-col justify-end">
             {
               product?.data?.Slides?.length > 0 && (
                 <div class="">
                   <div class="grid grid-cols-6 gap-2">
                     {product?.data?.Slides?.map((slide: any) => {
                       return (
-                      <div class="aspect-w-3 aspect-h-4 overflow-hidden rounded-lg">
-                        <img
-                          src={slide?.formats?.thumbnail?.url}
-                          alt={slide?.alternativeText || ""}
-                          data-astro-image={JSON.stringify(slide?.formats?.small)}
-                          class="h-full w-full cursor-pointer object-cover object-center transition-opacity hover:opacity-75"
-                          aria-description={slide?.caption || ""}
-                        />
-                      </div>
-                      )}
-                    )}
+                        <div class="aspect-w-3 aspect-h-4 overflow-hidden rounded-lg">
+                          <img
+                            src={slide?.formats?.thumbnail?.url}
+                            alt={slide?.alternativeText || ""}
+                            data-astro-image={JSON.stringify(
+                              slide?.formats?.small
+                            )}
+                            class="h-full w-full cursor-pointer object-cover object-center transition-opacity hover:opacity-75"
+                            aria-description={slide?.caption || ""}
+                          />
+                        </div>
+                      );
+                    })}
                   </div>
                 </div>
               )
             }
           </div>
         </div>
-        <div class="lg:mt-0 mt-10 px-4 sm:mt-16 sm:px-0">
+        <div class="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
           <h1
             class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white"
           >
@@ -125,11 +125,10 @@ const selectedImage =
             />
           </div>
         </div>
-
       </div>
       <Hr />
-      <div class="flex mt-6 justify-center">
-        <CheckoutModal  client:load prices={prices} product={product} />
+      <div class="mt-6 flex justify-center">
+        <CheckoutModal client:load prices={prices} product={product} />
       </div>
       <!-- <div class="w-full mt-8">
         <form
@@ -214,25 +213,24 @@ const selectedImage =
         </button> -->
         <ol class="mt-4 text-sm text-gray-500">
           <li class="mb-2">
-            We use Stripe to collect payments, and send payouts to the
-            artists
+            We use Stripe to collect payments, and send payouts to the artists
           </li>
           <li class="mb-2">
-            You'll be redirected to a Stripe page to continue, and we'll
-            notify the artists after a succesful transaction
+            You'll be redirected to a Stripe page to continue, and we'll notify
+            the artists after a succesful transaction
           </li>
           <li class="mb-2">
-            Currently we don't support a shopping cart, you can get one
-            or multiple units of the same
+            Currently we don't support a shopping cart, you can get one or
+            multiple units of the same
             <em>Price</em> per transaction
           </li>
           <li class="mb-2">
-            We notify the artist after a succesful transaction and
-            forward your shipping details and email to them
+            We notify the artist after a succesful transaction and forward your
+            shipping details and email to them
           </li>
           <li class="mb-2">
-            The artists will reach out with tracking details, or follow
-            up steps to complete the transaction
+            The artists will reach out with tracking details, or follow up steps
+            to complete the transaction
           </li>
         </ol>
       </div>

src/utils/stripe.ts

@@ -1,7 +1,7 @@
-const PUBLIC_KEY = process.env.STRIPE_PUBLISHABLE_KEY || '';
-
-export default {
-  enabled: !!PUBLIC_KEY,
-}
+// import { markketplace } from "@config";
 
+// const PUBLIC_KEY = markketplace.STRIPE_PUBLISHABLE_KEY;
 
+// export default {
+//   enabled: !!PUBLIC_KEY,
+// }