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.
This commit is contained in:
plebeius
2025-11-01 19:39:22 +01:00
parent 967584294c
commit f26da13c77
6 changed files with 83 additions and 27 deletions
+2 -9
View File
@@ -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='' />;
};