Merge pull request #33 from calimania/hotfix/product-scripts

HOTFIX: scripts in product and UX stopped working

.github/workflows/deploy.yml

@@ -20,6 +20,9 @@ jobs:
     env:
       STRAPI_BASE_URL: ${{ secrets.STRAPI_BASE_URL }}
       STORE_SLUG: ${{ secrets.STORE_SLUG }}
+      BASE_URL: ${{ secrets.BASE_URL }}
+      COLOR_PRIMARY: ${{ secrets.COLOR_PRIMARY }}
+      COLOR_ACCENT: ${{ secrets.COLOR_ACCENT }}
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v3

README.md

@@ -14,9 +14,19 @@ customize the store being used. Default values show below:
 export const markketplace = {
   STRAPI_URL: (import.meta.env.STRAPI_URL || '').replace(/\/$/, '') || 'https://api.morirsoniando.com',
   STORE_SLUG: import.meta.env.STORE_SLUG as string || 'morirsoniando',
+  url: import.meta.env.BASE_URL as string || 'https://localhost:4321',
+  POSTHOG_ID: import.meta.env.POSTHOG_ID || '',
+  COLOR_PRIMARY: import.meta.env.COLOR_PRIMARY || ''.
+  COLOR_ACCENT: import.meta.env.COLOR_ACCENT || '',
+  STORE_AUTHOR: import.meta.env.STORE_AUTHOR || '',
+  STORE_OG_IMAGE: import.meta.env.STORE_OG_IMAGE || '',
 };
 ```
 
+Environment variables read during build time and used as defaults
+
+Some layout components and pages use data from the API during render
+
 ## Reference
 
  * populate documentation: https://docs.strapi.io/dev-docs/api/rest/populate-select

astro.config.ts

@@ -6,7 +6,6 @@ import remarkCollapse from "remark-collapse";
 import sitemap from "@astrojs/sitemap";
 import { markketplace } from "./src/config";
 
-
 /**
  * @type {import('astro/types').RuntimeConfig}
  */

package.json

@@ -20,6 +20,7 @@
     "@resvg/resvg-js": "^2.6.2",
     "@strapi/blocks-react-renderer": "^1.0.1",
     "astro": "5.0.0-beta.5",
+    "dotenv": "^16.4.7",
     "fuse.js": "^7.0.0",
     "github-slugger": "^2.0.0",
     "marked": "^15.0.3",

src/config.ts

@@ -1,51 +1,68 @@
-import type Store from "@interfaces/Store";
 import type { Site, SocialObjects } from "./types";
+import type Store from './interfaces/Store';
+import dotenv from 'dotenv';
 
-const STRAPI_URL = (process.env.STRAPI_URL || '').replace(/\/$/, '') || 'https://api.markket.place';
-const STORE_SLUG = process.env.STORE_SLUG as string || 'markket';
+let StoreRequest = null,
+  StoreData: Store | null = null;
 
-let baseURL = '';
-let store: Store = {} as Store;
+export type markketConfig = {
+  STORE_SLUG: string;
+  STRAPI_URL: string;
+  url: string;
+  colors: {
+    primary: string;
+    accent: string;
+  };
+  POSTHOG_ID: string;
+};
 
-try {
-  const url = `${STRAPI_URL}/api/stores?filters[slug][$eq]=${STORE_SLUG}&populate[1]=URLS&populate[2]=SEO`;
-  const storeRequest = await fetch(url);
-  const StoreData = await storeRequest.json();
-  if (StoreData?.data?.[0]?.slug) {
-    store = StoreData.data[0];
-  }
 
-  baseURL = store?.URLS?.[0]?.URL || '';
-} catch (error) {
-  console.error("Error fetching store data", error);
+if (typeof process !== 'undefined') {
+  dotenv.config();
+
+  if (process.env.STRAPI_URL && process.env.STORE_SLUG) {
+    const url = `${process.env.STRAPI_URL}api/stores?filters[slug][$eq]=${process.env.STORE_SLUG}&populate[0]=URLS&populate[1]=SEO`;
+    console.log("Fetching store data", { url });
+    StoreRequest = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
+    const StoreRequestData = await StoreRequest.json();
+    StoreData = StoreRequestData?.data?.[0] as Store;
+  }
 }
 
+export const STRAPI_URL = import.meta.env.STRAPI_URL || "https://api.markket.place";
+export const STORE_SLUG = import.meta.env.STORE_SLUG || "markket";
+export const POSTHOG_ID = import.meta.env.POSTHOG_ID || "";
+export const BASE_URL = StoreData?.URLS?.[0]?.URL || import.meta.env.BASE_URL || "https://markket.place";
+
+
 /**
  * @type {{[string]: string}} Global Configuration attributes for the markket instance
  */
-export const markketplace = {
+export const markketplace: markketConfig = {
   STORE_SLUG,
   STRAPI_URL,
-  url: baseURL,
+  url: StoreData?.URLS?.[0]?.URL || BASE_URL,
   colors: {
     primary: import.meta.env.COLOR_PRIMARY as string || '#fbda0c',
     accent: import.meta.env.COLOR_ACCENT as string || '#38b2ac',
   },
   POSTHOG_ID: import.meta.env.POSTHOG_ID as string || '',
 };
 
+console.log('Markket', { markketplace });
+
 /**
  * Global configuration attributes for the astro site
  *
  * @TODO: Read these values from the API during launch or build time
  */
 export const SITE: Site = {
-  website: baseURL || "https://markket.place",
-  author: store.SEO?.metaAuthor || "Markket",
+  website: BASE_URL || "https://markket.place",
+  author: StoreData?.SEO?.metaAuthor || import.meta.env.STORE_AUTHOR || "Markket",
   profile: `https://markket.place/stores/${STORE_SLUG}`,
-  desc: store.Description || "markketplace store for creators ",
-  title: store.title || "Markket",
-  ogImage: store.SEO?.socialImage?.url || "https://markketplace.nyc3.digitaloceanspaces.com/uploads/3852868ed9aad1e45e4ee4992fe43177.png",
+  desc: StoreData?.SEO?.metaDescription || import.meta.env.STORE_DESCRIPTION || "markketplace store for creators ",
+  title: StoreData?.title || import.meta.env.STORE_TITLE || "Markket",
+  ogImage: StoreData?.SEO?.socialImage?.url || import.meta.env.STORE_OG_IMAGE || "https://markketplace.nyc3.digitaloceanspaces.com/uploads/3852868ed9aad1e45e4ee4992fe43177.png",
   lightAndDarkMode: true,
   postPerIndex: 3,
   postPerPage: 8,

src/content/config.ts

@@ -16,7 +16,7 @@ const stores = defineCollection({
   loader: strapiLoader({
     contentType: "store",
     filter: `filters[active]=true`,
-    populate: 'SEO.socialImage,Logo,URLS'
+    populate: 'SEO.socialImage,Logo,URLS,Favicon'
   }),
 });
 

src/env.d.ts

@@ -2,4 +2,17 @@
 /// <reference types="astro/client" />
 export interface ImportMetaEnv {
   readonly STRAPI_URL: string;
+  readonly STORE_SLUG: string;
+  readonly POSTHOG_ID: string;
+  readonly BASE_URL: string;
+  readonly COLOR_PRIMARY: string;
+  readonly COLOR_ACCENT: string;
+  readonly STORE_AUTHOR: string;
+  readonly STORE_DESCRIPTION: string;
+  readonly STORE_TITLE: string;
+  readonly STORE_OG_IMAGE: string;
+}
+
+export interface ImportMeta {
+  readonly env: ImportMetaEnv;
 }

src/interfaces/Store.ts

@@ -8,6 +8,9 @@ export default interface Store {
   slug: string;
   products: { data: [] };
   URLS: { Label: string, URL: string, }[];
+  Favicon: {
+    id: string, url: string,
+  };
   SEO: {
     metaTitle: string,
     metaDescription: string,

src/layouts/Layout.astro

@@ -83,7 +83,7 @@ let href = new URL(Astro.url.pathname, Astro.site);
     <link
       rel="icon"
       type="image/png"
-      href={`${store?.Favicon || "/favicon.png"}`}
+      href={`${store?.Favicon?.url || "/favicon.png"}`}
     />
     <link rel="canonical" href={canonicalURL} />
     <meta name="generator" content={Astro.generator} />
@@ -192,6 +192,17 @@ let href = new URL(Astro.url.pathname, Astro.site);
     <ViewTransitions />
 
     <Posthog />
+    <style
+      define:vars={{
+        primary: markketplace?.colors?.primary,
+        accent: markketplace?.colors?.accent || "#c7009c",
+      }}
+    >
+      :root {
+        --color-primary: var(--primary);
+        --color-accent: var(--accent);
+      }
+    </style>
     <script is:inline src="/toggle-theme.js"></script>
   </head>
   <body>

src/styles/base.css

@@ -175,6 +175,9 @@ button.brand-yellow {
   border-color: #fbda0d !important;
 }
 
+nav li a {
+  color: var(--color-accent);
+}
 button.brand-yellow:hover {
   color: #0157ad !important;
   background-color: white;