feat: lighthouse score actions

.github/workflows/lighthouse.yml

@@ -0,0 +1,39 @@
+name: Lighthouse CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run Lighthouse CI
+        run: npx lhci autorun
+
+      - name: Update README with Lighthouse scores
+        run: node update-readme.js
+
+      - name: Commit updated README
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git add README.md
+          git commit -m "Update Lighthouse scores"
+          git push

README.md

@@ -1,5 +1,5 @@
 # 🌶️ Thirtysixstudio clone
-A ThirtysixStudio clone showcasing my GSAP animation skills, with an interactive, minimalistic design. Clicking the "ThirtysixStudio" text triggers dynamic 3D elements and smooth transitions, powered by randomly swapping 2D images. This project highlights my proficiency in creating modern, engaging web experiences.
+A ThirtysixStudio clone showcasing my GSAP animation skills, with an interactive, minimalistic design. Clicking on screen triggers dynamic 3D elements and smooth transitions, powered by randomly swapping 2D images. This project highlights my proficiency in creating modern, engaging web experiences.
 
 ## 🔗 Link to the original website
 Visit the original ThirtysixStudio website: [https://thirtysixstudio.com/](thirtysixstudio.com)
@@ -11,6 +11,10 @@ Visit the original ThirtysixStudio website: [https://thirtysixstudio.com/](thirt
 - `GSAP`
 - `Tailwind CSS`
 
+## Lighthouse Performance Report
+
+![Lighthouse Report](./public/lighthouse-report.png)
+
 ## 🚦Running the project:
 
 1. **Clone the repository:**

update-readme.js

@@ -0,0 +1,59 @@
+/* eslint-disable no-undef */
+import fs from 'fs';
+import path from 'path';
+
+// Path to the Lighthouse report
+const reportPath = path.join(__dirname, 'lhci-report', 'latest-report.json');
+
+// Read the Lighthouse report JSON
+const getLighthouseReport = () => {
+  const report = JSON.parse(fs.readFileSync(reportPath, 'utf-8'));
+  return report;
+};
+
+// Extract scores
+const extractScores = (report) => {
+  const performance = report.categories.performance.score * 100;
+  const accessibility = report.categories.accessibility.score * 100;
+  const bestPractices = report.categories['best-practices'].score * 100;
+  const seo = report.categories.seo.score * 100;
+  const pwa = report.categories.pwa.score * 100;
+
+  return { performance, accessibility, bestPractices, seo, pwa };
+};
+
+// Create a string with the scores
+const createScoreString = (scores) => {
+  const { performance, accessibility, bestPractices, seo, pwa } = scores;
+  return `
+  ## Lighthouse Report (Page Speed Scores)
+  
+  - **Performance:** ${performance}/100
+  - **Accessibility:** ${accessibility}/100
+  - **Best Practices:** ${bestPractices}/100
+  - **SEO:** ${seo}/100
+  - **PWA:** ${pwa}/100
+  `;
+};
+
+// Update the README with the new scores
+const updateReadme = (newScores) => {
+  const readmePath = path.join(__dirname, 'README.md');
+  let readmeContent = fs.readFileSync(readmePath, 'utf-8');
+
+  // Replace the old Lighthouse section or append new one
+  readmeContent = readmeContent.replace(/## Lighthouse Report.*/s, newScores);
+
+  // Write the updated README back to the file
+  fs.writeFileSync(readmePath, readmeContent);
+};
+
+// Main function to run the process
+const main = () => {
+  const report = getLighthouseReport();
+  const scores = extractScores(report);
+  const scoresString = createScoreString(scores);
+  updateReadme(scoresString);
+};
+
+main();