Generate project.json in /dist folder on build

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/public/projects.json

src/components/ProjectListItem.tsx

@@ -43,9 +43,9 @@ const ProjectListItem: React.FC<ProjectListItemProps> = ({
   const isMobileScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
-    <Grid container xs={12} sm={6} md={4}>
+    <Grid item xs={12} sm={6} md={4}>
       <Box
-        sx={{ display: 'flex', marginBottom: isMobileScreen ? '20px' : '0' }}
+        sx={{ display: 'flex', marginBottom: isMobileScreen ? '20px' : '0', height: '100%' }}
       >
         <Paper
           elevation={3}

src/generate-projects-json.mjs

@@ -1,47 +1,54 @@
-import { readFileSync, writeFileSync } from 'fs';
-import { globSync } from 'glob';
-import { load } from 'js-yaml';
-import { getCorrectLanguageName } from './languageUtils.mjs';
-import { sanitizeUrl } from './sanitizeUrl.mjs';
+// Usage: node generate-project-json.mjs [outputPath]
+// Defaults to "./dist/projects.json"
 
-const yamls = globSync('./projects/*/*.yaml').sort();
+import { readFileSync, writeFileSync, mkdirSync } from "fs";
+import { globSync } from "glob";
+import { load } from "js-yaml";
+import { getCorrectLanguageName } from "./languageUtils.mjs";
+import { sanitizeUrl } from "./sanitizeUrl.mjs";
+
+const yamls = globSync("./projects/*/*.yaml").sort();
 const allScreenshots = globSync(
-  './projects/*/screenshots/*.{png,jpg,jpeg}',
+  "./projects/*/screenshots/*.{png,jpg,jpeg}"
 ).sort();
 
 /** @type {import('./types').Project[]} */
 const projects = yamls.map((path) => {
-  const yaml = readFileSync(path, 'utf8');
+  const yaml = readFileSync(path, "utf8");
   const parsedYaml = /** @type {import('./types').Project} */ (load(yaml));
-  const screenshotsPath = path.replace(/\/[^/]*?\.yaml$/, '/screenshots');
+  const screenshotsPath = path.replace(/\/[^/]*?\.yaml$/, "/screenshots");
   parsedYaml.screenshots = allScreenshots
     .filter((screenshotPath) => screenshotPath.startsWith(screenshotsPath))
-    .map((screenshotPath) => '/' + screenshotPath);
+    .map((screenshotPath) => "/" + screenshotPath);
   parsedYaml.languages = parsedYaml.languages.map(getCorrectLanguageName);
-  parsedYaml.license = parsedYaml.license || 'Unspecified';
-  const folderName = path.split('/').slice(-2, -1)[0];
+  parsedYaml.license = parsedYaml.license || "Unspecified";
+  const folderName = path.split("/").slice(-2, -1)[0];
   parsedYaml.slug = folderName;
 
   parsedYaml.codeUrl = sanitizeUrl(parsedYaml.codeUrl);
   parsedYaml.demoUrl = parsedYaml.demoUrl
     ? sanitizeUrl(parsedYaml.demoUrl)
     : null;
+
   if (parsedYaml.authors) {
     parsedYaml.authors = parsedYaml.authors.map((t) => ({
       [Object.keys(t)[0]]: sanitizeUrl(Object.values(t)[0]),
     }));
   }
+
   if (parsedYaml.tutorials) {
     parsedYaml.tutorials = parsedYaml.tutorials.filter((t) =>
-      sanitizeUrl(Object.values(t)[0]),
+      sanitizeUrl(Object.values(t)[0])
     );
   }
 
   return parsedYaml;
 });
 
-writeFileSync(
-  './public/projects.json',
-  JSON.stringify(projects, null, 4),
-  'utf8',
-);
+const outputPath = process.argv[2] || "./dist/projects.json";
+const outputDir = outputPath.split("/").slice(0, -1).join("/");
+if (outputDir) {
+  mkdirSync(outputDir, { recursive: true });
+}
+
+writeFileSync(outputPath, JSON.stringify(projects, null, 4), "utf8");