diff --git a/.eleventy.js b/.eleventy.js
index d46ceaf3..e3047a71 100644
--- a/.eleventy.js
+++ b/.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')
diff --git a/.eslintignore b/.eslintignore
index a672f40b..6b344e59 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,3 @@
_site/*
-!.eleventy.js
\ No newline at end of file
+!.eleventy.js
+**/yt-lite.js
\ No newline at end of file
diff --git a/package.json b/package.json
index 97718d50..0ff21439 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/scripts/yt-lite.js b/src/assets/scripts/yt-lite.js
new file mode 100644
index 00000000..c18f205f
--- /dev/null
+++ b/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)
diff --git a/src/assets/styles/prism.css b/src/assets/styles/prism.css
index b93736dd..03b96431 100644
--- a/src/assets/styles/prism.css
+++ b/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;
}
@@ -126,8 +115,4 @@ pre[class*='language-'] {
.token.entity {
cursor: help;
-}
-
-.token.namespace {
- opacity: 0.7;
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/yt-lite.css b/src/assets/styles/yt-lite.css
new file mode 100644
index 00000000..a1599590
--- /dev/null
+++ b/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,');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}
\ No newline at end of file
diff --git a/src/posts/2013/arcade-fire-reflektor-999.md b/src/posts/2013/arcade-fire-reflektor-999.md
index 54d70dc4..f004085f 100644
--- a/src/posts/2013/arcade-fire-reflektor-999.md
+++ b/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.
-
+
diff --git a/src/posts/2013/damien-jurado-2014.md b/src/posts/2013/damien-jurado-2014.md
index 54144c6e..9a669e98 100644
--- a/src/posts/2013/damien-jurado-2014.md
+++ b/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. 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.
-
+
diff --git a/src/posts/2013/dawes-most-people.md b/src/posts/2013/dawes-most-people.md
index cdd4c3f8..5879ddb5 100644
--- a/src/posts/2013/dawes-most-people.md
+++ b/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).
-
+
diff --git a/src/posts/2013/nomeansno-live-via-marinet-tvm.md b/src/posts/2013/nomeansno-live-via-marinet-tvm.md
index be9f6230..c56a645a 100644
--- a/src/posts/2013/nomeansno-live-via-marinet-tvm.md
+++ b/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.
-
+
diff --git a/src/posts/2013/okkervil-river-open-mic-night.md b/src/posts/2013/okkervil-river-open-mic-night.md
index 4c3ec1c1..342726b9 100644
--- a/src/posts/2013/okkervil-river-open-mic-night.md
+++ b/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.
-
+
diff --git a/src/posts/2013/skin-and-bones-old-horses.md b/src/posts/2013/skin-and-bones-old-horses.md
index 83ed6228..d908f0ca 100644
--- a/src/posts/2013/skin-and-bones-old-horses.md
+++ b/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)
-
+
diff --git a/src/posts/2013/the-postal-service-some-idealistic-future.md b/src/posts/2013/the-postal-service-some-idealistic-future.md
index 300bb7d5..2890eed2 100644
--- a/src/posts/2013/the-postal-service-some-idealistic-future.md
+++ b/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.
-
+
diff --git a/src/posts/2018/fugazi-turnover-live-1991.md b/src/posts/2018/fugazi-turnover-live-1991.md
index 7f37f228..04f8664d 100644
--- a/src/posts/2018/fugazi-turnover-live-1991.md
+++ b/src/posts/2018/fugazi-turnover-live-1991.md
@@ -5,6 +5,6 @@ title: Fugazi - Turnover (Live 1991)
tags: ['music']
---
-
+
Absolutely classic.
diff --git a/src/posts/2019/waste-of-space-orchestra-seekers-reflection.md b/src/posts/2019/waste-of-space-orchestra-seekers-reflection.md
index 1d87cf17..eed360eb 100644
--- a/src/posts/2019/waste-of-space-orchestra-seekers-reflection.md
+++ b/src/posts/2019/waste-of-space-orchestra-seekers-reflection.md
@@ -5,7 +5,7 @@ title: Waste of Space Orchestra - Seeker's Reflection
tags: ['music']
---
-
+
I could not be more excited for this release.
diff --git a/src/posts/2023/talk-building-now-page-with-11ty.md b/src/posts/2023/talk-building-now-page-with-11ty.md
index 68c80835..946c6b16 100644
--- a/src/posts/2023/talk-building-now-page-with-11ty.md
+++ b/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).
-
+
diff --git a/yarn.lock b/yarn.lock
index 4b50b3c8..7f9936c6 100644
--- a/yarn.lock
+++ b/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"