Merge pull request #7 from spencer-scw/github-pages

Pre-fetch popular palettes at build time

Author: spencer-scw

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+public/palettes
 dist-ssr
 *.local
 

package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "fetch-palettes": "node scripts/fetch-palettes.js",
+    "build": "npm run fetch-palettes && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },

scripts/fetch-palettes.js

@@ -0,0 +1,48 @@
+import { readFileSync, writeFileSync, mkdirSync } from 'fs';
+
+const PALETTES_LIST = JSON.parse(readFileSync('public/lospec-palettes.json', 'utf-8'));
+const OUT_DIR = 'public/palettes';
+const TIMEOUT_MS = 10000;
+
+function parseHexFile(text) {
+  return text
+    .split('\n')
+    .map(line => line.trim())
+    .filter(line => line && !line.startsWith(';'))
+    .map(hex => hex.startsWith('#') ? hex : `#${hex}`);
+}
+
+async function fetchPalette(name) {
+  const url = `https://lospec.com/palette-list/${name}.hex`;
+  const response = await fetch(url, { signal: AbortSignal.timeout(TIMEOUT_MS) });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  const text = await response.text();
+  return parseHexFile(text);
+}
+
+async function main() {
+  mkdirSync(OUT_DIR, { recursive: true });
+
+  console.log(`Fetching ${PALETTES_LIST.length} palettes from Lospec...`);
+
+  const entries = await Promise.all(
+    PALETTES_LIST.map(async (name) => {
+      try {
+        const colors = await fetchPalette(name);
+        console.log(`  ${name}: ${colors.length} colors`);
+        return [name, colors];
+      } catch (err) {
+        console.error(`  ${name}: FAILED - ${err.message}`);
+        return null;
+      }
+    })
+  );
+
+  const results = Object.fromEntries(entries.filter(Boolean));
+  writeFileSync(`${OUT_DIR}/bundled.json`, JSON.stringify(results, null, 2));
+
+  const failed = PALETTES_LIST.length - Object.keys(results).length;
+  console.log(`\nBundled ${Object.keys(results).length} palettes` + (failed ? ` (${failed} failed)` : ''));
+}
+
+main();

src/utils/palettes.js

@@ -1,10 +1,30 @@
+// Cache for bundled palettes (loaded once)
+let bundledPalettes = null;
+
+const loadBundledPalettes = async () => {
+  if (bundledPalettes) return bundledPalettes;
+  try {
+    const response = await fetch(import.meta.env.BASE_URL + 'palettes/bundled.json');
+    if (!response.ok) throw new Error('Bundled palettes not found');
+    bundledPalettes = await response.json();
+    return bundledPalettes;
+  } catch {
+    bundledPalettes = {};
+    return bundledPalettes;
+  }
+};
+
 export const fetchLospecPalette = async (name) => {
   try {
-    // Try local proxy first if available, otherwise fallback to corsproxy
-    const baseUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' 
-      ? '/lospec-api' 
+    // Check bundled palettes first
+    const bundled = await loadBundledPalettes();
+    if (bundled[name]) return bundled[name];
+
+    // Fall back to fetching from Lospec
+    const baseUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+      ? '/lospec-api'
       : 'https://corsproxy.io/?https://lospec.com';
-    
+
     const response = await fetch(`${baseUrl}/palette-list/${name}.hex`);
     if (!response.ok) throw new Error('Palette not found');
     const text = await response.text();