chore: update prism + youtube scheme

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;
 }
@@ -126,8 +115,4 @@ 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}