chore: update prism + youtube scheme

.eleventy.js

@@ -5,6 +5,7 @@ const pluginFilesMinifier = require('@sherby/eleventy-plugin-files-minifier')
 const schema = require('@quasibit/eleventy-plugin-schema')
 const { eleventyImagePlugin } = require('@11ty/eleventy-img')
 const Image = require('@11ty/eleventy-img')
+const embedYouTube = require('eleventy-plugin-youtube-embed')
 const markdownIt = require('markdown-it')
 const markdownItAnchor = require('markdown-it-anchor')
 const markdownItFootnote = require('markdown-it-footnote')
@@ -25,6 +26,13 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(pluginFilesMinifier)
   eleventyConfig.addPlugin(schema)
   eleventyConfig.addPlugin(eleventyImagePlugin)
+  eleventyConfig.addPlugin(embedYouTube, {
+    modestBranding: true,
+    lite: {
+      'lite.css.path': 'src/assets/styles/yt-lite.css',
+      'lite.js.path': 'src/assets/scripts/yt-lite.js',
+    },
+  })
 
   // tailwind watches
   eleventyConfig.addWatchTarget('./tailwind.config.js')

.eslintignore

@@ -1,2 +1,3 @@
 _site/*
 !.eleventy.js
+**/yt-lite.js

package.json

@@ -45,6 +45,7 @@
     "clean-css": "^5.3.2",
     "dotenv-flow": "^3.2.0",
     "eleventy-plugin-unfurl": "^1.0.0",
+    "eleventy-plugin-youtube-embed": "^1.9.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",

src/assets/scripts/yt-lite.js

@@ -0,0 +1,86 @@
+class LiteYTEmbed extends HTMLElement {
+  connectedCallback() {
+    this.videoId = this.getAttribute('videoid')
+    let e = this.querySelector('.lty-playbtn')
+    if (
+      ((this.playLabel = (e && e.textContent.trim()) || this.getAttribute('playlabel') || 'Play'),
+      this.style.backgroundImage ||
+        (this.style.backgroundImage = `url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`),
+      e ||
+        ((e = document.createElement('button')),
+        (e.type = 'button'),
+        e.classList.add('lty-playbtn'),
+        this.append(e)),
+      !e.textContent)
+    ) {
+      const t = document.createElement('span')
+      ;(t.className = 'lyt-visually-hidden'), (t.textContent = this.playLabel), e.append(t)
+    }
+    e.removeAttribute('href'),
+      this.addEventListener('pointerover', LiteYTEmbed.warmConnections, { once: !0 }),
+      this.addEventListener('click', this.addIframe),
+      (this.needsYTApiForAutoplay =
+        navigator.vendor.includes('Apple') || navigator.userAgent.includes('Mobi'))
+  }
+  static addPrefetch(e, t, i) {
+    const a = document.createElement('link')
+    ;(a.rel = e), (a.href = t), i && (a.as = i), document.head.append(a)
+  }
+  static warmConnections() {
+    LiteYTEmbed.preconnected ||
+      (LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com'),
+      LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com'),
+      LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net'),
+      LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net'),
+      (LiteYTEmbed.preconnected = !0))
+  }
+  fetchYTPlayerApi() {
+    window.YT ||
+      (window.YT && window.YT.Player) ||
+      (this.ytApiPromise = new Promise((e, t) => {
+        var i = document.createElement('script')
+        ;(i.src = 'https://www.youtube.com/iframe_api'),
+          (i.async = !0),
+          (i.onload = (t) => {
+            YT.ready(e)
+          }),
+          (i.onerror = t),
+          this.append(i)
+      }))
+  }
+  async addYTPlayerIframe(e) {
+    this.fetchYTPlayerApi(), await this.ytApiPromise
+    const t = document.createElement('div')
+    this.append(t)
+    const i = Object.fromEntries(e.entries())
+    new YT.Player(t, {
+      width: '100%',
+      videoId: this.videoId,
+      playerVars: i,
+      events: {
+        onReady: (e) => {
+          e.target.playVideo()
+        },
+      },
+    })
+  }
+  async addIframe() {
+    if (this.classList.contains('lyt-activated')) return
+    this.classList.add('lyt-activated')
+    const e = new URLSearchParams(this.getAttribute('params') || [])
+    if ((e.append('autoplay', '1'), e.append('playsinline', '1'), this.needsYTApiForAutoplay))
+      return this.addYTPlayerIframe(e)
+    const t = document.createElement('iframe')
+    ;(t.width = 560),
+      (t.height = 315),
+      (t.title = this.playLabel),
+      (t.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'),
+      (t.allowFullscreen = !0),
+      (t.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(
+        this.videoId
+      )}?${e.toString()}`),
+      this.append(t),
+      t.focus()
+  }
+}
+customElements.define('lite-youtube', LiteYTEmbed)

src/assets/styles/prism.css

@@ -1,121 +1,110 @@
-/*
- * Laserwave Theme originally by Jared Jones for Visual Studio Code
- * https://github.com/Jaredk3nt/laserwave
- *
- * Ported for PrismJS by Simon Jespersen [https://github.com/simjes]
+/**
+ * Catppuccin Prism theme
  */
-
-code[class*='language-'],
-pre[class*='language-'] {
-  background: #27212e;
-  color: #ffffff;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* this is the default */
-  /* The following properties are standard, please leave them as they are */
-  font-size: 1em;
-  direction: ltr;
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #d9e0ee;
+  background: none;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
+  word-wrap: normal;
   line-height: 1.5;
-  -moz-tab-size: 2;
-  -o-tab-size: 2;
-  tab-size: 2;
-  /* The following properties are also standard */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
 }
 
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection,
-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection {
-  background: #eb64b927;
-  color: inherit;
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
 }
 
-code[class*='language-']::selection,
-code[class*='language-'] ::selection,
-pre[class*='language-']::selection,
-pre[class*='language-'] ::selection {
-  background: #eb64b927;
-  color: inherit;
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #1e1d2f;
 }
 
-/* Properties specific to code blocks */
-pre[class*='language-'] {
-  padding: 1em; /* this is standard */
-  margin: 0.5em 0; /* this is the default */
-  overflow: auto; /* this is standard */
-  border-radius: 0.5em;
-}
-
-/* Properties specific to inline code */
-:not(pre) > code[class*='language-'] {
-  padding: 0.2em 0.3em;
-  border-radius: 0.5rem;
-  white-space: normal; /* this is standard */
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
+.token.doctype,
 .token.cdata {
-  color: #91889b;
+  color: #7c7f93;
 }
 
 .token.punctuation {
-  color: #7b6995;
+  color: #dce0e8
 }
 
-.token.builtin,
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
 .token.constant,
-.token.boolean {
-  color: #ffe261;
+.token.symbol,
+.token.deleted {
+  color: #ea76cb;
 }
 
+.token.boolean,
 .token.number {
-  color: #b381c5;
+  color: #8839ef;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #40a02b;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #e6e9ef;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #df8e1d;
+}
+
+.token.keyword {
+  color: #179299;
+}
+
+.token.regex,
+.token.important {
+  color: #fe640b;
 }
 
 .token.important,
-.token.atrule,
-.token.property,
-.token.keyword {
-  color: #40b4c4;
-}
-
-.token.doctype,
-.token.operator,
-.token.inserted,
-.token.tag,
-.token.class-name,
-.token.symbol {
-  color: #74dfc4;
-}
-
-.token.attr-name,
-.token.function,
-.token.deleted,
-.token.selector {
-  color: #eb64b9;
-}
-
-.token.attr-value,
-.token.regex,
-.token.char,
-.token.string {
-  color: #b4dce7;
-}
-
-.token.entity,
-.token.url,
-.token.variable {
-  color: #ffffff;
-}
-
-/* The following rules are pretty similar across themes, but feel free to adjust them */
 .token.bold {
   font-weight: bold;
 }
@@ -127,7 +116,3 @@ pre[class*='language-'] {
 .token.entity {
   cursor: help;
 }
-
-.token.namespace {
-  opacity: 0.7;
-}

src/assets/styles/yt-lite.css

@@ -0,0 +1 @@
+lite-youtube{background-color:#000;position:relative;display:block;contain:content;background-position:center center;background-size:cover;cursor:pointer;max-width:720px}lite-youtube::before{content:'';display:block;position:absolute;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:all .2s cubic-bezier(0, 0, .2, 1)}lite-youtube::after{content:"";display:block;padding-bottom:calc(100% / (16 / 9))}lite-youtube>iframe{width:100%;height:100%;position:absolute;top:0;left:0;border:0}lite-youtube>.lty-playbtn{display:block;width:68px;height:48px;position:absolute;cursor:pointer;transform:translate3d(-50%,-50%,0);top:50%;left:50%;z-index:1;background-color:transparent;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');filter:grayscale(100%);transition:filter .1s cubic-bezier(0, 0, .2, 1);border:none}lite-youtube .lty-playbtn:focus,lite-youtube:hover>.lty-playbtn{filter:none}lite-youtube.lyt-activated{cursor:unset}lite-youtube.lyt-activated::before,lite-youtube.lyt-activated>.lty-playbtn{opacity:0;pointer-events:none}.lyt-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}

src/posts/2013/arcade-fire-reflektor-999.md

@@ -7,4 +7,4 @@ tags: ['music']
 
 This sample sounds promising. I can't wait to hear more from _Reflektor_ on the 9th.<!-- excerpt -->
 
-<iframe class="aspect-video w-full" width="640" height="480" src="//www.youtube.com/embed/4i2wp3GkNrg?rel=0" frameborder="0" allowfullscreen></iframe>
+<https://www.youtube.com/watch?v=4i2wp3GkNrg>

src/posts/2013/damien-jurado-2014.md

@@ -7,4 +7,4 @@ tags: ['music']
 
 Damien Jurado has been one of my favorite musicians for years. He's a talented, albeit nervous, performer and a gifted songwriter.<!-- excerpt --> The announcement that he'll have a new record out in 2014 is exciting and something that I am very much looking forward to. If the new material he played live when I saw him at the Bootleg Theater in April is any indication it should be even more experimental and unique than _Maraqopa_. I cannot wait to hear it.
 
-<iframe class="aspect-video w-full" width="640" height="480" src="//www.youtube.com/embed/NNpAj1U1_5Q" frameborder="0" allowfullscreen></iframe>
+<https://www.youtube.com/watch?v=NNpAj1U1_5Q>

src/posts/2013/dawes-most-people.md

@@ -9,4 +9,4 @@ A wonderful new video for one of the highlights of Dawes' most recent album _Sto
 
 Damien Jurado gave "Museum of Flight" off of _Maraqopa_ a similar treatment that's also very [much worth checking out](https://www.youtube.com/watch?v=CCcAKNSJ3Ac).
 
-<iframe class="aspect-video w-full" width="640" height="360" src="//www.youtube.com/embed/zUWu8Ny36dc" frameborder="0" allowfullscreen></iframe>
+<https://www.youtube.com/watch?v=zUWu8Ny36dc>

src/posts/2013/nomeansno-live-via-marinet-tvm.md

@@ -7,4 +7,4 @@ tags: ['music', 'video']
 
 One of punk's greatest bands live via Marinet TVM. I still need to see them live and sincerely hope I get the chance to before they hang things up. Superb performance.<!-- excerpt -->
 
-<iframe class="aspect-video w-full" width="640" height="360" src="//www.youtube.com/embed/euTMEIqTTfk" frameborder="0" allowfullscreen></iframe>
+<https://www.youtube.com/watch?v=euTMEIqTTfk>

src/posts/2013/okkervil-river-open-mic-night.md

@@ -7,4 +7,4 @@ tags: ['video', 'music']
 
 Not out of place at all at an open mic night. Excellent.<!-- excerpt -->
 
-<iframe class="aspect-video w-full" width="640" height="360" src="//www.youtube.com/embed/_GnemKx1tlk" frameborder="0" allowfullscreen></iframe>
+<https://www.youtube.com/watch?v=_GnemKx1tlk>

src/posts/2013/skin-and-bones-old-horses.md

@@ -9,4 +9,4 @@ Beautiful, stripped down song from a musician with a strong voice and truly hear
 
 [Grab his album here »](http://skinandbonesmusic.bandcamp.com)
 
-<iframe class="aspect-video w-full" width="640" height="360" src="//www.youtube.com/embed/wB52fQkjZkE" frameborder="0" allowfullscreen></iframe>
+<https://www.youtube.com/watch?v=wB52fQkjZkE>

src/posts/2013/the-postal-service-some-idealistic-future.md

@@ -7,4 +7,4 @@ tags: ['music', 'video']
 
 A well-produced documentary and a great look at a band who, ten years later (and after only one album), still means so much to so many people.<!-- excerpt -->
 
-<iframe class="aspect-video w-full" width="640" height="360" src="//www.youtube.com/embed/MoSP7lNJTqk" frameborder="0" allowfullscreen></iframe>
+<https://www.youtube.com/watch?v=MoSP7lNJTqk>

src/posts/2018/fugazi-turnover-live-1991.md

@@ -5,6 +5,6 @@ title: Fugazi - Turnover (Live 1991)
 tags: ['music']
 ---
 
-<iframe class="aspect-video w-full" allowFullScreen="allowFullScreen" src="https://www.youtube.com/embed/gzC0RNkBXM0?ecver=1&amp;iv_load_policy=3&amp;rel=0&amp;yt:stretch=16:9&amp;autohide=1&amp;color=red&amp;" allowtransparency="true" frameborder="0"></iframe>
+<https://www.youtube.com/watch?v=gzC0RNkBXM0>
 
 Absolutely classic.<!-- excerpt -->

src/posts/2019/waste-of-space-orchestra-seekers-reflection.md

@@ -5,7 +5,7 @@ title: Waste of Space Orchestra - Seeker's Reflection
 tags: ['music']
 ---
 
-<iframe class="aspect-video w-full" width="560" height="315" src="https://www.youtube-nocookie.com/embed/V8ia-nyd_K8?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<https://www.youtube.com/watch?v=V8ia-nyd_K8>
 
 I could not be more excited for this release.
 

src/posts/2023/talk-building-now-page-with-11ty.md

@@ -7,4 +7,4 @@ tags: ['Eleventy', 'JavaScript', 'automation']
 
 My talk from the Eleventy meetup about building [my now page](https://coryd.dev/now) (you even get to see how much I resemble my avatar).<!-- excerpt -->
 
-<iframe class="aspect-video w-full" width="640" height="480" src="//www.youtube.com/embed/AzcFZJYEpnQ" frameborder="0" allowfullscreen></iframe>
+<https://www.youtube.com/watch?v=AzcFZJYEpnQ>

yarn.lock

@@ -1675,7 +1675,7 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^4.2.2:
+deepmerge@^4.2.2, deepmerge@^4.3.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -1890,6 +1890,14 @@ eleventy-plugin-unfurl@^1.0.0:
     "@11ty/eleventy" "^1.0.0"
     "@11ty/eleventy-fetch" "^3.0.0"
 
+eleventy-plugin-youtube-embed@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/eleventy-plugin-youtube-embed/-/eleventy-plugin-youtube-embed-1.9.0.tgz#4ade03208b5721b3456cc5cfe9c7a48fa5aca49e"
+  integrity sha512-jrFaYk8mgzI96iGixZlWk404/y+VBSEIMOmOEnmfumP35XGguACW+433ms4xYDbhM/Aa+Q/gKoQP4NbSX5kUHg==
+  dependencies:
+    deepmerge "^4.3.0"
+    lite-youtube-embed "^0.2.0"
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -3446,6 +3454,11 @@ listr2@^5.0.7:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+lite-youtube-embed@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/lite-youtube-embed/-/lite-youtube-embed-0.2.0.tgz#db95eab9dd448f02e83de906383350a8033d54fe"
+  integrity sha512-XXXAk5sbvtjjwbie3XG+6HppgTm1HTGL/Uk9z9NkJH53o7puZLur434heHzAjkS60hZB3vT4ls25zl5rMiX4EA==
+
 localtunnel@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/localtunnel/-/localtunnel-2.0.2.tgz#528d50087151c4790f89c2db374fe7b0a48501f0"