Lighthouse CI + light SEO/accessiblity tweaks (#85)

* split out path and pass to lighthouse * specific path * url with paths * fix ci * lots of seo and accessibility improvements * add lighthouse scores as comment * cleanup * try this commenting system? * another test * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system? * try this commenting system?
kushagharahi · Jun 20, 2023 · 5038b74 · 5038b74
1 parent 2c9d316
commit 5038b74
Show file tree

Hide file tree

Showing 16 changed files with 122 additions and 40 deletions.
diff --git a/.github/workflows/.lighthouserc.js b/.github/workflows/.lighthouserc.js
@@ -0,0 +1,12 @@
+const paths = require('../../build/paths');
+
+const baseUrl = 'http://127.0.0.1:8080'
+
+module.exports = {
+  ci: {
+    collect: {
+        url:  paths.map((path) => baseUrl + path),
+        startServerCommand: 'npx http-server dist -p 8080',
+      },
+  },
+};
diff --git a/.github/workflows/lighthouse-analysis.yml b/.github/workflows/lighthouse-analysis.yml
@@ -1,5 +1,8 @@
 name: Lighthouse CI
 
+permissions:
+  pull-requests: write
+
 on:
   push:
     branches: [dev]
@@ -22,4 +25,37 @@ jobs:
         run: npm run prd-build
 
       - name: Run Lighthouse
-        run: npm install -g @lhci/[email protected] && lhci autorun --upload.target=temporary-public-storage
+        run: npm install -g @lhci/[email protected] && lhci autorun --upload.target=temporary-public-storage --config=.github/workflows/.lighthouserc.js
+
+      - name: Comment Lighthouse Scores
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const body = require('./.github/workflows/lighthousescores.js')
+            
+            const prNumber = context.payload.pull_request.number;
+            const comments = await github.rest.issues.listComments({
+              owner: "kushagharahi",
+              repo: "kushagharahi.github.io",
+              issue_number: prNumber,
+            });
+
+            const existingComment = comments.data.find(comment => comment.body.includes('## Lighthouse Scores'))
+
+            if (existingComment) {
+              await github.rest.issues.updateComment({
+                owner: "kushagharahi",
+                repo: "kushagharahi.github.io",
+                comment_id: existingComment.id,
+                issue_number: prNumber,
+                body: body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: "kushagharahi",
+                repo: "kushagharahi.github.io",
+                issue_number: prNumber,
+                body: body,
+              });
+            }
diff --git a/.github/workflows/lighthousescores.js b/.github/workflows/lighthousescores.js
@@ -0,0 +1,19 @@
+const fs = require('fs');
+
+const reportFiles = fs.readdirSync('./.lighthouseci', { withFileTypes: true })
+    .filter(dirent => dirent.isFile() && dirent.name.startsWith('lhr') && !dirent.name.endsWith('.html'))
+    .map(dirent => dirent.name);
+
+let comment = '## Lighthouse Scores\n\n';
+for (const reportFile of reportFiles) {
+    const reportContent = fs.readFileSync('./.lighthouseci/'+reportFile, 'utf8');
+    const report = JSON.parse(reportContent);
+    var scores = new Map();
+    Object.keys(report.categories).forEach((title) => {
+        scores[title] = report.categories[title].score * 100;
+    });
+    const scoreTable = Object.entries(scores).map(([category, score]) => `- ${category}: ${score}`).join('\n');
+    comment += `- ${report.requestedUrl}\n\`\`\`\n${scoreTable}\n\`\`\`\n`;
+}
+
+module.exports = comment
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
 npm-debug.log
 dist
-*.DS_Store*
+*.DS_Store*
+.lighthouseci
diff --git a/build/paths.js b/build/paths.js
@@ -0,0 +1,13 @@
+module.exports = [ 
+    '/', 
+    '/blog', 
+    '/resume', 
+    '/contact', 
+    '/projects', 
+    '/blog/first_blog_post', 
+    '/blog/access_localhost_from_vm_in_host_computer', 
+    '/blog/git_command_line_cheat_sheet', 
+    '/blog/asrock_z77_extreme4_gtx_970_high_sierra_hackintosh',
+    '/blog/managing_sfdx_static_resources_via_npm_or_yarn',
+    '/blog/reset_the_root_password_raspbian_image'
+]
diff --git a/build/webpack.dev.js b/build/webpack.dev.js
@@ -13,5 +13,5 @@ module.exports = merge(common, {
           // Drop Options API from bundle
           __VUE_PROD_DEVTOOLS__: false
     }),
-    ]
+  ]
 });
diff --git a/build/webpack.prod.js b/build/webpack.prod.js
@@ -4,18 +4,7 @@ const common = require('./webpack.common.js');
 const TerserPlugin = require('terser-webpack-plugin');
 const SitemapPlugin = require('sitemap-webpack-plugin').default
 const PrerendererWebpackPlugin = require('@prerenderer/webpack-plugin')
-
-const paths = [ '/', 
-                '/blog', 
-                '/resume', 
-                '/contact', 
-                '/projects', 
-                '/blog/first_blog_post', 
-                '/blog/access_localhost_from_vm_in_host_computer', 
-                '/blog/git_command_line_cheat_sheet', 
-                '/blog/asrock_z77_extreme4_gtx_970_high_sierra_hackintosh',
-                '/blog/managing_sfdx_static_resources_via_npm_or_yarn',
-                '/blog/reset_the_root_password_raspbian_image']
+const paths = require('./paths')
 
 module.exports = merge(common, {
   mode: 'production',

diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "prd-build": "webpack --config ./build/webpack.prod.js",
     "dev-build": "webpack --config ./build/webpack.dev.js",
-    "hotreload": "webpack serve --config ./build/webpack.dev.js"
+    "hotreload": "webpack serve --config ./build/webpack.dev.js",
+    "lighthouse": "npm run prd-build && lhci autorun --upload.target=temporary-public-storage --config=.github/workflows/.lighthouserc.js"
   },
   "repository": "git+https://github.com/kushagharahi/kushagharahi.github.io.git",
   "author": "Kusha Gharahi",

diff --git a/src/static/index.html b/src/static/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 	<head>
 		<!-- open graph -->
 		<meta name="og:title" property="og:title" content="">

diff --git a/src/vue/components/MacConsoleComponent.vue b/src/vue/components/MacConsoleComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <div id="shell-top-bar">
-      {{ topBarText }}
+    <div id="shell-top-bar">
+      {{ topBarText }}
     </div>
     <div id="shell-body" />
   </div>
@@ -25,7 +25,7 @@
           I'm Kusha, a software engineer <a href='/projects/'>building really cool stuff</a> in my spare time.<br /> \
           📃 Check out my <a href='/resume/'>resume here</a>. <br /> \
           📬 Drop me a line on my <a href='/contact/'>contact page</a>.<br /> \
-          🍴 Fork this site <a href='https://github.com/kushagharahi/kushagharahi.github.io'>here</a>!<br /> \
+          🍴 <a href='https://github.com/kushagharahi/kushagharahi.github.io'>Fork this site here</a>!<br /> \
           👀 Peep the latest blog post -> <a href='/blog/" + this.latestPostMetadata.name + "/'>" + this.latestPostMetadata.title + "</a> <br /><br /> \
           <span style='text-align:center; display:block'> \
             >>>><a href='/contact'>PS. I freelance too</a><<<< \

diff --git a/src/vue/components/NavComponent.vue b/src/vue/components/NavComponent.vue
@@ -13,6 +13,7 @@
       v-model="mobileMenu"
       class="navMenu"
       type="checkbox"
+      aria-label="menu"
     >
     <label for="navMenu" />
     <ul class="nav">
@@ -37,7 +38,7 @@
         <router-link
           class="navLink"
           active-class="active"
-          to="/blog"
+          to="/blog"
         >
           Blog
         </router-link>

diff --git a/src/vue/components/SocialIconComponent.vue b/src/vue/components/SocialIconComponent.vue
@@ -3,10 +3,12 @@
     :href="link"
     target="_blank"
     rel="noopener"
+    :aria-label="name"
   >
     <img
       :src="imgLink"
       class="socialIcon"
+      :alt="name"
       @mouseover="setHover(true)"
       @mouseleave="setHover(false)"
     ></a>

diff --git a/src/vue/views/ContactPage.vue b/src/vue/views/ContactPage.vue
@@ -14,6 +14,7 @@
 
       <div class="form-group">
         <input
+          id="fName"
           v-model="formData.fName"
           class="form-input"
           name="fName"
@@ -28,6 +29,7 @@
 
       <div class="form-group">
         <input
+          id="lName"
           v-model="formData.lName"
           class="form-input"
           name="lName"
@@ -42,6 +44,7 @@
 
       <div class="form-group">
         <input
+          id="_replyto"
           v-model="formData._replyto"
           class="form-email"
           type="email"
@@ -57,6 +60,7 @@
 
       <div class="form-group">
         <textarea
+          id="body"
           v-model="formData.body"
           name="body"
           class="form-message"
@@ -71,6 +75,7 @@
 
       <div class="form-group">
         <input
+          id="validation"
           v-model="formData.validation"
           class="form-input"
           name="validation"

diff --git a/src/vue/views/HomePage.vue b/src/vue/views/HomePage.vue
@@ -3,25 +3,25 @@
     <mac-console-component class="shadow" />
     <br>
     <div id="center">
-      <social-icon
+      <social-icon
         name="github"
         class="socialIcon"
         link="http://github.com/kushagharahi"
-        target="_blank"
+        target="_blank"
       />
 
-      <social-icon
+      <!-- <social-icon
         name="twitter"
         class="socialIcon"
         link="http://twitter.com/KKUUSSHHAA"
-        target="_blank"
-      />
+        target="_blank"
+      /> -->
 
-      <social-icon
+      <social-icon
         name="linkedin"
         class="socialIcon"
         link="http://linkedin.com/in/kushagharahi"
-        target="_blank "
+        target="_blank "
       />
     </div>
   </div>

diff --git a/src/vue/views/ProjectsPage.vue b/src/vue/views/ProjectsPage.vue
@@ -9,11 +9,13 @@
         v-if="project.imgPreview != ''"
         class="projectImg"
         :src="pictureDir(project.imgPreview)"
+        :alt="project.title"
       >
       <img
         v-if="project.imgPreview == ''"
         class="projectImg"
         :src="noPictureRes"
+        :alt="project.title"
       >
 
       <h2><strong>{{ project.title }}</strong></h2>

diff --git a/src/vue/views/ResumePage.vue b/src/vue/views/ResumePage.vue
@@ -1,19 +1,20 @@
 <template>
   <div id="content">
-    <p>
-      I currently work full time at <a
-        href="http://www.toyotaconnected.com/"
-        target="_blank"
-        rel="noopener"
-      >Toyota Connected</a> but am always interested in hearing what offers are available. Feel free to send inquiries <router-link to="contact">
-        here.
-      </router-link>
+    <p>
+      I currently work full time at <a
+        href="http://www.grail.com/"
+        target="_blank"
+        rel="noopener"
+      >Grail</a> but am always interested in hearing what offers are available. Feel free to send inquiries <router-link to="contact">
+        here.
+      </router-link>
     </p>
     <div class="shadow">
-      <iframe
-        class="docIFrame"
-        frameborder="0"
-        :src="resumeUrl"
+      <iframe
+        class="docIFrame"
+        frameborder="0"
+        :src="resumeUrl"
+        loading="lazy"
       >Your browser does not support inline frames. Download the PDF down below.</iframe>
     </div>
     <div class="clearfix" />