add Prettier to workflow 🎀 (#128)

* prettier init * prettier ignore * run on everything 😬 * add prettier check script * update deps * Update .prettierignore
2025-07-17 16:45:31 -04:00 · 2020-05-06 12:19:21 -04:00
parent 739f161183
commit 323b3dd9f6
43 changed files with 856 additions and 454 deletions
--- a/assets/js/dark-mode.js
+++ b/assets/js/dark-mode.js
@@ -1,5 +1,3 @@
-/* jshint esversion: 6, indent: 2, browser: true, quotmark: single */
-
 /*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */

 (function () {
@@ -11,27 +9,27 @@
  var storage = localStorage;

  // check for preset `dark_mode_pref` preference in local storage
-  var pref_key = 'dark_mode_pref';
+  var pref_key = "dark_mode_pref";
  var pref = storage.getItem(pref_key);

  // change CSS via these <body> classes:
-  var dark = 'dark';
-  var light = 'light';
+  var dark = "dark";
+  var light = "light";

  // which class is <body> set to initially?
  var default_theme = light;

  // use an element with class `dark-mode-toggle` to trigger swap when clicked
-  var toggle = doc.querySelector('.dark-mode-toggle');
+  var toggle = doc.querySelector(".dark-mode-toggle");

  // keep track of current state no matter how we got there
-  var active = (default_theme === dark);
+  var active = default_theme === dark;

  // receives a class name and switches <body> to it
  var activateTheme = function (theme) {
    classes.remove(dark, light);
    classes.add(theme);
-    active = (theme === dark);
+    active = theme === dark;
  };

  // if user already explicitly toggled in the past, restore their preference
@@ -42,42 +40,47 @@
  if (!pref) {
    // returns media query selector syntax
    var prefers = function (theme) {
-      return '(prefers-color-scheme: ' + theme + ')';
+      return "(prefers-color-scheme: " + theme + ")";
    };

    // check for OS dark/light mode preference and switch accordingly
    // default to `default_theme` set above if unsupported
-    if (win.matchMedia(prefers(dark)).matches)
-      activateTheme(dark);
-    else if (win.matchMedia(prefers(light)).matches)
-      activateTheme(light);
-    else
-      activateTheme(default_theme);
+    if (win.matchMedia(prefers(dark)).matches) activateTheme(dark);
+    else if (win.matchMedia(prefers(light)).matches) activateTheme(light);
+    else activateTheme(default_theme);

    // real-time switching if supported by OS/browser
-    win.matchMedia(prefers(dark)).addListener(function (e) { if (e.matches) activateTheme(dark); });
-    win.matchMedia(prefers(light)).addListener(function (e) { if (e.matches) activateTheme(light); });
+    win.matchMedia(prefers(dark)).addListener(function (e) {
+      if (e.matches) activateTheme(dark);
+    });
+    win.matchMedia(prefers(light)).addListener(function (e) {
+      if (e.matches) activateTheme(light);
+    });
  }

  // don't freak out if page happens not to have a toggle
  if (toggle) {
    // toggle re-appears now that we know user has JS enabled
-    toggle.style.visibility = 'visible';
+    toggle.style.visibility = "visible";

    // handle toggle click
-    toggle.addEventListener('click', function () {
-      // switch to the opposite theme & save preference in local storage
-      if (active) {
-        activateTheme(light);
-        storage.setItem(pref_key, light);
-        // send event to SA
-        sa_event('triggered_light_mode');
-      } else {
-        activateTheme(dark);
-        storage.setItem(pref_key, dark);
-        // send event to SA
-        sa_event('triggered_dark_mode');
-      }
-    }, true);
+    toggle.addEventListener(
+      "click",
+      function () {
+        // switch to the opposite theme & save preference in local storage
+        if (active) {
+          activateTheme(light);
+          storage.setItem(pref_key, light);
+          // send event to SA
+          sa_event("triggered_light_mode"); // eslint-disable-line no-undef
+        } else {
+          activateTheme(dark);
+          storage.setItem(pref_key, dark);
+          // send event to SA
+          sa_event("triggered_dark_mode"); // eslint-disable-line no-undef
+        }
+      },
+      true
+    );
  }
 })();
--- a/assets/js/simple-analytics.js
+++ b/assets/js/simple-analytics.js
@@ -1,5 +1,3 @@
-/* jshint browser: true, laxbreak:true, -W080 */
-
 /*! Simple Analytics - Privacy friendly analytics (docs.simpleanalytics.com/script; 2020-05-03; d98d) */
 // https://github.com/simpleanalytics/scripts/blob/915d98d39868cbb578619f64b5e2374a5af60c2b/src/default.js

@@ -340,8 +338,6 @@
    var sessionId = uuid();
    var validTypes = ["string", "number"];

-    var endEvent = function () {};
-
    var sendEvent = function (event, callbackRaw) {
      var isFunction = event instanceof Function;
      var callback =
--- a/assets/sass/abstracts/_functions.scss
+++ b/assets/sass/abstracts/_functions.scss
@@ -16,14 +16,20 @@
 }

 // Web fonts (see components/_fonts.scss)
-@mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap) {
+@mixin font-face(
+  $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"),
-         url($base-url + $src + ".woff") format("woff");    // stylelint-disable-line indentation
+      url($base-url + $src + ".woff") format("woff");

    // Allow additional declarations to be passed in:
    @content;
--- a/assets/sass/abstracts/_settings.scss
+++ b/assets/sass/abstracts/_settings.scss
@@ -6,15 +6,13 @@ $webfont-mono: "Hack", monospace;

 // System fonts
 // https://markdotto.com/2018/02/07/github-system-fonts/
-// stylelint-disable indentation
 $system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-               "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-               "Droid Sans", "Helvetica Neue", sans-serif,
-               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+  "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",
-               "Menlo", "Courier", monospace;
-// stylelint-enable indentation
+  "Menlo", "Courier", monospace;

 // Width at which to switch to mobile styles
 $responsive-width: 830px;
--- a/assets/sass/abstracts/_themes.scss
+++ b/assets/sass/abstracts/_themes.scss
@@ -3,45 +3,45 @@
 // Dark & Light Themes
 $themes: (
  light: (
-    color-background:   #ffffff,
-    color-text:         #202020,
-    color-medium-dark:  #494949,
-    color-medium:       #5e5e5e,
+    color-background: #ffffff,
+    color-text: #202020,
+    color-medium-dark: #494949,
+    color-medium: #5e5e5e,
    color-medium-light: #757575,
-    color-light:        #d2d2d2,
-    color-kinda-light:  #e3e3e3,
-    color-super-light:  #f4f4f4,
+    color-light: #d2d2d2,
+    color-kinda-light: #e3e3e3,
+    color-super-light: #f4f4f4,
    color-super-duper-light: #fbfbfb,
-    color-links:        #0e6dc2,
-    syntax-k:           #0e6dc2,
-    syntax-n:           #111111,
-    syntax-na:          #337a15,
-    syntax-err:         #d43d2e,
-    syntax-l:           #8d4eff,
-    syntax-ld:          #bd5500,
-    syntax-c:           #6b6859,
-    syntax-lnt:         #999999
+    color-links: #0e6dc2,
+    syntax-k: #0e6dc2,
+    syntax-n: #111111,
+    syntax-na: #337a15,
+    syntax-err: #d43d2e,
+    syntax-l: #8d4eff,
+    syntax-ld: #bd5500,
+    syntax-c: #6b6859,
+    syntax-lnt: #999999,
  ),
  dark: (
-    color-background:   #292929,
-    color-text:         #efefef,
-    color-medium-dark:  #cfcfcf,
-    color-medium:       #b1b1b1,
+    color-background: #292929,
+    color-text: #efefef,
+    color-medium-dark: #cfcfcf,
+    color-medium: #b1b1b1,
    color-medium-light: #929292,
-    color-light:        #646464,
-    color-kinda-light:  #535353,
-    color-super-light:  #272727,
+    color-light: #646464,
+    color-kinda-light: #535353,
+    color-super-light: #272727,
    color-super-duper-light: #1f1f1f,
-    color-links:        #85baea,
-    syntax-k:           #3b9dd2,
-    syntax-n:           #cfcfcf,
-    syntax-na:          #78df55,
-    syntax-err:         #f95757,
-    syntax-l:           #d588fb,
-    syntax-ld:          #fd992a,
-    syntax-c:           #929292,
-    syntax-lnt:         #b1b1b1
-  )
+    color-links: #85baea,
+    syntax-k: #3b9dd2,
+    syntax-n: #cfcfcf,
+    syntax-na: #78df55,
+    syntax-err: #f95757,
+    syntax-l: #d588fb,
+    syntax-ld: #fd992a,
+    syntax-c: #929292,
+    syntax-lnt: #b1b1b1,
+  ),
 );

 $color-light-background: #fbfbfb;
@@ -53,43 +53,151 @@ $color-logo2: #ffb900;
 $color-logo3: #009cdf;

 // Colorful Homepage
-$colors-home:(
-  boston:     (light: #fb4d42, dark: #ff5146),
-  jamstack:   (light: #04a699, dark: #08bbac),
-  javascript: (light: #f48024, dark: #e18431),
-  node:       (light: #6fbc4e, dark: #84d95f),
-  golang:     (light: #00acd7, dark: #2ad1fb),
-  react:      (light: #4fb3cd, dark: #6fcbe3),
-  angular:    (light: #c3002f, dark: #f95757),
-  php:        (light: #8892bf, dark: #a4afe3),
-  ruby:       (light: #d34135, dark: #f95a4d),
-  python:     (light: #fea500, dark: #ffbb3c),
-  java:       (light: #ab6311, dark: #e86a2c),
-  infosec:    (light: #00b81a, dark: #57f06d),
-  server:     (light: #0098ec, dark: #43b9fb),
-  devops:     (light: #ff6200, dark: #f46c16),
-  containers: (light: #c48f49, dark: #ca9249),
-  y2k:        (light: #4169e1, dark: #8ca9ff),
-  jbb:        (light: #9932cc, dark: #d588fb),
-  birthday:   (light: #e40088, dark: #fd40b1),
-  github:     (light: #8d4eff, dark: #a379f0),
-  linkedin:   (light: #0073b1, dark: #3b9dd2),
-  twitter:    (light: #00acee, dark: #3bc9ff),
-  dm:         (light: #00acee, dark: #3bc9ff),
-  facebook:   (light: #4267b2, dark: #5f8dec),
-  instagram:  (light: #a37754, dark: #c49169),
-  mastodon:   (light: #6d8ca7, dark: #87b0d5),
-  resume:     (light: #d54b3d, dark: #f46151),
-  email:      (light: #de0c0c, dark: #ff5050),
-  pgp:        (light: #757575, dark: #979797),
-  sms:        (light: #6fcc01, dark: #8edb34),
-  news-1:     (light: #ff1b1b, dark: #f06060),
-  news-2:     (light: #f78200, dark: #fd992a),
-  news-3:     (light: #f2b702, dark: #ffcc2e),
-  news-4:     (light: #5ebd3e, dark: #78df55),
-  news-5:     (light: #009cdf, dark: #29bfff),
-  news-6:     (light: #3e49bb, dark: #7b87ff),
-  news-7:     (light: #973999, dark: #db60dd)
+$colors-home: (
+  boston: (
+    light: #fb4d42,
+    dark: #ff5146,
+  ),
+  jamstack: (
+    light: #04a699,
+    dark: #08bbac,
+  ),
+  javascript: (
+    light: #f48024,
+    dark: #e18431,
+  ),
+  node: (
+    light: #6fbc4e,
+    dark: #84d95f,
+  ),
+  golang: (
+    light: #00acd7,
+    dark: #2ad1fb,
+  ),
+  react: (
+    light: #4fb3cd,
+    dark: #6fcbe3,
+  ),
+  angular: (
+    light: #c3002f,
+    dark: #f95757,
+  ),
+  php: (
+    light: #8892bf,
+    dark: #a4afe3,
+  ),
+  ruby: (
+    light: #d34135,
+    dark: #f95a4d,
+  ),
+  python: (
+    light: #fea500,
+    dark: #ffbb3c,
+  ),
+  java: (
+    light: #ab6311,
+    dark: #e86a2c,
+  ),
+  infosec: (
+    light: #00b81a,
+    dark: #57f06d,
+  ),
+  server: (
+    light: #0098ec,
+    dark: #43b9fb,
+  ),
+  devops: (
+    light: #ff6200,
+    dark: #f46c16,
+  ),
+  containers: (
+    light: #c48f49,
+    dark: #ca9249,
+  ),
+  y2k: (
+    light: #4169e1,
+    dark: #8ca9ff,
+  ),
+  jbb: (
+    light: #9932cc,
+    dark: #d588fb,
+  ),
+  birthday: (
+    light: #e40088,
+    dark: #fd40b1,
+  ),
+  github: (
+    light: #8d4eff,
+    dark: #a379f0,
+  ),
+  linkedin: (
+    light: #0073b1,
+    dark: #3b9dd2,
+  ),
+  twitter: (
+    light: #00acee,
+    dark: #3bc9ff,
+  ),
+  dm: (
+    light: #00acee,
+    dark: #3bc9ff,
+  ),
+  facebook: (
+    light: #4267b2,
+    dark: #5f8dec,
+  ),
+  instagram: (
+    light: #a37754,
+    dark: #c49169,
+  ),
+  mastodon: (
+    light: #6d8ca7,
+    dark: #87b0d5,
+  ),
+  resume: (
+    light: #d54b3d,
+    dark: #f46151,
+  ),
+  email: (
+    light: #de0c0c,
+    dark: #ff5050,
+  ),
+  pgp: (
+    light: #757575,
+    dark: #979797,
+  ),
+  sms: (
+    light: #6fcc01,
+    dark: #8edb34,
+  ),
+  news-1: (
+    light: #ff1b1b,
+    dark: #f06060,
+  ),
+  news-2: (
+    light: #f78200,
+    dark: #fd992a,
+  ),
+  news-3: (
+    light: #f2b702,
+    dark: #ffcc2e,
+  ),
+  news-4: (
+    light: #5ebd3e,
+    dark: #78df55,
+  ),
+  news-5: (
+    light: #009cdf,
+    dark: #29bfff,
+  ),
+  news-6: (
+    light: #3e49bb,
+    dark: #7b87ff,
+  ),
+  news-7: (
+    light: #973999,
+    dark: #db60dd,
+  ),
 );
 $color-serverless: #87cef7;

@@ -106,7 +214,12 @@ $icon-bulb-off: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtb
      $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;
+        $theme-map: map-merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
      }
      @content;
      $theme-map: null !global;
--- a/assets/sass/components/_animation.scss
+++ b/assets/sass/components/_animation.scss
@@ -8,26 +8,50 @@

 .beat {
  display: inline-block;
-  animation: beat 2s infinite;   // 30 bpm, call 911 if you see this please.
+  animation: beat 2s infinite; // 30 bpm, call 911 if you see this please.
 }

-// stylelint-disable indentation
@keyframes wave {
-  0% { transform: rotate(  0deg); }
- 10% { transform: rotate(-10deg); }
- 20% { transform: rotate( 12deg); }
- 30% { transform: rotate(-10deg); }
- 40% { transform: rotate(  9deg); }
- 50% { transform: rotate(  0deg); }
-100% { transform: rotate(  0deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  10% {
+    transform: rotate(-10deg);
+  }
+  20% {
+    transform: rotate(12deg);
+  }
+  30% {
+    transform: rotate(-10deg);
+  }
+  40% {
+    transform: rotate(9deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
 }

@keyframes beat {
-  0% { transform: scale(1);    }
- 10% { transform: scale(1.25); }
- 20% { transform: scale(1);    }
- 30% { transform: scale(1.25); }
- 40% { transform: scale(1);    }
-100% { transform: scale(1);    }
+  0% {
+    transform: scale(1);
+  }
+  10% {
+    transform: scale(1.25);
+  }
+  20% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(1.25);
+  }
+  40% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
-// stylelint-enable indentation
--- a/assets/sass/components/_content.scss
+++ b/assets/sass/components/_content.scss
@@ -1,7 +1,7 @@
@charset "UTF-8";

 div#content {
-  font-size: 0.935em;   // ~15px
+  font-size: 0.935em; // ~15px
  letter-spacing: -0.008em;
  line-height: 1.7;

--- a/assets/sass/components/_fonts.scss
+++ b/assets/sass/components/_fonts.scss
@@ -3,6 +3,7 @@
 // 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;

 /*!
--- a/assets/sass/components/_global.scss
+++ b/assets/sass/components/_global.scss
@@ -17,7 +17,7 @@ main {
  margin: 0 auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
-  display: block;   // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
+  display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11

  @include themed() {
    color: t(color-text);
--- a/assets/sass/components/_syntax.scss
+++ b/assets/sass/components/_syntax.scss
@@ -2,37 +2,92 @@

 /*! Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */
 div.highlight span {
-  &.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no {
+  &.k,
+  &.kc,
+  &.kd,
+  &.kp,
+  &.kr,
+  &.kt,
+  &.no {
    @include themed() {
      color: t(syntax-k);
    }
  }
-  &.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p {
+  &.n,
+  &.bp,
+  &.nb,
+  &.ni,
+  &.fm,
+  &.nl,
+  &.nn,
+  &.py,
+  &.nv,
+  &.vc,
+  &.vg,
+  &.vi,
+  &.vm,
+  &.p {
    @include themed() {
      color: t(syntax-n);
    }
  }
-  &.na, &.nc, &.nd, &.ne, &.nf, &.nx {
+  &.na,
+  &.nc,
+  &.nd,
+  &.ne,
+  &.nf,
+  &.nx {
    @include themed() {
      color: t(syntax-na);
    }
  }
-  &.err, &.nt, &.o, &.ow, &.kn {
+  &.err,
+  &.nt,
+  &.o,
+  &.ow,
+  &.kn {
    @include themed() {
      color: t(syntax-err);
    }
  }
-  &.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo {
+  &.l,
+  &.se,
+  &.m,
+  &.mb,
+  &.mf,
+  &.mh,
+  &.mi,
+  &.il,
+  &.mo {
    @include themed() {
      color: t(syntax-l);
    }
  }
-  &.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss {
+  &.ld,
+  &.s,
+  &.sa,
+  &.sb,
+  &.sc,
+  &.dl,
+  &.sd,
+  &.s2,
+  &.sh,
+  &.si,
+  &.sx,
+  &.sr,
+  &.s1,
+  &.ss {
    @include themed() {
      color: t(syntax-ld);
    }
  }
-  &.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf {
+  &.c,
+  &.ch,
+  &.cm,
+  &.c1,
+  &.cs,
+  &.cp,
+  &.cpf {
    @include themed() {
      color: t(syntax-c);
    }
--- a/assets/sass/pages/_home.scss
+++ b/assets/sass/pages/_home.scss
@@ -63,8 +63,8 @@ main#home {

    // easter egg emoji cursor
    &#birthday {
+      // prettier-ignore
      &:hover {
-        // stylelint-disable-next-line function-url-quotes
        cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
      }
    }
--- a/assets/sass/pages/_single.scss
+++ b/assets/sass/pages/_single.scss
@@ -27,7 +27,7 @@ main#single {
  h1#title {
    margin-top: 0.3em;
    margin-bottom: 0.6em;
-    margin-left: -0.03em;  // TODO: why is this indented slightly?
+    margin-left: -0.03em; // TODO: why is this indented slightly?
    font-size: 2.2em;
    line-height: 1.3;
    font-weight: 700;
--- a/assets/vendor/emoji/emoji.js
+++ b/assets/vendor/emoji/emoji.js
@@ -1,5 +1,3 @@
-/* jshint indent: 2, browser: true, bitwise: true, plusplus: true */
-
 /*! Copyright Twitter Inc. and other contributors. Licensed under MIT *//*
    https://github.com/twitter/twemoji/blob/gh-pages/LICENSE
  */
@@ -7,13 +5,8 @@
 (function () {
  'use strict';

-  /* jshint maxparams:4 */
-
-  var
-    // the exported module object
-    emoji = {
-
-
+  // the exported module object
+  var emoji = {
    /////////////////////////
    //      properties     //
    /////////////////////////