Incorporate assets system and bump to react 19 and next 15

.tool-versions

@@ -1 +1 @@
-bun 1.1.18
+bun 1.1.45

next/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

next/package.json

@@ -3,17 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "assets": "node src/assets/assets-index-gen.mjs",
     "dev": "bunx next dev",
     "build": "bunx next build",
     "start": "bunx next start"
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
     "@algolia/autocomplete-core": "^1.17.2",
-    "@headlessui/react": "^2.1.2",
+    "@headlessui/react": "^2.2.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.4",
+    "@next/mdx": "^15.0.4",
     "@sindresorhus/slugify": "^2.1.1",
     "@tailwindcss/typography": "^0.5.13",
     "acorn": "^8.12.1",
@@ -22,14 +23,14 @@
     "fast-glob": "^3.2.12",
     "flexsearch": "^0.7.43",
     "focus-visible": "^5.2.0",
-    "framer-motion": "^11.2.13",
+    "framer-motion": "^12.0.0-alpha.2",
     "mdast-util-to-string": "^4.0.0",
     "mdx-annotations": "^0.1.4",
-    "next": "^14.2.4",
+    "next": "^15.0.4",
     "postcss-focus-visible": "^9.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-highlight-words": "^0.20.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-highlight-words": "^0.21.0",
     "recma-nextjs-static-props": "^2.0.1",
     "rehype-mdx-title": "^3.1.0",
     "remark": "^15.0.1",
@@ -43,8 +44,9 @@
     "zustand": "^4.5.4"
   },
   "devDependencies": {
+    "@types/node": "22.10.7",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "typescript": "5.5.3"
+    "typescript": "^5.7.2"
   }
 }

next/src/assets-index-gen.mjs

@@ -0,0 +1,69 @@
+import fs from 'fs';
+import path from 'path';
+import sharp from 'sharp';
+
+function getAllFiles(dirPath, arrayOfFiles) {
+  const files = fs.readdirSync(dirPath);
+
+  arrayOfFiles = arrayOfFiles || [];
+
+  files.forEach(function (file) {
+    if (fs.statSync(dirPath + "/" + file).isDirectory()) {
+      arrayOfFiles = getAllFiles(dirPath + "/" + file, arrayOfFiles);
+    } else {
+      arrayOfFiles.push(path.join(dirPath, "/", file));
+    }
+  });
+
+  return arrayOfFiles;
+}
+
+const publicDir = path.join(process.cwd(), 'public');
+const allAssets = getAllFiles(publicDir);
+const allAssetEntries = allAssets.reduce((acc, file) => {
+  const src = path.relative(publicDir, file).replaceAll('\\', '/');
+  acc[src] = {
+    ext: path.extname(file).toLowerCase().slice(1)
+  };
+  return acc;
+}, {});
+const allAssetEntriesWithImageSizes = await Promise.all(Object.entries(allAssetEntries).map(async ([src, asset]) => {
+  if (asset.ext === 'png') {
+    try {
+      const fullPath = path.join(publicDir, src);
+      const metadata = await sharp(fullPath).metadata();
+      return [src, {
+        ...asset,
+        width: metadata.width,
+        height: metadata.height
+      }];
+    } catch (error) {
+      console.error(`Error processing ${src}:`, error);
+      return [src, asset];
+    }
+  }
+  return [src, asset];
+}));
+const allAssetEntriesWithImageSizesMap = Object.fromEntries(allAssetEntriesWithImageSizes);
+
+function sortKeys(obj) {
+  if (typeof obj !== 'object' || obj === null) return obj;
+
+  if (Array.isArray(obj)) {
+    return obj.map(sortKeys);
+  }
+
+  return Object.keys(obj).sort().reduce((sorted, key) => {
+    sorted[key] = sortKeys(obj[key]);
+    return sorted;
+  }, {});
+}
+
+fs.writeFileSync(
+  path.join(process.cwd(), 'src/assets', 'assets-index.json'),
+  JSON.stringify(sortKeys({
+    assets: allAssetEntriesWithImageSizesMap
+  }), null, 2)
+);
+
+console.log('Valid assets list generated successfully.');