Integrate Lighthouse CI (#3)

.github/lighthouse/formatLighthouseReport.js

@@ -0,0 +1,75 @@
+// Copyright 2023 Paion Data. All rights reserved.
+
+// @ts-check
+
+/** @typedef {Record<'performance' | 'accessibility' | 'best-practices' | 'seo' | 'pwa', number>} LighthouseSummary */
+
+/** @type {Record<keyof LighthouseSummary, string>} */
+const summaryKeys = {
+  performance: "Performance",
+  accessibility: "Accessibility",
+  "best-practices": "Best Practices",
+  seo: "SEO",
+  pwa: "PWA",
+};
+
+/** @param {number} rawScore */
+const scoreEntry = (rawScore) => {
+  const score = Math.round(rawScore * 100);
+  // eslint-disable-next-line no-nested-ternary
+  const scoreIcon = score >= 90 ? "🟢" : score >= 50 ? "🟠" : "🔴";
+  return `${scoreIcon} ${score}`;
+};
+
+/**
+ * @param {string} url
+ * @returns {module:url.URL}
+ */
+function createURL(url) {
+  try {
+    return new URL(url);
+  } catch (e) {
+    throw new Error(`Can't create URL for string=${url}`, { cause: e });
+  }
+}
+
+/**
+ * @param {Object} param0
+ * @param {string} param0.url
+ * @param {LighthouseSummary} param0.summary
+ * @param {string} param0.reportUrl
+ */
+const createMarkdownTableRow = ({ url, summary, reportUrl }) =>
+  [
+    `| [${createURL(url).pathname}](${url})`,
+    .../** @type {(keyof LighthouseSummary)[]} */ (Object.keys(summaryKeys)).map((k) => scoreEntry(summary[k])),
+    `[Report](${reportUrl}) |`,
+  ].join(" | ");
+
+const createMarkdownTableHeader = () => [
+  ["| URL", ...Object.values(summaryKeys), "Report |"].join(" | "),
+  ["|---", ...Array(Object.keys(summaryKeys).length).fill("---"), "---|"].join("|"),
+];
+
+/**
+ * @param {Object} param0
+ * @param {Record<string, string>} param0.links
+ * @param {{url: string, summary: LighthouseSummary}[]} param0.results
+ */
+const createLighthouseReport = ({ results, links }) => {
+  const tableHeader = createMarkdownTableHeader();
+  const tableBody = results.map((result) => {
+    const testUrl = /** @type {string} */ (Object.keys(links).find((key) => key === result.url));
+    const reportPublicUrl = /** @type {string} */ (links[testUrl]);
+
+    return createMarkdownTableRow({
+      url: testUrl,
+      summary: result.summary,
+      reportUrl: reportPublicUrl,
+    });
+  });
+  const comment = ["### ⚡️ Lighthouse report for the deploy preview of this PR", "", ...tableHeader, ...tableBody, ""];
+  return comment.join("\n");
+};
+
+export default createLighthouseReport;

.github/lighthouse/lighthouse-budget.json

@@ -0,0 +1,15 @@
+[
+  {
+    "path": "/*",
+    "resourceSizes": [
+      {
+        "resourceType": "document",
+        "budget": 18
+      },
+      {
+        "resourceType": "total",
+        "budget": 400
+      }
+    ]
+  }
+]

.github/lighthouse/lighthouserc.json

@@ -0,0 +1,15 @@
+{
+  "ci": {
+    "collect": {
+      "startServerCommand": "yarn start",
+      "startServerReadyPattern": "3000",
+      "startServerReadyTimeout": 10000,
+
+      "numberOfRuns": 1,
+
+      "settings": {
+        "skipAudits": ["robots-txt", "canonical", "tap-targets", "is-crawlable", "works-offline", "offline-start-url"]
+      }
+    }
+  }
+}

.github/lighthouse/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "lighthouse-scripts",
+  "private": true,
+  "license": "Apache-2.0",
+  "type": "module"
+}

.github/pull_request_template.md

@@ -0,0 +1,21 @@
+Changelog
+---------
+
+### Added
+
+### Changed
+
+### Deprecated
+
+### Removed
+
+### Fixed
+
+### Security
+
+Checklist
+---------
+
+* [ ] Test
+* [ ] Self-review
+* [ ] Documentation

.github/workflows/ci-cd.yml

@@ -111,51 +111,51 @@ jobs:
           user_name: ${{ env.USER }}
           user_email: ${{ env.EMAIL }}
 
-  # lighthouse:
-  #   if: github.ref != 'refs/heads/master'
-  #   needs: [yml-md-style, code-style]
-  #   permissions:
-  #     pull-requests: write
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v3
-  #     - uses: actions/setup-node@v3
-  #       with:
-  #         node-version: 18
+  lighthouse:
+    if: github.ref != 'refs/heads/master'
+    needs: [yml-md-style, code-style]
+    permissions:
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
 
-  #     - run: cp .env.test .env && yarn
+      - run: cp .env.test .env && yarn
 
-  #     - name: Audit URLs using Lighthouse
-  #       id: lighthouse_audit
-  #       uses: treosh/lighthouse-ci-action@v10
-  #       with:
-  #         urls: |
-  #           http://localhost:3000
-  #         uploadArtifacts: true
-  #         temporaryPublicStorage: true
-  #         budgetPath: ./.github/lighthouse/lighthouse-budget.json
-  #         configPath: ./.github/lighthouse/lighthouserc.json
+      - name: Audit URLs using Lighthouse
+        id: lighthouse_audit
+        uses: treosh/lighthouse-ci-action@v10
+        with:
+          urls: |
+            http://localhost:3000
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+          budgetPath: ./.github/lighthouse/lighthouse-budget.json
+          configPath: ./.github/lighthouse/lighthouserc.json
 
-  #     - name: Format lighthouse score
-  #       id: format_lighthouse_score
-  #       uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # 7.0.1
-  #       with:
-  #         github-token: ${{ secrets.GITHUB_TOKEN }}
-  #         script: |
-  #           const results = ${{ steps.lighthouse_audit.outputs.manifest }}
-  #           const links = ${{ steps.lighthouse_audit.outputs.links }}
-  #           const createLighthouseReport = (await import(`${process.env.GITHUB_WORKSPACE}/.github/lighthouse/formatLighthouseReport.js`)).default;
-  #           const comment = createLighthouseReport({ results, links });
-  #           core.setOutput("comment", comment);
+      - name: Format lighthouse score
+        id: format_lighthouse_score
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # 7.0.1
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const results = ${{ steps.lighthouse_audit.outputs.manifest }}
+            const links = ${{ steps.lighthouse_audit.outputs.links }}
+            const createLighthouseReport = (await import(`${process.env.GITHUB_WORKSPACE}/.github/lighthouse/formatLighthouseReport.js`)).default;
+            const comment = createLighthouseReport({ results, links });
+            core.setOutput("comment", comment);
 
-  #     - name: Add Lighthouse stats as comment
-  #       id: comment_to_pr
-  #       uses: marocchino/sticky-pull-request-comment@efaaab3fd41a9c3de579aba759d2552635e590fd # 2.8.0
-  #       with:
-  #         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  #         number: ${{ github.event.pull_request.number }}
-  #         header: lighthouse
-  #         message: ${{ steps.format_lighthouse_score.outputs.comment }}
+      - name: Add Lighthouse stats as comment
+        id: comment_to_pr
+        uses: marocchino/sticky-pull-request-comment@efaaab3fd41a9c3de579aba759d2552635e590fd # 2.8.0
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ github.event.pull_request.number }}
+          header: lighthouse
+          message: ${{ steps.format_lighthouse_score.outputs.comment }}
 
   # hashicorp:
   #   name: Publish AMI Image and Deploy It to EC2 through HashiCorp

docs/src/components/HomepageFeatures/index.tsx

@@ -10,8 +10,8 @@ type FeatureItem = {
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    title: 'Lighthouse CI',
+    Svg: require('@site/static/img/google-lighthouse.svg').default,
     description: (
       <>
         Docusaurus was designed from the ground up to be easily installed and