feat: adds auto generate showcases

packages/website/package.json

@@ -10,6 +10,7 @@
     "format": "yarn prettier -w .",
     "lint": "eslint ./src",
     "kitgen": "node ./scripts/generate-kit-pages.js",
+    "showcasegen": "node ./scripts/generate-showcases.js",
     "predev": "yarn kitgen",
     "prebuild": "yarn kitgen"
   },
@@ -33,6 +34,7 @@
     "@heroicons/react": "^1.0.5",
     "autoprefixer": "^10.4.2",
     "clsx": "^1.1.1",
+    "json-loader": "^0.5.7",
     "just-pick": "^4.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/website/scripts/generate-kit-pages.js

@@ -1,98 +1,11 @@
-const path = require('path');
-const fs = require('fs/promises');
-const pick = require('just-pick');
-const rimraf = require('rimraf');
-const { getRepoRootPath, getKitDirs } = require('../../../scripts/kits-utils');
+const { generate } = require('./generate');
 
 const KIT_PAGE_RELATIVE_LAYOUT_PATH = '../../layouts/KitLayout.astro';
 
-function convertToFrontmatter(obj) {
-  return Object.entries(obj)
-    .map(([key, value]) => `${key}: ${obj[key]}`)
-    .join('\n');
-}
-
-function formatMarkdownFile(markdown, frontmatter) {
-  return `---
-# generated by scripts/kitgen at ${new Date().toISOString()}
-# edit KIT_PAGE_RELATIVE_LAYOUT_PATH in scripts/kitgen to change layout
-layout: ${KIT_PAGE_RELATIVE_LAYOUT_PATH}
-${frontmatter}
----
-
-${markdown}`;
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 // SCRIPT MAIN
 ////////////////////////////////////////////////////////////////////////////////
 
 (async () => {
-  const repoPath = getRepoRootPath();
-  const kitPagesPath = path.join(repoPath, 'packages/website/src/pages/kits');
-
-  try {
-    const handle = await fs.opendir(kitPagesPath);
-    console.info('kitgen: deleting existing kit pages');
-    rimraf(`${kitPagesPath}/*.md,${kitPagesPath}/*.mdx`, async (err) => {
-      if (err) {
-        console.error(err);
-      }
-      await handle.close();
-    });
-  } catch (err) {
-    if (err && err.code === 'ENOENT') {
-      console.info('kitgen: creating kit pages directory');
-      await fs.mkdir(kitPagesPath);
-    }
-  }
-
-  const kitDirs = await getKitDirs();
-
-  console.info('kitgen: generating kit pages');
-  for (const dir of kitDirs) {
-    const kitPath = path.join(repoPath, 'starters', dir);
-
-    let infoFile = 'package.json';
-    if (dir.startsWith('deno-')) {
-      // For Deno, we don't have package.json
-      infoFile = 'deno.json';
-    }
-
-    try {
-      const readme = await fs.readFile(
-        path.join(kitPath, 'README.md'),
-        'utf-8'
-      );
-      const json = await fs.readFile(path.join(kitPath, infoFile), 'utf-8');
-      const data = JSON.parse(json);
-
-      const kitData = {
-        ...pick(data, [
-          'name',
-          'version',
-          'description',
-          'keywords',
-          'hasShowcase',
-        ]),
-        readmePath: path.join(kitPath, 'README.md'),
-        starterPath: `/starters/${dir}`,
-      };
-
-      const frontmatter = convertToFrontmatter(kitData);
-      const formattedMarkdown = formatMarkdownFile(readme, frontmatter);
-
-      const kitPagePath = path.join(
-        repoPath,
-        'packages/website/src/pages/kits',
-        `${data.name}.mdx`
-      );
-
-      await fs.writeFile(kitPagePath, formattedMarkdown, 'utf-8');
-    } catch (err) {
-      console.error(
-        `KITGEN: failed to write kit page for ${dir}: ${err.message}`
-      );
-    }
-  }
+  await generate(true, 'packages/website/src/pages/kits');
 })();

packages/website/scripts/generate-showcases.js

@@ -0,0 +1,8 @@
+const { generate } = require('./generate');
+///////////////////////////////////////////////////////////////////////////////
+// SCRIPT MAIN
+////////////////////////////////////////////////////////////////////////////////
+
+(async () => {
+  await generate(false, 'packages/website/src/showcases');
+})();

packages/website/scripts/generate.js

@@ -0,0 +1,137 @@
+const path = require('path');
+const fs = require('fs/promises');
+const pick = require('just-pick');
+const rimraf = require('rimraf');
+const { getRepoRootPath, getKitDirs } = require('../../../scripts/kits-utils');
+
+const KIT_PAGE_RELATIVE_LAYOUT_PATH = '../../layouts/KitLayout.astro';
+
+function convertToFrontmatter(obj) {
+  return Object.entries(obj)
+    .map(([key, value]) => `${key}: ${obj[key]}`)
+    .join('\n');
+}
+
+function formatMarkdownFile(markdown, frontmatter) {
+  return `---
+# generated by scripts/kitgen at ${new Date().toISOString()}
+# edit KIT_PAGE_RELATIVE_LAYOUT_PATH in scripts/kitgen to change layout
+layout: ${KIT_PAGE_RELATIVE_LAYOUT_PATH}
+${frontmatter}
+---
+
+${markdown}`;
+}
+
+async function createDeleteFiles(kit, PagesPath) {
+  try {
+    const handle = await fs.opendir(PagesPath);
+    console.info(
+      kit
+        ? 'kitgen: deleting existing kit pages'
+        : 'showcasegen: deleting existing showcase file'
+    );
+    rimraf(
+      kit ? `${PagesPath}/*.md,${PagesPath}/*.mdx` : `${PagesPath}/*`,
+      async (err) => {
+        if (err) {
+          console.error(err);
+        }
+        await handle.close();
+      }
+    );
+  } catch (err) {
+    if (err && err.code === 'ENOENT') {
+      console.info(
+        kit
+          ? 'kitgen: creating kit pages directory'
+          : 'showcasegen: creating showcase file'
+      );
+      await fs.mkdir(PagesPath);
+    }
+  }
+}
+
+async function generate(kit, genPath) {
+  const repoPath = getRepoRootPath();
+  const PagesPath = path.join(repoPath, genPath);
+  await createDeleteFiles(kit, PagesPath);
+
+  const kitDirs = await getKitDirs();
+  const showcases = [];
+  let pickData;
+  let formattedMarkdown;
+  let PagePath;
+
+  console.info(
+    kit ? 'kitgen: generating kit pages' : 'showcasegen: generating showcases'
+  );
+  for (const dir of kitDirs) {
+    const kitPath = path.join(repoPath, 'starters', dir);
+
+    let infoFile = 'package.json';
+    if (dir.startsWith('deno-')) {
+      // For Deno, we don't have package.json
+      infoFile = 'deno.json';
+    }
+
+    try {
+      const readme = await fs.readFile(
+        path.join(kitPath, 'README.md'),
+        'utf-8'
+      );
+      const json = await fs.readFile(path.join(kitPath, infoFile), 'utf-8');
+      const data = JSON.parse(json);
+
+      if (kit) {
+        pickData = {
+          ...pick(data, [
+            'name',
+            'version',
+            'description',
+            'keywords',
+            'hasShowcase',
+          ]),
+          readmePath: path.join(kitPath, 'README.md'),
+          starterPath: `/starters/${dir}`,
+        };
+        const frontmatter = convertToFrontmatter(pickData);
+        formattedMarkdown = formatMarkdownFile(readme, frontmatter);
+        PagePath = path.join(
+          repoPath,
+          'packages/website/src/pages/kits',
+          `${data.name}.mdx`
+        );
+      } else {
+        pickData = {
+          ...pick(data, ['showcase']),
+        };
+        Object.entries(pickData).map(([key, value]) => {
+          value.map((item) => {
+            showcases.push(item);
+          });
+        });
+        PagePath = path.join(
+          repoPath,
+          'packages/website/src/showcases/showcases.json'
+        );
+      }
+
+      await fs.writeFile(
+        PagePath,
+        kit ? formattedMarkdown : JSON.stringify(showcases),
+        'utf-8'
+      );
+    } catch (err) {
+      console.error(
+        kit
+          ? `KITGEN: failed to write kit page for ${dir}: ${err.message}`
+          : `SHOWCASEGEN: failed to write showcase page: ${err.message}`
+      );
+    }
+  }
+}
+
+module.exports = {
+  generate,
+};

packages/website/src/icons/PrismaIcon.tsx

@@ -7,7 +7,8 @@ export function PrismaIcon({ className, size = 48 }: Props) {
       viewBox="0 0 32 32"
       width={size}
       height={size}
-      className={className}>
+      className={className}
+    >
       <path
         d="M25.21,24.21,12.739,27.928a.525.525,0,0,1-.667-.606L16.528,5.811a.43.43,0,0,1,.809-.094l8.249,17.661A.6.6,0,0,1,25.21,24.21Zm2.139-.878L17.8,2.883h0A1.531,1.531,0,0,0,16.491,2a1.513,1.513,0,0,0-1.4.729L4.736,19.648a1.592,1.592,0,0,0,.018,1.7l5.064,7.909a1.628,1.628,0,0,0,1.83.678l14.7-4.383a1.6,1.6,0,0,0,1-2.218Z"
         fill="#0c344b"

packages/website/src/showcases/showcases.json

@@ -0,0 +1,80 @@
+[
+  {
+    "kit": "angular-apollo-tailwind",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/angular-apollo-tailwind",
+    "app": "https://angular-apollo-tailwind.starter.dev/"
+  },
+  {
+    "kit": "angular-ngrx-scss",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/angular-ngrx-scss",
+    "app": "https://angular-ngrx-scss.starter.dev"
+  },
+  {
+    "kit": "cra-rxjs-styled-components",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/cra-rxjs-styled-components",
+    "app": "https://cra-rxjs-styled-components.starter.dev"
+  },
+  {
+    "kit": "expo-zustand-styled-components",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/expo-zustand-styled-components",
+    "app": ""
+  },
+  {
+    "kit": "next-react-query-tailwind",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/next-react-query-tailwind",
+    "app": "https://next-react-query-tailwind.starter.dev"
+  },
+  {
+    "kit": "nuxt2-pinia-tailwind",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/nuxt-pinia-tailwind",
+    "app": "https://nuxt-pinia-tailwind.starter.dev"
+  },
+  {
+    "kit": "qwik-graphql-tailwind",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/qwik-graphql-tailwind",
+    "app": "https://qwik-graphql-tailwind.starter.dev"
+  },
+  {
+    "kit": "remix-gql-tailwind",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/remix-gql-tailwind",
+    "app": ""
+  },
+  {
+    "kit": "solidjs-tailwind",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/solidjs-tailwind",
+    "app": "https://solidjs-tailwind.starter.dev"
+  },
+  {
+    "kit": "solidstart-tanstackquery-tailwind-modules",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/solidstart-tanstackquery-tailwind-modules",
+    "app": "https://solidstart-tanstackquery-tailwind-modules.starter.dev"
+  },
+  {
+    "kit": "svelte-kit-scss",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/svelte-kit-scss",
+    "app": "https://svelte-kit-scss.starter.dev"
+  },
+  {
+    "kit": "svelte-kit-scss",
+    "name": "7 GUIs Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-7guis-showcases",
+    "app": "https://svelte-kit-scss-7guis.starter.dev/"
+  },
+  {
+    "kit": "vue3-apollo-quasar",
+    "name": "Github Showcase",
+    "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/vue3-apollo-quasar",
+    "app": "https://vue3-apollo-quasar.starter.dev"
+  }
+]

starters/angular-apollo-tailwind/package.json

@@ -7,6 +7,14 @@
     "apollo",
     "tailwind"
   ],
+  "showcase": [
+    {
+      "kit": "angular-apollo-tailwind",
+      "name": "Github Showcase",
+      "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/angular-apollo-tailwind",
+      "app": "https://angular-apollo-tailwind.starter.dev/"
+    }
+  ],
   "hasShowcase": true,
   "private": true,
   "engines": {

starters/angular-ngrx-scss/package.json

@@ -7,6 +7,14 @@
     "ngrx",
     "sass"
   ],
+  "showcase": [
+    {
+      "kit": "angular-ngrx-scss",
+      "name": "Github Showcase",
+      "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/angular-ngrx-scss",
+      "app": "https://angular-ngrx-scss.starter.dev"
+    }
+  ],
   "hasShowcase": false,
   "private": true,
   "engines": {

starters/cra-rxjs-styled-components/package.json

@@ -7,6 +7,14 @@
     "rxjs",
     "styled-components"
   ],
+  "showcase": [
+    {
+      "kit": "cra-rxjs-styled-components",
+      "name": "Github Showcase",
+      "repo": "https://github.com/thisdot/starter.dev-github-showcases/tree/main/cra-rxjs-styled-components",
+      "app": "https://cra-rxjs-styled-components.starter.dev"
+    }
+  ],
   "hasShowcase": true,
   "private": true,
   "engines": {