fetch logos from notion

Author: osamajandali

.gitignore

@@ -22,3 +22,5 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+public/assets/logos/

package-lock.json

@@ -3,8 +3,8 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
+    "dev": "node src/lib/fetch-logos.mjs && astro dev",
+    "build": "node src/lib/fetch-logos.mjs && astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
@@ -71,6 +71,7 @@
   },
   "devDependencies": {
     "@astrojs/sitemap": "^3.6.0",
+    "dotenv": "^17.2.3",
     "prettier-plugin-astro": "^0.14.1",
     "tw-animate-css": "^1.3.8"
   }

package.json

@@ -1,26 +1,11 @@
 ---
-import { Client } from '@notionhq/client';
-import {
-  getSecret
-} from 'astro:env/server'
-const databaseId = getSecret('NOTION_MEMBERS_DATABASE_ID');
-const apiKey =  getSecret('NOTION_TOKEN');
-console.log(databaseId, apiKey);
-if (databaseId && apiKey) {
-  const notion = new Client({
-  auth: apiKey,
-})
-  try {
-    const data = await notion.dataSources.query({
-      data_source_id: databaseId,
-    });
-    console.log("[Notion] Members DB query result:", data);
-  } catch (error) {
-    console.error("[Notion] Query failed", error);
-  }
-} else {
-  console.warn("[Notion] Missing NOTION_MEMBERS_DATABASE_ID or API key env var");
+interface Logo {
+  name: string;
+  logo: string;
+  website: string;
 }
+
+const logos: Logo[] = (await import("../data/logos.json")).default;
 ---
 
 <section class="pb-12 md:pb-16 lg:pb-20">
@@ -37,25 +22,43 @@ if (databaseId && apiKey) {
         class="absolute top-0 right-0 bottom-0 z-10 w-20 bg-gradient-to-l from-accent-lightest-2 to-transparent"
       >
       </div>
-      <div class="flex shrink-0 animate-marquee items-center">
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo1.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo2.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo3.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo4.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo5.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo6.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo7.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo8.svg" />
+      <div class="flex shrink-0 animate-marquee items-center gap-12">
+        {
+          logos.map((logo) => (
+            <a
+              href={`//${logo.website.replace(/^https?:\/\//, '').replace(/^www\./, '')}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="mx-6 flex h-12 w-32 shrink-0 items-center justify-center md:h-14 md:w-40"
+            >
+              <img
+                class="max-h-full max-w-full object-contain"
+                src={logo.logo}
+                alt={logo.name}
+                loading="lazy"
+              />
+            </a>
+          ))
+        }
       </div>
-      <div class="flex shrink-0 animate-marquee items-center">
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo1.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo2.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo3.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo4.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo5.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo6.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo7.svg" />
-        <img class="mx-6 max-h-12 shrink-0 md:max-h-14" src="/assets/logo8.svg" />
+      <div class="flex shrink-0 animate-marquee items-center gap-12">
+        {
+          logos.map((logo) => (
+            <a
+              href={`//${logo.website.replace(/^https?:\/\//, '').replace(/^www\./, '')}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="mx-6 flex h-12 w-32 shrink-0 items-center justify-center md:h-14 md:w-40"
+            >
+              <img
+                class="max-h-full max-w-full object-contain"
+                src={logo.logo}
+                alt={logo.name}
+                loading="lazy"
+              />
+            </a>
+          ))
+        }
       </div>
     </div>
   </div>