Make img previews 9 wide not 6, and improve GHPages embedding static previews

Author: EvModder

website/index.html

@@ -38,15 +38,18 @@
           var query = pathname.slice(q);
           return (pathOnly.endsWith("/") ? pathOnly : pathOnly + "/") + query;
         };
+        var stripIndexHtml = function(pathname) {
+          return pathname.replace(/\/index\.html\/?$/i, "/");
+        };
 
         if (configuredBase !== "/" && l.pathname === baseNoSlash) {
           l.replace(base + l.search + l.hash);
           return;
         }
         if (hasAppBase) {
-          var collapsed = collapseTrailingSlashes(l.pathname);
-          if (collapsed !== l.pathname) {
-            l.replace(collapsed + l.search + l.hash);
+          var canonicalPath = stripIndexHtml(collapseTrailingSlashes(l.pathname));
+          if (canonicalPath !== l.pathname) {
+            l.replace(canonicalPath + l.search + l.hash);
             return;
           }
         }

website/package-lock.json

@@ -5,8 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "build:dev": "vite build --mode development",
+    "build": "vite build && node scripts/generate-route-indexes.mjs",
+    "build:dev": "vite build --mode development && node scripts/generate-route-indexes.mjs",
     "sync:map-colors": "node scripts/sync-map-colors.mjs",
     "preview": "vite preview"
   },

website/package.json

@@ -0,0 +1,24 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import process from "node:process";
+
+const cwd = process.cwd();
+const distDir = path.resolve(cwd, "dist");
+const srcToolPages = path.resolve(cwd, "src/lib/toolPages.ts");
+const indexPath = path.join(distDir, "index.html");
+
+const html = await fs.readFile(indexPath, "utf8");
+const toolPagesSource = await fs.readFile(srcToolPages, "utf8");
+const routeMatches = [...toolPagesSource.matchAll(/path:\s*"([^"]+)"/g)];
+const routes = [...new Set(routeMatches.map(([, route]) => route).filter(route => route && route !== "/"))];
+if (!routes.length) throw new Error("No tool routes found while generating route index pages.");
+
+for (const route of routes) {
+  const rel = route.replace(/^\/+|\/+$/g, "");
+  if (!rel) continue;
+  const routeDir = path.join(distDir, rel);
+  await fs.mkdir(routeDir, { recursive: true });
+  await fs.writeFile(path.join(routeDir, "index.html"), html);
+}
+
+console.log(`Generated ${routes.length} route index page(s).`);

website/scripts/generate-route-indexes.mjs

@@ -7,7 +7,9 @@ import DatToPng from "@/pages/DatToPng";
 import NbtToPng from "@/pages/NbtToPng";
 import CacheToPng from "@/pages/CacheToPng";
 import MapHasher from "@/pages/MapHasher";
-import { TOOL_PAGES, type ToolPageId } from "@/lib/toolPages";
+import { TOOL_PAGES } from "@/lib/toolPages";
+
+type ToolPageId = (typeof TOOL_PAGES)[number]["id"];
 
 const routeElements: Record<ToolPageId, ReactElement> = {
   pngToDat: <PngToDat />,

website/src/App.tsx

@@ -11,7 +11,7 @@ export default function Layout() {
   return (
     <div className="min-h-screen">
       <nav className="border-b border-border bg-background/80 backdrop-blur sticky top-0 z-10">
-        <div className="mx-auto max-w-6xl flex items-center justify-between px-4 h-12">
+        <div className="flex h-12 w-full items-center justify-between px-4">
           <div className="flex items-center gap-4 overflow-x-auto">
             <a href={import.meta.env.BASE_URL} className="shrink-0 hover:opacity-80 transition-opacity" title="EvMod Tools">
               <img src={siteIcon} alt="EvMod Tools" className="w-7 h-7" />
@@ -50,7 +50,7 @@ export default function Layout() {
           </button>
         </div>
       </nav>
-      <main className="mx-auto max-w-6xl p-6">
+      <main className="w-full p-6">
         <Outlet />
       </main>
     </div>

website/src/components/Layout.tsx

@@ -20,7 +20,7 @@ export default function MapImageGallery({ images, zipName, summaryLabel }: MapIm
           </button>
         )}
       </div>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6">
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-9">
         {images.map(img => (
           <button key={img.url} onClick={() => downloadUrl(img.url, img.name)} className="group overflow-hidden rounded-lg border border-border transition-colors hover:border-accent" title={`Download ${img.name}`}>
             <img src={img.url} alt={img.name} className="aspect-square w-full object-contain bg-muted" style={{ imageRendering: "pixelated" }} />

website/src/components/MapImageGallery.tsx

@@ -7,9 +7,9 @@
 import { dashedUuidFromLongs, parseDashedUuid, type DashedUuid } from "@/lib/uuid";
 import type { LockedMapData, MapData } from "@/lib/map";
 
-export type MapStateData = LockedMapData;
+type MapStateData = LockedMapData;
 
-export type CacheExtractResult =
+type CacheExtractResult =
   | { kind: "id"; maps: [id: number, map: MapStateData][] }
   | { kind: "name"; maps: [name: string, map: MapStateData][] }
   | { kind: "slot"; containers: [uuid: DashedUuid, maps: [slot: number, map: MapStateData][]][] };

website/src/lib/javaDeserialize.ts

@@ -4,7 +4,6 @@
  */
 import pako from "pako";
 import type { LockedMapData, MapData } from "@/lib/map";
-export type DatFileData = LockedMapData;
 
 const inflateIfNeeded = (buffer: ArrayBuffer): Uint8Array => {
   let data: Uint8Array;
@@ -64,7 +63,7 @@ export function encodeMapDataToDat(mapData: MapData, locked = true): Blob {
   return new Blob([pako.gzip(new Uint8Array(out))], { type: "application/octet-stream" });
 }
 
-export function parseMapDataFromDat(buffer: ArrayBuffer): DatFileData {
+export function parseMapDataFromDat(buffer: ArrayBuffer): LockedMapData {
   const data = inflateIfNeeded(buffer);
 
   const reader = new NbtReader(data);

website/src/lib/mapDat.ts

@@ -88,7 +88,7 @@ function encodeMapDataToPng({ colors }: MapData): Blob {
   return new Blob([png], { type: "image/png" });
 }
 
-export interface ParsedMap extends MapData {
+interface ParsedMap extends MapData {
   label?: string;
 }