feat: add support for YouTube embed (#12)

eleventy.config.js

@@ -15,6 +15,7 @@ https://github.com/inclusive-design/acaw-cama/raw/main/LICENSE.md.
 const fluidPlugin = require("eleventy-plugin-fluid");
 const navigationPlugin = require("@11ty/eleventy-navigation");
 const { EleventyI18nPlugin } = require("@11ty/eleventy");
+const getYouTubeID = require("get-youtube-id");
 const title = require("title");
 const rosetta = require("rosetta");
 const i18n = rosetta();
@@ -54,6 +55,9 @@ module.exports = function (eleventyConfig) {
             special: ["ASL", "LSQ"]
         });
     });
+    eleventyConfig.addFilter("youtubeId", function (value) {
+        return getYouTubeID(value);
+    });
 
     // Shortcodes
     eleventyConfig.addShortcode("localizedFormat", function (format, formatLocale, langOverride) {

package.json

@@ -33,9 +33,11 @@
         "@11ty/eleventy-plugin-syntaxhighlight": "5.0.0",
         "@zachleat/filter-container": "greatislander/filter-container#feat/paginated-results",
         "eleventy-plugin-fluid": "2.7.1",
+        "get-youtube-id": "1.0.1",
         "infusion": "4.6.0",
-        "rosetta": "^1.1.0",
-        "title": "^3.5.3"
+        "lite-youtube-embed": "0.3.2",
+        "rosetta": "1.1.0",
+        "title": "3.5.3"
     },
     "devDependencies": {
         "@commitlint/cli": "19.2.1",

src/_includes/i18n/en.js

@@ -37,5 +37,6 @@ module.exports = {
         "asl": "with ASL",
         "lsq": "with LSQ"
     },
-    "search": "Search submissions:"
+    "search": "Search submissions:",
+    "video-transcript": "Video transcript"
 };

src/_includes/i18n/fr.js

@@ -37,5 +37,6 @@ module.exports = {
         "asl": "avec ASL",
         "lsq": "avec LSQ"
     },
-    "search": "Rechercher les soumissions :"
+    "search": "Rechercher les soumissions :",
+    "video-transcript": "Transcription de la vidéo"
 };

src/_includes/layouts/page.njk

@@ -1,9 +1,15 @@
 {% extends "layouts/base.njk" %}
 
 {% block pageHeader %}
-<header>
-    <h1>{{ title }}</h1>
-</header>
+{% if youtube %}
+<lite-youtube videoid="{{ youtube | youtubeId }}" style="background-image: url('https://i.ytimg.com/vi/{{ youtube | youtubeId }}/maxresdefault.jpg');"></lite-youtube>
+{% endif %}
+{% if transcript %}
+<p class="align-end">
+    <a href="{{ transcript }}">{{ 'video-transcript' | i18n }}</a>
+</p>
+{% endif %}
+<h1>{{ title }}</h1>
 {% endblock %}
 
 {% block content %}

src/admin/config.yml

@@ -24,6 +24,8 @@ collections:
     fields:
       - {label: Title, name: title, widget: string, i18n: true}
       - {label: Excerpt, name: excerpt, widget: string, required: false, i18n: true}
+      - {label: YouTube Video, name: youtube, widget: string, type: url, required: false, i18n: true}
+      - {label: YouTube Video Transcript Link, name: transcript, widget: string, type: url, required: false, i18n: true}
       - {label: Body, name: body, widget: markdown, i18n: true}
   - label: Submissions
     label_singular: Submission

src/assets/scripts/app.js

@@ -11,6 +11,7 @@ https://github.com/inclusive-design/acaw-cama/raw/master/LICENSE.md.
 */
 
 import "@zachleat/filter-container";
+import "lite-youtube-embed";
 
 const disclosureBtn = document.querySelector("[aria-expanded]");
 

src/assets/styles/app.css

@@ -120,7 +120,7 @@ h1 {
     font-size: 3rem;
     font-weight: 700;
     line-height: 1.219;
-    margin-block-end: 2.8125rem;
+    margin-block: 5rem 2.8125rem;
 }
 
 h2 {
@@ -150,7 +150,7 @@ label[for="search"] {
 
 [type="search"] {
     appearance: none;
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 23 22"><path stroke="%23000" stroke-width="3" d="M10.438 10.414 21.961 20.89"/><circle cx="9" cy="9" r="7.5" fill="%23D9D9D9" stroke="%23000" stroke-width="3"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 23 22"><path stroke="%23000" stroke-width="3" d="M10.438 10.414 21.961 20.89"/><circle cx="9" cy="9" r="7.5" fill="%23FFF" stroke="%23000" stroke-width="3"/></svg>');
     background-position: 1rem center;
     background-repeat: no-repeat;
     background-size: 20.95px 22px;
@@ -208,6 +208,10 @@ label[for="search"] {
     text-align: start;
 }
 
+.align-end {
+    text-align: end;
+}
+
 .filters [aria-expanded="true"] {
     background-image: url('data:image/svg+xml,<svg viewBox="0 0 8 8" width="36" height="36" xmlns="http://www.w3.org/2000/svg"><rect height="1" width="6" y="3.5" x="1"/></svg>');
 }
@@ -417,6 +421,104 @@ filter-container > * + * {
     margin-block-start: 3.25rem;
 }
 
+lite-youtube {
+    background-color: #000;
+    background-position: center center;
+    background-size: cover;
+    contain: content;
+    cursor: pointer;
+    display: block;
+    inline-size: 100%;
+    margin-block: 6.4375rem 0.75rem;
+    position: relative;
+}
+
+lite-youtube::before {
+    background-image:
+        linear-gradient(
+            180deg,
+            rgb(0 0 0 / 67%) 0%,
+            rgb(0 0 0 / 54%) 14%,
+            rgb(0 0 0 / 15%) 54%,
+            rgb(0 0 0 / 5%) 72%,
+            rgb(0 0 0 / 0%) 94%
+        );
+    block-size: 99px;
+    box-sizing: border-box;
+    color: hsl(0deg 0% 93.33%);
+    content: attr(data-title);
+    display: block;
+    font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
+    font-size: 18px;
+    inline-size: 100%;
+    overflow: hidden;
+    padding-block: 25px;
+    padding-inline: 20px;
+    position: absolute;
+    text-overflow: ellipsis;
+    text-shadow: 0 0 2px rgb(0 0 0 / 50%);
+    top: 0;
+    white-space: nowrap;
+}
+
+lite-youtube:hover::before {
+    color: white;
+}
+
+lite-youtube::after {
+    content: "";
+    display: block;
+    padding-block-end: calc(100% / (16 / 9));
+}
+
+lite-youtube > iframe {
+    block-size: 100%;
+    border: 0;
+    inline-size: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+lite-youtube > .lty-playbtn {
+    background: no-repeat center/68px 48px;
+    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>');
+    block-size: 100%;
+    border: 0;
+    cursor: pointer;
+    display: block;
+    filter: grayscale(100%);
+    inline-size: 100%;
+    position: absolute;
+    transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
+    z-index: 1;
+}
+
+lite-youtube:hover > .lty-playbtn,
+lite-youtube .lty-playbtn:focus {
+    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 {
+    block-size: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    inline-size: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+}
+
 @media (width >= 72rem) {
     .filters > h2 {
         display: block;