misc: add doc page for checking by Lighthouse CI (#7300)

* misc: check doc page by Lighthouse CI

* Update lighthouse-report.yml

* Add script to render Lighthouse results

* Use script

.github/workflows/lighthouse-report.yml

@@ -28,6 +28,7 @@ jobs:
         with:
           urls: |
             https://deploy-preview-$PR_NUMBER--docusaurus-2.netlify.app/
+            https://deploy-preview-$PR_NUMBER--docusaurus-2.netlify.app/docs/
           configPath: ./.github/workflows/lighthouserc.json
           uploadArtifacts: true
           temporaryPublicStorage: true
@@ -39,24 +40,11 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
-            const result = ${{ steps.lighthouse_audit.outputs.manifest }}[0].summary
+            const results = ${{ steps.lighthouse_audit.outputs.manifest }}
             const links = ${{ steps.lighthouse_audit.outputs.links }}
-            const formatResult = (res) => Math.round((res * 100))
-            Object.keys(result).forEach(key => result[key] = formatResult(result[key]))
-            const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'
-            const comment = [
-                `⚡️ [Lighthouse report](${Object.values(links)[0]}) for the changes in this PR:`,
-                '| Category | Score |',
-                '| --- | --- |',
-                `| ${score(result.performance)} Performance | ${result.performance} |`,
-                `| ${score(result.accessibility)} Accessibility | ${result.accessibility} |`,
-                `| ${score(result['best-practices'])} Best practices | ${result['best-practices']} |`,
-                `| ${score(result.seo)} SEO | ${result.seo} |`,
-                `| ${score(result.pwa)} PWA | ${result.pwa} |`,
-                ' ',
-                `*Lighthouse ran on [${Object.keys(links)[0]}](${Object.keys(links)[0]})*`
-            ].join('\n')
-             core.setOutput("comment", comment);
+            const createLighthouseReport = require(`${process.env.GITHUB_WORKSPACE}/.github/workflows/scripts/format-lighthouse-score.js`)
+            const comment = createLighthouseReport({ results, links })
+            core.setOutput("comment", comment);
 
       - name: Add Lighthouse stats as comment
         id: comment_to_pr

.github/workflows/scripts/format-lighthouse-score.js

@@ -0,0 +1,58 @@
+const score = (res) => (res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴');
+const formatResult = (res) => Math.round(res * 100);
+const scoreEntry = (scoreResult) => {
+  const normalizedScore = formatResult(scoreResult);
+  const scoreIcon = score(normalizedScore);
+  return `${scoreIcon} ${normalizedScore}`;
+};
+
+const createMarkdownTableRow = ({
+  url,
+  performance,
+  accessibility,
+  bestPractices,
+  seo,
+  pwa,
+  reportUrl,
+}) => {
+  return `| ${url} | ${performance} | ${accessibility} | ${bestPractices} | ${seo} | ${pwa} | [View report](${reportUrl})|`;
+};
+
+const createSingleRow = ({summary, testUrl, reportPublicUrl}) => {
+  const normalizedBody = {
+    url: testUrl,
+    performance: scoreEntry(summary.performance),
+    accessibility: scoreEntry(summary.accessibility),
+    bestPractices: scoreEntry(summary['best-practices']),
+    seo: scoreEntry(summary.seo),
+    pwa: scoreEntry(summary.pwa),
+    reportUrl: reportPublicUrl,
+  };
+  return createMarkdownTableRow(normalizedBody);
+};
+
+const createMarkdownTableHeader = () => {
+  return [
+    '| URL                       | Performance | Accessibility | Best Practices | SEO      | PWA     | Report |',
+    '|---------------------------|-------------|---------------|----------------|----------|---------|--------|',
+  ];
+};
+
+const createLighthouseReport = ({results, links}) => {
+  const tableHeader = createMarkdownTableHeader();
+  const tableBody = results.map((result) => {
+    const testUrl = Object.keys(links).find((key) => key === result.url);
+    const reportPublicUrl = links[testUrl];
+    return createSingleRow({summary: result.summary, testUrl, reportPublicUrl});
+  });
+  const comment = [
+    '### ⚡️ Lighthouse report for the changes in this PR',
+    '',
+    ...tableHeader,
+    ...tableBody,
+    '',
+  ];
+  return comment.join('\n');
+};
+
+module.exports = createLighthouseReport;