From e046a8fd4bea053b3c720dd479d39b1398910dff Mon Sep 17 00:00:00 2001
From: Simon Vrachliotis <simon@simonswiss.com>
Date: Fri, 24 Nov 2023 13:08:08 +1100
Subject: [PATCH 1/9] page layout + keystatic schema

---
 docs/keystatic.config.tsx                     |  72 +++++++-
 docs/next.config.js                           |   5 +-
 docs/src/app/(public)/resources/layout.tsx    |  29 +++
 docs/src/app/(public)/resources/page.tsx      | 173 ++++++++++++++++++
 docs/src/content/navigation.yaml              |   5 +
 .../resources/7-things-i-about-keystatic.yaml |  16 ++
 ...debase-editing-with-minimal-footprint.yaml |  16 ++
 ...rkdoc-what-is-it-and-why-do-i-love-it.yaml |  16 ++
 ...atic-with-astro-s-content-collections.yaml |  16 ++
 .../meet-keystatic-by-jed-watson.yaml         |  14 ++
 ...time-previews-with-next-js-draft-mode.yaml |  18 ++
 11 files changed, 378 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/app/(public)/resources/layout.tsx
 create mode 100644 docs/src/app/(public)/resources/page.tsx
 create mode 100644 docs/src/content/resources/7-things-i-about-keystatic.yaml
 create mode 100644 docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml
 create mode 100644 docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml
 create mode 100644 docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml
 create mode 100644 docs/src/content/resources/meet-keystatic-by-jed-watson.yaml
 create mode 100644 docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml

diff --git a/docs/keystatic.config.tsx b/docs/keystatic.config.tsx
index fb6d786f3..2417af903 100644
--- a/docs/keystatic.config.tsx
+++ b/docs/keystatic.config.tsx
@@ -89,7 +89,7 @@ export default config({
       name: 'Keystatic Docs',
     },
     navigation: {
-      Pages: ['pages', 'blog', 'projects'],
+      Pages: ['pages', 'blog', 'projects', 'resources'],
       Config: ['authors', 'navigation'],
       Experimental: ['pagesWithMarkdocField'],
     },
@@ -261,6 +261,76 @@ export default config({
       },
     }),
 
+    // ------------------------------
+    // Resources
+    // ------------------------------
+    resources: collection({
+      label: 'Resources',
+      path: 'src/content/resources/*',
+      slugField: 'title',
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        type: fields.conditional(
+          fields.select({
+            label: 'Resource type',
+            options: [
+              { label: 'YouTube video', value: 'youtube-video' },
+              { label: 'Talk', value: 'talk' },
+              { label: 'Article', value: 'article' },
+            ],
+            defaultValue: 'youtube-video',
+          }),
+          {
+            // "none" condition
+            none: fields.empty(),
+            // "youtube-video" condition
+            'youtube-video': fields.object({
+              videoId: fields.text({
+                label: 'Video ID',
+                description: 'The ID of the video (not the URL!)',
+                validation: { length: { min: 1 } },
+              }),
+              thumbnail: fields.object({
+                asset: fields.cloudImage({
+                  label: 'Video thumbnail',
+                  description: 'A 16/9 thumbnail image for the video.',
+                }),
+              }),
+              description: fields.text({
+                label: 'Video description',
+                multiline: true,
+              }),
+            }),
+            talk: fields.object({
+              videoId: fields.text({
+                label: 'Video ID',
+                description: 'The ID of the video (not the URL!)',
+                validation: { length: { min: 1 } },
+              }),
+              thumbnail: fields.object({
+                asset: fields.cloudImage({
+                  label: 'Video thumbnail',
+                  description: 'A 16/9 thumbnail image for the video.',
+                }),
+              }),
+              description: fields.text({
+                label: 'Video description',
+                multiline: true,
+              }),
+            }),
+            // TODO:
+            article: fields.object({}),
+          }
+        ),
+        sortIndex: fields.integer({
+          label: 'Sort index',
+          description:
+            'A number value to sort items (low to high) on the front end.',
+          defaultValue: 10,
+        }),
+      },
+    }),
+
     // ------------------------------
     // For testing purposes only
     // ------------------------------
diff --git a/docs/next.config.js b/docs/next.config.js
index 2c6155886..c4bd261fc 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -6,7 +6,10 @@ module.exports = {
     externalDir: true,
   },
   images: {
-    remotePatterns: [{ hostname: 'thinkmill-labs.keystatic.net' }],
+    remotePatterns: [
+      { hostname: 'thinkmill-labs.keystatic.net' },
+      { hostname: 'i3.ytimg.com' },
+    ],
   },
   async redirects() {
     return [
diff --git a/docs/src/app/(public)/resources/layout.tsx b/docs/src/app/(public)/resources/layout.tsx
new file mode 100644
index 000000000..5241189d3
--- /dev/null
+++ b/docs/src/app/(public)/resources/layout.tsx
@@ -0,0 +1,29 @@
+import { Main } from '../../../components/main';
+import Footer from '../../../components/footer';
+
+export const metadata = {
+  title: {
+    template: '%s - Resources | Keystatic',
+    default: 'Resources',
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <div className="mx-auto min-h-screen w-full max-w-7xl px-6">
+        {/** CONTENT */}
+
+        <Main className="flex gap-8">
+          {/** INNER CONTENT */}
+          <div className="flex-1">{children}</div>
+        </Main>
+      </div>
+      <Footer />
+    </>
+  );
+}
diff --git a/docs/src/app/(public)/resources/page.tsx b/docs/src/app/(public)/resources/page.tsx
new file mode 100644
index 000000000..cd960120e
--- /dev/null
+++ b/docs/src/app/(public)/resources/page.tsx
@@ -0,0 +1,173 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import type { EntryWithResolvedLinkedFiles } from '@keystatic/core/reader';
+
+import { ArrowRightIcon } from '../../../components/icons/arrow-right';
+import { reader } from '../../../utils/reader';
+import keystaticConfig from '../../../../keystatic.config';
+import Button from '../../../components/button';
+
+type Resource = {
+  slug: string;
+  entry: EntryWithResolvedLinkedFiles<
+    (typeof keystaticConfig)['collections']['resources']
+  >;
+};
+
+export default async function Resources() {
+  const resources: Resource[] = await reader().collections.resources.all();
+
+  if (!resources) notFound();
+
+  const sortedVideos = resources
+    .filter(resource => resource.entry.type.discriminant === 'youtube-video')
+    .sort((a, b) => {
+      return (a.entry.sortIndex as number) - (b.entry.sortIndex as number);
+    })
+    .map(resource => ({
+      title: resource.entry.title,
+      sortIndex: resource.entry.sortIndex,
+      ...resource.entry.type.value,
+    }));
+
+  const sortedTalks = resources
+    .filter(resource => resource.entry.type.discriminant === 'talk')
+    .sort((a, b) => {
+      return (a.entry.sortIndex as number) - (b.entry.sortIndex as number);
+    })
+    .map(resource => ({
+      title: resource.entry.title,
+      sortIndex: resource.entry.sortIndex,
+      ...resource.entry.type.value,
+    }));
+
+  return (
+    <div className="mt-24 pt-10">
+      <header className="mx-auto max-w-2xl text-center">
+        <h1 className="text-4xl font-medium md:text-5xl">Resources</h1>
+        <div className="mt-6 space-y-4 text-lg">
+          <p>
+            A collection of videos, talks, articles and other resources to help
+            you learn Keystatic and dig deeper.
+          </p>
+        </div>
+      </header>
+
+      <div className="mt-12 divide-y divide-slate-5">
+        <ResourceSection
+          title="Videos"
+          introText=" The Thinkmill YouTube channel has a growing collection of screencasts and live streams about Keystatic."
+        >
+          <ResourceGrid>
+            {sortedVideos.map(video => (
+              <YouTubeResource
+                videoId={video.videoId as string}
+                title={video.title}
+                description={video.description as string}
+              />
+            ))}
+          </ResourceGrid>
+          <Button
+            variant="regular"
+            impact="light"
+            className="mt-12 inline-flex items-center gap-2"
+            href="https://www.youtube.com/playlist?list=PLYyvXL46d-pzqwOKdofd5aKiqPTAN3ql6"
+          >
+            <span>Watch more videos</span>
+            <ArrowRightIcon />
+          </Button>
+        </ResourceSection>
+        <ResourceSection
+          title="Talks"
+          introText="Recorded Keystatic talks from local meetups and conferences."
+        >
+          <ResourceGrid>
+            {sortedTalks.map(video => (
+              <YouTubeResource
+                videoId={video.videoId as string}
+                title={video.title}
+                description={video.description as string}
+              />
+            ))}
+          </ResourceGrid>
+        </ResourceSection>
+
+        <ResourceSection>
+          <div className="inline-flex flex-col gap-4 rounded-lg bg-slate-3 px-4 py-6 sm:flex-row">
+            <div className="flex h-6 items-center text-3xl">⏳</div>
+            <div className="flex flex-col gap-3">
+              <p className="text-md text-slate-12">
+                This page is a work in progress — more resources coming soon!
+              </p>
+            </div>
+          </div>
+        </ResourceSection>
+      </div>
+    </div>
+  );
+}
+
+type YouTubeResourceProps = {
+  videoId: string;
+  title: string;
+  description: string;
+};
+
+function YouTubeResource({
+  videoId,
+  title,
+  description,
+}: YouTubeResourceProps) {
+  const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
+  const videoThumbnailUrl = `https://i3.ytimg.com/vi/${videoId}/maxresdefault.jpg`;
+  return (
+    <li>
+      <Link
+        href={videoUrl}
+        className="group relative block aspect-video w-full"
+      >
+        <Image
+          fill
+          src={videoThumbnailUrl}
+          alt=""
+          className="h-full-w-full absolute inset-0 rounded-lg shadow-md transition-shadow group-hover:shadow-sm"
+        />
+      </Link>
+      <h3 className="mt-6 text-xl font-medium">
+        <Link href={videoUrl} className="hover:underline">
+          {title}
+        </Link>
+      </h3>
+      <p className="mt-2">{description}</p>
+    </li>
+  );
+}
+
+type ResourceGridProps = {
+  children: React.ReactNode;
+};
+
+function ResourceGrid({ children }: ResourceGridProps) {
+  return (
+    <ul className="mt-8 grid items-start gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3">
+      {children}
+    </ul>
+  );
+}
+
+type ResourceSectionProps = {
+  title?: string;
+  introText?: string;
+  children: React.ReactNode;
+};
+
+function ResourceSection({ title, introText, children }: ResourceSectionProps) {
+  return (
+    <section className="py-16">
+      {title && <h2 className="mb-4 text-2xl font-medium">{title}</h2>}
+      {introText && <p className="max-w-lg">{introText}</p>}
+      {children}
+    </section>
+  );
+}
diff --git a/docs/src/content/navigation.yaml b/docs/src/content/navigation.yaml
index ff8b54359..59ce44e6b 100644
--- a/docs/src/content/navigation.yaml
+++ b/docs/src/content/navigation.yaml
@@ -11,6 +11,11 @@ navGroups:
           discriminant: page
           value: quick-start
         isNew: false
+      - label: Resources
+        link:
+          discriminant: url
+          value: /resources
+        isNew: true
   - groupName: Integration guides
     items:
       - label: Astro
diff --git a/docs/src/content/resources/7-things-i-about-keystatic.yaml b/docs/src/content/resources/7-things-i-about-keystatic.yaml
new file mode 100644
index 000000000..5f07569f2
--- /dev/null
+++ b/docs/src/content/resources/7-things-i-about-keystatic.yaml
@@ -0,0 +1,16 @@
+title: 7 Things I ❤️ About Keystatic
+type:
+  discriminant: talk
+  value:
+    videoId: rUO7VdR9NPY
+    thumbnail:
+      asset:
+        src: >-
+          https://thinkmill-labs.keystatic.net/keystatic-site/images/nxq56kug7dua/7-things-about-keystatic
+        alt: YouTube video thumbnail
+        height: 720
+        width: 1280
+    description: >-
+      Simon Vrachliotis talking at SydJS about the little things he loves about
+      working with Keystatic.
+sortIndex: 15
diff --git a/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml b/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml
new file mode 100644
index 000000000..142acdf77
--- /dev/null
+++ b/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml
@@ -0,0 +1,16 @@
+title: 'Codebase Editing With Minimal Footprint '
+type:
+  discriminant: youtube-video
+  value:
+    videoId: K_-yTaBWzbA
+    thumbnail:
+      asset:
+        src: >-
+          https://thinkmill-labs.keystatic.net/keystatic-site/images/inru19y6a8qq/keystatic-with-minimal-footprint
+        alt: YouTube video thumbnail
+        height: 900
+        width: 1600
+    description: >-
+      An example of how lightweight Keystatic can be to make a specific part of
+      your codebase editable via an auto-generated Admin UI.
+sortIndex: 15
diff --git a/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml b/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml
new file mode 100644
index 000000000..a3a060cec
--- /dev/null
+++ b/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml
@@ -0,0 +1,16 @@
+title: 'Dinesh Pandiyan - Markdoc: What is it and why do I love it?'
+type:
+  discriminant: talk
+  value:
+    videoId: XIw-0fCpP_4
+    thumbnail:
+      asset:
+        src: >-
+          https://thinkmill-labs.keystatic.net/keystatic-site/images/enzs1rpkqjgu/markdoc
+        alt: YouTube video thumbnail
+        height: 720
+        width: 1280
+    description: >-
+      Dinesh walks SydJS through the progression from HTML to Markdown to MDX to
+      Markdoc.
+sortIndex: 20
diff --git a/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml b/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml
new file mode 100644
index 000000000..8cbf1567d
--- /dev/null
+++ b/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml
@@ -0,0 +1,16 @@
+title: Keystatic with Astro's Content Collections
+type:
+  discriminant: youtube-video
+  value:
+    videoId: 6l2YWCyPsWk
+    thumbnail:
+      asset:
+        src: >-
+          https://thinkmill-labs.keystatic.net/keystatic-site/images/ewuee6ly46km/tm-keystatic
+        alt: YouTube video thumbnnail
+        height: 900
+        width: 1600
+    description: >-
+      An early-days experimental walk-through of using Keystatic with Astro's
+      content collections.
+sortIndex: 10
diff --git a/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml b/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml
new file mode 100644
index 000000000..0fadfde7b
--- /dev/null
+++ b/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml
@@ -0,0 +1,14 @@
+title: Meet Keystatic by Jed Watson
+type:
+  discriminant: talk
+  value:
+    videoId: evO_uz5Ahek
+    thumbnail:
+      asset:
+        src: >-
+          https://thinkmill-labs.keystatic.net/keystatic-site/images/w5e53g9h00e0/meet-keystatic-by-jed-watson
+        alt: YouTube video thumbnail
+        height: 720
+        width: 1280
+    description: 'Jed Watson introduces Keystatic at the React Sydney meetup in '
+sortIndex: 10
diff --git a/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml b/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml
new file mode 100644
index 000000000..534fbb7cd
--- /dev/null
+++ b/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml
@@ -0,0 +1,18 @@
+title: Real-time previews with Next.js' draft mode
+type:
+  discriminant: youtube-video
+  value:
+    videoId: QuoADtLQVCE
+    thumbnail:
+      asset:
+        src: >-
+          https://thinkmill-labs.keystatic.net/keystatic-site/images/j8wdve6gqm87/live-previews
+        alt: >-
+          YouTube thumbnail for Real-time previews with Next.js' draft mode
+          video
+        height: 900
+        width: 1600
+    description: >-
+      A 2-minute walk-through of how to set up real-time content previews,
+      leveraging Next.js' draft mode feature.
+sortIndex: 5

From d38c68e2ea6d2815b090b7ed1aa23cfa7f860424 Mon Sep 17 00:00:00 2001
From: Simon Vrachliotis <simon@simonswiss.com>
Date: Fri, 24 Nov 2023 13:36:59 +1100
Subject: [PATCH 2/9] Articles added

---
 docs/keystatic.config.tsx                     |  9 +++-
 docs/src/app/(public)/resources/page.tsx      | 54 +++++++++++++++----
 .../keystatic-the-last-framework-hop.yaml     | 10 ++++
 .../resources/using-keystatic-as-a-cms.yaml   | 10 ++++
 4 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 docs/src/content/resources/keystatic-the-last-framework-hop.yaml
 create mode 100644 docs/src/content/resources/using-keystatic-as-a-cms.yaml

diff --git a/docs/keystatic.config.tsx b/docs/keystatic.config.tsx
index 2417af903..f7f7c264d 100644
--- a/docs/keystatic.config.tsx
+++ b/docs/keystatic.config.tsx
@@ -319,7 +319,14 @@ export default config({
               }),
             }),
             // TODO:
-            article: fields.object({}),
+            article: fields.object({
+              url: fields.url({ label: 'Article URL' }),
+              authorName: fields.text({ label: 'Author name' }),
+              description: fields.text({
+                label: 'Article description',
+                multiline: true,
+              }),
+            }),
           }
         ),
         sortIndex: fields.integer({
diff --git a/docs/src/app/(public)/resources/page.tsx b/docs/src/app/(public)/resources/page.tsx
index cd960120e..8ef621a77 100644
--- a/docs/src/app/(public)/resources/page.tsx
+++ b/docs/src/app/(public)/resources/page.tsx
@@ -42,6 +42,17 @@ export default async function Resources() {
       ...resource.entry.type.value,
     }));
 
+  const sortedArticles = resources
+    .filter(resource => resource.entry.type.discriminant === 'article')
+    .sort((a, b) => {
+      return (a.entry.sortIndex as number) - (b.entry.sortIndex as number);
+    })
+    .map(resource => ({
+      title: resource.entry.title,
+      sortIndex: resource.entry.sortIndex,
+      ...resource.entry.type.value,
+    }));
+
   return (
     <div className="mt-24 pt-10">
       <header className="mx-auto max-w-2xl text-center">
@@ -55,10 +66,17 @@ export default async function Resources() {
       </header>
 
       <div className="mt-12 divide-y divide-slate-5">
-        <ResourceSection
-          title="Videos"
-          introText=" The Thinkmill YouTube channel has a growing collection of screencasts and live streams about Keystatic."
-        >
+        <ResourceSection title="YouTube Videos">
+          <p>
+            The{' '}
+            <Link
+              href="https://youtube.com/@thinkmill"
+              className="underline hover:no-underline"
+            >
+              Thinkmill channel
+            </Link>{' '}
+            has a growing collection of content about Keystatic.
+          </p>
           <ResourceGrid>
             {sortedVideos.map(video => (
               <YouTubeResource
@@ -78,10 +96,8 @@ export default async function Resources() {
             <ArrowRightIcon />
           </Button>
         </ResourceSection>
-        <ResourceSection
-          title="Talks"
-          introText="Recorded Keystatic talks from local meetups and conferences."
-        >
+        <ResourceSection title="Talks">
+          <p>Recorded Keystatic talks from local meetups and conferences.</p>
           <ResourceGrid>
             {sortedTalks.map(video => (
               <YouTubeResource
@@ -92,6 +108,23 @@ export default async function Resources() {
             ))}
           </ResourceGrid>
         </ResourceSection>
+        <ResourceSection title="Articles">
+          <ResourceGrid>
+            {sortedArticles.map(article => (
+              <li className="mb-4 mr-4">
+                <h3 className="text-xl font-medium">
+                  <Link href={article.url} className="hover:underline">
+                    {article.title}
+                  </Link>
+                </h3>
+                <p className="mt-1 text-sm text-slate-10">
+                  by {article.authorName}
+                </p>
+                <p className="mt-4">{article.description}</p>
+              </li>
+            ))}
+          </ResourceGrid>
+        </ResourceSection>
 
         <ResourceSection>
           <div className="inline-flex flex-col gap-4 rounded-lg bg-slate-3 px-4 py-6 sm:flex-row">
@@ -157,16 +190,15 @@ function ResourceGrid({ children }: ResourceGridProps) {
 }
 
 type ResourceSectionProps = {
-  title?: string;
+  title?: string | React.ReactNode;
   introText?: string;
   children: React.ReactNode;
 };
 
-function ResourceSection({ title, introText, children }: ResourceSectionProps) {
+function ResourceSection({ title, children }: ResourceSectionProps) {
   return (
     <section className="py-16">
       {title && <h2 className="mb-4 text-2xl font-medium">{title}</h2>}
-      {introText && <p className="max-w-lg">{introText}</p>}
       {children}
     </section>
   );
diff --git a/docs/src/content/resources/keystatic-the-last-framework-hop.yaml b/docs/src/content/resources/keystatic-the-last-framework-hop.yaml
new file mode 100644
index 000000000..576f1665f
--- /dev/null
+++ b/docs/src/content/resources/keystatic-the-last-framework-hop.yaml
@@ -0,0 +1,10 @@
+title: 'Keystatic: The Last Framework Hop'
+type:
+  discriminant: article
+  value:
+    url: https://nibras.co/articles/keystatic-the-last-framework-hop
+    authorName: Griko Nibras
+    description: >-
+      Griko writes about his experience using Keystatic to rebuild the last
+      iteration of their personal website.
+sortIndex: 10
diff --git a/docs/src/content/resources/using-keystatic-as-a-cms.yaml b/docs/src/content/resources/using-keystatic-as-a-cms.yaml
new file mode 100644
index 000000000..8403a03ae
--- /dev/null
+++ b/docs/src/content/resources/using-keystatic-as-a-cms.yaml
@@ -0,0 +1,10 @@
+title: Using Keystatic as a CMS
+type:
+  discriminant: article
+  value:
+    url: https://www.lukebennett.com.au/posts/using-keystatic-as-a-cms
+    authorName: Luke Bennett
+    description: >-
+      An honest and candid writeup about using Keystatic as a CMS, despite the
+      bias of being a Thinkmill employee.
+sortIndex: 20

From 9f3d3612327f070cf6cdc3d8f799b48549fd8420 Mon Sep 17 00:00:00 2001
From: Simon Vrachliotis <simon@simonswiss.com>
Date: Fri, 24 Nov 2023 13:54:38 +1100
Subject: [PATCH 3/9] merging talks and youtube videos with an extra "kind"
 field

---
 docs/keystatic.config.tsx                     | 25 +++++------------
 docs/src/app/(public)/resources/page.tsx      | 27 +++++++++----------
 .../resources/7-things-i-about-keystatic.yaml |  3 ++-
 ...debase-editing-with-minimal-footprint.yaml |  1 +
 ...rkdoc-what-is-it-and-why-do-i-love-it.yaml |  3 ++-
 ...atic-with-astro-s-content-collections.yaml |  1 +
 .../meet-keystatic-by-jed-watson.yaml         |  6 +++--
 ...time-previews-with-next-js-draft-mode.yaml |  1 +
 8 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/docs/keystatic.config.tsx b/docs/keystatic.config.tsx
index f7f7c264d..8209c86d0 100644
--- a/docs/keystatic.config.tsx
+++ b/docs/keystatic.config.tsx
@@ -275,7 +275,6 @@ export default config({
             label: 'Resource type',
             options: [
               { label: 'YouTube video', value: 'youtube-video' },
-              { label: 'Talk', value: 'talk' },
               { label: 'Article', value: 'article' },
             ],
             defaultValue: 'youtube-video',
@@ -296,29 +295,19 @@ export default config({
                   description: 'A 16/9 thumbnail image for the video.',
                 }),
               }),
-              description: fields.text({
-                label: 'Video description',
-                multiline: true,
-              }),
-            }),
-            talk: fields.object({
-              videoId: fields.text({
-                label: 'Video ID',
-                description: 'The ID of the video (not the URL!)',
-                validation: { length: { min: 1 } },
-              }),
-              thumbnail: fields.object({
-                asset: fields.cloudImage({
-                  label: 'Video thumbnail',
-                  description: 'A 16/9 thumbnail image for the video.',
-                }),
+              kind: fields.select({
+                label: 'Video kind',
+                options: [
+                  { label: 'Talk', value: 'talk' },
+                  { label: 'Screencast', value: 'screencast' },
+                ],
+                defaultValue: 'screencast',
               }),
               description: fields.text({
                 label: 'Video description',
                 multiline: true,
               }),
             }),
-            // TODO:
             article: fields.object({
               url: fields.url({ label: 'Article URL' }),
               authorName: fields.text({ label: 'Author name' }),
diff --git a/docs/src/app/(public)/resources/page.tsx b/docs/src/app/(public)/resources/page.tsx
index 8ef621a77..8f2e630b7 100644
--- a/docs/src/app/(public)/resources/page.tsx
+++ b/docs/src/app/(public)/resources/page.tsx
@@ -1,27 +1,22 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
-import type { EntryWithResolvedLinkedFiles } from '@keystatic/core/reader';
 
 import { ArrowRightIcon } from '../../../components/icons/arrow-right';
 import { reader } from '../../../utils/reader';
-import keystaticConfig from '../../../../keystatic.config';
 import Button from '../../../components/button';
 
-type Resource = {
-  slug: string;
-  entry: EntryWithResolvedLinkedFiles<
-    (typeof keystaticConfig)['collections']['resources']
-  >;
-};
-
 export default async function Resources() {
-  const resources: Resource[] = await reader().collections.resources.all();
+  const resources = await reader().collections.resources.all();
 
   if (!resources) notFound();
 
   const sortedVideos = resources
-    .filter(resource => resource.entry.type.discriminant === 'youtube-video')
+    .filter(
+      resource =>
+        resource.entry.type.discriminant === 'youtube-video' &&
+        resource.entry.type.value.kind === 'screencast'
+    )
     .sort((a, b) => {
       return (a.entry.sortIndex as number) - (b.entry.sortIndex as number);
     })
@@ -32,7 +27,11 @@ export default async function Resources() {
     }));
 
   const sortedTalks = resources
-    .filter(resource => resource.entry.type.discriminant === 'talk')
+    .filter(
+      resource =>
+        resource.entry.type.discriminant === 'youtube-video' &&
+        resource.entry.type.value.kind === 'talk'
+    )
     .sort((a, b) => {
       return (a.entry.sortIndex as number) - (b.entry.sortIndex as number);
     })
@@ -80,9 +79,9 @@ export default async function Resources() {
           <ResourceGrid>
             {sortedVideos.map(video => (
               <YouTubeResource
-                videoId={video.videoId as string}
+                videoId={video.videoId}
                 title={video.title}
-                description={video.description as string}
+                description={video.description}
               />
             ))}
           </ResourceGrid>
diff --git a/docs/src/content/resources/7-things-i-about-keystatic.yaml b/docs/src/content/resources/7-things-i-about-keystatic.yaml
index 5f07569f2..a63f15b2a 100644
--- a/docs/src/content/resources/7-things-i-about-keystatic.yaml
+++ b/docs/src/content/resources/7-things-i-about-keystatic.yaml
@@ -1,6 +1,6 @@
 title: 7 Things I ❤️ About Keystatic
 type:
-  discriminant: talk
+  discriminant: youtube-video
   value:
     videoId: rUO7VdR9NPY
     thumbnail:
@@ -10,6 +10,7 @@ type:
         alt: YouTube video thumbnail
         height: 720
         width: 1280
+    kind: talk
     description: >-
       Simon Vrachliotis talking at SydJS about the little things he loves about
       working with Keystatic.
diff --git a/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml b/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml
index 142acdf77..97363653e 100644
--- a/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml
+++ b/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml
@@ -10,6 +10,7 @@ type:
         alt: YouTube video thumbnail
         height: 900
         width: 1600
+    kind: screencast
     description: >-
       An example of how lightweight Keystatic can be to make a specific part of
       your codebase editable via an auto-generated Admin UI.
diff --git a/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml b/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml
index a3a060cec..fa9af9f57 100644
--- a/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml
+++ b/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml
@@ -1,6 +1,6 @@
 title: 'Dinesh Pandiyan - Markdoc: What is it and why do I love it?'
 type:
-  discriminant: talk
+  discriminant: youtube-video
   value:
     videoId: XIw-0fCpP_4
     thumbnail:
@@ -10,6 +10,7 @@ type:
         alt: YouTube video thumbnail
         height: 720
         width: 1280
+    kind: talk
     description: >-
       Dinesh walks SydJS through the progression from HTML to Markdown to MDX to
       Markdoc.
diff --git a/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml b/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml
index 8cbf1567d..72e282a4d 100644
--- a/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml
+++ b/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml
@@ -10,6 +10,7 @@ type:
         alt: YouTube video thumbnnail
         height: 900
         width: 1600
+    kind: screencast
     description: >-
       An early-days experimental walk-through of using Keystatic with Astro's
       content collections.
diff --git a/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml b/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml
index 0fadfde7b..653d87cbd 100644
--- a/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml
+++ b/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml
@@ -1,6 +1,6 @@
 title: Meet Keystatic by Jed Watson
 type:
-  discriminant: talk
+  discriminant: youtube-video
   value:
     videoId: evO_uz5Ahek
     thumbnail:
@@ -10,5 +10,7 @@ type:
         alt: YouTube video thumbnail
         height: 720
         width: 1280
-    description: 'Jed Watson introduces Keystatic at the React Sydney meetup in '
+    kind: talk
+    description:
+      'Jed Watson introduces Keystatic at the React Sydney meetup in '
 sortIndex: 10
diff --git a/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml b/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml
index 534fbb7cd..4b1eb5726 100644
--- a/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml
+++ b/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml
@@ -12,6 +12,7 @@ type:
           video
         height: 900
         width: 1600
+    kind: screencast
     description: >-
       A 2-minute walk-through of how to set up real-time content previews,
       leveraging Next.js' draft mode feature.

From 1b73a52498118e40f9564d918950c03a2c167158 Mon Sep 17 00:00:00 2001
From: Simon Vrachliotis <simon@simonswiss.com>
Date: Fri, 24 Nov 2023 14:54:49 +1100
Subject: [PATCH 4/9] TypeScript wizzardry

---
 docs/keystatic.config.tsx                     | 19 ++--
 docs/src/app/(public)/resources/page.tsx      | 99 +++++++++++--------
 .../resources/7-things-i-about-keystatic.yaml | 11 +--
 ...debase-editing-with-minimal-footprint.yaml | 11 +--
 ...rkdoc-what-is-it-and-why-do-i-love-it.yaml | 11 +--
 ...atic-with-astro-s-content-collections.yaml | 11 +--
 .../meet-keystatic-by-jed-watson.yaml         | 11 +--
 ...time-previews-with-next-js-draft-mode.yaml | 14 ++-
 8 files changed, 100 insertions(+), 87 deletions(-)

diff --git a/docs/keystatic.config.tsx b/docs/keystatic.config.tsx
index 8209c86d0..8b882b8d3 100644
--- a/docs/keystatic.config.tsx
+++ b/docs/keystatic.config.tsx
@@ -289,11 +289,9 @@ export default config({
                 description: 'The ID of the video (not the URL!)',
                 validation: { length: { min: 1 } },
               }),
-              thumbnail: fields.object({
-                asset: fields.cloudImage({
-                  label: 'Video thumbnail',
-                  description: 'A 16/9 thumbnail image for the video.',
-                }),
+              thumbnail: fields.cloudImage({
+                label: 'Video thumbnail',
+                description: 'A 16/9 thumbnail image for the video.',
               }),
               kind: fields.select({
                 label: 'Video kind',
@@ -306,11 +304,18 @@ export default config({
               description: fields.text({
                 label: 'Video description',
                 multiline: true,
+                validation: { length: { min: 1 } },
               }),
             }),
             article: fields.object({
-              url: fields.url({ label: 'Article URL' }),
-              authorName: fields.text({ label: 'Author name' }),
+              url: fields.url({
+                label: 'Article URL',
+                validation: { isRequired: true },
+              }),
+              authorName: fields.text({
+                label: 'Author name',
+                validation: { length: { min: 1 } },
+              }),
               description: fields.text({
                 label: 'Article description',
                 multiline: true,
diff --git a/docs/src/app/(public)/resources/page.tsx b/docs/src/app/(public)/resources/page.tsx
index 8f2e630b7..9e2787162 100644
--- a/docs/src/app/(public)/resources/page.tsx
+++ b/docs/src/app/(public)/resources/page.tsx
@@ -5,10 +5,35 @@ import { notFound } from 'next/navigation';
 import { ArrowRightIcon } from '../../../components/icons/arrow-right';
 import { reader } from '../../../utils/reader';
 import Button from '../../../components/button';
+import { Entry } from '@keystatic/core/reader';
+import keystaticConfig from '../../../../keystatic.config';
+
+type ResourceEntry = Entry<
+  (typeof keystaticConfig)['collections']['resources']
+>;
+
+type VideoProps = {
+  title: ResourceEntry['title'];
+} & Omit<
+  Extract<
+    Entry<(typeof keystaticConfig)['collections']['resources']>['type'],
+    { discriminant: 'youtube-video' }
+  >['value'],
+  'kind'
+>;
+
+type ArticleProps = {
+  title: ResourceEntry['title'];
+} & Omit<
+  Extract<
+    Entry<(typeof keystaticConfig)['collections']['resources']>['type'],
+    { discriminant: 'article' }
+  >['value'],
+  'kind'
+>;
 
 export default async function Resources() {
   const resources = await reader().collections.resources.all();
-
   if (!resources) notFound();
 
   const sortedVideos = resources
@@ -24,7 +49,7 @@ export default async function Resources() {
       title: resource.entry.title,
       sortIndex: resource.entry.sortIndex,
       ...resource.entry.type.value,
-    }));
+    })) as VideoProps[];
 
   const sortedTalks = resources
     .filter(
@@ -39,7 +64,7 @@ export default async function Resources() {
       title: resource.entry.title,
       sortIndex: resource.entry.sortIndex,
       ...resource.entry.type.value,
-    }));
+    })) as VideoProps[];
 
   const sortedArticles = resources
     .filter(resource => resource.entry.type.discriminant === 'article')
@@ -50,7 +75,7 @@ export default async function Resources() {
       title: resource.entry.title,
       sortIndex: resource.entry.sortIndex,
       ...resource.entry.type.value,
-    }));
+    })) as ArticleProps[];
 
   return (
     <div className="mt-24 pt-10">
@@ -65,7 +90,7 @@ export default async function Resources() {
       </header>
 
       <div className="mt-12 divide-y divide-slate-5">
-        <ResourceSection title="YouTube Videos">
+        <Section title="YouTube Videos">
           <p>
             The{' '}
             <Link
@@ -78,10 +103,11 @@ export default async function Resources() {
           </p>
           <ResourceGrid>
             {sortedVideos.map(video => (
-              <YouTubeResource
-                videoId={video.videoId}
+              <Video
                 title={video.title}
+                videoId={video.videoId}
                 description={video.description}
+                thumbnail={video.thumbnail}
               />
             ))}
           </ResourceGrid>
@@ -94,20 +120,21 @@ export default async function Resources() {
             <span>Watch more videos</span>
             <ArrowRightIcon />
           </Button>
-        </ResourceSection>
-        <ResourceSection title="Talks">
+        </Section>
+        <Section title="Talks">
           <p>Recorded Keystatic talks from local meetups and conferences.</p>
           <ResourceGrid>
             {sortedTalks.map(video => (
-              <YouTubeResource
-                videoId={video.videoId as string}
+              <Video
+                videoId={video.videoId}
                 title={video.title}
-                description={video.description as string}
+                description={video.description}
+                thumbnail={video.thumbnail}
               />
             ))}
           </ResourceGrid>
-        </ResourceSection>
-        <ResourceSection title="Articles">
+        </Section>
+        <Section title="Articles">
           <ResourceGrid>
             {sortedArticles.map(article => (
               <li className="mb-4 mr-4">
@@ -119,13 +146,15 @@ export default async function Resources() {
                 <p className="mt-1 text-sm text-slate-10">
                   by {article.authorName}
                 </p>
-                <p className="mt-4">{article.description}</p>
+                {article.description && (
+                  <p className="mt-4">{article.description}</p>
+                )}
               </li>
             ))}
           </ResourceGrid>
-        </ResourceSection>
+        </Section>
 
-        <ResourceSection>
+        <Section>
           <div className="inline-flex flex-col gap-4 rounded-lg bg-slate-3 px-4 py-6 sm:flex-row">
             <div className="flex h-6 items-center text-3xl">⏳</div>
             <div className="flex flex-col gap-3">
@@ -134,25 +163,14 @@ export default async function Resources() {
               </p>
             </div>
           </div>
-        </ResourceSection>
+        </Section>
       </div>
     </div>
   );
 }
 
-type YouTubeResourceProps = {
-  videoId: string;
-  title: string;
-  description: string;
-};
-
-function YouTubeResource({
-  videoId,
-  title,
-  description,
-}: YouTubeResourceProps) {
+function Video({ videoId, title, description, thumbnail }: VideoProps) {
   const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
-  const videoThumbnailUrl = `https://i3.ytimg.com/vi/${videoId}/maxresdefault.jpg`;
   return (
     <li>
       <Link
@@ -161,8 +179,8 @@ function YouTubeResource({
       >
         <Image
           fill
-          src={videoThumbnailUrl}
-          alt=""
+          src={thumbnail.src}
+          alt={thumbnail.alt || ''}
           className="h-full-w-full absolute inset-0 rounded-lg shadow-md transition-shadow group-hover:shadow-sm"
         />
       </Link>
@@ -176,25 +194,22 @@ function YouTubeResource({
   );
 }
 
-type ResourceGridProps = {
-  children: React.ReactNode;
-};
-
-function ResourceGrid({ children }: ResourceGridProps) {
+function ResourceGrid(props: React.ComponentProps<'ul'>) {
   return (
-    <ul className="mt-8 grid items-start gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3">
-      {children}
-    </ul>
+    <ul
+      className="mt-8 grid items-start gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3"
+      {...props}
+    />
   );
 }
 
-type ResourceSectionProps = {
+type SectionProps = {
   title?: string | React.ReactNode;
   introText?: string;
   children: React.ReactNode;
 };
 
-function ResourceSection({ title, children }: ResourceSectionProps) {
+function Section({ title, children }: SectionProps) {
   return (
     <section className="py-16">
       {title && <h2 className="mb-4 text-2xl font-medium">{title}</h2>}
diff --git a/docs/src/content/resources/7-things-i-about-keystatic.yaml b/docs/src/content/resources/7-things-i-about-keystatic.yaml
index a63f15b2a..cb3eb9a82 100644
--- a/docs/src/content/resources/7-things-i-about-keystatic.yaml
+++ b/docs/src/content/resources/7-things-i-about-keystatic.yaml
@@ -4,12 +4,11 @@ type:
   value:
     videoId: rUO7VdR9NPY
     thumbnail:
-      asset:
-        src: >-
-          https://thinkmill-labs.keystatic.net/keystatic-site/images/nxq56kug7dua/7-things-about-keystatic
-        alt: YouTube video thumbnail
-        height: 720
-        width: 1280
+      src: >-
+        https://thinkmill-labs.keystatic.net/keystatic-site/images/nxq56kug7dua/7-things-about-keystatic
+      alt: YouTube video thumbnail
+      height: 720
+      width: 1280
     kind: talk
     description: >-
       Simon Vrachliotis talking at SydJS about the little things he loves about
diff --git a/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml b/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml
index 97363653e..700b74c0f 100644
--- a/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml
+++ b/docs/src/content/resources/codebase-editing-with-minimal-footprint.yaml
@@ -4,12 +4,11 @@ type:
   value:
     videoId: K_-yTaBWzbA
     thumbnail:
-      asset:
-        src: >-
-          https://thinkmill-labs.keystatic.net/keystatic-site/images/inru19y6a8qq/keystatic-with-minimal-footprint
-        alt: YouTube video thumbnail
-        height: 900
-        width: 1600
+      src: >-
+        https://thinkmill-labs.keystatic.net/keystatic-site/images/inru19y6a8qq/keystatic-with-minimal-footprint
+      alt: YouTube video thumbnail
+      height: 900
+      width: 1600
     kind: screencast
     description: >-
       An example of how lightweight Keystatic can be to make a specific part of
diff --git a/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml b/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml
index fa9af9f57..29bbbd365 100644
--- a/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml
+++ b/docs/src/content/resources/dinesh-pandiyan-markdoc-what-is-it-and-why-do-i-love-it.yaml
@@ -4,12 +4,11 @@ type:
   value:
     videoId: XIw-0fCpP_4
     thumbnail:
-      asset:
-        src: >-
-          https://thinkmill-labs.keystatic.net/keystatic-site/images/enzs1rpkqjgu/markdoc
-        alt: YouTube video thumbnail
-        height: 720
-        width: 1280
+      src: >-
+        https://thinkmill-labs.keystatic.net/keystatic-site/images/enzs1rpkqjgu/markdoc
+      alt: YouTube video thumbnail
+      height: 720
+      width: 1280
     kind: talk
     description: >-
       Dinesh walks SydJS through the progression from HTML to Markdown to MDX to
diff --git a/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml b/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml
index 72e282a4d..758adf750 100644
--- a/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml
+++ b/docs/src/content/resources/keystatic-with-astro-s-content-collections.yaml
@@ -4,12 +4,11 @@ type:
   value:
     videoId: 6l2YWCyPsWk
     thumbnail:
-      asset:
-        src: >-
-          https://thinkmill-labs.keystatic.net/keystatic-site/images/ewuee6ly46km/tm-keystatic
-        alt: YouTube video thumbnnail
-        height: 900
-        width: 1600
+      src: >-
+        https://thinkmill-labs.keystatic.net/keystatic-site/images/ewuee6ly46km/tm-keystatic
+      alt: YouTube video thumbnnail
+      height: 900
+      width: 1600
     kind: screencast
     description: >-
       An early-days experimental walk-through of using Keystatic with Astro's
diff --git a/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml b/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml
index 653d87cbd..3c39e778e 100644
--- a/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml
+++ b/docs/src/content/resources/meet-keystatic-by-jed-watson.yaml
@@ -4,12 +4,11 @@ type:
   value:
     videoId: evO_uz5Ahek
     thumbnail:
-      asset:
-        src: >-
-          https://thinkmill-labs.keystatic.net/keystatic-site/images/w5e53g9h00e0/meet-keystatic-by-jed-watson
-        alt: YouTube video thumbnail
-        height: 720
-        width: 1280
+      src: >-
+        https://thinkmill-labs.keystatic.net/keystatic-site/images/w5e53g9h00e0/meet-keystatic-by-jed-watson
+      alt: YouTube video thumbnail
+      height: 720
+      width: 1280
     kind: talk
     description:
       'Jed Watson introduces Keystatic at the React Sydney meetup in '
diff --git a/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml b/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml
index 4b1eb5726..6bc53af68 100644
--- a/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml
+++ b/docs/src/content/resources/real-time-previews-with-next-js-draft-mode.yaml
@@ -4,14 +4,12 @@ type:
   value:
     videoId: QuoADtLQVCE
     thumbnail:
-      asset:
-        src: >-
-          https://thinkmill-labs.keystatic.net/keystatic-site/images/j8wdve6gqm87/live-previews
-        alt: >-
-          YouTube thumbnail for Real-time previews with Next.js' draft mode
-          video
-        height: 900
-        width: 1600
+      src: >-
+        https://thinkmill-labs.keystatic.net/keystatic-site/images/j8wdve6gqm87/live-previews
+      alt: >-
+        YouTube thumbnail for Real-time previews with Next.js' draft mode video
+      height: 900
+      width: 1600
     kind: screencast
     description: >-
       A 2-minute walk-through of how to set up real-time content previews,

From 0b472fb54d080c96979aa2f22640d07605f9b54f Mon Sep 17 00:00:00 2001
From: Simon Vrachliotis <simon@simonswiss.com>
Date: Fri, 24 Nov 2023 15:00:03 +1100
Subject: [PATCH 5/9] Removing duplication of Entry<typeof keystaticConfig>

---
 docs/src/app/(public)/resources/page.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/docs/src/app/(public)/resources/page.tsx b/docs/src/app/(public)/resources/page.tsx
index 9e2787162..5e01b397c 100644
--- a/docs/src/app/(public)/resources/page.tsx
+++ b/docs/src/app/(public)/resources/page.tsx
@@ -15,20 +15,14 @@ type ResourceEntry = Entry<
 type VideoProps = {
   title: ResourceEntry['title'];
 } & Omit<
-  Extract<
-    Entry<(typeof keystaticConfig)['collections']['resources']>['type'],
-    { discriminant: 'youtube-video' }
-  >['value'],
+  Extract<ResourceEntry['type'], { discriminant: 'youtube-video' }>['value'],
   'kind'
 >;
 
 type ArticleProps = {
   title: ResourceEntry['title'];
 } & Omit<
-  Extract<
-    Entry<(typeof keystaticConfig)['collections']['resources']>['type'],
-    { discriminant: 'article' }
-  >['value'],
+  Extract<ResourceEntry['type'], { discriminant: 'article' }>['value'],
   'kind'
 >;
 

From e238f12e9366f9c629b34c6225d2e26333c4b242 Mon Sep 17 00:00:00 2001
From: Simon Vrachliotis <simon@simonswiss.com>
Date: Fri, 24 Nov 2023 15:01:46 +1100
Subject: [PATCH 6/9] cleanup

---
 docs/src/app/(public)/resources/layout.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/docs/src/app/(public)/resources/layout.tsx b/docs/src/app/(public)/resources/layout.tsx
index 5241189d3..8ad1d91dd 100644
--- a/docs/src/app/(public)/resources/layout.tsx
+++ b/docs/src/app/(public)/resources/layout.tsx
@@ -16,10 +16,7 @@ export default async function RootLayout({
   return (
     <>
       <div className="mx-auto min-h-screen w-full max-w-7xl px-6">
-        {/** CONTENT */}
-
         <Main className="flex gap-8">
-          {/** INNER CONTENT */}
           <div className="flex-1">{children}</div>
         </Main>
       </div>

From 4b3548af2da9cdef8ac8c8f45a9283bdb42f0b53 Mon Sep 17 00:00:00 2001
From: Simon Vrachliotis <simon@simonswiss.com>
Date: Fri, 24 Nov 2023 15:05:06 +1100
Subject: [PATCH 7/9] =?UTF-8?q?self=20PR=20review=20fixes=20=F0=9F=98=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/keystatic.config.tsx | 2 --
 docs/next.config.js       | 5 +----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/docs/keystatic.config.tsx b/docs/keystatic.config.tsx
index 8b882b8d3..6fd2187e8 100644
--- a/docs/keystatic.config.tsx
+++ b/docs/keystatic.config.tsx
@@ -280,9 +280,7 @@ export default config({
             defaultValue: 'youtube-video',
           }),
           {
-            // "none" condition
             none: fields.empty(),
-            // "youtube-video" condition
             'youtube-video': fields.object({
               videoId: fields.text({
                 label: 'Video ID',
diff --git a/docs/next.config.js b/docs/next.config.js
index c4bd261fc..2c6155886 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -6,10 +6,7 @@ module.exports = {
     externalDir: true,
   },
   images: {
-    remotePatterns: [
-      { hostname: 'thinkmill-labs.keystatic.net' },
-      { hostname: 'i3.ytimg.com' },
-    ],
+    remotePatterns: [{ hostname: 'thinkmill-labs.keystatic.net' }],
   },
   async redirects() {
     return [

From 7765be8a0cacc1e301c2f9e3efe337cc136e34fe Mon Sep 17 00:00:00 2001
From: Simon Vrachliotis <simon@simonswiss.com>
Date: Fri, 24 Nov 2023 15:14:18 +1100
Subject: [PATCH 8/9] OG/twitter tags for resources and showcase pages

---
 docs/src/app/(public)/resources/layout.tsx | 22 ++++++++++++++++++++++
 docs/src/app/(public)/showcase/layout.tsx  | 22 ++++++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/docs/src/app/(public)/resources/layout.tsx b/docs/src/app/(public)/resources/layout.tsx
index 8ad1d91dd..080aec45f 100644
--- a/docs/src/app/(public)/resources/layout.tsx
+++ b/docs/src/app/(public)/resources/layout.tsx
@@ -6,6 +6,28 @@ export const metadata = {
     template: '%s - Resources | Keystatic',
     default: 'Resources',
   },
+  description:
+    'A collection of videos, talks, articles and other resources to help you learn Keystatic and dig deeper.',
+  openGraph: {
+    title: 'Resources',
+    description:
+      'A collection of videos, talks, articles and other resources to help you learn Keystatic and dig deeper.',
+    images: [
+      {
+        url: '/og?title=Resources',
+      },
+    ],
+    siteName: 'Keystatic',
+    type: 'website',
+    url: 'https://keystatic.com/resources',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Resources',
+    description:
+      'A collection of videos, talks, articles and other resources to help you learn Keystatic and dig deeper.',
+    site: '@thekeystatic',
+  },
 };
 
 export default async function RootLayout({
diff --git a/docs/src/app/(public)/showcase/layout.tsx b/docs/src/app/(public)/showcase/layout.tsx
index 3180c06aa..2ba85e228 100644
--- a/docs/src/app/(public)/showcase/layout.tsx
+++ b/docs/src/app/(public)/showcase/layout.tsx
@@ -6,6 +6,28 @@ export const metadata = {
     template: '%s - Showcase | Keystatic',
     default: 'Showcase',
   },
+  description:
+    'A collection of projects using Keystatic to manage parts of their codebase.',
+  openGraph: {
+    title: 'Showcase',
+    description:
+      'A collection of projects using Keystatic to manage parts of their codebase.',
+    images: [
+      {
+        url: '/og?title=Showcase',
+      },
+    ],
+    siteName: 'Keystatic',
+    type: 'website',
+    url: 'https://keystatic.com/showcase',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Showcase',
+    description:
+      'A collection of projects using Keystatic to manage parts of their codebase.',
+    site: '@thekeystatic',
+  },
 };
 
 export default async function RootLayout({

From c6e1a3d2ef30e7884092b2d62d16c36b278e28dc Mon Sep 17 00:00:00 2001
From: Emma Hamilton <git@emmas.town>
Date: Fri, 24 Nov 2023 14:19:18 +1000
Subject: [PATCH 9/9] Update docs/keystatic.config.tsx

---
 docs/keystatic.config.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/keystatic.config.tsx b/docs/keystatic.config.tsx
index 6fd2187e8..c32c2dc27 100644
--- a/docs/keystatic.config.tsx
+++ b/docs/keystatic.config.tsx
@@ -280,7 +280,6 @@ export default config({
             defaultValue: 'youtube-video',
           }),
           {
-            none: fields.empty(),
             'youtube-video': fields.object({
               videoId: fields.text({
                 label: 'Video ID',