make prettier play nice with (almost) everything 👸

.prettierignore

@@ -1,6 +1,5 @@
 # Hugo stuff that doesn't play well with Prettier
 assets/vendor/
-assets/sass/main.scss
 layouts/
 static/
 

.prettierrc

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

.vscode/settings.json

@@ -2,6 +2,9 @@
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   "editor.detectIndentation": true,
+  "editor.rulers": [
+    120
+  ],
   "files.encoding": "utf8",
   "files.eol": "\n",
   "files.insertFinalNewline": true,

assets/js/simple-analytics.js

@@ -51,10 +51,7 @@
 
     if (cryptoObject && cryptoObject.getRandomValues)
       return emptyUUID.replace(/[018]/g, function (c) {
-        return (
+        return (c ^ (cryptoObject.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);
-          c ^
-          (cryptoObject.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
-        ).toString(16);
       });
 
     return emptyUUID.replace(/[018]/g, function (c) {
@@ -103,11 +100,7 @@
           return data[key] != undefinedVar;
         })
         .map(function (key) {
-          return (
+          return encodeURIComponentFunc(key) + "=" + encodeURIComponentFunc(data[key]);
-            encodeURIComponentFunc(key) +
-            "=" +
-            encodeURIComponentFunc(data[key])
-          );
         })
         .join("&");
   }
@@ -156,9 +149,7 @@
   try {
     var getParams = function (regex) {
       // From the search we grab the utm_source and ref and save only that
-      var matches = loc.search.match(
+      var matches = loc.search.match(new RegExp("[?&](" + regex + ")=([^?&]+)", "gi"));
-        new RegExp("[?&](" + regex + ")=([^?&]+)", "gi")
-      );
       var match = matches
         ? matches.map(function (m) {
             return m.split("=")[1];
@@ -218,10 +209,7 @@
       if (push || !(sendBeaconText in nav)) {
         sendData(append);
       } else {
-        nav[sendBeaconText](
+        nav[sendBeaconText](fullApiUrl + "/append", stringify(assign(payload, append)));
-          fullApiUrl + "/append",
-          stringify(assign(payload, append))
-        );
       }
     };
 
@@ -247,11 +235,7 @@
         );
         return Math.min(
           100,
-          Math.round(
+          Math.round((100 * ((documentElement.scrollTop || 0) + documentClientHeight)) / height / 5) * 5
-            (100 * ((documentElement.scrollTop || 0) + documentClientHeight)) /
-              height /
-              5
-          ) * 5
         );
       } catch (error) {
         return 0;
@@ -308,23 +292,15 @@
         perf.getEntriesByType &&
         perf.getEntriesByType(navigation)[0] &&
         perf.getEntriesByType(navigation)[0].type
-          ? ["reload", "back_forward"].indexOf(
+          ? ["reload", "back_forward"].indexOf(perf.getEntriesByType(navigation)[0].type) > -1
-              perf.getEntriesByType(navigation)[0].type
-            ) > -1
           : // Check if back, forward or reload buttons are being use in older browsers
             // 1: TYPE_RELOAD, 2: TYPE_BACK_FORWARD
-            perf &&
+            perf && perf[navigation] && [1, 2].indexOf(perf[navigation].type) > -1;
-            perf[navigation] &&
-            [1, 2].indexOf(perf[navigation].type) > -1;
 
       /** if uniques **/
       // We set unique variable based on pushstate or back navigation, if no match we check the referrer
       data.unique =
-        isPushState || userNavigated
+        isPushState || userNavigated ? false : doc.referrer ? doc.referrer.split(slash)[2] != hostname : true;
-          ? false
-          : doc.referrer
-          ? doc.referrer.split(slash)[2] != hostname
-          : true;
       /** endif **/
 
       page = data;
@@ -340,8 +316,7 @@
 
     var sendEvent = function (event, callbackRaw) {
       var isFunction = event instanceof Function;
-      var callback =
+      var callback = callbackRaw instanceof Function ? callbackRaw : function () {};
-        callbackRaw instanceof Function ? callbackRaw : function () {};
 
       if (validTypes.indexOf(typeof event) < 0 && !isFunction) {
         warn("event is not a string: " + event);
@@ -378,8 +353,7 @@
     };
 
     // Set default function if user didn't define a function
-    if (!window[options.functionName])
+    if (!window[options.functionName]) window[options.functionName] = defaultEventFunc;
-      window[options.functionName] = defaultEventFunc;
 
     var eventFunc = window[options.functionName];
 

assets/sass/abstracts/_functions.scss

@@ -3,10 +3,10 @@
 // Gradient hack to get our custom underline to wrap:
 // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
 @function underline-hack($color) {
-  // Calculate lighter underline color compared to text color by
+  // [deprecated] Calculate lighter underline color compared to text
-  // mix()'ing with background (#fff) to give the impression of
+  // color by mix()'ing with background (#fff) to give the impression
-  // opacity but with MUCH better compatibility.
+  // of opacity but with MUCH better compatibility.
-  $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);
+  // $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);
 
   // Less compatible but better for light/dark mode switching.
   $color-opaque-alpha: rgba($color, $link-underline-opacity / 100%);
@@ -16,22 +16,47 @@
 }
 
 // Web fonts (see components/_fonts.scss)
-@mixin font-face(
+@mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap) {
-  $family,
-  $src,
-  $weight: normal,
-  $style: normal,
-  $display: swap
-) {
   @font-face {
     font-family: $family;
     font-style: $style;
     font-weight: $weight;
     font-display: $display;
-    src: url($base-url + $src + ".woff2") format("woff2"),
+    src: url($base-url + $src + ".woff2") format("woff2"), url($base-url + $src + ".woff") format("woff");
-      url($base-url + $src + ".woff") format("woff");
 
-    // Allow additional declarations to be passed in:
+    // Allow additional rules to be passed in:
     @content;
   }
 }
+
+// Simple dark/light theme switching via <body> class and $themes map in abstracts/_themes.scss
+// https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
+@mixin themed() {
+  @each $theme, $map in $themes {
+    body.#{$theme} & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), "#{$key}");
+        $theme-map: map-merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+// Just @include themed() and call t() when a rule depends on which theme is active, eg:
+//    a {
+//      text-decoration: none;
+//      @include themed() {
+//        color: t(links);
+//      }
+//    }
+@function t($key) {
+  @return map-get($theme-map, $key);
+}

assets/sass/abstracts/_settings.scss

@@ -6,13 +6,10 @@ $webfont-mono: "Hack", monospace;
 
 // System fonts
 // https://markdotto.com/2018/02/07/github-system-fonts/
-$system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+$system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-  "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+  "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
 $system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
+$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
-  "Menlo", "Courier", monospace;
 
 // Width at which to switch to mobile styles
 $responsive-width: 830px;

assets/sass/abstracts/_themes.scss

@@ -189,27 +189,3 @@ $color-logo3: #009cdf;
 $icon-bulb-on: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0ZGRDk4MyIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjRkZDQzREIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
 // lightbulb off
 $icon-bulb-off: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0NDQ0JDQiIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjN0Q3QTcyIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
-
-// https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
-@mixin themed() {
-  @each $theme, $map in $themes {
-    body.#{$theme} & {
-      $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), "#{$key}");
-        $theme-map: map-merge(
-          $theme-map,
-          (
-            $key: $value,
-          )
-        ) !global;
-      }
-      @content;
-      $theme-map: null !global;
-    }
-  }
-}
-
-@function t($key) {
-  @return map-get($theme-map, $key);
-}

assets/sass/components/_fonts.scss

@@ -3,7 +3,6 @@
 // Note to self: got this list after subsetting Inter with glyphhanger:
 // https://github.com/filamentgroup/glyphhanger
 // ex: glyphhanger --whitelist="" --family="Inter" --formats=woff2,woff --subset="*.woff"
-// prettier-ignore
 $unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122;
 
 /*!

assets/sass/components/_syntax.scss

@@ -1,16 +1,18 @@
 @charset "UTF-8";
 
-// all code
+div#content {
-code {
+  // all code
-  font-family: $webfont-mono;
+  code {
-  font-size: 0.95em;
+    font-family: $webfont-mono;
-  letter-spacing: 0;
+    font-size: 0.95em;
-  page-break-inside: avoid;
+    letter-spacing: 0;
-}
+    page-break-inside: avoid;
+  }
 
-// inline code in paragraphs (single tildes)
+  // inline code in paragraphs (single tildes)
-p code {
+  p code {
-  padding: 0 0.15em;
+    padding: 0 0.15em;
+  }
 }
 
 // code fences
@@ -23,10 +25,6 @@ div.highlight {
   margin: 1em 0;
   border: 1px solid;
 
-  @include themed() {
-    border-color: t(light);
-  }
-
   pre {
     padding-left: 1.7em;
   }
@@ -80,6 +78,7 @@ body.light {
   div.highlight {
     color: #464646;
     background-color: #fdfdfd;
+    border: 1px solid #d2d2d2;
 
     .chroma {
       .k,
@@ -153,6 +152,7 @@ body.dark {
   div.highlight {
     color: #dfdfdf;
     background-color: #1f1f1f;
+    border: 1px solid #646464;
 
     .chroma {
       .k,

assets/sass/main.scss

@@ -1,33 +1,37 @@
 @charset "UTF-8";
 
-// all variables set by Hugo's config.toml must go here
+// NOTE: all variables set by Hugo's config.toml MUST go here:
-// stylelint-disable
+// prettier-ignore
-$max-width: {{ printf "%d%s" .Site.Params.pageMaxWidth "px" }};
+$max-width: "{{ printf "%d%s" .Site.Params.pageMaxWidth "px" }}";
-$base-url: "{{ strings.TrimRight "/" .Site.BaseURL }}/";   // consistent trailing forward slash
+$base-url: "{{ strings.TrimRight "/" .Site.BaseURL }}" + "/";
-// stylelint-enable
+
+// those values need quotes because, even though prettier & stylelint are correct
+// in that it's insanely invalid SCSS, they refuse to ignore it. but $max-width is
+// a numerical value that can't have quotes, so let's remove them...
+$max-width: unquote($max-width);
 
 // Variables & Functions
-@import 'abstracts/settings';
+@import "abstracts/functions";
-@import 'abstracts/themes';
+@import "abstracts/settings";
-@import 'abstracts/functions';
+@import "abstracts/themes";
 
 // Global Styles
-@import 'components/fonts';
+@import "components/fonts";
-@import 'components/global';
+@import "components/global";
-@import 'components/header';
+@import "components/header";
-@import 'components/footer';
+@import "components/footer";
-@import 'components/content';
+@import "components/content";
 
 // Pages
-@import 'pages/home';
+@import "pages/home";
-@import 'pages/list';
+@import "pages/list";
-@import 'pages/single';
+@import "pages/single";
-@import 'pages/videos';
+@import "pages/videos";
-@import 'pages/etc';
+@import "pages/etc";
 
 // Responsive Mixins
-@import 'abstracts/responsive';
+@import "abstracts/responsive";
 
 // Miscellaneous
-@import 'components/syntax';
+@import "components/syntax";
-@import 'components/animation';
+@import "components/animation";

content/stats.md

@@ -16,10 +16,10 @@ sitemap:
   priority: 0.3
 ---
 
-<p class="center"><a class="no-underline" href="https://simpleanalytics.com/jarv.is?utm_source=jarv.is&utm_content=badge" target="_blank" rel="noopener"><img src="https://simpleanalyticsbadge.com/jarv.is?counter=true" referrerpolicy="no-referrer" crossorigin="anonymous"></a></p>
+<p class="center"><a class="no-underline" href="https://simpleanalytics.com/jarv.is?utm_source=jarv.is&utm_content=badge" target="_blank" rel="noopener"><img src="https://simpleanalyticsbadge.com/jarv.is?counter=true" alt="Powered by Simple Analytics" referrerpolicy="no-referrer" crossorigin="anonymous"></a></p>
 
 This website uses [**Simple Analytics**](https://simpleanalytics.com/?ref=jarv.is) to track pageviews **without collecting any personally identifiable information,** including IP addresses, cookies, and browser fingerprints.
 
 In that case, why not share them? 😊 Pageviews for the past month are graphed below and more information (top pages, referrers, etc.) can be found [on a publicly-accessible dashboard.](https://simpleanalytics.com/jarv.is?utm_source=jarv.is&utm_content=badge)
 
-<iframe id="sa-graph" src="https://simpleanalytics.com/jarv.is?color=FF4F64&embed=true&graph_id=1" scrolling="no"></iframe>
+<iframe id="sa-graph" src="https://simpleanalytics.com/jarv.is?color=FF4F64&amp;embed=true&amp;graph_id=1" scrolling="no" title="Simple Analytics graph"></iframe>

yarn.lock

@@ -375,9 +375,9 @@ anymatch@~3.1.1:
     picomatch "^2.0.4"
 
 arch@^2.1.0:
-  version "2.1.1"
+  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.2.tgz#0c52bbe7344bb4fa260c443d2cbad9c00ff2f0bf"
-  integrity sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg==
+  integrity sha512-NTBIIbAfkJeIletyABbVtdPgeKfDafR+1mZV/AyyfC1UkVkp9iUjV+wwmqtUgphHYajbI86jejBJp5e+jkGTiQ==
 
 archive-type@^4.0.0:
   version "4.0.0"
@@ -670,9 +670,9 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
 caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001043:
-  version "1.0.30001054"
+  version "1.0.30001055"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz#7e82fc42d927980b0ce1426c4813df12381e1a75"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001055.tgz#7b52c3537f7a8c0408aca867e83d2b04268b54cd"
-  integrity sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==
+  integrity sha512-MbwsBmKrBSKIWldfdIagO5OJWZclpJtS4h0Jrk/4HFrXJxTdVdH23Fd+xCiHriVGvYcWyW8mR/CPsYajlH8Iuw==
 
 caw@^2.0.0, caw@^2.0.1:
   version "2.0.1"
@@ -4220,9 +4220,9 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
 safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.2.0:
-  version "5.2.0"
+  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
-  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
 "safer-buffer@>= 2.1.2 < 3":
   version "2.1.2"