Update components to use index.json

Index now delivers all data from the individual components to prevent constant network look ups.
This is fine since we're building a static site, but in a real deployment we should probably use an API for this.

Author: Jacobdeanr

.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+public/data/index.json

app/page.tsx

@@ -1,25 +1,11 @@
-import fs   from 'fs';
+import fs from 'fs';
 import path from 'path';
 import SkyboxGrid from './ui/skyboxgrid';
-import Header from './ui/header';
-  
-function getSkyboxSlugs(): string[] {
-  const skyboxesDir = path.join(process.cwd(), 'public', 'skyboxes');
 
-  // read everything in /public/skyboxes and keep only directories
-  return fs
-    .readdirSync(skyboxesDir)
-    .filter((name) =>
-      fs.statSync(path.join(skyboxesDir, name)).isDirectory()
-    );
-}
+const allPath = path.join(process.cwd(), 'public', 'data', 'index.json');
+const allData = JSON.parse(fs.readFileSync(allPath, 'utf8')) as Record<string, any>;
+const slugs   = Object.keys(allData);
 
 export default function Home() {
-  const slugs = getSkyboxSlugs();
-
-  return (
-    <>
-      <SkyboxGrid slugs={slugs} />
-    </>
-  );
-}
+  return <SkyboxGrid slugs={slugs} meta={allData} />;
+}

app/ui/skyboxcard.tsx

@@ -6,7 +6,13 @@ import { useState } from 'react';
 
 type Props = { slug: string };
 
-export default function SkyboxCard({ slug }: Props) {
+export default function SkyboxCard({
+  slug,
+  meta,
+}: {
+  slug: string;
+  meta: any;
+}) {
   const [open, setOpen] = useState(false);
   const imgBase = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
 

app/ui/skyboxgrid.tsx

@@ -4,31 +4,33 @@ import { useMemo, useState } from 'react';
 import SkyboxCard from './skyboxcard';
 import Header from './header';
 
-export default function SkyboxGrid({ slugs }: { slugs: string[] }) {
-  const [options, setOptions] = useState<{ sort: string; query: string }>({
+export default function SkyboxGrid({
+  slugs,
+  meta,
+}: {
+  slugs: string[];
+  meta: Record<string, any>;
+}) {
+  const [filter, setFilter] = useState<{ sort: string; query: string }>({
     sort: 'alpha',
     query: '',
   });
 
   const visible = useMemo(() => {
     let list = [...slugs];
-
-    if (options.query) {
-      const q = options.query.toLowerCase();
-      list = list.filter((s) => s.toLowerCase().includes(q));
+    if (filter.query) {
+      const q = filter.query.toLowerCase();
+      list = list.filter((s) => s.includes(q));
     }
+    if (filter.sort === 'date') list.sort().reverse();
+    else list.sort();
 
-    if (options.sort === 'date') {
-      list.sort().reverse(); // slug folders are ISO dates? adjust as needed
-    } else {
-      list.sort();
-    }
     return list;
-  }, [slugs, options]);
+  }, [slugs, filter]);
 
   return (
     <>
-      <Header onChange={setOptions} />
+      <Header onChange={setFilter} />
 
       <section
         className="
@@ -41,7 +43,7 @@ export default function SkyboxGrid({ slugs }: { slugs: string[] }) {
         "
       >
         {visible.map((slug) => (
-          <SkyboxCard key={slug} slug={slug} />
+          <SkyboxCard key={slug} slug={slug} meta={meta[slug]} />
         ))}
       </section>
     </>

scripts/generate-index.js

@@ -1,11 +1,18 @@
 const fs = require('fs');
 const path = require('path');
 
-const dataDir = path.join(__dirname, '..', 'public', 'data');
-const files = fs.readdirSync(dataDir).filter(file => file.endsWith('.json'));
-const slugs = files.map(fileName => path.basename(fileName, '.json'));
+const dataDir   = path.join(__dirname, '..', 'public', 'data');
+const files     = fs
+  .readdirSync(dataDir)
+  .filter((f) => f.endsWith('.json') && f !== 'index.json');
 
-const outputPath = path.join(dataDir, 'index.json');
-fs.writeFileSync(outputPath, JSON.stringify(slugs, null, 2));
+const all = {};
 
-console.log(`Generated index.json with ${slugs.length} entries at ${outputPath}`);
+files.forEach((fname) => {
+  const slug  = fname.replace(/\.json$/, '');
+  const data  = JSON.parse(fs.readFileSync(path.join(dataDir, fname), 'utf8'));
+  all[slug]   = data;
+});
+
+const out = path.join(dataDir, 'index.json');
+fs.writeFileSync(out, JSON.stringify(all, null, 2));