|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright 2023 Google LLC |
| 4 | + * SPDX-License-Identifier: BSD-3-Clause |
| 5 | + */ |
| 6 | + |
| 7 | +const fs = require('fs').promises; |
| 8 | +const path = require('path'); |
| 9 | +const matter = require('gray-matter'); |
| 10 | +const {existsSync} = require('fs'); |
| 11 | + |
| 12 | +const rootSiteDir = path.resolve(__dirname, '..'); |
| 13 | + |
| 14 | +// Note: YouTube thumbnail images can be obtained with |
| 15 | +// https://i.ytimg.com/vi/<video id>/maxresdefault.jpg It should then be checked |
| 16 | +// into the GitHub repository at the native size 1280px by 720px, under the name |
| 17 | +// `images/videos/<video id>_2x.jpg`. Then also check-in a halved resolution |
| 18 | +// 640px by 360px image under the name `images/videos/<video id>.jpg`. |
| 19 | +// |
| 20 | +// Use https://squoosh.app/ to create the halved resolution image. |
| 21 | +const loadVideoData = () => |
| 22 | + [ |
| 23 | + { |
| 24 | + title: 'Declarative Reactive Web Components with Justin Fagnani', |
| 25 | + summary: `Justin covers what Web Components are and how LitElement and lit-html add value on top of the native APIs. This talk covers the fundamentals of how and why Lit is architected the way it is.`, |
| 26 | + youtubeId: '9FB0GSOAESo', |
| 27 | + date: 'Jun 22 2019', |
| 28 | + }, |
| 29 | + { |
| 30 | + title: 'Chat with Lit #1 – Westbrook Johnson (Adobe)', |
| 31 | + summary: `Listen in on this live-recorded Twitter Space episode, hosted by Rody Davis (@rodydavis) and Elliott Marquez (@techytacos), with guest Westbrook Johnson (@WestbrookJ) from Adobe.`, |
| 32 | + youtubeId: 'it-NXhxkOJo', |
| 33 | + date: 'Jul 23 2021', |
| 34 | + }, |
| 35 | + { |
| 36 | + title: 'Lit 2.0 Release Livestream', |
| 37 | + summary: `Lit 2.0 has officially landed! Here we talk about Lit 2.0, what we've been doing, what it means to Google, and what's new. Stay tuned for a panel discussion with Lit users in the industry!`, |
| 38 | + youtubeId: 'nfb779XIhsU', |
| 39 | + date: 'Sep 21 2021', |
| 40 | + }, |
| 41 | + { |
| 42 | + title: 'How to build your first Lit component', |
| 43 | + summary: `Learn how to build your first Lit component and use it with React, Vue, and in a markdown editor.`, |
| 44 | + youtubeId: 'QBa1_QQnRcs', |
| 45 | + date: 'Apr 25 2022', |
| 46 | + }, |
| 47 | + { |
| 48 | + title: 'What are elements?', |
| 49 | + summary: `Software Engineer Elliott Marquez shares what elements are, how to make, and interact with them. Learn about the basic building block of the web in this video!`, |
| 50 | + youtubeId: 'x_mixcGEia4', |
| 51 | + date: 'Apr 27 2022', |
| 52 | + }, |
| 53 | + { |
| 54 | + title: 'How to build a carousel in Lit', |
| 55 | + summary: `In this video, we build a simple-carousel using Lit, letting us explore passing children into your web component, and web component composition.`, |
| 56 | + youtubeId: '2RftvylEtrE', |
| 57 | + date: 'May 3 2022', |
| 58 | + }, |
| 59 | + { |
| 60 | + title: 'Event communication between web components', |
| 61 | + summary: `Follow along as Lit Software Engineer Elliott Marquez shares the pros, cons, and use cases of communicating with events.`, |
| 62 | + youtubeId: 'T9mxtnoy9Qw', |
| 63 | + date: 'May 5 2022', |
| 64 | + }, |
| 65 | + { |
| 66 | + title: 'How to style your Lit elements', |
| 67 | + summary: `We cover how the Shadow DOM works, illustrate the benefits of encapsulated CSS, and show you how to use CSS inheritance, custom properties and shadow parts to expose a flexible public styling API.`, |
| 68 | + youtubeId: 'Xt7blcyuw5s', |
| 69 | + date: 'Oct 3 2022', |
| 70 | + }, |
| 71 | + { |
| 72 | + title: 'Introduction to Lit', |
| 73 | + summary: `Learn all about the Lit library in this beginner-friendly Lit University episode! We will cover all of the essentials, including custom elements, declarative templates, scoped styles, and reactive properties.`, |
| 74 | + youtubeId: 'uzFakwHaSmw', |
| 75 | + date: 'Nov 2 2022', |
| 76 | + }, |
| 77 | + { |
| 78 | + title: 'Lit 3.0 Launch Event', |
| 79 | + summary: `Join the Lit team to hear all about the Lit 3.0 release and what's new in the Lit ecosystem!`, |
| 80 | + youtubeId: 'ri9FEl_hRTc', |
| 81 | + date: 'Oct 10 2023', |
| 82 | + }, |
| 83 | + ].map((videoData) => ({ |
| 84 | + kind: 'video', |
| 85 | + url: `https://www.youtube.com/watch?v=${videoData.youtubeId}`, |
| 86 | + ...videoData, |
| 87 | + date: new Date(videoData.date), |
| 88 | + })); |
| 89 | + |
| 90 | +/** |
| 91 | + * 11ty data JS loader. |
| 92 | + * |
| 93 | + * @returns {Promise<{eleventyComputed: {tutorials: Object[]}}>} 11ty data |
| 94 | + * To be consumed by the tutorials catalog (/tutorials/index.html). |
| 95 | + */ |
| 96 | +module.exports = async () => { |
| 97 | + return loadVideoData(); |
| 98 | +}; |
0 commit comments