centralize articles, video, and external data into global 11ty data (#…

…1265)

* centralize articles, video, and external data into global 11ty data

* Delete tutorials index.html and
tutorials.11tydata.js

* Update .prettierignore file.

* address PR suggestions

* update screenshot golden

* Remove gray-matter from devDependencies.

package.json

@@ -61,7 +61,6 @@
     }
   },
   "devDependencies": {
-    "gray-matter": "^4.0.3",
     "playground-elements": "^0.18.0",
     "prettier": "^2.1.2",
     "typescript": "~4.7.4",

packages/lit-dev-content/site/_data/externalSearchData.json

@@ -0,0 +1,13 @@
+[
+  {
+    "relativeUrl": "https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals",
+    "title": "ElementInternals",
+    "heading": "",
+    "text": "The ElementInternals interface of the Document Object Model gives web developers a way to allow custom elements to fully participate in HTML forms. It provides utilities for working with these elements in the same way you would work with any standard HTML form element, and also exposes the Accessibility Object Model to the element.",
+    "docType": {
+      "type": "MDN",
+      "tag": "other"
+    },
+    "isExternal": true
+  }
+]

packages/lit-dev-content/site/tutorials/tutorials.11tydata.js → packages/lit-dev-content/site/_data/tutorials.js

@@ -18,7 +18,7 @@ const path = require('path');
  * @typedef {{
  *  featured: FeaturedOptions,
  * }} LoadDataOptions
-*/
+ */
 
 /** @type{LoadDataOptions} */
 const defaultOptions = {featured: {position: undefined}};
@@ -33,7 +33,7 @@ const defaultOptions = {featured: {position: undefined}};
  *     /tutorials/index.html
  */
 const loadTutorialData = async (dirname, options = defaultOptions) => {
-  options = {...defaultOptions, ...options}
+  options = {...defaultOptions, ...options};
   const tutorialDir = path.resolve(
     __dirname,
     '../../samples/tutorials',
@@ -63,27 +63,25 @@ const loadTutorialData = async (dirname, options = defaultOptions) => {
  *   To be consumed by the tutorials catalog (/tutorials/index.html).
  */
 module.exports = async () => {
-  const tutorials = await Promise.all([
+  /*
+   * tutorial data in order of rendering on the page plus stringified JSON for
+   * search indexing.
+   */
+  return await Promise.all([
     // Learn
     loadTutorialData('intro-to-lit', {featured: {position: 0}}),
     loadTutorialData('working-with-lists', {featured: {position: 1}}),
     loadTutorialData('reactivity'),
     loadTutorialData('custom-attribute-converter'),
     loadTutorialData('async-directive'),
 
-
     // Build
     loadTutorialData('svg-templates'),
     loadTutorialData('tooltip'),
     loadTutorialData('carousel', {featured: {position: 2}}),
     loadTutorialData('word-viewer'),
 
     // Draft
-    loadTutorialData('wc-to-lit'),
+    // loadTutorialData('wc-to-lit'),
   ]);
-  /*
-   * tutorial data in order of rendering on the page plus stringified JSON for
-   * search indexing.
-   */
-  return {eleventyComputed: {tutorials}};
 };

packages/lit-dev-content/site/_data/videos.js

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+const fs = require('fs').promises;
+const path = require('path');
+const matter = require('gray-matter');
+const {existsSync} = require('fs');
+
+const rootSiteDir = path.resolve(__dirname, '..');
+
+// Note: YouTube thumbnail images can be obtained with
+// https://i.ytimg.com/vi/<video id>/maxresdefault.jpg It should then be checked
+// into the GitHub repository at the native size 1280px by 720px, under the name
+// `images/videos/<video id>_2x.jpg`. Then also check-in a halved resolution
+// 640px by 360px image under the name `images/videos/<video id>.jpg`.
+//
+// Use https://squoosh.app/ to create the halved resolution image.
+const loadVideoData = () =>
+  [
+    {
+      title: 'Declarative Reactive Web Components with Justin Fagnani',
+      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.`,
+      youtubeId: '9FB0GSOAESo',
+      date: 'Jun 22 2019',
+    },
+    {
+      title: 'Chat with Lit #1 – Westbrook Johnson (Adobe)',
+      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.`,
+      youtubeId: 'it-NXhxkOJo',
+      date: 'Jul 23 2021',
+    },
+    {
+      title: 'Lit 2.0 Release Livestream',
+      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!`,
+      youtubeId: 'nfb779XIhsU',
+      date: 'Sep 21 2021',
+    },
+    {
+      title: 'How to build your first Lit component',
+      summary: `Learn how to build your first Lit component and use it with React, Vue, and in a markdown editor.`,
+      youtubeId: 'QBa1_QQnRcs',
+      date: 'Apr 25 2022',
+    },
+    {
+      title: 'What are elements?',
+      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!`,
+      youtubeId: 'x_mixcGEia4',
+      date: 'Apr 27 2022',
+    },
+    {
+      title: 'How to build a carousel in Lit',
+      summary: `In this video, we build a simple-carousel using Lit, letting us explore passing children into your web component, and web component composition.`,
+      youtubeId: '2RftvylEtrE',
+      date: 'May 3 2022',
+    },
+    {
+      title: 'Event communication between web components',
+      summary: `Follow along as Lit Software Engineer Elliott Marquez shares the pros, cons, and use cases of communicating with events.`,
+      youtubeId: 'T9mxtnoy9Qw',
+      date: 'May 5 2022',
+    },
+    {
+      title: 'How to style your Lit elements',
+      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.`,
+      youtubeId: 'Xt7blcyuw5s',
+      date: 'Oct 3 2022',
+    },
+    {
+      title: 'Introduction to Lit',
+      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.`,
+      youtubeId: 'uzFakwHaSmw',
+      date: 'Nov 2 2022',
+    },
+    {
+      title: 'Lit 3.0 Launch Event',
+      summary: `Join the Lit team to hear all about the Lit 3.0 release and what's new in the Lit ecosystem!`,
+      youtubeId: 'ri9FEl_hRTc',
+      date: 'Oct 10 2023',
+    },
+  ].map((videoData) => ({
+    kind: 'video',
+    url: `https://www.youtube.com/watch?v=${videoData.youtubeId}`,
+    ...videoData,
+    date: new Date(videoData.date),
+  }));
+
+/**
+ * 11ty data JS loader.
+ *
+ * @returns {Promise<{eleventyComputed: {tutorials: Object[]}}>} 11ty data
+ *   To be consumed by the tutorials catalog (/tutorials/index.html).
+ */
+module.exports = async () => {
+  return loadVideoData();
+};

packages/lit-dev-content/site/articles/article/article.11tydata.js

@@ -1,6 +1,7 @@
 module.exports = {
   eleventyComputed: {
-    layout: "article",
-    permalink: data => `/articles/${data.page.fileSlug}/`,
-  }
-}
+    layout: 'article',
+    permalink: (data) => `/articles/${data.page.fileSlug}/`,
+  },
+  tags: ['articles'],
+};