Merge pull request #28 from bartvdbraak/feat/unlighthouse

Add Cleanup action for GitHub Pages on branch deletion

.github/workflows/gh-pages-cleanup.yaml

@@ -0,0 +1,28 @@
+name: Cleanup GitHub Pages on Branch Deletion
+
+on:
+  delete
+
+permissions:
+  contents: write
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3.5.3
+
+      - name: Delete directory in gh-pages
+        if: github.event.ref_type == 'branch'
+        run: |
+          branchName=$(echo "${{ github.ref }}" | sed -e 's,^refs/heads/,,')
+          if [ -d "./.unlighthouse/${branchName}" ]; then
+            git fetch --all
+            git checkout gh-pages
+            git rm -rf --ignore-unmatch "${branchName}"
+            git commit -m "Cleanup directory for deleted branch ${branchName}"
+            git push origin gh-pages
+          else
+            echo "Directory doesn't exist for branch ${branchName}"
+          fi

.github/workflows/lighthouse-report.yaml

@@ -40,7 +40,7 @@ jobs:
       - name: Install Dependencies
         run: yarn global add @unlighthouse/cli puppeteer
 
-      - name: vercel-preview-url
+      - name: Retrieve Vercel Preview URL
         uses: zentered/vercel-preview-url@v1.1.9
         id: vercel_preview_url
         env:
@@ -48,8 +48,8 @@ jobs:
         with:
           vercel_project_id: ${{ vars.VERCEL_PROJECT_ID }}
 
-      - uses: UnlyEd/github-action-await-vercel@v1.2.39
+      - name: Await Vercel Deployment
-        id: await-vercel
+        uses: UnlyEd/github-action-await-vercel@v1.2.39
         env:
           VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
         with:
@@ -96,12 +96,13 @@ jobs:
                 `| Accessibility | ${score(result.summary.categories.accessibility.averageScore)} |`,
                 `| Best practices | ${score(result.summary.categories['best-practices'].averageScore)} |`,
                 `| SEO | ${score(result.summary.categories.seo.averageScore)} |`,
+                `| *Overall* | ${score(result.summary.score)} |`,
                 '',
                 '*Lighthouse scores for individual routes:*',
                 '',
-                '| Path | Performance | Accessibility | Best practices | SEO |',
+                '| Path | Performance | Accessibility | Best practices | SEO | Overall |',
-                '| --- | --- | --- | --- | --- |',
+                '| --- | --- | --- | --- | --- | --- |',
-                `${result.routes.map(route => `| ${route.path} | ${score(route.categories.performance.score)} | ${score(route.categories.accessibility.score)} | ${score(route.categories['best-practices'].score)} | ${score(route.categories.seo.score)} |`).join('\n')}`,
+                `${result.routes.map(route => `| ${route.path} | ${score(route.categories.performance.score)} | ${score(route.categories.accessibility.score)} | ${score(route.categories['best-practices'].score)} | ${score(route.categories.seo.score)} | ${score(route.score)} |`).join('\n')}`,
                 '',
                 '*Lighthouse metrics:*',
                 '',

.github/workflows/lint-deps-check.yaml

@@ -8,6 +8,10 @@ on:
     branches:
       - main
 
+permissions:
+  checks: write
+  contents: write
+
 jobs:
   run-checks:
     name: Run checks
@@ -15,18 +19,18 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3.5.3
 
       - name: Set up Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version: 20
+          node-version: 18
 
       - name: Install Node.js dependencies
         run: yarn install --frozen-lockfile
 
       - name: Run linters
-        uses: wearerequired/lint-action@v2
+        uses: wearerequired/lint-action@v2.3.0
         with:
           eslint: true
           prettier: true

.prettierignore

@@ -11,3 +11,4 @@ node_modules
 build
 .contentlayer
 .github
+.unlighthouse

README.md

@@ -13,7 +13,6 @@
 </div>
 <br/>
 
-
 ## Installation
 
 To install the project and its dependencies, follow these steps:

app/(landing)/css/additional-styles/theme.css

@@ -1,82 +1,81 @@
-
 /* Custom AOS distance */
 @media screen {
-    html:not(.no-js) [data-aos=fade-up] {
+  html:not(.no-js) [data-aos="fade-up"] {
     -webkit-transform: translate3d(0, 14px, 0);
     transform: translate3d(0, 14px, 0);
   }
 
-    html:not(.no-js) [data-aos=fade-down] {
+  html:not(.no-js) [data-aos="fade-down"] {
     -webkit-transform: translate3d(0, -14px, 0);
     transform: translate3d(0, -14px, 0);
   }
 
-    html:not(.no-js) [data-aos=fade-right] {
+  html:not(.no-js) [data-aos="fade-right"] {
     -webkit-transform: translate3d(-14px, 0, 0);
     transform: translate3d(-14px, 0, 0);
   }
 
-    html:not(.no-js) [data-aos=fade-left] {
+  html:not(.no-js) [data-aos="fade-left"] {
     -webkit-transform: translate3d(14px, 0, 0);
     transform: translate3d(14px, 0, 0);
   }
 
-    html:not(.no-js) [data-aos=fade-up-right] {
+  html:not(.no-js) [data-aos="fade-up-right"] {
     -webkit-transform: translate3d(-14px, 14px, 0);
     transform: translate3d(-14px, 14px, 0);
   }
 
-    html:not(.no-js) [data-aos=fade-up-left] {
+  html:not(.no-js) [data-aos="fade-up-left"] {
     -webkit-transform: translate3d(14px, 14px, 0);
     transform: translate3d(14px, 14px, 0);
   }
 
-    html:not(.no-js) [data-aos=fade-down-right] {
+  html:not(.no-js) [data-aos="fade-down-right"] {
     -webkit-transform: translate3d(-14px, -14px, 0);
     transform: translate3d(-14px, -14px, 0);
   }
 
-    html:not(.no-js) [data-aos=fade-down-left] {
+  html:not(.no-js) [data-aos="fade-down-left"] {
     -webkit-transform: translate3d(14px, -14px, 0);
     transform: translate3d(14px, -14px, 0);
   }
 
-    html:not(.no-js) [data-aos=zoom-in-up] {
+  html:not(.no-js) [data-aos="zoom-in-up"] {
-        -webkit-transform: translate3d(0, 14px, 0) scale(.6);
+    -webkit-transform: translate3d(0, 14px, 0) scale(0.6);
-        transform: translate3d(0, 14px, 0) scale(.6);
+    transform: translate3d(0, 14px, 0) scale(0.6);
   }
 
-    html:not(.no-js) [data-aos=zoom-in-down] {
+  html:not(.no-js) [data-aos="zoom-in-down"] {
-        -webkit-transform: translate3d(0, -14px, 0) scale(.6);
+    -webkit-transform: translate3d(0, -14px, 0) scale(0.6);
-        transform: translate3d(0, -14px, 0) scale(.6);
+    transform: translate3d(0, -14px, 0) scale(0.6);
   }
 
-    html:not(.no-js) [data-aos=zoom-in-right] {
+  html:not(.no-js) [data-aos="zoom-in-right"] {
-        -webkit-transform: translate3d(-14px, 0, 0) scale(.6);
+    -webkit-transform: translate3d(-14px, 0, 0) scale(0.6);
-        transform: translate3d(-14px, 0, 0) scale(.6);
+    transform: translate3d(-14px, 0, 0) scale(0.6);
   }
 
-    html:not(.no-js) [data-aos=zoom-in-left] {
+  html:not(.no-js) [data-aos="zoom-in-left"] {
-        -webkit-transform: translate3d(14px, 0, 0) scale(.6);
+    -webkit-transform: translate3d(14px, 0, 0) scale(0.6);
-        transform: translate3d(14px, 0, 0) scale(.6);
+    transform: translate3d(14px, 0, 0) scale(0.6);
   }
 
-    html:not(.no-js) [data-aos=zoom-out-up] {
+  html:not(.no-js) [data-aos="zoom-out-up"] {
     -webkit-transform: translate3d(0, 14px, 0) scale(1.2);
     transform: translate3d(0, 14px, 0) scale(1.2);
   }
 
-    html:not(.no-js) [data-aos=zoom-out-down] {
+  html:not(.no-js) [data-aos="zoom-out-down"] {
     -webkit-transform: translate3d(0, -14px, 0) scale(1.2);
     transform: translate3d(0, -14px, 0) scale(1.2);
   }
 
-    html:not(.no-js) [data-aos=zoom-out-right] {
+  html:not(.no-js) [data-aos="zoom-out-right"] {
     -webkit-transform: translate3d(-14px, 0, 0) scale(1.2);
     transform: translate3d(-14px, 0, 0) scale(1.2);
   }
 
-    html:not(.no-js) [data-aos=zoom-out-left] {
+  html:not(.no-js) [data-aos="zoom-out-left"] {
     -webkit-transform: translate3d(14px, 0, 0) scale(1.2);
     transform: translate3d(14px, 0, 0) scale(1.2);
   }

app/(landing)/css/style.css

@@ -1,9 +1,9 @@
-@import 'tailwindcss/base';
+@import "tailwindcss/base";
-@import 'tailwindcss/components';
+@import "tailwindcss/components";
 
-@import 'additional-styles/theme.css';
+@import "additional-styles/theme.css";
 
-@import 'tailwindcss/utilities';
+@import "tailwindcss/utilities";
 
 /* Additional Tailwind directives: https://tailwindcss.com/docs/functions-and-directives/#responsive */
 @layer utilities {
@@ -11,4 +11,3 @@
     direction: rtl;
   }
 }
-

next.config.js

@@ -4,6 +4,6 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -13,8 +13,8 @@
     "lint": "next lint",
     "preview": "next build && next start",
     "typecheck": "tsc --noEmit",
-    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
+    "format:write": "prettier . --write --cache",
-    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache"
+    "format:check": "prettier . --check --cache"
   },
   "dependencies": {
     "@clerk/clerk-react": "^4.18.0",

tailwind.config.js

@@ -4,7 +4,11 @@ const colors = require("tailwindcss/colors");
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
-  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "content/**/*.mdx"],
+  content: [
+    "app/**/*.{ts,tsx}",
+    "components/**/*.{ts,tsx}",
+    "content/**/*.mdx",
+  ],
   theme: {
     container: {
       center: true,
@@ -23,8 +27,10 @@ module.exports = {
       },
 
       backgroundImage: {
-        "gradient-conic": "conic-gradient(var(--conic-position), var(--tw-gradient-stops))",
+        "gradient-conic":
-        "gradient-radial-top": "radial-gradient(100% 60% at 100% 0%, var(--tw-gradient-stops))",
+          "conic-gradient(var(--conic-position), var(--tw-gradient-stops))",
+        "gradient-radial-top":
+          "radial-gradient(100% 60% at 100% 0%, var(--tw-gradient-stops))",
       },
       keyframes: {
         "accordion-down": {