feat: Added script auto generate theme readme (#101)

.github/workflows/generate-theme-doc.yml

@@ -0,0 +1,40 @@
+name: Generate Theme Readme
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - master
+    paths:
+      - "themes/index.ts"
+
+jobs:
+  generateThemeDoc:
+    runs-on: ubuntu-latest
+    name: Generate theme doc
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+      - name: Setup Node
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+
+      - name: npm install, generate readme
+        run: |
+          npm ci
+          npm run theme-readme-gen
+        env:
+          CI: true
+
+      - name: Commit Changes
+        uses: EndBug/add-and-commit@v7
+        with:
+          author_name: GitHub Actions
+          author_email: github-actions[bot]@users.noreply.github.com
+          message: "docs(theme): Auto uptade theme readme"
+          add: "themes/README.md"

package.json

@@ -16,6 +16,7 @@
   "scripts": {
     "dev": "nodemon ./withexpress.ts",
     "build": "tsc",
+    "theme-readme-gen": "ts-node scripts/generate-theme-doc.ts",
     "start": "node ./public/withexpress.js"
   },
   "author": "Rangga Fajar Oktariansyah",

scripts/generate-theme-doc.ts

@@ -0,0 +1,48 @@
+import fs from "fs";
+import { themes } from '../themes/index';
+
+const TARGET_FILE = "./themes/README.md";
+// Function to generate the markdown for themes
+function generateThemeMarkdown(username: string, theme: string, itemsPerRow: number = 3): string {
+  return `\`${theme}\` [![${theme}](https://github-readme-profile-alpha.vercel.app/api?username=${username}&theme=${theme})](https://github-readme-profile-alpha.vercel.app/api?username=${username}&theme=${theme})`;
+}
+
+// Function to generate README.md content
+function generateReadme(username: string): string {
+  const availableThemes = Object.keys(themes);
+  const itemsPerRow = 3;
+
+  let themesPreviewTable = '';
+  for (let i = 0; i < availableThemes.length; i += itemsPerRow) {
+    const themesSlice = availableThemes.slice(i, i + itemsPerRow);
+    const row = themesSlice.map(theme => generateThemeMarkdown(username, theme)).join(' | ');
+    themesPreviewTable += `| ${row} |\n`;
+  }
+
+  const readmeContent = `
+## Available Themes
+
+With inbuilt themes, you can customize the look of the card without doing any manual customization.
+
+Use \`?theme=THEME_NAME\` parameter like so :-
+
+\`\`\`md
+![GitHub Profile](https://github-readme-profile-alpha.vercel.app/api?username=${username}&theme=dark)
+\`\`\`
+
+## Themes Preview
+
+|                   |                   |                   |
+| :---------------: | :---------------: | :---------------: |
+${themesPreviewTable}
+
+Want to add a new theme? Consider reading the [contribution guidelines](/CONTRIBUTING.md#-themes-contribution) :D
+`;
+
+  return readmeContent;
+}
+
+// Example usage
+const username = 'FajarKim';
+const generatedReadme = generateReadme(username);
+fs.writeFileSync(TARGET_FILE, generatedReadme);