refactor: implement scalable asset manifest system for dynamic images

Created build-time script to generate TypeScript manifest from public/assets, avoiding import.meta.glob limitations. Images stay in public/ for scalability (supports hundreds), while components get type-safe auto-discovery. Manifest auto-regenerates before builds.

src/components/board-header/board-header.tsx

@@ -12,17 +12,10 @@ import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
 import { shouldShowSnow } from '../../lib/snow';
 import Tooltip from '../tooltip';
 import _ from 'lodash';
-
-// Dynamically import all banner images at build time
-const bannerModules = import.meta.glob('/public/assets/banners/banner-*.{jpg,jpeg,gif,png}', {
-  eager: true,
-  query: '?url',
-  import: 'default',
-});
-const bannerPaths = Object.values(bannerModules) as string[];
+import { BANNERS } from '../../generated/asset-manifest';
 
 const ImageBanner = () => {
-  const [banner] = useState(() => bannerPaths[Math.floor(Math.random() * bannerPaths.length)]);
+  const [banner] = useState(() => BANNERS[Math.floor(Math.random() * BANNERS.length)]);
 
   return <img src={banner} alt='' />;
 };

src/generated/README.md

@@ -0,0 +1,25 @@
+# Generated Files
+
+This directory contains auto-generated TypeScript files. Do not edit these files manually.
+
+## asset-manifest.ts
+
+Auto-generated manifest of all banner and not-found images from `public/assets/`.
+
+**To regenerate:**
+```bash
+yarn generate:assets
+```
+
+**Auto-regenerated:**
+- Before every build (`yarn build`)
+- Before dev server start (`yarn start`)
+
+**To add new banners:**
+1. Add files to `public/assets/banners/` following the pattern `banner-*.{jpg,jpeg,gif,png}`
+2. Run `yarn generate:assets` (or it will auto-run on next build/start)
+
+**To add new not-found images:**
+1. Add files to `public/assets/not-found/` following the pattern `not-found-*.{jpg,jpeg,gif,png}`
+2. Run `yarn generate:assets` (or it will auto-run on next build/start)
+

src/generated/asset-manifest.ts

@@ -0,0 +1,13 @@
+// Auto-generated file - do not edit manually
+// Run 'node scripts/generate-asset-manifest.js' to regenerate
+// This file is generated from public/assets/ directory
+
+export const BANNERS = [
+  'assets/banners/banner-1.jpg',
+  'assets/banners/banner-2.jpg',
+  'assets/banners/banner-3.gif',
+  'assets/banners/banner-4.gif',
+  'assets/banners/banner-5.png',
+] as const;
+
+export const NOT_FOUND_IMAGES = ['assets/not-found/not-found-1.png'] as const;

src/views/not-found/not-found.tsx

@@ -3,26 +3,10 @@ import { Link, useLocation } from 'react-router-dom';
 import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
 import { HomeLogo } from '../home';
 import styles from './not-found.module.css';
-
-// Dynamically import all not-found images at build time
-const notFoundModules = import.meta.glob('/public/assets/not-found/not-found-*.{jpg,jpeg,gif,png}', {
-  eager: true,
-  query: '?url',
-  import: 'default',
-});
-const notFoundPaths = Object.values(notFoundModules) as string[];
+import { NOT_FOUND_IMAGES } from '../../generated/asset-manifest';
 
 const NotFoundImage = () => {
-  const [imagePath] = useState(() => {
-    if (notFoundPaths.length === 0) {
-      return null;
-    }
-    return notFoundPaths[Math.floor(Math.random() * notFoundPaths.length)];
-  });
-
-  if (!imagePath) {
-    return null;
-  }
+  const [imagePath] = useState(() => NOT_FOUND_IMAGES[Math.floor(Math.random() * NOT_FOUND_IMAGES.length)]);
 
   return <img src={imagePath} alt='' />;
 };