feat(site): support PUBLIC_API_BASE_URL for Vercel develop previews

Lets a preview build serve develop's UI while reading main's live
public dump instead of regenerating its own — no code needed beyond
setting the env var on the preview deployment.

Author: Seungpyo1007

site/astro.config.mjs

@@ -4,5 +4,6 @@ import { defineConfig } from 'astro/config';
 // the built site in CI, so internal links use import.meta.env.BASE_URL.
 export default defineConfig({
   site: 'https://gettechapi.github.io',
-  base: '/TechAPI',
+  // Vercel previews serve from the domain root, not the GitHub Pages project path.
+  base: process.env.VERCEL ? '/' : '/TechAPI',
 });

site/src/pages/docs.astro

@@ -1,5 +1,5 @@
 ---
-const raw = import.meta.env.BASE_URL;
+const raw = import.meta.env.PUBLIC_API_BASE_URL || import.meta.env.BASE_URL;
 const base = raw.endsWith("/") ? raw : raw + "/"; // ensure trailing slash
 const openapiUrl = `${base}openapi.json`;
 ---

site/src/pages/index.astro

@@ -3,24 +3,28 @@ import "../styles/techapi.css";
 
 const raw = import.meta.env.BASE_URL;
 const base = raw.endsWith("/") ? raw : raw + "/";
+// Data links only: PUBLIC_API_BASE_URL (e.g. a Vercel preview reading main's live data)
+// takes over just these, while site nav/assets below keep using `base`.
+const apiRaw = import.meta.env.PUBLIC_API_BASE_URL || raw;
+const apiBase = apiRaw.endsWith("/") ? apiRaw : apiRaw + "/";
 const ghUrl = "https://github.com/GetTechAPI/TechAPI";
 const engineUrl = "https://github.com/GetTechAPI/TechEngine";
 
 const endpoints = [
-  { label: "/v1/smartphones", desc: "List all phones", href: `${base}v1/smartphones/index.json` },
-  { label: "/v1/smartphones/{slug}", desc: "Phone detail + scores", href: `${base}v1/smartphones/galaxy-s26-ultra/index.json` },
-  { label: "/v1/smartphones/{slug}/score", desc: "Computed scores", href: `${base}v1/smartphones/galaxy-s26-ultra/score/index.json` },
-  { label: "/v1/tablets", desc: "List all tablets", href: `${base}v1/tablets/index.json` },
-  { label: "/v1/laptops", desc: "List all laptops", href: `${base}v1/laptops/index.json` },
-  { label: "/v1/monitors", desc: "List all monitors", href: `${base}v1/monitors/index.json` },
-  { label: "/v1/watches", desc: "List all watches", href: `${base}v1/watches/index.json` },
-  { label: "/v1/pdas", desc: "List all PDAs", href: `${base}v1/pdas/index.json` },
-  { label: "/v1/socs/{slug}", desc: "System-on-chip detail", href: `${base}v1/socs/snapdragon-8-elite-gen-5/index.json` },
-  { label: "/v1/gpus/{slug}", desc: "Discrete GPU detail", href: `${base}v1/gpus/geforce-rtx-5090/index.json` },
-  { label: "/v1/cpus/{slug}", desc: "Desktop / laptop CPU", href: `${base}v1/cpus/core-i9-14900k/index.json` },
-  { label: "/v1/software", desc: "List all software", href: `${base}v1/software/index.json` },
-  { label: "/v1/websites", desc: "List all websites", href: `${base}v1/websites/index.json` },
-  { label: "/v1/brands", desc: "All brands", href: `${base}v1/brands/index.json` },
+  { label: "/v1/smartphones", desc: "List all phones", href: `${apiBase}v1/smartphones/index.json` },
+  { label: "/v1/smartphones/{slug}", desc: "Phone detail + scores", href: `${apiBase}v1/smartphones/galaxy-s26-ultra/index.json` },
+  { label: "/v1/smartphones/{slug}/score", desc: "Computed scores", href: `${apiBase}v1/smartphones/galaxy-s26-ultra/score/index.json` },
+  { label: "/v1/tablets", desc: "List all tablets", href: `${apiBase}v1/tablets/index.json` },
+  { label: "/v1/laptops", desc: "List all laptops", href: `${apiBase}v1/laptops/index.json` },
+  { label: "/v1/monitors", desc: "List all monitors", href: `${apiBase}v1/monitors/index.json` },
+  { label: "/v1/watches", desc: "List all watches", href: `${apiBase}v1/watches/index.json` },
+  { label: "/v1/pdas", desc: "List all PDAs", href: `${apiBase}v1/pdas/index.json` },
+  { label: "/v1/socs/{slug}", desc: "System-on-chip detail", href: `${apiBase}v1/socs/snapdragon-8-elite-gen-5/index.json` },
+  { label: "/v1/gpus/{slug}", desc: "Discrete GPU detail", href: `${apiBase}v1/gpus/geforce-rtx-5090/index.json` },
+  { label: "/v1/cpus/{slug}", desc: "Desktop / laptop CPU", href: `${apiBase}v1/cpus/core-i9-14900k/index.json` },
+  { label: "/v1/software", desc: "List all software", href: `${apiBase}v1/software/index.json` },
+  { label: "/v1/websites", desc: "List all websites", href: `${apiBase}v1/websites/index.json` },
+  { label: "/v1/brands", desc: "All brands", href: `${apiBase}v1/brands/index.json` },
 ];
 ---
 

site/src/scripts/techapi.js

@@ -1,8 +1,11 @@
 // TechAPI — homepage interactions (Astro client script)
-// Real static-JSON fetch against import.meta.env.BASE_URL (static JSON dump).
-const raw = import.meta.env.BASE_URL;
+// Real static-JSON fetch against import.meta.env.BASE_URL (static JSON dump),
+// or PUBLIC_API_BASE_URL when set (e.g. a Vercel preview reading main's live data).
+const raw = import.meta.env.PUBLIC_API_BASE_URL || import.meta.env.BASE_URL;
 const base = raw.endsWith("/") ? raw : raw + "/";
-const absUrl = (path) => new URL(path.replace(/^\//, ""), location.origin + base).href;
+// base may be relative ("/TechAPI/") or absolute (PUBLIC_API_BASE_URL) — resolve against origin either way.
+const baseUrl = new URL(base, location.origin);
+const absUrl = (path) => new URL(path.replace(/^\//, ""), baseUrl).href;
 const esc = (s) => String(s)
   .replace(/&/g, "&")
   .replace(/</g, "&lt;")