run prettier over every file

.devcontainer/devcontainer.json

@@ -32,6 +32,12 @@
 
   // Set *default* container specific settings.json values on container create.
   "settings": {
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true,
+    "editor.rulers": [120],
+    "files.eol": "\n",
+    "files.insertFinalNewline": true,
+    "files.trimTrailingWhitespace": true,
     "css.validate": false,
     "scss.validate": false,
     "html.format.templating": true,

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-  "printWidth": 100,
+  "printWidth": 120,
   "tabWidth": 2,
   "singleQuote": false
 }

.stylelintrc.json

@@ -1,22 +1,12 @@
 {
-  "extends": [
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-sass-guidelines", "stylelint-prettier/recommended"],
-    "stylelint-config-standard-scss",
-    "stylelint-config-sass-guidelines",
-    "stylelint-prettier/recommended"
-  ],
   "plugins": ["stylelint-no-unsupported-browser-features", "stylelint-prettier"],
   "rules": {
     "color-hex-length": "long",
     "max-nesting-depth": 6,
     "order/order": null,
     "order/properties-alphabetical-order": null,
-    "plugin/no-unsupported-browser-features": [
+    "plugin/no-unsupported-browser-features": [true, { "severity": "warning", "ignore": ["flexbox"] }],
-      true,
-      {
-        "severity": "warning",
-        "ignore": ["flexbox"]
-      }
-    ],
     "selector-max-compound-selectors": null,
     "selector-max-id": null,
     "selector-no-qualifying-type": null,

api/contact.js

@@ -4,8 +4,7 @@ import queryString from "query-string";
 
 // fallback to dummy secret for testing: https://docs.hcaptcha.com/#integration-testing-test-keys
 const HCAPTCHA_SITE_KEY = process.env.HCAPTCHA_SITE_KEY || "10000000-ffff-ffff-ffff-000000000001";
-const HCAPTCHA_SECRET_KEY =
+const HCAPTCHA_SECRET_KEY = process.env.HCAPTCHA_SECRET_KEY || "0x0000000000000000000000000000000000000000";
-  process.env.HCAPTCHA_SECRET_KEY || "0x0000000000000000000000000000000000000000";
 const HCAPTCHA_API_ENDPOINT = "https://hcaptcha.com/siteverify";
 
 const { AIRTABLE_API_KEY, AIRTABLE_BASE } = process.env;
@@ -37,9 +36,8 @@ export default async (req, res) => {
 
     const { body } = req;
 
-    // these are both backups to client-side validations just in case someone
+    // these are both backups to client-side validations just in case someone squeezes through without them. the codes
-    // squeezes through without them. the codes are identical so they're caught
+    // are identical so they're caught in the same fashion.
-    // in the same fashion.
     if (!body.name || !body.email || !body.message) {
       // all fields are required
       throw new Error("USER_MISSING_DATA");

api/tracks.js

@@ -27,11 +27,7 @@ export default async (req, res) => {
     if (req.method !== "GET") {
       throw new Error(`Method ${req.method} not allowed.`);
     }
-    if (
+    if (!process.env.SPOTIFY_CLIENT_ID || !process.env.SPOTIFY_CLIENT_SECRET || !process.env.SPOTIFY_REFRESH_TOKEN) {
-      !process.env.SPOTIFY_CLIENT_ID ||
-      !process.env.SPOTIFY_CLIENT_SECRET ||
-      !process.env.SPOTIFY_REFRESH_TOKEN
-    ) {
       throw new Error("Spotify API credentials aren't set.");
     }
 
@@ -47,10 +43,7 @@ export default async (req, res) => {
       response = await getTopTracks();
 
       // let Vercel edge and browser cache results for 3 hours
-      res.setHeader(
+      res.setHeader("Cache-Control", "public, max-age=10800, s-maxage=10800, stale-while-revalidate");
-        "Cache-Control",
-        "public, max-age=10800, s-maxage=10800, stale-while-revalidate"
-      );
     }
 
     res.setHeader("Access-Control-Allow-Methods", "GET");

assets/js/src/contact.js

@@ -29,10 +29,9 @@ if (contactForm) {
       // https://simonplend.com/how-to-use-fetch-to-post-form-data-as-json-to-your-api/
       const formData = Object.fromEntries(new FormData(event.currentTarget).entries());
 
-      // some client-side validation, these are all also checked on the server
+      // some client-side validation. these are all also checked on the server to be safe but we can save some
-      // to be safe but we can save some unnecessary requests here.
+      // unnecessary requests here.
-      // we throw identical error messages to the server's so they're caught in
+      // we throw identical error messages to the server's so they're caught in the same way below.
-      // the same way below.
       if (!formData.name || !formData.email || !formData.message) {
         throw new Error("USER_MISSING_DATA");
       }

assets/js/src/dark-mode.js

@@ -17,8 +17,7 @@ initDarkMode({
     // make toggle visible now that we know JS is enabled
     t.style.display = "block";
 
-    // HACK: re-enable theme transitions after a very short delay, otherwise
+    // HACK: re-enable theme transitions after a very short delay, otherwise there's a weird race condition (2/2)
-    // there's a weird race condition (2/2)
     setTimeout(() => {
       document.head.removeChild(disableTransitionCSSHack);
     }, 500);

assets/js/src/projects.js

@@ -28,10 +28,7 @@ if (wrapper) {
     <div class="repo-meta">
       ${repo.language
         ? html`<div class="repo-meta-item">
-            <span
+            <span class="repo-language-color" style="background-color: ${ifDefined(repo.language.color)}"></span>
-              class="repo-language-color"
-              style="background-color: ${ifDefined(repo.language.color)}"
-            ></span>
             <span>${repo.language.name}</span>
           </div>`
         : null}

assets/sass/abstracts/_functions.scss

@@ -7,13 +7,12 @@
 // Gradient hack to get our custom underline to wrap:
 // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
 @function underline-hack($color) {
-  // [deprecated] Calculate lighter underline color compared to text
+  // [deprecated] Calculate lighter underline color compared to text color by mix()'ing with background (#fff) to give
-  // color by mix()'ing with background (#fff) to give the impression
+  // the impression of opacity but with MUCH better compatibility.
-  // of opacity but with MUCH better compatibility.
   // $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);
 
-  // Less compatible but better for light/dark mode switching.
+  // Less compatible but better for light/dark mode switching. We fall back to non-alpha hex colors with
-  // We fall back to non-alpha hex colors with postcss-color-rgba-fallback to mitigate this.
+  // postcss-color-rgba-fallback to mitigate this.
 
   // stylelint-disable-next-line color-function-notation
   $color-opaque-alpha: rgba($color, math.div(settings.$link-underline-opacity, 100%));
@@ -22,8 +21,7 @@
   @return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
 }
 
-// Returns a list of strings from a given string separated by a given
+// Returns a list of strings from a given string separated by a given separator (defaults to comma).
-// separator (defaults to comma).
 // https://stackoverflow.com/a/65853667/1438024
 @function str-split($str, $separator: ",") {
   // return immediately if this function isn't necessary
@@ -35,17 +33,10 @@
 
   @while string.index("#{$str}", "#{$separator}") != null {
     @if string.index("#{$str}", "#{$separator}") > 1 {
-      $str-list: list.append(
+      $str-list: list.append($str-list, string.slice("#{$str}", 1, string.index("#{$str}", "#{$separator}") - 1));
-        $str-list,
-        string.slice("#{$str}", 1, string.index("#{$str}", "#{$separator}") - 1)
-      );
     }
 
-    $str: string.slice(
+    $str: string.slice("#{$str}", string.index("#{$str}", "#{$separator}") + 1, string.length("#{$str}"));
-      "#{$str}",
-      string.index("#{$str}", "#{$separator}") + 1,
-      string.length("#{$str}")
-    );
   }
 
   @if string.slice("#{$str}", 1, string.length("#{$str}")) != "" {

assets/sass/abstracts/_settings.scss

@@ -9,10 +9,9 @@ $webfont-mono-variable: "Roboto Mono var";
 // System fonts
 // https://markdotto.com/2018/02/07/github-system-fonts/
 // stylelint-disable-next-line value-keyword-case
-$system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
+$system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
-  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  "Segoe UI Emoji", "Segoe UI Symbol";
-$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier",
+$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
-  monospace;
 $font-stack-sans: list.join($webfont-sans, $system-fonts-sans);
 $font-stack-variable: list.join($webfont-sans-variable, $system-fonts-sans);
 $font-stack-mono: list.join($webfont-mono, $system-fonts-monospace);

assets/sass/abstracts/_themes.scss

@@ -16,9 +16,7 @@
   @each $element in settings.$theme-transition-elements {
     $transitions: list.append(
       $transitions,
-      string.unquote(
+      string.unquote("#{$element} #{settings.$theme-transition-duration} #{settings.$theme-transition-function}")
-        "#{$element} #{settings.$theme-transition-duration} #{settings.$theme-transition-function}"
-      )
     );
   }
   @if $moreTransitions != "" {

content/notes/dark-mode/index.md

@@ -51,9 +51,7 @@ A _very_ barebones example is embedded above ([view the source here](https://git
 I have cleaned up this code a bit, added a few features, and packaged it as an [📦 NPM module](https://www.npmjs.com/package/dark-mode-switcheroo) (zero dependencies and still [only ~500 bytes](https://bundlephobia.com/package/dark-mode-switcheroo) minified and gzipped!). Here's a small snippet of the updated method for the browser (pulling the module from [UNPKG](https://unpkg.com/browse/dark-mode-switcheroo/)), but definitely [read the readme](https://github.com/jakejarvis/dark-mode#readme) for much more detail on the API.
 
 ```html
-<button class="dark-mode-toggle" style="visibility: hidden;">
+<button class="dark-mode-toggle" style="visibility: hidden;">💡 Click to see the light... or not.</button>
-  💡 Click to see the light... or not.
-</button>
 
 <script src="https://unpkg.com/dark-mode-switcheroo/dist/dark-mode.min.js"></script>
 <script>

gulpfile.js

@@ -17,7 +17,7 @@ gulp.task(
   gulp.series(
     clean,
     npx("webpack", ["--mode", "production"]),
-    npx("hugo"),
+    npx("hugo", ["--verbose"]),
     gulp.parallel(optimizeHtml, optimizeImages)
   )
 );

package.json

@@ -55,7 +55,6 @@
     "@babel/eslint-parser": "^7.16.0",
     "@babel/preset-env": "^7.16.0",
     "@jakejarvis/eslint-config": "github:jakejarvis/eslint-config#main",
-    "@types/numeral": "^2.0.2",
     "@types/twemoji": "^12.1.2",
     "@types/url-parse": "^1.4.4",
     "autoprefixer": "^10.4.0",

webpack.config.js

@@ -20,10 +20,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const isProd = process.env.NODE_ENV === "production";
 
 export default {
-  entry: [
+  entry: [path.resolve(__dirname, "assets/js/index.js"), path.resolve(__dirname, "assets/sass/main.scss")],
-    path.resolve(__dirname, "assets/js/index.js"),
-    path.resolve(__dirname, "assets/sass/main.scss"),
-  ],
   mode: isProd ? "production" : "development",
   devtool: isProd ? "source-map" : "inline-source-map",
   output: {
@@ -88,11 +85,7 @@ export default {
                 [
                   "@babel/preset-env",
                   {
-                    include: [
+                    include: ["transform-arrow-functions", "transform-block-scoping", "transform-template-literals"],
-                      "transform-arrow-functions",
-                      "transform-block-scoping",
-                      "transform-template-literals",
-                    ],
                     bugfixes: true,
                     useBuiltIns: "entry",
                     corejs: 3,

yarn.lock

@@ -1220,11 +1220,6 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
-"@types/numeral@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/numeral/-/numeral-2.0.2.tgz#8ea2c4f4e64c0cc948ad7da375f6f827778a7912"
-  integrity sha512-A8F30k2gYJ/6e07spSCPpkuZu79LCnkPTvqmIWQzNGcrzwFKpVOydG41lNt5wZXjSI149qjyzC2L1+F2PD/NUA==
-
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"