atherosai · abdelrahman-mh · Mar 13, 2024
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 This is repository with examples of simple UI components. The repository is based on Next.js and React.js. 
 
+![screenshot](./docs/screenshot.png)
+
 # installation
 
 * Clone the repo with

diff --git a/docs/screenshot.png b/docs/screenshot.png
diff --git a/index.html b/index.html
diff --git a/index.mjs b/index.mjs
@@ -1,41 +1,100 @@
-import fs from "fs";
-import glob from "fast-glob";
-
-async function start() {
-  const HTMLFiles = await glob(["./**/*.html"], {
-    ignore: ["./index.html", "**/node_modules/**"],
-  });
-  HTMLFiles.sort();
-  const result = HTMLFiles.map((filepath) => {
-    const arr = filepath.split("/");
-    if (arr[0] === "react-examples") {
-      return `<li><a href="${filepath}">react-examples/${arr[2]}</a></li>`;
-    }
-    return `<li><a href="${filepath}">${
-      arr[1].startsWith("index.") ? arr[0] : filepath
-    }</a></li>`;
-  }).join("\n");
-  fs.writeFile(
-    "./index.html",
-    `
+import fs from 'fs'
+import glob from 'fast-glob'
+import puppeteer from 'puppeteer'
+import path from 'path'
+
+const SCREENSHOT_DIR = './screenshot'
+const INDEX_HTML_PATH = './index.html'
+
+const browser = await puppeteer.launch().catch((err) => {
+  console.error('Error launching browser:', err)
+  process.exit(1)
+})
+
+const takeScreenshot = async (fileUrl, imageName) => {
+  if (!fs.existsSync(SCREENSHOT_DIR)) {
+    fs.mkdirSync(SCREENSHOT_DIR)
+  }
+
+  const page = await browser.newPage()
+  try {
+    const scriptDir = path.dirname(new URL(import.meta.url).pathname)
+    const filepath = path.join(scriptDir, fileUrl)
+    await page.goto('file://' + filepath)
+
+    const screenshotPath = path.join(
+      SCREENSHOT_DIR,
+      `screenshot-${imageName}.png`
+    )
+    await page.screenshot({ path: screenshotPath })
+  } catch (error) {
+    console.error(`Error taking screenshot for ${fileUrl}:`, error)
+  } finally {
+    await page.close()
+  }
+}
+
+const getFileName = (filepath) => {
+  const splits = filepath.split('/')
+
+  if (splits[0] === 'react-examples') {
+    return `react-examples/${splits[2]}`
+  }
+  return splits[1].startsWith('index.') ? splits[0] : filepath
+}
+
+const generateComponentCard = (filepath, fileName, imageName) => `
+  <li class="cards__card">
+  <a href="${filepath}" class="cards__card-link"
+    ><div class="cards__card-image-cont">
+      <img src="./${SCREENSHOT_DIR}/screenshot-${imageName}.png" alt="screenshot">
+    </div>
+    <h2 class="cards__card-info">${fileName}</h2></a
+  >
+</li>`
+
+const generateHtmlFile = (components) => `
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css">
     <title>ui</title>
   </head>
   <body>
   <!-- generated by ./index.mjs -->
-  <h1>ui</h1>
-  <ul>
-  ${result}
+  <h1 class="main-header">UI</h1>
+  <ul class="cards">
+  ${components}
   </ul>
   </body>
-  </html>
-  `,
-    (err) => {}
-  );
+  </html>`
+
+const start = async () => {
+  try {
+    const HTMLFiles = await glob(['./**/*.html'], {
+      ignore: [INDEX_HTML_PATH, '**/node_modules/**'],
+    })
+
+    HTMLFiles.sort()
+
+    const components = await Promise.all(
+      HTMLFiles.map(async (filepath, index) => {
+        const fileName = getFileName(filepath)
+        await takeScreenshot(filepath, index).then(() => {
+          console.log(`Created ${filepath} | With screenshot-${index}.png`);
+        })
+        return generateComponentCard(filepath, fileName, index)
+      })
+    )
+
+    fs.writeFileSync(INDEX_HTML_PATH, generateHtmlFile(components.join('\n')))
+  } catch (err) {
+    console.error(err)
+  } finally {
+    await browser.close()
+  }
 }
 
-start();
+start()