diff --git a/package-lock.json b/package-lock.json
index 620727567..0d6ca15b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
         "packages/*"
       ],
       "devDependencies": {
-        "gray-matter": "^4.0.3",
         "playground-elements": "^0.18.0",
         "prettier": "^2.1.2",
         "typescript": "~4.7.4",
diff --git a/package.json b/package.json
index 244de3588..862d93795 100644
--- a/package.json
+++ b/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",
diff --git a/packages/lit-dev-content/site/_data/externalSearchData.json b/packages/lit-dev-content/site/_data/externalSearchData.json
new file mode 100644
index 000000000..659d2e4ca
--- /dev/null
+++ b/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
+  }
+]
diff --git a/packages/lit-dev-content/site/tutorials/tutorials.11tydata.js b/packages/lit-dev-content/site/_data/tutorials.js
similarity index 93%
rename from packages/lit-dev-content/site/tutorials/tutorials.11tydata.js
rename to packages/lit-dev-content/site/_data/tutorials.js
index 3ad04160d..68147ccf6 100644
--- a/packages/lit-dev-content/site/tutorials/tutorials.11tydata.js
+++ b/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,7 +63,11 @@ 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}}),
@@ -71,7 +75,6 @@ module.exports = async () => {
     loadTutorialData('custom-attribute-converter'),
     loadTutorialData('async-directive'),
 
-
     // Build
     loadTutorialData('svg-templates'),
     loadTutorialData('tooltip'),
@@ -79,11 +82,6 @@ module.exports = async () => {
     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}};
 };
diff --git a/packages/lit-dev-content/site/_data/videos.js b/packages/lit-dev-content/site/_data/videos.js
new file mode 100644
index 000000000..0e8c09a8f
--- /dev/null
+++ b/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();
+};
diff --git a/packages/lit-dev-content/site/articles/article/article.11tydata.js b/packages/lit-dev-content/site/articles/article/article.11tydata.js
index ab41e7a60..5fdf6acaa 100644
--- a/packages/lit-dev-content/site/articles/article/article.11tydata.js
+++ b/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}/`,
-  }
-}
\ No newline at end of file
+    layout: 'article',
+    permalink: (data) => `/articles/${data.page.fileSlug}/`,
+  },
+  tags: ['articles'],
+};
diff --git a/packages/lit-dev-content/site/learn/learn.11tydata.js b/packages/lit-dev-content/site/learn/learn.11tydata.js
index c458f4282..6e3104857 100644
--- a/packages/lit-dev-content/site/learn/learn.11tydata.js
+++ b/packages/lit-dev-content/site/learn/learn.11tydata.js
@@ -4,9 +4,7 @@
  * 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(
@@ -14,177 +12,51 @@ const rootSiteDir = path.resolve(
   '..',
 );
 
-const loadTutorialData = async (dirname) => {
-  const tutorialDir = path.resolve(
-    __dirname,
-    '../../samples/tutorials',
-    dirname
-  );
-  const encoding = {encoding: 'utf8'};
+const cleanUpTutorialData = (tutorials) => {
+  return tutorials.map(tutorial => {
+    const data = {
+      kind: 'tutorial',
+      ...tutorial,
+      url: `/tutorials/${tutorial.location}/`,
+    };
 
-  const manifestProm = fs.readFile(
-    path.join(tutorialDir, 'tutorial.json'),
-    encoding
-  );
-  const descriptionProm = fs.readFile(
-    path.join(tutorialDir, 'description.md'),
-    encoding
-  );
-  const [manifest, description] = await Promise.all([
-    manifestProm,
-    descriptionProm,
-  ]);
-  const data = {
-    kind: 'tutorial',
-    ...JSON.parse(manifest),
-    description,
-    url: `/tutorials/${dirname}/`,
-  };
-
-  // Clean up the data
-  data.title = data.header;
-  data.summary = data.description;
-  data.date = new Date(data.date);
-  data.thumbnail = data.thumbnail ?? '/images/learn/tutorial_default_thumbnail';
-  delete data.description;
-  delete data.header;
-  delete data.steps;
-  return data;
+    // Clean up the data
+    data.title = data.header;
+    data.summary = data.description;
+    data.date = new Date(data.date);
+    data.thumbnail = data.thumbnail ?? '/images/learn/tutorial_default_thumbnail';
+    delete data.description;
+    delete data.header;
+    delete data.steps;
+    return data;
+  });
 };
 
-const loadArticleData = async () => {
-  const articlesDir = path.resolve(__dirname, '../articles/article');
-  const files = await fs.readdir(articlesDir);
-  const markdownArticles = files.filter((filename) => filename.endsWith('.md'));
-
-  const articleData = Promise.all(
-    markdownArticles.map(async (articleFileName) => {
-      const contents = await fs.readFile(
-        path.resolve(articlesDir, articleFileName),
-        {
-          encoding: 'utf8',
-        }
-      );
-      const frontMatter = matter(contents);
-      return {
-        kind: 'article',
-        url: `/articles/${articleFileName.slice(0, -3)}/`,
-        date: new Date(frontMatter.publishDate),
-        ...frontMatter.data,
-      };
-    })
-  );
-  return articleData;
+const loadArticleData = (articles) => {
+  return articles.map((article) => {
+    return {
+      kind: 'article',
+      url: article.page.url,
+      date: new Date(article.data.publishDate),
+      ...article.data,
+    };
+  })
 };
 
-// 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 () => {
-  const tutorials = 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'),
-  ]);
-  const articles = await loadArticleData();
-  const videos = loadVideoData();
+module.exports = {eleventyComputed: {learn: async (data) => {
+  const tutorials = cleanUpTutorialData(data.tutorials);
+  const articles = loadArticleData(data.collections.articles);
+  const videos = data.videos;
 
   const learn = [tutorials, articles, videos].flat();
   // Sort based on date.
   learn.sort(({ date: dateA }, { date: dateB }) => dateB - dateA);
-  
 
   // Validate the correct content exists for each content type.
   learn.forEach(content => {
@@ -227,19 +99,16 @@ module.exports = async () => {
     }
   })
 
-  /*
-   * All the content to put on the learn page.
-   */
-  return {eleventyComputed: {learn}};
-};
+  return learn;
+}}};
 
 /**
  * validateImage ensures an image exists in the correct location so it can be
  * displayed on the learn page.
- * 
+ *
  * Note, the image with suffix `_2.jpg` should have dimensions 1280px by 720px,
  * otherwise the image should have dimensions 640px by 360px.
- * 
+ *
  * @param {string} path an absolute path to the image, e.g. "/images/videos/xyz_2.jpg"
  */
 function validateImageExists(imgPath) {
diff --git a/packages/lit-dev-content/site/tutorials/index.html b/packages/lit-dev-content/site/tutorials/index.html
deleted file mode 100644
index 8b1717336..000000000
--- a/packages/lit-dev-content/site/tutorials/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Tutorials
----
-
-{% extends 'default.html' %}
-
-{% block head %}
-  {% include "social-tags.html" %}
-  {% inlinecss "tutorial-catalog.css" %}
-{% endblock %}
-
-{% block content %}
-<section class="tutorial-category featured">
-  <h1 class="category-title" id="learn-section">Featured Tutorials</h1>
-  <div class="category-subtitle"></div>
-  <div class="center">
-    <div class="card-grid">
-      {% for tutorial in tutorials | sort(false, false, 'featured.position') %}
-        {% if tutorial.featured.position !== undefined and tutorial.featured.position < 3 %}
-          <litdev-tutorial-card
-              size="small"
-              difficulty="{{ tutorial.difficulty }}"
-              duration="{{ tutorial.duration }}"
-              href="{{ site.baseurl }}/tutorials/{{ tutorial.location }}"
-              {% if tutorial.hideDescription %}
-              hide-description
-              {% endif %}>
-            <h1 slot="header">{{ tutorial.header }}</h1>
-            {{ tutorial.description|markdownWithoutHtml|safe }}
-          </litdev-tutorial-card>
-        {% endif %}
-      {% endfor %}
-    </div>
-  </div>
-</section>
-<div class="not-featured">
-  <section class="tutorial-category">
-    <h1 class="category-title" id="learn-section">Learn</h1>
-    <div class="category-subtitle">Learn the features of Lit!</div>
-    <div class="center">
-      <div class="card-grid">
-        {% for tutorial in tutorials %}
-          {% if tutorial.category == 'Learn' %}
-            <litdev-tutorial-card
-                size="{{ tutorial.size }}"
-                difficulty="{{ tutorial.difficulty }}"
-                duration="{{ tutorial.duration }}"
-                href="{{ site.baseurl }}/tutorials/{{ tutorial.location }}"
-                {% if tutorial.imgSrc %}
-                  img-src="{{ site.baseurl }}/{{ tutorial.imgSrc }}"
-                  img-alt="{{ tutorial.imgAlt }}"
-                {% endif %}
-                {% if tutorial.hideDescription %}
-                hide-description
-                {% endif %}>
-              <h1 slot="header">{{ tutorial.header }}</h1>
-              {{ tutorial.description|markdownWithoutHtml|safe }}
-            </litdev-tutorial-card>
-          {% endif %}
-        {% endfor %}
-      </div>
-    </div>
-  </section>
-  <section class="tutorial-category">
-    <h1 class="category-title" id="build-section">Build</h1>
-    <div class="category-subtitle">Build new things with Lit!</div>
-    <div class="center">
-      <div class="card-grid">
-        {% for tutorial in tutorials %}
-          {% if tutorial.category == 'Build' %}
-            <litdev-tutorial-card
-                size="{{ tutorial.size }}"
-                header="{{ tutorial.header }}"
-                difficulty="{{ tutorial.difficulty }}"
-                duration="{{ tutorial.duration }}"
-                href="{{ site.baseurl }}/tutorials/{{ tutorial.location }}"
-                {% if tutorial.imgSrc %}
-                  img-src="{{ site.baseurl }}/{{ tutorial.imgSrc }}"
-                  img-alt="{{ tutorial.imgAlt }}"
-                {% endif %}
-                {% if tutorial.hideDescription %}
-                hide-description
-                {% endif %}>
-              <h1 slot="header">{{ tutorial.header }}</h1>
-              {{ tutorial.description|markdownWithoutHtml|safe }}
-            </litdev-tutorial-card>
-          {% endif %}
-        {% endfor %}
-      </div>
-    </div>
-  </section>
-</div>
-
-{% endblock %}
diff --git a/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-darwin.png b/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-darwin.png
index aadff6340..d36039cbf 100644
Binary files a/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-darwin.png and b/packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-darwin.png differ