From 6e128d639079cc1a9326ba7ad45a954ca88a3239 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Mon, 25 Nov 2024 17:22:10 +0000
Subject: [PATCH 01/23] create pages for examples, tutorials and videos,
 refactor examples (#1191)

---
 _components/Header.tsx                        |  12 +-
 _includes/doc.tsx                             | 197 +-----
 _includes/layout.tsx                          |   4 +-
 _includes/renderCommand.tsx                   | 202 ++++++
 examples.page.tsx                             | 599 ------------------
 learn/_components/CopyButton.tsx              |  20 +
 learn/_components/SnippetComponent.tsx        |  59 ++
 learn/_pages/ExamplePage.tsx                  | 136 ++++
 learn/_pages/ExamplesPage.tsx                 | 126 ++++
 learn/_pages/LandingPage.tsx                  |  10 +
 learn/_pages/TutorialsPage.tsx                |   3 +
 learn/_pages/VideosPage.tsx                   |   3 +
 .../_pages/examples_test.ts                   |   2 +-
 .../examples}/aes-encryption.ts               |   0
 {examples => learn/examples}/benchmarking.ts  |   0
 .../examples}/byte-manipulation.ts            |   0
 .../examples}/checking-file-existence.ts      |   0
 {examples => learn/examples}/color-logging.ts |   0
 .../examples}/command-line-arguments.ts       |   0
 .../examples}/create-remove-directories.ts    |   0
 {examples => learn/examples}/cron.ts          |   0
 .../examples}/data-processing.ts              |   0
 .../examples}/deleting-files.ts               |   0
 {examples => learn/examples}/deno-version.ts  |   0
 {examples => learn/examples}/dns-queries.ts   |   0
 .../examples}/environment-variables.ts        |   0
 .../examples}/exponential-backoff.ts          |   0
 {examples => learn/examples}/hashing.ts       |   0
 {examples => learn/examples}/hello-world.ts   |   0
 .../examples}/hex-base64-encoding.ts          |   0
 .../examples}/hmac-generate-verify.ts         |   0
 {examples => learn/examples}/hono.ts          |   0
 {examples => learn/examples}/http-requests.ts |   0
 .../examples}/http-server-files.ts            |   0
 ...ver-oak-crud-middleware-with-sqlite3-db.ts |   0
 .../examples}/http-server-routing.ts          |   0
 .../examples}/http-server-streaming.ts        |   0
 .../examples}/http-server-websocket.ts        |   0
 {examples => learn/examples}/http-server.ts   |   0
 {examples => learn/examples}/import-export.ts |   0
 .../examples}/importing-json.ts               |   0
 {examples => learn/examples}/kv-watch.ts      |   0
 {examples => learn/examples}/kv.ts            |   0
 {examples => learn/examples}/mongo.ts         |   0
 .../examples}/moving-renaming-files.ts        |   0
 {examples => learn/examples}/node.ts          |   0
 {examples => learn/examples}/npm.ts           |   0
 .../examples}/openai-chat-completion.ts       |   0
 {examples => learn/examples}/os-signals.ts    |   0
 .../examples}/parsing-serializing-csv.ts      |   0
 .../examples}/parsing-serializing-json.ts     |   0
 .../examples}/parsing-serializing-toml.ts     |   0
 .../examples}/parsing-serializing-yaml.ts     |   0
 .../examples}/path-operations.ts              |   0
 {examples => learn/examples}/permissions.ts   |   0
 {examples => learn/examples}/pid.ts           |   0
 .../examples}/piping-streams.ts               |   0
 {examples => learn/examples}/postgres.ts      |   0
 {examples => learn/examples}/prompts.ts       |   0
 {examples => learn/examples}/queues.ts        |   0
 {examples => learn/examples}/reading-files.ts |   0
 .../examples}/reading-system-metrics.ts       |   0
 {examples => learn/examples}/redis.ts         |   0
 {examples => learn/examples}/rsa-signature.ts |   0
 {examples => learn/examples}/sqlite.ts        |   0
 .../examples}/streaming-files.ts              |   0
 .../examples}/subprocess-running-files.ts     |   0
 .../examples}/subprocesses-output.ts          |   0
 .../examples}/subprocesses-spawn.ts           |   0
 {examples => learn/examples}/supabase.ts      |   0
 {examples => learn/examples}/symlinks.ts      |   0
 {examples => learn/examples}/tcp-connector.ts |   0
 .../examples}/tcp-echo-server.ts              |   0
 {examples => learn/examples}/tcp-listener.ts  |   0
 .../examples}/temporary-files.ts              |   0
 {examples => learn/examples}/timers.ts        |   0
 {examples => learn/examples}/tls-connector.ts |   0
 {examples => learn/examples}/tls-listener.ts  |   0
 {examples => learn/examples}/typescript.ts    |   0
 {examples => learn/examples}/udp-connector.ts |   0
 {examples => learn/examples}/udp-listener.ts  |   0
 {examples => learn/examples}/ulid.ts          |   0
 {examples => learn/examples}/unix-cat.ts      |   0
 .../examples}/unzip-gzipped-file.ts           |   0
 {examples => learn/examples}/url-parsing.ts   |   0
 {examples => learn/examples}/uuids.ts         |   0
 .../examples}/walking-directories.ts          |   0
 .../examples}/watching-files.ts               |   0
 {examples => learn/examples}/web-workers.ts   |   0
 {examples => learn/examples}/webassembly.ts   |   0
 {examples => learn/examples}/websocket.ts     |   0
 {examples => learn/examples}/writing-files.ts |   0
 {examples => learn/examples}/writing-tests.ts |   0
 learn/index.tsx                               |  88 +++
 learn/types.ts                                |  57 ++
 learn/utils/parseExample.ts                   | 163 +++++
 orama.ts                                      |   2 +-
 97 files changed, 879 insertions(+), 804 deletions(-)
 create mode 100644 _includes/renderCommand.tsx
 delete mode 100644 examples.page.tsx
 create mode 100644 learn/_components/CopyButton.tsx
 create mode 100644 learn/_components/SnippetComponent.tsx
 create mode 100644 learn/_pages/ExamplePage.tsx
 create mode 100644 learn/_pages/ExamplesPage.tsx
 create mode 100644 learn/_pages/LandingPage.tsx
 create mode 100644 learn/_pages/TutorialsPage.tsx
 create mode 100644 learn/_pages/VideosPage.tsx
 rename examples_test.ts => learn/_pages/examples_test.ts (91%)
 rename {examples => learn/examples}/aes-encryption.ts (100%)
 rename {examples => learn/examples}/benchmarking.ts (100%)
 rename {examples => learn/examples}/byte-manipulation.ts (100%)
 rename {examples => learn/examples}/checking-file-existence.ts (100%)
 rename {examples => learn/examples}/color-logging.ts (100%)
 rename {examples => learn/examples}/command-line-arguments.ts (100%)
 rename {examples => learn/examples}/create-remove-directories.ts (100%)
 rename {examples => learn/examples}/cron.ts (100%)
 rename {examples => learn/examples}/data-processing.ts (100%)
 rename {examples => learn/examples}/deleting-files.ts (100%)
 rename {examples => learn/examples}/deno-version.ts (100%)
 rename {examples => learn/examples}/dns-queries.ts (100%)
 rename {examples => learn/examples}/environment-variables.ts (100%)
 rename {examples => learn/examples}/exponential-backoff.ts (100%)
 rename {examples => learn/examples}/hashing.ts (100%)
 rename {examples => learn/examples}/hello-world.ts (100%)
 rename {examples => learn/examples}/hex-base64-encoding.ts (100%)
 rename {examples => learn/examples}/hmac-generate-verify.ts (100%)
 rename {examples => learn/examples}/hono.ts (100%)
 rename {examples => learn/examples}/http-requests.ts (100%)
 rename {examples => learn/examples}/http-server-files.ts (100%)
 rename {examples => learn/examples}/http-server-oak-crud-middleware-with-sqlite3-db.ts (100%)
 rename {examples => learn/examples}/http-server-routing.ts (100%)
 rename {examples => learn/examples}/http-server-streaming.ts (100%)
 rename {examples => learn/examples}/http-server-websocket.ts (100%)
 rename {examples => learn/examples}/http-server.ts (100%)
 rename {examples => learn/examples}/import-export.ts (100%)
 rename {examples => learn/examples}/importing-json.ts (100%)
 rename {examples => learn/examples}/kv-watch.ts (100%)
 rename {examples => learn/examples}/kv.ts (100%)
 rename {examples => learn/examples}/mongo.ts (100%)
 rename {examples => learn/examples}/moving-renaming-files.ts (100%)
 rename {examples => learn/examples}/node.ts (100%)
 rename {examples => learn/examples}/npm.ts (100%)
 rename {examples => learn/examples}/openai-chat-completion.ts (100%)
 rename {examples => learn/examples}/os-signals.ts (100%)
 rename {examples => learn/examples}/parsing-serializing-csv.ts (100%)
 rename {examples => learn/examples}/parsing-serializing-json.ts (100%)
 rename {examples => learn/examples}/parsing-serializing-toml.ts (100%)
 rename {examples => learn/examples}/parsing-serializing-yaml.ts (100%)
 rename {examples => learn/examples}/path-operations.ts (100%)
 rename {examples => learn/examples}/permissions.ts (100%)
 rename {examples => learn/examples}/pid.ts (100%)
 rename {examples => learn/examples}/piping-streams.ts (100%)
 rename {examples => learn/examples}/postgres.ts (100%)
 rename {examples => learn/examples}/prompts.ts (100%)
 rename {examples => learn/examples}/queues.ts (100%)
 rename {examples => learn/examples}/reading-files.ts (100%)
 rename {examples => learn/examples}/reading-system-metrics.ts (100%)
 rename {examples => learn/examples}/redis.ts (100%)
 rename {examples => learn/examples}/rsa-signature.ts (100%)
 rename {examples => learn/examples}/sqlite.ts (100%)
 rename {examples => learn/examples}/streaming-files.ts (100%)
 rename {examples => learn/examples}/subprocess-running-files.ts (100%)
 rename {examples => learn/examples}/subprocesses-output.ts (100%)
 rename {examples => learn/examples}/subprocesses-spawn.ts (100%)
 rename {examples => learn/examples}/supabase.ts (100%)
 rename {examples => learn/examples}/symlinks.ts (100%)
 rename {examples => learn/examples}/tcp-connector.ts (100%)
 rename {examples => learn/examples}/tcp-echo-server.ts (100%)
 rename {examples => learn/examples}/tcp-listener.ts (100%)
 rename {examples => learn/examples}/temporary-files.ts (100%)
 rename {examples => learn/examples}/timers.ts (100%)
 rename {examples => learn/examples}/tls-connector.ts (100%)
 rename {examples => learn/examples}/tls-listener.ts (100%)
 rename {examples => learn/examples}/typescript.ts (100%)
 rename {examples => learn/examples}/udp-connector.ts (100%)
 rename {examples => learn/examples}/udp-listener.ts (100%)
 rename {examples => learn/examples}/ulid.ts (100%)
 rename {examples => learn/examples}/unix-cat.ts (100%)
 rename {examples => learn/examples}/unzip-gzipped-file.ts (100%)
 rename {examples => learn/examples}/url-parsing.ts (100%)
 rename {examples => learn/examples}/uuids.ts (100%)
 rename {examples => learn/examples}/walking-directories.ts (100%)
 rename {examples => learn/examples}/watching-files.ts (100%)
 rename {examples => learn/examples}/web-workers.ts (100%)
 rename {examples => learn/examples}/webassembly.ts (100%)
 rename {examples => learn/examples}/websocket.ts (100%)
 rename {examples => learn/examples}/writing-files.ts (100%)
 rename {examples => learn/examples}/writing-tests.ts (100%)
 create mode 100644 learn/index.tsx
 create mode 100644 learn/types.ts
 create mode 100644 learn/utils/parseExample.ts

diff --git a/_components/Header.tsx b/_components/Header.tsx
index bfd323477..10393cc62 100644
--- a/_components/Header.tsx
+++ b/_components/Header.tsx
@@ -50,16 +50,16 @@ export default function Header({
           />
           <HeaderItem
             url={url}
-            activeOn="/examples"
-            href="/examples"
-            name="Examples"
+            activeOn="/api"
+            href="/api/deno"
+            name="API reference"
             hideOnMobile
           />
           <HeaderItem
             url={url}
-            activeOn="/api"
-            href="/api/deno"
-            name="API reference"
+            activeOn="/learn"
+            href="/learn"
+            name="Learning hub"
             hideOnMobile
           />
           <span class="hidden xl:inline-block text-foreground-secondary mx-2">
diff --git a/_includes/doc.tsx b/_includes/doc.tsx
index f0e403af6..9243a2311 100644
--- a/_includes/doc.tsx
+++ b/_includes/doc.tsx
@@ -1,18 +1,14 @@
-import ansiRegex from "npm:ansi-regex";
 import Logo from "../_components/Logo.tsx";
-import CLI_REFERENCE from "../runtime/reference/cli/_commands_reference.json" with {
-  type: "json",
-};
 import {
   Sidebar as Sidebar_,
   SidebarItem,
   TableOfContentsItem as TableOfContentsItem_,
 } from "../types.ts";
 import { Breadcrumbs } from "../_components/Breadcrumbs.tsx";
-import { HeaderAnchor } from "../_components/HeaderAnchor.tsx";
 import { NavigationButton } from "../_components/NavigationButton.tsx";
 import { TableOfContentsItem } from "../_components/TableOfContentsItem.tsx";
 import { TableOfContentsItemMobile } from "../_components/TableOfContentsItemMobile.tsx";
+import renderCommand from "./renderCommand.tsx";
 
 export const layout = "layout.tsx";
 
@@ -204,194 +200,3 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
   );
 }
 
-const ANSI_RE = ansiRegex();
-const SUBSEQUENT_ANSI_RE = new RegExp(
-  `(?:${ANSI_RE.source})(?:${ANSI_RE.source})`,
-  "g",
-);
-const ENCAPSULATED_ANSI_RE = new RegExp(
-  `(${ANSI_RE.source})(.+?)(${ANSI_RE.source})`,
-  "g",
-);
-const START_AND_END_ANSI_RE = new RegExp(
-  `^(?:${ANSI_RE.source}).+?(?:${ANSI_RE.source})$`,
-);
-const SUBSEQUENT_ENCAPSULATED_ANSI_RE = new RegExp(
-  `${ENCAPSULATED_ANSI_RE.source}( ?)${ENCAPSULATED_ANSI_RE.source}`,
-  "g",
-);
-
-const FLAGS_RE = /[^`]--\S+/g;
-function flagsToInlineCode(text: string): string {
-  return text.replaceAll(FLAGS_RE, "`$&`");
-}
-
-function renderCommand(
-  commandName: string,
-  helpers: Lume.Helpers,
-): { rendered: any; toc: TableOfContentsItem_[] } {
-  const command = CLI_REFERENCE.subcommands.find((command) =>
-    command.name === commandName
-  )!;
-
-  const toc: TableOfContentsItem_[] = [];
-
-  let about = command.about!.replaceAll(
-    SUBSEQUENT_ENCAPSULATED_ANSI_RE,
-    function (
-      _,
-      _opening1,
-      text1,
-      _closing1,
-      space,
-      opening2,
-      text2,
-      closing2,
-    ) {
-      return `${opening2}${text1}${space}${text2}${closing2}`;
-    },
-  ).replaceAll(SUBSEQUENT_ANSI_RE, "");
-  let aboutLines = about.split("\n");
-  const aboutLinesReadMoreIndex = aboutLines.findLastIndex((line) =>
-    line.toLowerCase().replaceAll(ANSI_RE, "").trim().startsWith("read more:")
-  );
-  if (aboutLinesReadMoreIndex !== -1) {
-    aboutLines = aboutLines.slice(0, aboutLinesReadMoreIndex);
-  }
-
-  about = aboutLines.join("\n").replaceAll(
-    ENCAPSULATED_ANSI_RE,
-    (_, opening, text, _closing, offset, string) => {
-      if (opening === "\u001b[32m") { // green, used as heading
-        return `### ${text}`;
-      } else if (
-        opening === "\u001b[38;5;245m" || opening === "\u001b[36m" ||
-        opening === "\u001b[1m" || opening === "\u001b[22m"
-      ) { // gray and cyan used for code and snippets, and we treat yellow and bold as well as such
-        const lines = string.split("\n");
-        let line = "";
-
-        while (offset > 0) {
-          line = lines.shift();
-          offset -= line.length;
-        }
-
-        if (START_AND_END_ANSI_RE.test(line.trim())) {
-          return "\n```\n" + text + "\n```\n\n";
-        } else {
-          return "`" + text + "`";
-        }
-      } else {
-        return text;
-      }
-    },
-  );
-
-  const args = [];
-  const options: Record<string, any> = {};
-
-  for (const arg of command.args) {
-    if (arg.help_heading === "Unstable options") {
-      continue;
-    }
-
-    if (arg.long) {
-      options[arg.help_heading ?? "Options"] ??= [];
-      options[arg.help_heading ?? "Options"].push(arg);
-    } else {
-      args.push(arg);
-    }
-  }
-
-  const rendered = (
-    <div>
-      <div class="p-4 bg-stone-100 dark:bg-transparent rounded border border-gray-300 dark:border-background-tertiary mt-6 mb-6 relative">
-        <h3 class="!text-xs !m-0 -top-2.5 bg-background-primary border border-gray-600/25 px-2 py-0.5 rounded absolute !font-normal">
-          Command line usage
-        </h3>
-        <div>
-          <pre class="!mb-0 !px-3 !py-2">
-            <code>{command.usage.replaceAll(ANSI_RE, "").slice("usage: ".length)}</code>
-          </pre>
-        </div>
-      </div>
-
-      <div dangerouslySetInnerHTML={{ __html: helpers.md(about) }} />
-      <br />
-
-      {Object.entries(options).map(([heading, flags]) => {
-        const id = heading.toLowerCase().replace(/\s/g, "-");
-
-        const renderedFlags = flags.toSorted((a, b) =>
-          a.name.localeCompare(b.name)
-        ).map((flag) => renderOption(id, flag, helpers));
-
-        toc.push({
-          text: heading,
-          slug: id,
-          children: [],
-        });
-
-        return (
-          <>
-            <h2 id={id}>
-              {heading} <HeaderAnchor id={id} />
-            </h2>
-            {renderedFlags}
-          </>
-        );
-      })}
-    </div>
-  );
-
-  return {
-    rendered,
-    toc,
-  };
-}
-
-function renderOption(group: string, arg, helpers: Lume.Helpers) {
-  const id = `${group}-${arg.name}`;
-
-  let docsLink = null;
-  let help = arg.help.replaceAll(ANSI_RE, "");
-  const helpLines = help.split("\n");
-  const helpLinesDocsIndex = helpLines.findLastIndex((line) =>
-    line.toLowerCase()
-      .trim()
-      .startsWith("docs:")
-  );
-  if (helpLinesDocsIndex !== -1) {
-    help = helpLines.slice(0, helpLinesDocsIndex).join("\n");
-    docsLink = helpLines[helpLinesDocsIndex].trim().slice("docs:".length);
-  }
-
-  return (
-    <>
-      <h3 id={id}>
-        <code>
-          {docsLink
-            ? <a href={docsLink}>{"--" + arg.name}</a>
-            : ("--" + arg.name)}
-        </code>{" "}
-        <HeaderAnchor id={id} />
-      </h3>
-      {arg.short && (
-        <p>
-          Short flag: <code>-{arg.short}</code>
-        </p>
-      )}
-      {arg.help && (
-        <p
-          class="block !whitespace-pre-line"
-          dangerouslySetInnerHTML={{
-            __html: helpers.md(
-              flagsToInlineCode(help) +
-                ((help.endsWith(".") || help.endsWith("]")) ? "" : "."),
-            ),
-          }}
-        />
-      )}
-    </>
-  );
-}
diff --git a/_includes/layout.tsx b/_includes/layout.tsx
index ee4bfe4ee..8d9b2fe54 100644
--- a/_includes/layout.tsx
+++ b/_includes/layout.tsx
@@ -1,3 +1,5 @@
+import Header from "../_components/Header.tsx";
+
 export default function Layout(props: Lume.Data) {
   const reference = props.url.startsWith("/api");
   const description = props.description ||
@@ -99,7 +101,7 @@ export default function Layout(props: Lume.Data) {
         >
           Skip to main content <span aria-hidden="true">-&gt;</span>
         </a>
-        <props.comp.Header url={props.url} hasSidebar={!!props.sidebar} />
+        <Header url={props.url} hasSidebar={!!props.sidebar} />
         {props.children}
       </body>
     </html>
diff --git a/_includes/renderCommand.tsx b/_includes/renderCommand.tsx
new file mode 100644
index 000000000..b3f9e1974
--- /dev/null
+++ b/_includes/renderCommand.tsx
@@ -0,0 +1,202 @@
+import { TableOfContentsItem as TableOfContentsItem_ } from "../types.ts";
+import ansiRegex from "npm:ansi-regex";
+import { HeaderAnchor } from "../_components/HeaderAnchor.tsx";
+import CLI_REFERENCE from "../runtime/reference/cli/_commands_reference.json" with {
+  type: "json",
+};
+import { VNode } from "npm:preact";
+
+type ArgType = { name: string; help: string; short: string | number | bigint | boolean | object | VNode<any> | null | undefined; };
+  
+const ANSI_RE = ansiRegex();
+const SUBSEQUENT_ANSI_RE = new RegExp(
+  `(?:${ANSI_RE.source})(?:${ANSI_RE.source})`,
+  "g",
+);
+const ENCAPSULATED_ANSI_RE = new RegExp(
+  `(${ANSI_RE.source})(.+?)(${ANSI_RE.source})`,
+  "g",
+);
+const START_AND_END_ANSI_RE = new RegExp(
+  `^(?:${ANSI_RE.source}).+?(?:${ANSI_RE.source})$`,
+);
+const SUBSEQUENT_ENCAPSULATED_ANSI_RE = new RegExp(
+  `${ENCAPSULATED_ANSI_RE.source}( ?)${ENCAPSULATED_ANSI_RE.source}`,
+  "g",
+);
+
+const FLAGS_RE = /[^`]--\S+/g;
+function flagsToInlineCode(text: string): string {
+  return text.replaceAll(FLAGS_RE, "`$&`");
+}
+
+export default function renderCommand(
+    commandName: string,
+    helpers: Lume.Helpers,
+  ): { rendered: any; toc: TableOfContentsItem_[] } {
+    const command = CLI_REFERENCE.subcommands.find((command) =>
+      command.name === commandName
+    )!;
+  
+    const toc: TableOfContentsItem_[] = [];
+  
+    let about = command.about!.replaceAll(
+      SUBSEQUENT_ENCAPSULATED_ANSI_RE,
+      function (
+        _,
+        _opening1,
+        text1,
+        _closing1,
+        space,
+        opening2,
+        text2,
+        closing2,
+      ) {
+        return `${opening2}${text1}${space}${text2}${closing2}`;
+      },
+    ).replaceAll(SUBSEQUENT_ANSI_RE, "");
+    let aboutLines = about.split("\n");
+    const aboutLinesReadMoreIndex = aboutLines.findLastIndex((line) =>
+      line.toLowerCase().replaceAll(ANSI_RE, "").trim().startsWith("read more:")
+    );
+    if (aboutLinesReadMoreIndex !== -1) {
+      aboutLines = aboutLines.slice(0, aboutLinesReadMoreIndex);
+    }
+  
+    about = aboutLines.join("\n").replaceAll(
+      ENCAPSULATED_ANSI_RE,
+      (_, opening, text, _closing, offset, string) => {
+        if (opening === "\u001b[32m") { // green, used as heading
+          return `### ${text}`;
+        } else if (
+          opening === "\u001b[38;5;245m" || opening === "\u001b[36m" ||
+          opening === "\u001b[1m" || opening === "\u001b[22m"
+        ) { // gray and cyan used for code and snippets, and we treat yellow and bold as well as such
+          const lines = string.split("\n");
+          let line = "";
+  
+          while (offset > 0) {
+            line = lines.shift();
+            offset -= line.length;
+          }
+  
+          if (START_AND_END_ANSI_RE.test(line.trim())) {
+            return "\n```\n" + text + "\n```\n\n";
+          } else {
+            return "`" + text + "`";
+          }
+        } else {
+          return text;
+        }
+      },
+    );
+  
+    const args = [];
+    const options: Record<string, ArgType[]> = {};
+  
+    for (const arg of command.args) {
+      if (arg.help_heading === "Unstable options") {
+        continue;
+      }
+  
+      if (arg.long) {
+        const key = arg.help_heading ?? "Options";
+        options[key] ??= [];
+        options[key].push(arg);
+      } else {
+        args.push(arg);
+      }
+    }
+  
+    const rendered = (
+      <div>
+        <div class="p-4 bg-stone-100 dark:bg-transparent rounded border border-gray-300 dark:border-background-tertiary mt-6 mb-6 relative">
+          <h3 class="!text-xs !m-0 -top-2.5 bg-background-primary border border-gray-600/25 px-2 py-0.5 rounded absolute !font-normal">
+            Command line usage
+          </h3>
+          <div>
+            <pre class="!mb-0 !px-3 !py-2">
+              <code>{command.usage.replaceAll(ANSI_RE, "").slice("usage: ".length)}</code>
+            </pre>
+          </div>
+        </div>
+  
+        <div dangerouslySetInnerHTML={{ __html: helpers.md(about) }} />
+        <br />
+  
+        {Object.entries(options).map(([heading, flags]) => {
+          const id = heading.toLowerCase().replace(/\s/g, "-");
+  
+          const renderedFlags = flags.toSorted((a: ArgType, b: ArgType) =>
+            a.name.localeCompare(b.name)
+          ).map((flag: ArgType) => renderOption(id, flag, helpers));
+  
+          toc.push({
+            text: heading,
+            slug: id,
+            children: [],
+          });
+  
+          return (
+            <>
+              <h2 id={id}>
+                {heading} <HeaderAnchor id={id} />
+              </h2>
+              {renderedFlags}
+            </>
+          );
+        })}
+      </div>
+    );
+  
+    return {
+      rendered,
+      toc,
+    };
+  }
+  
+  function renderOption(group: string, arg: ArgType, helpers: Lume.Helpers) {
+    const id = `${group}-${arg.name}`;
+  
+    let docsLink = null;
+    let help = arg.help.replaceAll(ANSI_RE, "");
+    const helpLines = help.split("\n");
+    const helpLinesDocsIndex = helpLines.findLastIndex((line) =>
+      line.toLowerCase()
+        .trim()
+        .startsWith("docs:")
+    );
+    if (helpLinesDocsIndex !== -1) {
+      help = helpLines.slice(0, helpLinesDocsIndex).join("\n");
+      docsLink = helpLines[helpLinesDocsIndex].trim().slice("docs:".length);
+    }
+  
+    return (
+      <>
+        <h3 id={id}>
+          <code>
+            {docsLink
+              ? <a href={docsLink}>{"--" + arg.name}</a>
+              : ("--" + arg.name)}
+          </code>{" "}
+          <HeaderAnchor id={id} />
+        </h3>
+        {arg.short && (
+          <p>
+            Short flag: <code>-{arg.short}</code>
+          </p>
+        )}
+        {arg.help && (
+          <p
+            class="block !whitespace-pre-line"
+            dangerouslySetInnerHTML={{
+              __html: helpers.md(
+                flagsToInlineCode(help) +
+                  ((help.endsWith(".") || help.endsWith("]")) ? "" : "."),
+              ),
+            }}
+          />
+        )}
+      </>
+    );
+  }
diff --git a/examples.page.tsx b/examples.page.tsx
deleted file mode 100644
index a396ff6e2..000000000
--- a/examples.page.tsx
+++ /dev/null
@@ -1,599 +0,0 @@
-import { walkSync } from "@std/fs/walk";
-
-export const layout = "raw.tsx";
-
-export const sidebar = [
-  {
-    items: [
-      {
-        label: "Runtime Manual",
-        id: "/runtime/",
-      },
-      {
-        label: "Examples",
-        id: "/examples/",
-      },
-      {
-        label: "API reference",
-        id: "/api/deno",
-      },
-      {
-        label: "Deploy",
-        id: "/deploy/manual/",
-      },
-      {
-        label: "Subhosting",
-        id: "/subhosting/manual/",
-      },
-      {
-        label: "deno.com",
-        id: "https://deno.com",
-      },
-    ],
-  },
-];
-
-export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
-  const files = [
-    ...walkSync("./examples/", {
-      exts: [".ts"],
-    }),
-  ];
-  const examples = files.map((file) => {
-    const content = Deno.readTextFileSync(file.path);
-
-    return {
-      name: file.name,
-      content,
-      label: file.name.replace(".ts", ""),
-      parsed: parseExample(file.name, content),
-    } as ReturnedContent;
-  });
-
-  for (const example of examples) {
-    const contentNoCommentary = example.parsed.files.map((file) =>
-      file.snippets.map((snippet) => snippet.code).join("\n")
-    ).join("\n");
-    const url =
-      `https://github.com/denoland/deno-docs/blob/main/examples/${example.name}${
-        example.parsed.files.length > 1 ? "/main" : ""
-      }`;
-    const rawUrl = `https://docs.deno.com/examples/${example.name}${
-      example.parsed.files.length > 1 ? "/main" : ""
-    }`;
-
-    yield {
-      url: `/examples/${example.label}/index.html`,
-      title: `${example.parsed.title} - Deno by Example`,
-      content: (
-        <div>
-          <main
-            id="content"
-            class="max-w-screen-lg flex flex-col gap-8 px-4 md:mx-auto pt-6 mb-20"
-          >
-            <div class="flex flex-col gap-4 md:flex-row justify-between items-start md:items-center">
-              <div class="flex flex-col gap-2">
-                <h1 class="text-3xl font-bold">
-                  {example.parsed.title}
-                </h1>
-                {example.parsed.description && (
-                  <p
-                    className="max-w-prose"
-                    dangerouslySetInnerHTML={{
-                      __html: example.parsed.description,
-                    }}
-                  />
-                )}
-              </div>
-
-              <a
-                href={url}
-                class="px-4 py-2 rounded bg-background-secondary text-sm whitespace-nowrap border border-foreground-secondary hover:bg-background-primary text-foreground-primary"
-              >
-                Edit on Github
-              </a>
-            </div>
-            <div class="relative block">
-              <CopyButton text={contentNoCommentary} />
-            </div>
-            {example.parsed.files.map((file) => (
-              <div class="flex flex-col gap-4 md:gap-0" key={file.name}>
-                {file.snippets.map((snippet, i) => (
-                  <SnippetComponent
-                    key={i}
-                    firstOfFile={i === 0}
-                    lastOfFile={i === file.snippets.length - 1}
-                    filename={file.name}
-                    snippet={snippet}
-                  />
-                ))}
-              </div>
-            ))}
-            <div>
-              {example.parsed.run && (
-                <>
-                  <p class="mt-4 mb-4">
-                    Run{" "}
-                    <a
-                      href={url}
-                      class="text-primary hover:underline focus:underline"
-                    >
-                      this example
-                    </a>{" "}
-                    locally using the Deno CLI:
-                  </p>
-                  <div
-                    data-color-mode="light"
-                    data-dark-theme="dark"
-                    data-light-theme="light"
-                    class="markdown-body"
-                  >
-                    <pre className="highlight">
-                      <code>
-                        {example.parsed.run.startsWith("deno")
-                          ? example.parsed.run.replace("<url>", url)
-                          : "deno run " +
-                            example.parsed.run.replace("<url>", rawUrl)}
-                      </code>
-                    </pre>
-                  </div>
-                </>
-              )}
-              {example.parsed.playground && (
-                <div class="col-span-3 mt-8">
-                  <p class="text-foreground-secondary">
-                    Try this example in a Deno Deploy playground:
-                  </p>
-                  <p class="mt-3">
-                    <a
-                      class="py-2 px-4 bg-black inline-block text-white text-base rounded-md opacity-90 hover:opacity-100"
-                      href={example.parsed.playground}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      Deploy
-                    </a>
-                  </p>
-                </div>
-              )}
-              {example.parsed.additionalResources.length > 0 && (
-                <div class="col-span-3 mt-12 pt-6 border-t-1 border-gray-200">
-                  <h2 class="font-semibold">Additional resources</h2>
-                  <ul class="list-none mt-1">
-                    {example.parsed.additionalResources.map(([link, title]) => (
-                      <li
-                        class="text-gray-700 hover:text-gray-900"
-                        key={link + title}
-                      >
-                        <a
-                          class="text-primary hover:underline focus:underline"
-                          href={link}
-                        >
-                          {title}
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </div>
-          </main>
-        </div>
-      ),
-    };
-  }
-
-  const groupMap: [string, string][] = [
-    ["Basics", "IconFlag3"],
-    ["Encoding", "IconTransform"],
-    ["CLI", "IconTerminal2"],
-    ["Network", "IconNetwork"],
-    ["System", "IconDeviceDesktop"],
-    ["File System", "IconFiles"],
-    ["Databases", "IconDatabase"],
-    ["Scheduled Tasks", "IconClock"],
-    ["Cryptography", "IconFileShredder"],
-    ["Advanced", "IconStars"],
-    ["Unstable APIs", "IconPersonDigging"],
-  ];
-
-  const groups = examples.reduce((acc, example) => {
-    const group = example.parsed.group || "Basics";
-    const lowerGroup = group.toLowerCase();
-
-    if (!acc[lowerGroup]) {
-      acc[lowerGroup] = [];
-    }
-
-    if (!groupMap.find(([category]) => category.toLowerCase() === lowerGroup)) {
-      groupMap.push([group.toLowerCase(), "IconFlag3"]);
-    }
-
-    acc[lowerGroup].push(example);
-    return acc;
-  }, {});
-
-  const elements = groupMap.map(([category, icon]) => {
-    const group = groups[category.toLowerCase()];
-
-    if (!group) {
-      return null;
-    }
-
-    group.sort((a, b) => a.parsed.sortOrder - b.parsed.sortOrder);
-
-    return (
-      <section
-        key={category}
-        className="mb-12 [-webkit-column-break-inside:avoid;]"
-      >
-        <h2 className="text-xl mb-2 block border-solid border-t-0 border-x-0 border-b border-b-gray-300 dark:border-b-gray-600 pb-1">
-          {category}
-        </h2>
-        <ul className="list-none pl-0">
-          {group.map((example) => {
-            return (
-              <li key={example.parsed.id} className="leading-loose">
-                <a
-                  href={"/examples/" + example.parsed.id.replace(".ts", "")}
-                  className="text-inherit underline decoration-gray-300 dark:decoration-gray-600"
-                >
-                  {example.parsed.title}
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </section>
-    );
-  });
-
-  yield {
-    url: `/examples/`,
-    title: `Deno by Example`,
-    content: (
-      <main
-        id="content"
-        className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
-      >
-        <div className="pb-16 align-middle md:pb-0 w-full">
-          <div className="mt-8 mb-16 md:mb-24 text-center">
-            <img
-              className="w-full max-w-32 mx-auto h-auto mb-4"
-              alt="Deno Examples"
-              src="/examples.png"
-            />
-            <h1 className="text-4xl md:text-6xl font-semibold mb-4">
-              Deno by Example
-            </h1>
-            <p className="max-w-prose mx-auto">
-              A collection of annotated Deno examples, to be used as a reference
-              for how to build with Deno, or as a guide to learn about many of
-              Deno's features.
-              <a
-                href="/runtime/contributing/examples/"
-                className="homepage-link runtime-link text-center mt-4"
-              >
-                Commit an example and we'll send you some stickers!
-              </a>
-            </p>
-          </div>
-          <div
-            className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
-            style={{ columnGap: "3rem" }}
-          >
-            {elements}
-          </div>
-          <div className="w-full flex flex-col px-8 pt-6 mt-20 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-24">
-            <p className="max-w-prose mx-auto text-center">
-              Need an example that isn't here? Or want to add one of your own?
-              <br /> We welcome contributions! <br />
-              You can request more examples, or add your own at our{" "}
-              <a
-                href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
-                class="text-primary hover:underline focus:underline"
-              >
-                GitHub repository
-              </a>
-            </p>
-          </div>
-        </div>
-      </main>
-    ),
-  };
-}
-
-function SnippetComponent(props: {
-  filename: string;
-  firstOfFile: boolean;
-  lastOfFile: boolean;
-  snippet: ExampleSnippet;
-}) {
-  return (
-    <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
-      <div
-        class={`italic select-none text-sm ${
-          props.snippet.text ? "pb-4 md:pb-0 " : " "
-        } ${props.snippet.code ? "col-span-3" : "mt-4 col-span-full"}`}
-      >
-        {props.snippet.text}
-      </div>
-      <div
-        class={`col-span-7 relative ${
-          props.snippet.code.length === 0 ? "hidden sm:block" : ""
-        }`}
-      >
-        {props.filename && (
-          <span
-            class={`font-mono text-xs absolute -top-3 left-4 z-10 p-1 rounded-sm ${
-              props.firstOfFile ? "block" : "block sm:hidden"
-            }`}
-          >
-            {props.filename}
-          </span>
-        )}
-        <div class="-mx-4 h-full sm:mx-0 overflow-scroll sm:overflow-hidden relative gfm-highlight">
-          {props.snippet.code && (
-            <div
-              data-color-mode="light"
-              data-dark-theme="dark"
-              data-light-theme="light"
-              class="nocopy h-full markdown-body"
-            >
-              <pre
-                class="highlight snippet-code language-ts"
-                data-example-position={props.firstOfFile
-                  ? "first"
-                  : props.lastOfFile
-                  ? "last"
-                  : "middle"}
-              >
-                <code
-                  dangerouslySetInnerHTML={{ __html: props.snippet.code }}
-                ></code>
-              </pre>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function CopyButton(props: { text: string }) {
-  return (
-    <button
-      type="button"
-      aria-label="Copy code to clipboard"
-      title="Copy"
-      class="clean-btn copy-all absolute right-2 top-10 hover:bg-gray-200 text-gray-900 p-2 rounded-md z-10"
-      data-copy={props.text}
-    >
-      <svg viewBox="0 0 24 24" width="15" height="15">
-        <path
-          fill="currentColor"
-          d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-        >
-        </path>
-      </svg>
-    </button>
-  );
-}
-
-export const TAGS = {
-  cli: {
-    title: "cli",
-    description: "Works in Deno CLI",
-  },
-  deploy: {
-    title: "deploy",
-    description: "Works on Deno Deploy",
-  },
-  web: {
-    title: "web",
-    description: "Works in on the Web",
-  },
-};
-
-export const DIFFICULTIES = {
-  beginner: {
-    title: "Beginner",
-    description: "No significant prior knowledge is required for this example.",
-  },
-  intermediate: {
-    title: "Intermediate",
-    description: "Some prior knowledge is needed for this example.",
-  },
-};
-
-type ReturnedContent = {
-  name: string;
-  content: string;
-  label: string;
-  parsed: Example;
-};
-
-export interface Example {
-  id: string;
-  title: string;
-  description: string;
-  difficulty: keyof typeof DIFFICULTIES;
-  tags: (keyof typeof TAGS)[];
-  additionalResources: [string, string][];
-  run?: string;
-  playground?: string;
-  files: ExampleFile[];
-  group: string;
-  sortOrder: any;
-}
-
-export interface ExampleFile {
-  name: string;
-  snippets: ExampleSnippet[];
-}
-
-export interface ExampleSnippet {
-  text: string;
-  code: string;
-}
-
-export function parseExample(id: string, file: string): Example {
-  // Extract the multi line JS doc comment at the top of the file
-  const [, jsdoc, rest] = file.match(/^\s*\/\*\*(.*?)\*\/\s*(.*)/s) || [];
-
-  // Extract the @key value pairs from the JS doc comment
-  let description = "";
-  const kvs: Record<string, string> = {};
-  const resources = [];
-  for (let line of jsdoc.split("\n")) {
-    line = line.trim().replace(/^\*/, "").trim();
-    const [, key, value] = line.match(/^\s*@(\w+)\s+(.*)/) || [];
-    if (key) {
-      if (key === "resource") {
-        resources.push(value);
-      } else {
-        kvs[key] = value.trim();
-      }
-    } else {
-      description += " " + line;
-    }
-  }
-  description = description.trim();
-
-  // Separate the code into snippets.
-  const files: ExampleFile[] = [
-    {
-      name: "",
-      snippets: [],
-    },
-  ];
-  let parseMode = "code";
-  let currentFile = files[0];
-  let text = "";
-  let code = "";
-
-  for (const line of rest.split("\n")) {
-    const trimmedLine = line.trim();
-    if (parseMode == "code") {
-      if (line.startsWith("// File:")) {
-        if (text || code.trimEnd()) {
-          code = code.trimEnd();
-          currentFile.snippets.push({ text, code });
-          text = "";
-          code = "";
-        }
-        const name = line.slice(8).trim();
-        if (currentFile.snippets.length == 0) {
-          currentFile.name = name;
-        } else {
-          currentFile = {
-            name,
-            snippets: [],
-          };
-          files.push(currentFile);
-        }
-      } else if (line.startsWith("/* File:")) {
-        if (text || code.trimEnd()) {
-          code = code.trimEnd();
-          currentFile.snippets.push({ text, code });
-          text = "";
-          code = "";
-        }
-        const name = line.slice(8).trim();
-        if (currentFile.snippets.length == 0) {
-          currentFile.name = name;
-        } else {
-          currentFile = {
-            name,
-            snippets: [],
-          };
-          files.push(currentFile);
-        }
-        parseMode = "file";
-      } else if (
-        trimmedLine.startsWith("// deno-lint-ignore") ||
-        trimmedLine.startsWith("//deno-lint-ignore") ||
-        trimmedLine.startsWith("// deno-fmt-ignore") ||
-        trimmedLine.startsWith("//deno-fmt-ignore")
-      ) {
-        // skip deno directives
-      } else if (trimmedLine.startsWith("//-")) {
-        code += line.replace("//-", "//") + "\n";
-      } else if (trimmedLine.startsWith("//")) {
-        if (text || code.trimEnd()) {
-          code = code.trimEnd();
-          currentFile.snippets.push({ text, code });
-        }
-        text = trimmedLine.slice(2).trim();
-        code = "";
-        parseMode = "comment";
-      } else {
-        code += line + "\n";
-      }
-    } else if (parseMode == "comment") {
-      if (
-        trimmedLine.startsWith("// deno-lint-ignore") ||
-        trimmedLine.startsWith("//deno-lint-ignore") ||
-        trimmedLine.startsWith("// deno-fmt-ignore") ||
-        trimmedLine.startsWith("//deno-fmt-ignore")
-      ) {
-        // skip deno directives
-      } else if (trimmedLine.startsWith("//")) {
-        text += " " + trimmedLine.slice(2).trim();
-      } else {
-        code += line + "\n";
-        parseMode = "code";
-      }
-    } else if (parseMode == "file") {
-      if (line == "*/") {
-        parseMode = "code";
-      } else {
-        code += line + "\n";
-      }
-    }
-  }
-  if (text || code.trimEnd()) {
-    code = code.trimEnd();
-    currentFile.snippets.push({ text, code });
-  }
-
-  if (!kvs.title) {
-    throw new Error("Missing title in JS doc comment.");
-  }
-
-  const tags = kvs.tags.split(",").map((s) => s.trim() as keyof typeof TAGS);
-  for (const tag of tags) {
-    if (!TAGS[tag]) {
-      throw new Error(`Unknown tag '${tag}'`);
-    }
-  }
-
-  const difficulty = kvs.difficulty as keyof typeof DIFFICULTIES;
-  if (!DIFFICULTIES[difficulty]) {
-    throw new Error(`Unknown difficulty '${difficulty}'`);
-  }
-
-  const additionalResources: [string, string][] = [];
-  for (const resource of resources) {
-    // @resource {https://jsr.io/@std/http/server/~/} std/http/server
-    const [_, url, title] = resource.match(/^\{(.*?)\}\s(.*)/) || [];
-    if (!url || !title) {
-      throw new Error(`Invalid resource: ${resource}`);
-    }
-    additionalResources.push([url, title]);
-  }
-
-  return {
-    id,
-    title: kvs.title,
-    description,
-    difficulty,
-    tags,
-    additionalResources,
-    run: kvs.run,
-    playground: kvs.playground,
-    files,
-    group: kvs.group || "Misc",
-    sortOrder: kvs.sortOrder || 999999,
-  };
-}
diff --git a/learn/_components/CopyButton.tsx b/learn/_components/CopyButton.tsx
new file mode 100644
index 000000000..e02eedfa6
--- /dev/null
+++ b/learn/_components/CopyButton.tsx
@@ -0,0 +1,20 @@
+export function CopyButton(props: { text: string }) {
+    return (
+      <button
+        type="button"
+        aria-label="Copy code to clipboard"
+        title="Copy"
+        class="clean-btn copy-all absolute right-2 top-10 hover:bg-gray-200 text-gray-900 p-2 rounded-md z-10"
+        data-copy={props.text}
+      >
+        <svg viewBox="0 0 24 24" width="15" height="15">
+          <path
+            fill="currentColor"
+            d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+          >
+          </path>
+        </svg>
+      </button>
+    );
+  }
+  
\ No newline at end of file
diff --git a/learn/_components/SnippetComponent.tsx b/learn/_components/SnippetComponent.tsx
new file mode 100644
index 000000000..549aef943
--- /dev/null
+++ b/learn/_components/SnippetComponent.tsx
@@ -0,0 +1,59 @@
+import { ExampleSnippet } from "../types.ts";
+
+export default function SnippetComponent(props: {
+    filename: string;
+    firstOfFile: boolean;
+    lastOfFile: boolean;
+    snippet: ExampleSnippet;
+  }) {
+    return (
+      <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
+        <div
+          class={`italic select-none text-sm ${
+            props.snippet.text ? "pb-4 md:pb-0 " : " "
+          } ${props.snippet.code ? "col-span-3" : "mt-4 col-span-full"}`}
+        >
+          {props.snippet.text}
+        </div>
+        <div
+          class={`col-span-7 relative ${
+            props.snippet.code.length === 0 ? "hidden sm:block" : ""
+          }`}
+        >
+          {props.filename && (
+            <span
+              class={`font-mono text-xs absolute -top-3 left-4 z-10 p-1 rounded-sm ${
+                props.firstOfFile ? "block" : "block sm:hidden"
+              }`}
+            >
+              {props.filename}
+            </span>
+          )}
+          <div class="-mx-4 h-full sm:mx-0 overflow-scroll sm:overflow-hidden relative gfm-highlight">
+            {props.snippet.code && (
+              <div
+                data-color-mode="light"
+                data-dark-theme="dark"
+                data-light-theme="light"
+                class="nocopy h-full markdown-body"
+              >
+                <pre
+                  class="highlight snippet-code language-ts"
+                  data-example-position={props.firstOfFile
+                    ? "first"
+                    : props.lastOfFile
+                    ? "last"
+                    : "middle"}
+                >
+                  <code
+                    dangerouslySetInnerHTML={{ __html: props.snippet.code }}
+                  ></code>
+                </pre>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+  
\ No newline at end of file
diff --git a/learn/_pages/ExamplePage.tsx b/learn/_pages/ExamplePage.tsx
new file mode 100644
index 000000000..3795ba3cc
--- /dev/null
+++ b/learn/_pages/ExamplePage.tsx
@@ -0,0 +1,136 @@
+import { CopyButton } from "../_components/CopyButton.tsx";
+import SnippetComponent from "../_components/SnippetComponent.tsx";
+import { ExampleFromFileSystem } from "../types.ts";
+
+type Props =  { example: ExampleFromFileSystem };
+
+export default function ExamplePage({ example }: Props) {
+
+    const contentNoCommentary = example.parsed.files.map((file) =>
+        file.snippets.map((snippet) => snippet.code).join("\n")
+      ).join("\n");
+      const url =
+        `https://github.com/denoland/deno-docs/blob/main/examples/${example.name}${
+          example.parsed.files.length > 1 ? "/main" : ""
+        }`;
+      const rawUrl = `https://docs.deno.com/learn/examples/${example.name}${
+        example.parsed.files.length > 1 ? "/main" : ""
+      }`;  
+
+
+    return (        
+        <div>
+            <main
+            id="content"
+            class="max-w-screen-lg flex flex-col gap-8 px-4 md:mx-auto pt-6 mb-20"
+            >
+            <div class="flex flex-col gap-4 md:flex-row justify-between items-start md:items-center">
+                <div class="flex flex-col gap-2">
+                <h1 class="text-3xl font-bold">
+                    {example.parsed.title}
+                </h1>
+                {example.parsed.description && (
+                    <p
+                    className="max-w-prose"
+                    dangerouslySetInnerHTML={{
+                        __html: example.parsed.description,
+                    }}
+                    />
+                )}
+                </div>
+
+                <a
+                href={url}
+                class="px-4 py-2 rounded bg-background-secondary text-sm whitespace-nowrap border border-foreground-secondary hover:bg-background-primary text-foreground-primary"
+                >
+                Edit on Github
+                </a>
+            </div>
+            <div class="relative block">
+                <CopyButton text={contentNoCommentary} />
+            </div>
+            {example.parsed.files.map((file) => (
+                <div class="flex flex-col gap-4 md:gap-0" key={file.name}>
+                {file.snippets.map((snippet, i) => (
+                    <SnippetComponent
+                    key={i}
+                    firstOfFile={i === 0}
+                    lastOfFile={i === file.snippets.length - 1}
+                    filename={file.name}
+                    snippet={snippet}
+                    />
+                ))}
+                </div>
+            ))}
+            <div>
+                {example.parsed.run && (
+                <>
+                    <p class="mt-4 mb-4">
+                    Run{" "}
+                    <a
+                        href={url}
+                        class="text-primary hover:underline focus:underline"
+                    >
+                        this example
+                    </a>{" "}
+                    locally using the Deno CLI:
+                    </p>
+                    <div
+                    data-color-mode="light"
+                    data-dark-theme="dark"
+                    data-light-theme="light"
+                    class="markdown-body"
+                    >
+                    <pre className="highlight">
+                        <code>
+                        {example.parsed.run.startsWith("deno")
+                            ? example.parsed.run.replace("<url>", url)
+                            : "deno run " +
+                            example.parsed.run.replace("<url>", rawUrl)}
+                        </code>
+                    </pre>
+                    </div>
+                </>
+                )}
+                {example.parsed.playground && (
+                <div class="col-span-3 mt-8">
+                    <p class="text-foreground-secondary">
+                    Try this example in a Deno Deploy playground:
+                    </p>
+                    <p class="mt-3">
+                    <a
+                        class="py-2 px-4 bg-black inline-block text-white text-base rounded-md opacity-90 hover:opacity-100"
+                        href={example.parsed.playground}
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        Deploy
+                    </a>
+                    </p>
+                </div>
+                )}
+                {example.parsed.additionalResources.length > 0 && (
+                <div class="col-span-3 mt-12 pt-6 border-t-1 border-gray-200">
+                    <h2 class="font-semibold">Additional resources</h2>
+                    <ul class="list-none mt-1">
+                    {example.parsed.additionalResources.map(([link, title]) => (
+                        <li
+                        class="text-gray-700 hover:text-gray-900"
+                        key={link + title}
+                        >
+                        <a
+                            class="text-primary hover:underline focus:underline"
+                            href={link}
+                        >
+                            {title}
+                        </a>
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                )}
+            </div>
+            </main>
+        </div>
+    )
+}
diff --git a/learn/_pages/ExamplesPage.tsx b/learn/_pages/ExamplesPage.tsx
new file mode 100644
index 000000000..8dd7bfcd9
--- /dev/null
+++ b/learn/_pages/ExamplesPage.tsx
@@ -0,0 +1,126 @@
+import { ExampleFromFileSystem } from "../types.ts";
+
+type Props = { examples: ExampleFromFileSystem[] };
+
+export default function examplesPage({ examples }: Props) {
+  examples = examples || [];
+  const elements = generateExampleGroups(examples);
+
+  return (
+    <main
+      id="content"
+      className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
+    >
+      <div className="pb-16 align-middle md:pb-0 w-full">
+        <div className="mt-8 mb-16 md:mb-24 text-center">
+          <h1 className="text-4xl md:text-6xl font-semibold mb-4">
+            Deno by Example
+          </h1>
+          <p className="max-w-prose mx-auto">
+            A collection of annotated Deno examples, to be used as a reference
+            for how to build with Deno, or as a guide to learn about many of
+            Deno's features.
+            <a
+              href="/runtime/contributing/examples/"
+              className="homepage-link runtime-link text-center mt-4"
+            >
+              Commit an example and we'll send you some stickers!
+            </a>
+          </p>
+        </div>
+        <div
+          className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
+          style={{ columnGap: "3rem" }}
+        >
+          {elements}
+        </div>
+        <div className="w-full flex flex-col px-8 pt-6 mt-20 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-24">
+          <p className="max-w-prose mx-auto text-center">
+            Need an example that isn't here? Or want to add one of your own?
+            <br /> We welcome contributions! <br />
+            You can request more examples, or add your own at our{" "}
+            <a
+              href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
+              class="text-primary hover:underline focus:underline"
+            >
+              GitHub repository
+            </a>
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+function generateExampleGroups(examples: ExampleFromFileSystem[]) {
+  const groupMap: [string, string][] = [
+    ["Basics", "IconFlag3"],
+    ["Encoding", "IconTransform"],
+    ["CLI", "IconTerminal2"],
+    ["Network", "IconNetwork"],
+    ["System", "IconDeviceDesktop"],
+    ["File System", "IconFiles"],
+    ["Databases", "IconDatabase"],
+    ["Scheduled Tasks", "IconClock"],
+    ["Cryptography", "IconFileShredder"],
+    ["Advanced", "IconStars"],
+    ["Unstable APIs", "IconPersonDigging"],
+  ];
+
+  const groups: Record<string, ExampleFromFileSystem[]> = examples.reduce(
+    (acc: Record<string, ExampleFromFileSystem[]>, example) => {
+      const group = example.parsed.group || "Basics";
+      const lowerGroup = group.toLowerCase();
+
+      if (!acc[lowerGroup]) {
+        acc[lowerGroup] = [];
+      }
+
+      if (
+        !groupMap.find(([category]) => category.toLowerCase() === lowerGroup)
+      ) {
+        groupMap.push([group.toLowerCase(), "IconFlag3"]);
+      }
+
+      acc[lowerGroup].push(example);
+      return acc;
+    },
+    {},
+  );
+
+  return groupMap.map(([category, icon]) => {
+    const group = groups[category.toLowerCase()];
+
+    if (!group) {
+      return null;
+    }
+
+    group.sort((a, b) => a.parsed.sortOrder - b.parsed.sortOrder);
+
+    return (
+      <section
+        key={category}
+        className="mb-12 [-webkit-column-break-inside:avoid;]"
+      >
+        <h2 className="text-xl mb-2 block border-solid border-t-0 border-x-0 border-b border-b-gray-300 dark:border-b-gray-600 pb-1">
+          {category}
+        </h2>
+        <ul className="list-none pl-0">
+          {group.map((example: ExampleFromFileSystem) => {
+            return (
+              <li key={example.parsed.id} className="leading-loose">
+                <a
+                  href={"/learn/examples/" +
+                    example.parsed.id.replace(".ts", "")}
+                  className="text-inherit underline decoration-gray-300 dark:decoration-gray-600"
+                >
+                  {example.parsed.title}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+    );
+  });
+}
diff --git a/learn/_pages/LandingPage.tsx b/learn/_pages/LandingPage.tsx
new file mode 100644
index 000000000..1f3fd041f
--- /dev/null
+++ b/learn/_pages/LandingPage.tsx
@@ -0,0 +1,10 @@
+export default function LandingPage() {
+  return (
+    <>
+      <h1>The Learning hub page</h1>
+      <a href="/learn/examples/">Deno by Example</a>
+      <a href="/learn/tutorials/">Tutorials</a>
+      <a href="/learn/videos/">Videos</a>
+    </>
+  );
+}
diff --git a/learn/_pages/TutorialsPage.tsx b/learn/_pages/TutorialsPage.tsx
new file mode 100644
index 000000000..a5060da0e
--- /dev/null
+++ b/learn/_pages/TutorialsPage.tsx
@@ -0,0 +1,3 @@
+export default function TutorialPage() {
+  return <div>The tutorials page</div>;
+}
diff --git a/learn/_pages/VideosPage.tsx b/learn/_pages/VideosPage.tsx
new file mode 100644
index 000000000..691f9fbf8
--- /dev/null
+++ b/learn/_pages/VideosPage.tsx
@@ -0,0 +1,3 @@
+export default function VideoPage() {
+  return <div>The videos page</div>;
+}
diff --git a/examples_test.ts b/learn/_pages/examples_test.ts
similarity index 91%
rename from examples_test.ts
rename to learn/_pages/examples_test.ts
index 93eeb44f0..2868fedc4 100644
--- a/examples_test.ts
+++ b/learn/_pages/examples_test.ts
@@ -5,7 +5,7 @@ import { assertEquals, assertNotMatch } from "@std/assert";
 const decoder = new TextDecoder();
 
 Deno.test("Check examples", async (t) => {
-  for await (const item of walk("./examples")) {
+  for await (const item of walk("/learn/examples")) {
     const path = join("examples", item.name);
 
     if (!path.endsWith(".ts")) continue;
diff --git a/examples/aes-encryption.ts b/learn/examples/aes-encryption.ts
similarity index 100%
rename from examples/aes-encryption.ts
rename to learn/examples/aes-encryption.ts
diff --git a/examples/benchmarking.ts b/learn/examples/benchmarking.ts
similarity index 100%
rename from examples/benchmarking.ts
rename to learn/examples/benchmarking.ts
diff --git a/examples/byte-manipulation.ts b/learn/examples/byte-manipulation.ts
similarity index 100%
rename from examples/byte-manipulation.ts
rename to learn/examples/byte-manipulation.ts
diff --git a/examples/checking-file-existence.ts b/learn/examples/checking-file-existence.ts
similarity index 100%
rename from examples/checking-file-existence.ts
rename to learn/examples/checking-file-existence.ts
diff --git a/examples/color-logging.ts b/learn/examples/color-logging.ts
similarity index 100%
rename from examples/color-logging.ts
rename to learn/examples/color-logging.ts
diff --git a/examples/command-line-arguments.ts b/learn/examples/command-line-arguments.ts
similarity index 100%
rename from examples/command-line-arguments.ts
rename to learn/examples/command-line-arguments.ts
diff --git a/examples/create-remove-directories.ts b/learn/examples/create-remove-directories.ts
similarity index 100%
rename from examples/create-remove-directories.ts
rename to learn/examples/create-remove-directories.ts
diff --git a/examples/cron.ts b/learn/examples/cron.ts
similarity index 100%
rename from examples/cron.ts
rename to learn/examples/cron.ts
diff --git a/examples/data-processing.ts b/learn/examples/data-processing.ts
similarity index 100%
rename from examples/data-processing.ts
rename to learn/examples/data-processing.ts
diff --git a/examples/deleting-files.ts b/learn/examples/deleting-files.ts
similarity index 100%
rename from examples/deleting-files.ts
rename to learn/examples/deleting-files.ts
diff --git a/examples/deno-version.ts b/learn/examples/deno-version.ts
similarity index 100%
rename from examples/deno-version.ts
rename to learn/examples/deno-version.ts
diff --git a/examples/dns-queries.ts b/learn/examples/dns-queries.ts
similarity index 100%
rename from examples/dns-queries.ts
rename to learn/examples/dns-queries.ts
diff --git a/examples/environment-variables.ts b/learn/examples/environment-variables.ts
similarity index 100%
rename from examples/environment-variables.ts
rename to learn/examples/environment-variables.ts
diff --git a/examples/exponential-backoff.ts b/learn/examples/exponential-backoff.ts
similarity index 100%
rename from examples/exponential-backoff.ts
rename to learn/examples/exponential-backoff.ts
diff --git a/examples/hashing.ts b/learn/examples/hashing.ts
similarity index 100%
rename from examples/hashing.ts
rename to learn/examples/hashing.ts
diff --git a/examples/hello-world.ts b/learn/examples/hello-world.ts
similarity index 100%
rename from examples/hello-world.ts
rename to learn/examples/hello-world.ts
diff --git a/examples/hex-base64-encoding.ts b/learn/examples/hex-base64-encoding.ts
similarity index 100%
rename from examples/hex-base64-encoding.ts
rename to learn/examples/hex-base64-encoding.ts
diff --git a/examples/hmac-generate-verify.ts b/learn/examples/hmac-generate-verify.ts
similarity index 100%
rename from examples/hmac-generate-verify.ts
rename to learn/examples/hmac-generate-verify.ts
diff --git a/examples/hono.ts b/learn/examples/hono.ts
similarity index 100%
rename from examples/hono.ts
rename to learn/examples/hono.ts
diff --git a/examples/http-requests.ts b/learn/examples/http-requests.ts
similarity index 100%
rename from examples/http-requests.ts
rename to learn/examples/http-requests.ts
diff --git a/examples/http-server-files.ts b/learn/examples/http-server-files.ts
similarity index 100%
rename from examples/http-server-files.ts
rename to learn/examples/http-server-files.ts
diff --git a/examples/http-server-oak-crud-middleware-with-sqlite3-db.ts b/learn/examples/http-server-oak-crud-middleware-with-sqlite3-db.ts
similarity index 100%
rename from examples/http-server-oak-crud-middleware-with-sqlite3-db.ts
rename to learn/examples/http-server-oak-crud-middleware-with-sqlite3-db.ts
diff --git a/examples/http-server-routing.ts b/learn/examples/http-server-routing.ts
similarity index 100%
rename from examples/http-server-routing.ts
rename to learn/examples/http-server-routing.ts
diff --git a/examples/http-server-streaming.ts b/learn/examples/http-server-streaming.ts
similarity index 100%
rename from examples/http-server-streaming.ts
rename to learn/examples/http-server-streaming.ts
diff --git a/examples/http-server-websocket.ts b/learn/examples/http-server-websocket.ts
similarity index 100%
rename from examples/http-server-websocket.ts
rename to learn/examples/http-server-websocket.ts
diff --git a/examples/http-server.ts b/learn/examples/http-server.ts
similarity index 100%
rename from examples/http-server.ts
rename to learn/examples/http-server.ts
diff --git a/examples/import-export.ts b/learn/examples/import-export.ts
similarity index 100%
rename from examples/import-export.ts
rename to learn/examples/import-export.ts
diff --git a/examples/importing-json.ts b/learn/examples/importing-json.ts
similarity index 100%
rename from examples/importing-json.ts
rename to learn/examples/importing-json.ts
diff --git a/examples/kv-watch.ts b/learn/examples/kv-watch.ts
similarity index 100%
rename from examples/kv-watch.ts
rename to learn/examples/kv-watch.ts
diff --git a/examples/kv.ts b/learn/examples/kv.ts
similarity index 100%
rename from examples/kv.ts
rename to learn/examples/kv.ts
diff --git a/examples/mongo.ts b/learn/examples/mongo.ts
similarity index 100%
rename from examples/mongo.ts
rename to learn/examples/mongo.ts
diff --git a/examples/moving-renaming-files.ts b/learn/examples/moving-renaming-files.ts
similarity index 100%
rename from examples/moving-renaming-files.ts
rename to learn/examples/moving-renaming-files.ts
diff --git a/examples/node.ts b/learn/examples/node.ts
similarity index 100%
rename from examples/node.ts
rename to learn/examples/node.ts
diff --git a/examples/npm.ts b/learn/examples/npm.ts
similarity index 100%
rename from examples/npm.ts
rename to learn/examples/npm.ts
diff --git a/examples/openai-chat-completion.ts b/learn/examples/openai-chat-completion.ts
similarity index 100%
rename from examples/openai-chat-completion.ts
rename to learn/examples/openai-chat-completion.ts
diff --git a/examples/os-signals.ts b/learn/examples/os-signals.ts
similarity index 100%
rename from examples/os-signals.ts
rename to learn/examples/os-signals.ts
diff --git a/examples/parsing-serializing-csv.ts b/learn/examples/parsing-serializing-csv.ts
similarity index 100%
rename from examples/parsing-serializing-csv.ts
rename to learn/examples/parsing-serializing-csv.ts
diff --git a/examples/parsing-serializing-json.ts b/learn/examples/parsing-serializing-json.ts
similarity index 100%
rename from examples/parsing-serializing-json.ts
rename to learn/examples/parsing-serializing-json.ts
diff --git a/examples/parsing-serializing-toml.ts b/learn/examples/parsing-serializing-toml.ts
similarity index 100%
rename from examples/parsing-serializing-toml.ts
rename to learn/examples/parsing-serializing-toml.ts
diff --git a/examples/parsing-serializing-yaml.ts b/learn/examples/parsing-serializing-yaml.ts
similarity index 100%
rename from examples/parsing-serializing-yaml.ts
rename to learn/examples/parsing-serializing-yaml.ts
diff --git a/examples/path-operations.ts b/learn/examples/path-operations.ts
similarity index 100%
rename from examples/path-operations.ts
rename to learn/examples/path-operations.ts
diff --git a/examples/permissions.ts b/learn/examples/permissions.ts
similarity index 100%
rename from examples/permissions.ts
rename to learn/examples/permissions.ts
diff --git a/examples/pid.ts b/learn/examples/pid.ts
similarity index 100%
rename from examples/pid.ts
rename to learn/examples/pid.ts
diff --git a/examples/piping-streams.ts b/learn/examples/piping-streams.ts
similarity index 100%
rename from examples/piping-streams.ts
rename to learn/examples/piping-streams.ts
diff --git a/examples/postgres.ts b/learn/examples/postgres.ts
similarity index 100%
rename from examples/postgres.ts
rename to learn/examples/postgres.ts
diff --git a/examples/prompts.ts b/learn/examples/prompts.ts
similarity index 100%
rename from examples/prompts.ts
rename to learn/examples/prompts.ts
diff --git a/examples/queues.ts b/learn/examples/queues.ts
similarity index 100%
rename from examples/queues.ts
rename to learn/examples/queues.ts
diff --git a/examples/reading-files.ts b/learn/examples/reading-files.ts
similarity index 100%
rename from examples/reading-files.ts
rename to learn/examples/reading-files.ts
diff --git a/examples/reading-system-metrics.ts b/learn/examples/reading-system-metrics.ts
similarity index 100%
rename from examples/reading-system-metrics.ts
rename to learn/examples/reading-system-metrics.ts
diff --git a/examples/redis.ts b/learn/examples/redis.ts
similarity index 100%
rename from examples/redis.ts
rename to learn/examples/redis.ts
diff --git a/examples/rsa-signature.ts b/learn/examples/rsa-signature.ts
similarity index 100%
rename from examples/rsa-signature.ts
rename to learn/examples/rsa-signature.ts
diff --git a/examples/sqlite.ts b/learn/examples/sqlite.ts
similarity index 100%
rename from examples/sqlite.ts
rename to learn/examples/sqlite.ts
diff --git a/examples/streaming-files.ts b/learn/examples/streaming-files.ts
similarity index 100%
rename from examples/streaming-files.ts
rename to learn/examples/streaming-files.ts
diff --git a/examples/subprocess-running-files.ts b/learn/examples/subprocess-running-files.ts
similarity index 100%
rename from examples/subprocess-running-files.ts
rename to learn/examples/subprocess-running-files.ts
diff --git a/examples/subprocesses-output.ts b/learn/examples/subprocesses-output.ts
similarity index 100%
rename from examples/subprocesses-output.ts
rename to learn/examples/subprocesses-output.ts
diff --git a/examples/subprocesses-spawn.ts b/learn/examples/subprocesses-spawn.ts
similarity index 100%
rename from examples/subprocesses-spawn.ts
rename to learn/examples/subprocesses-spawn.ts
diff --git a/examples/supabase.ts b/learn/examples/supabase.ts
similarity index 100%
rename from examples/supabase.ts
rename to learn/examples/supabase.ts
diff --git a/examples/symlinks.ts b/learn/examples/symlinks.ts
similarity index 100%
rename from examples/symlinks.ts
rename to learn/examples/symlinks.ts
diff --git a/examples/tcp-connector.ts b/learn/examples/tcp-connector.ts
similarity index 100%
rename from examples/tcp-connector.ts
rename to learn/examples/tcp-connector.ts
diff --git a/examples/tcp-echo-server.ts b/learn/examples/tcp-echo-server.ts
similarity index 100%
rename from examples/tcp-echo-server.ts
rename to learn/examples/tcp-echo-server.ts
diff --git a/examples/tcp-listener.ts b/learn/examples/tcp-listener.ts
similarity index 100%
rename from examples/tcp-listener.ts
rename to learn/examples/tcp-listener.ts
diff --git a/examples/temporary-files.ts b/learn/examples/temporary-files.ts
similarity index 100%
rename from examples/temporary-files.ts
rename to learn/examples/temporary-files.ts
diff --git a/examples/timers.ts b/learn/examples/timers.ts
similarity index 100%
rename from examples/timers.ts
rename to learn/examples/timers.ts
diff --git a/examples/tls-connector.ts b/learn/examples/tls-connector.ts
similarity index 100%
rename from examples/tls-connector.ts
rename to learn/examples/tls-connector.ts
diff --git a/examples/tls-listener.ts b/learn/examples/tls-listener.ts
similarity index 100%
rename from examples/tls-listener.ts
rename to learn/examples/tls-listener.ts
diff --git a/examples/typescript.ts b/learn/examples/typescript.ts
similarity index 100%
rename from examples/typescript.ts
rename to learn/examples/typescript.ts
diff --git a/examples/udp-connector.ts b/learn/examples/udp-connector.ts
similarity index 100%
rename from examples/udp-connector.ts
rename to learn/examples/udp-connector.ts
diff --git a/examples/udp-listener.ts b/learn/examples/udp-listener.ts
similarity index 100%
rename from examples/udp-listener.ts
rename to learn/examples/udp-listener.ts
diff --git a/examples/ulid.ts b/learn/examples/ulid.ts
similarity index 100%
rename from examples/ulid.ts
rename to learn/examples/ulid.ts
diff --git a/examples/unix-cat.ts b/learn/examples/unix-cat.ts
similarity index 100%
rename from examples/unix-cat.ts
rename to learn/examples/unix-cat.ts
diff --git a/examples/unzip-gzipped-file.ts b/learn/examples/unzip-gzipped-file.ts
similarity index 100%
rename from examples/unzip-gzipped-file.ts
rename to learn/examples/unzip-gzipped-file.ts
diff --git a/examples/url-parsing.ts b/learn/examples/url-parsing.ts
similarity index 100%
rename from examples/url-parsing.ts
rename to learn/examples/url-parsing.ts
diff --git a/examples/uuids.ts b/learn/examples/uuids.ts
similarity index 100%
rename from examples/uuids.ts
rename to learn/examples/uuids.ts
diff --git a/examples/walking-directories.ts b/learn/examples/walking-directories.ts
similarity index 100%
rename from examples/walking-directories.ts
rename to learn/examples/walking-directories.ts
diff --git a/examples/watching-files.ts b/learn/examples/watching-files.ts
similarity index 100%
rename from examples/watching-files.ts
rename to learn/examples/watching-files.ts
diff --git a/examples/web-workers.ts b/learn/examples/web-workers.ts
similarity index 100%
rename from examples/web-workers.ts
rename to learn/examples/web-workers.ts
diff --git a/examples/webassembly.ts b/learn/examples/webassembly.ts
similarity index 100%
rename from examples/webassembly.ts
rename to learn/examples/webassembly.ts
diff --git a/examples/websocket.ts b/learn/examples/websocket.ts
similarity index 100%
rename from examples/websocket.ts
rename to learn/examples/websocket.ts
diff --git a/examples/writing-files.ts b/learn/examples/writing-files.ts
similarity index 100%
rename from examples/writing-files.ts
rename to learn/examples/writing-files.ts
diff --git a/examples/writing-tests.ts b/learn/examples/writing-tests.ts
similarity index 100%
rename from examples/writing-tests.ts
rename to learn/examples/writing-tests.ts
diff --git a/learn/index.tsx b/learn/index.tsx
new file mode 100644
index 000000000..4c7e3416c
--- /dev/null
+++ b/learn/index.tsx
@@ -0,0 +1,88 @@
+import { walkSync } from "@std/fs/walk";
+import LandingPage from "./_pages/LandingPage.tsx";
+import ExamplePage from "./_pages/ExamplePage.tsx";
+import ExamplesPage from "./_pages/ExamplesPage.tsx";
+import TutorialPage from "./_pages/TutorialsPage.tsx";
+import VideoPage from "./_pages/VideosPage.tsx";
+import {ExampleFromFileSystem } from "./types.ts";
+import { parseExample } from "./utils/parseExample.ts";
+
+export const layout = "raw.tsx";
+
+export const sidebar = [
+  {
+    items: [
+      {
+        label: "Runtime Manual",
+        id: "/runtime/",
+      },
+      {
+        label: "Examples",
+        id: "/examples/",
+      },
+      {
+        label: "API reference",
+        id: "/api/deno",
+      },
+      {
+        label: "Deploy",
+        id: "/deploy/manual/",
+      },
+      {
+        label: "Subhosting",
+        id: "/subhosting/manual/",
+      },
+      {
+        label: "deno.com",
+        id: "https://deno.com",
+      },
+    ],
+  },
+];
+
+export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
+  const files = [...walkSync("./learn/examples/", { exts: [".ts"] }) ];
+  
+  const examples = files.map((file) => {
+    const content = Deno.readTextFileSync(file.path);
+
+    return {
+      name: file.name,
+      content,
+      label: file.name.replace(".ts", ""),
+      parsed: parseExample(file.name, content),
+    } as ExampleFromFileSystem;
+  });
+
+  for (const example of examples) {
+    yield {
+      url: `/learn/examples/${example.label}/index.html`,
+      title: `${example.parsed.title} - Deno by Example`,
+      content: <ExamplePage example={example} />,
+    };
+  }
+
+  yield {
+    url: `/learn/tutorials/index.html`,
+    title: `Tutorials`,
+    content: <TutorialPage />,
+  };
+
+  yield {
+    url: `/learn/videos/index.html`,
+    title: `Videos`,
+    content: <VideoPage />,
+  };
+
+  yield {
+    url: `/learn/examples/index.html`,
+    title: `Deno by Example`,
+    content: <ExamplesPage examples={examples} />,
+  };
+
+  yield {
+    url: `/learn/index.html`,
+    title: `Learning Hub`,
+    content: <LandingPage />,
+  };
+}
diff --git a/learn/types.ts b/learn/types.ts
new file mode 100644
index 000000000..3220e4c32
--- /dev/null
+++ b/learn/types.ts
@@ -0,0 +1,57 @@
+
+export const TAGS = {
+    cli: {
+        title: "cli",
+        description: "Works in Deno CLI",
+    },
+    deploy: {
+        title: "deploy",
+        description: "Works on Deno Deploy",
+    },
+    web: {
+        title: "web",
+        description: "Works in on the Web",
+    },
+    };
+
+export const DIFFICULTIES = {
+    beginner: {
+        title: "Beginner",
+        description: "No significant prior knowledge is required for this example.",
+    },
+    intermediate: {
+        title: "Intermediate",
+        description: "Some prior knowledge is needed for this example.",
+    },
+};
+
+export type ExampleFromFileSystem = {
+      name: string;
+      content: string;
+      label: string;
+      parsed: Example;
+    };
+
+export interface Example {
+    id: string;
+    title: string;
+    description: string;
+    difficulty: keyof typeof DIFFICULTIES;
+    tags: (keyof typeof TAGS)[];
+    additionalResources: [string, string][];
+    run?: string;
+    playground?: string;
+    files: ExampleFile[];
+    group: string;
+    sortOrder: any;
+}
+
+export interface ExampleFile {
+    name: string;
+    snippets: ExampleSnippet[];
+}
+
+export interface ExampleSnippet {
+    text: string;
+    code: string;
+}
diff --git a/learn/utils/parseExample.ts b/learn/utils/parseExample.ts
new file mode 100644
index 000000000..314de3c87
--- /dev/null
+++ b/learn/utils/parseExample.ts
@@ -0,0 +1,163 @@
+import { DIFFICULTIES, Example, ExampleFile, TAGS } from "../types.ts";
+
+export function parseExample(id: string, file: string): Example {
+    // Extract the multi line JS doc comment at the top of the file
+    const [, jsdoc, rest] = file.match(/^\s*\/\*\*(.*?)\*\/\s*(.*)/s) || [];
+  
+    // Extract the @key value pairs from the JS doc comment
+    let description = "";
+    const kvs: Record<string, string> = {};
+    const resources = [];
+    for (let line of jsdoc.split("\n")) {
+      line = line.trim().replace(/^\*/, "").trim();
+      const [, key, value] = line.match(/^\s*@(\w+)\s+(.*)/) || [];
+      if (key) {
+        if (key === "resource") {
+          resources.push(value);
+        } else {
+          kvs[key] = value.trim();
+        }
+      } else {
+        description += " " + line;
+      }
+    }
+    description = description.trim();
+  
+    // Separate the code into snippets.
+    const files: ExampleFile[] = [
+      {
+        name: "",
+        snippets: [],
+      },
+    ];
+    let parseMode = "code";
+    let currentFile = files[0];
+    let text = "";
+    let code = "";
+  
+    for (const line of rest.split("\n")) {
+      const trimmedLine = line.trim();
+      if (parseMode == "code") {
+        if (line.startsWith("// File:")) {
+          if (text || code.trimEnd()) {
+            code = code.trimEnd();
+            currentFile.snippets.push({ text, code });
+            text = "";
+            code = "";
+          }
+          const name = line.slice(8).trim();
+          if (currentFile.snippets.length == 0) {
+            currentFile.name = name;
+          } else {
+            currentFile = {
+              name,
+              snippets: [],
+            };
+            files.push(currentFile);
+          }
+        } else if (line.startsWith("/* File:")) {
+          if (text || code.trimEnd()) {
+            code = code.trimEnd();
+            currentFile.snippets.push({ text, code });
+            text = "";
+            code = "";
+          }
+          const name = line.slice(8).trim();
+          if (currentFile.snippets.length == 0) {
+            currentFile.name = name;
+          } else {
+            currentFile = {
+              name,
+              snippets: [],
+            };
+            files.push(currentFile);
+          }
+          parseMode = "file";
+        } else if (
+          trimmedLine.startsWith("// deno-lint-ignore") ||
+          trimmedLine.startsWith("//deno-lint-ignore") ||
+          trimmedLine.startsWith("// deno-fmt-ignore") ||
+          trimmedLine.startsWith("//deno-fmt-ignore")
+        ) {
+          // skip deno directives
+        } else if (trimmedLine.startsWith("//-")) {
+          code += line.replace("//-", "//") + "\n";
+        } else if (trimmedLine.startsWith("//")) {
+          if (text || code.trimEnd()) {
+            code = code.trimEnd();
+            currentFile.snippets.push({ text, code });
+          }
+          text = trimmedLine.slice(2).trim();
+          code = "";
+          parseMode = "comment";
+        } else {
+          code += line + "\n";
+        }
+      } else if (parseMode == "comment") {
+        if (
+          trimmedLine.startsWith("// deno-lint-ignore") ||
+          trimmedLine.startsWith("//deno-lint-ignore") ||
+          trimmedLine.startsWith("// deno-fmt-ignore") ||
+          trimmedLine.startsWith("//deno-fmt-ignore")
+        ) {
+          // skip deno directives
+        } else if (trimmedLine.startsWith("//")) {
+          text += " " + trimmedLine.slice(2).trim();
+        } else {
+          code += line + "\n";
+          parseMode = "code";
+        }
+      } else if (parseMode == "file") {
+        if (line == "*/") {
+          parseMode = "code";
+        } else {
+          code += line + "\n";
+        }
+      }
+    }
+    if (text || code.trimEnd()) {
+      code = code.trimEnd();
+      currentFile.snippets.push({ text, code });
+    }
+  
+    if (!kvs.title) {
+      throw new Error("Missing title in JS doc comment.");
+    }
+  
+    const tags = kvs.tags.split(",").map((s) => s.trim() as keyof typeof TAGS);
+    for (const tag of tags) {
+      if (!TAGS[tag]) {
+        throw new Error(`Unknown tag '${tag}'`);
+      }
+    }
+  
+    const difficulty = kvs.difficulty as keyof typeof DIFFICULTIES;
+    if (!DIFFICULTIES[difficulty]) {
+      throw new Error(`Unknown difficulty '${difficulty}'`);
+    }
+  
+    const additionalResources: [string, string][] = [];
+    for (const resource of resources) {
+      // @resource {https://jsr.io/@std/http/server/~/} std/http/server
+      const [_, url, title] = resource.match(/^\{(.*?)\}\s(.*)/) || [];
+      if (!url || !title) {
+        throw new Error(`Invalid resource: ${resource}`);
+      }
+      additionalResources.push([url, title]);
+    }
+  
+    return {
+      id,
+      title: kvs.title,
+      description,
+      difficulty,
+      tags,
+      additionalResources,
+      run: kvs.run,
+      playground: kvs.playground,
+      files,
+      group: kvs.group || "Misc",
+      sortOrder: kvs.sortOrder || 999999,
+    };
+  }
+  
\ No newline at end of file
diff --git a/orama.ts b/orama.ts
index 30c7135ca..0f42be494 100644
--- a/orama.ts
+++ b/orama.ts
@@ -1,6 +1,6 @@
 import { Data, Page } from "lume/core/file.ts";
 import { walkSync } from "@std/fs/walk";
-import { parseExample } from "./examples.page.tsx";
+import { parseExample } from "./learn/utils/parseExample.ts";
 
 export interface OramaDocument {
   path: string;

From 94f1deb37db821e720b696f793e9559439f11728 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Mon, 25 Nov 2024 17:40:56 +0000
Subject: [PATCH 02/23] fmt

---
 _includes/doc.tsx                      |   1 -
 _includes/renderCommand.tsx            | 336 +++++++++++++------------
 learn/_components/CopyButton.tsx       |  37 ++-
 learn/_components/SnippetComponent.tsx |  97 ++++---
 learn/_pages/ExamplePage.tsx           | 224 ++++++++---------
 learn/index.tsx                        |   6 +-
 learn/types.ts                         |  83 +++---
 learn/utils/parseExample.ts            | 289 +++++++++++----------
 8 files changed, 539 insertions(+), 534 deletions(-)

diff --git a/_includes/doc.tsx b/_includes/doc.tsx
index 9243a2311..1e3f00296 100644
--- a/_includes/doc.tsx
+++ b/_includes/doc.tsx
@@ -199,4 +199,3 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
     </>
   );
 }
-
diff --git a/_includes/renderCommand.tsx b/_includes/renderCommand.tsx
index b3f9e1974..81ae54435 100644
--- a/_includes/renderCommand.tsx
+++ b/_includes/renderCommand.tsx
@@ -6,8 +6,20 @@ import CLI_REFERENCE from "../runtime/reference/cli/_commands_reference.json" wi
 };
 import { VNode } from "npm:preact";
 
-type ArgType = { name: string; help: string; short: string | number | bigint | boolean | object | VNode<any> | null | undefined; };
-  
+type ArgType = {
+  name: string;
+  help: string;
+  short:
+    | string
+    | number
+    | bigint
+    | boolean
+    | object
+    | VNode<any>
+    | null
+    | undefined;
+};
+
 const ANSI_RE = ansiRegex();
 const SUBSEQUENT_ANSI_RE = new RegExp(
   `(?:${ANSI_RE.source})(?:${ANSI_RE.source})`,
@@ -31,172 +43,172 @@ function flagsToInlineCode(text: string): string {
 }
 
 export default function renderCommand(
-    commandName: string,
-    helpers: Lume.Helpers,
-  ): { rendered: any; toc: TableOfContentsItem_[] } {
-    const command = CLI_REFERENCE.subcommands.find((command) =>
-      command.name === commandName
-    )!;
-  
-    const toc: TableOfContentsItem_[] = [];
-  
-    let about = command.about!.replaceAll(
-      SUBSEQUENT_ENCAPSULATED_ANSI_RE,
-      function (
-        _,
-        _opening1,
-        text1,
-        _closing1,
-        space,
-        opening2,
-        text2,
-        closing2,
-      ) {
-        return `${opening2}${text1}${space}${text2}${closing2}`;
-      },
-    ).replaceAll(SUBSEQUENT_ANSI_RE, "");
-    let aboutLines = about.split("\n");
-    const aboutLinesReadMoreIndex = aboutLines.findLastIndex((line) =>
-      line.toLowerCase().replaceAll(ANSI_RE, "").trim().startsWith("read more:")
-    );
-    if (aboutLinesReadMoreIndex !== -1) {
-      aboutLines = aboutLines.slice(0, aboutLinesReadMoreIndex);
-    }
-  
-    about = aboutLines.join("\n").replaceAll(
-      ENCAPSULATED_ANSI_RE,
-      (_, opening, text, _closing, offset, string) => {
-        if (opening === "\u001b[32m") { // green, used as heading
-          return `### ${text}`;
-        } else if (
-          opening === "\u001b[38;5;245m" || opening === "\u001b[36m" ||
-          opening === "\u001b[1m" || opening === "\u001b[22m"
-        ) { // gray and cyan used for code and snippets, and we treat yellow and bold as well as such
-          const lines = string.split("\n");
-          let line = "";
-  
-          while (offset > 0) {
-            line = lines.shift();
-            offset -= line.length;
-          }
-  
-          if (START_AND_END_ANSI_RE.test(line.trim())) {
-            return "\n```\n" + text + "\n```\n\n";
-          } else {
-            return "`" + text + "`";
-          }
+  commandName: string,
+  helpers: Lume.Helpers,
+): { rendered: any; toc: TableOfContentsItem_[] } {
+  const command = CLI_REFERENCE.subcommands.find((command) =>
+    command.name === commandName
+  )!;
+
+  const toc: TableOfContentsItem_[] = [];
+
+  let about = command.about!.replaceAll(
+    SUBSEQUENT_ENCAPSULATED_ANSI_RE,
+    function (
+      _,
+      _opening1,
+      text1,
+      _closing1,
+      space,
+      opening2,
+      text2,
+      closing2,
+    ) {
+      return `${opening2}${text1}${space}${text2}${closing2}`;
+    },
+  ).replaceAll(SUBSEQUENT_ANSI_RE, "");
+  let aboutLines = about.split("\n");
+  const aboutLinesReadMoreIndex = aboutLines.findLastIndex((line) =>
+    line.toLowerCase().replaceAll(ANSI_RE, "").trim().startsWith("read more:")
+  );
+  if (aboutLinesReadMoreIndex !== -1) {
+    aboutLines = aboutLines.slice(0, aboutLinesReadMoreIndex);
+  }
+
+  about = aboutLines.join("\n").replaceAll(
+    ENCAPSULATED_ANSI_RE,
+    (_, opening, text, _closing, offset, string) => {
+      if (opening === "\u001b[32m") { // green, used as heading
+        return `### ${text}`;
+      } else if (
+        opening === "\u001b[38;5;245m" || opening === "\u001b[36m" ||
+        opening === "\u001b[1m" || opening === "\u001b[22m"
+      ) { // gray and cyan used for code and snippets, and we treat yellow and bold as well as such
+        const lines = string.split("\n");
+        let line = "";
+
+        while (offset > 0) {
+          line = lines.shift();
+          offset -= line.length;
+        }
+
+        if (START_AND_END_ANSI_RE.test(line.trim())) {
+          return "\n```\n" + text + "\n```\n\n";
         } else {
-          return text;
+          return "`" + text + "`";
         }
-      },
-    );
-  
-    const args = [];
-    const options: Record<string, ArgType[]> = {};
-  
-    for (const arg of command.args) {
-      if (arg.help_heading === "Unstable options") {
-        continue;
-      }
-  
-      if (arg.long) {
-        const key = arg.help_heading ?? "Options";
-        options[key] ??= [];
-        options[key].push(arg);
       } else {
-        args.push(arg);
+        return text;
       }
+    },
+  );
+
+  const args = [];
+  const options: Record<string, ArgType[]> = {};
+
+  for (const arg of command.args) {
+    if (arg.help_heading === "Unstable options") {
+      continue;
+    }
+
+    if (arg.long) {
+      const key = arg.help_heading ?? "Options";
+      options[key] ??= [];
+      options[key].push(arg);
+    } else {
+      args.push(arg);
     }
-  
-    const rendered = (
-      <div>
-        <div class="p-4 bg-stone-100 dark:bg-transparent rounded border border-gray-300 dark:border-background-tertiary mt-6 mb-6 relative">
-          <h3 class="!text-xs !m-0 -top-2.5 bg-background-primary border border-gray-600/25 px-2 py-0.5 rounded absolute !font-normal">
-            Command line usage
-          </h3>
-          <div>
-            <pre class="!mb-0 !px-3 !py-2">
+  }
+
+  const rendered = (
+    <div>
+      <div class="p-4 bg-stone-100 dark:bg-transparent rounded border border-gray-300 dark:border-background-tertiary mt-6 mb-6 relative">
+        <h3 class="!text-xs !m-0 -top-2.5 bg-background-primary border border-gray-600/25 px-2 py-0.5 rounded absolute !font-normal">
+          Command line usage
+        </h3>
+        <div>
+          <pre class="!mb-0 !px-3 !py-2">
               <code>{command.usage.replaceAll(ANSI_RE, "").slice("usage: ".length)}</code>
-            </pre>
-          </div>
+          </pre>
         </div>
-  
-        <div dangerouslySetInnerHTML={{ __html: helpers.md(about) }} />
-        <br />
-  
-        {Object.entries(options).map(([heading, flags]) => {
-          const id = heading.toLowerCase().replace(/\s/g, "-");
-  
-          const renderedFlags = flags.toSorted((a: ArgType, b: ArgType) =>
-            a.name.localeCompare(b.name)
-          ).map((flag: ArgType) => renderOption(id, flag, helpers));
-  
-          toc.push({
-            text: heading,
-            slug: id,
-            children: [],
-          });
-  
-          return (
-            <>
-              <h2 id={id}>
-                {heading} <HeaderAnchor id={id} />
-              </h2>
-              {renderedFlags}
-            </>
-          );
-        })}
       </div>
-    );
-  
-    return {
-      rendered,
-      toc,
-    };
-  }
-  
-  function renderOption(group: string, arg: ArgType, helpers: Lume.Helpers) {
-    const id = `${group}-${arg.name}`;
-  
-    let docsLink = null;
-    let help = arg.help.replaceAll(ANSI_RE, "");
-    const helpLines = help.split("\n");
-    const helpLinesDocsIndex = helpLines.findLastIndex((line) =>
-      line.toLowerCase()
-        .trim()
-        .startsWith("docs:")
-    );
-    if (helpLinesDocsIndex !== -1) {
-      help = helpLines.slice(0, helpLinesDocsIndex).join("\n");
-      docsLink = helpLines[helpLinesDocsIndex].trim().slice("docs:".length);
-    }
-  
-    return (
-      <>
-        <h3 id={id}>
-          <code>
-            {docsLink
-              ? <a href={docsLink}>{"--" + arg.name}</a>
-              : ("--" + arg.name)}
-          </code>{" "}
-          <HeaderAnchor id={id} />
-        </h3>
-        {arg.short && (
-          <p>
-            Short flag: <code>-{arg.short}</code>
-          </p>
-        )}
-        {arg.help && (
-          <p
-            class="block !whitespace-pre-line"
-            dangerouslySetInnerHTML={{
-              __html: helpers.md(
-                flagsToInlineCode(help) +
-                  ((help.endsWith(".") || help.endsWith("]")) ? "" : "."),
-              ),
-            }}
-          />
-        )}
-      </>
-    );
+
+      <div dangerouslySetInnerHTML={{ __html: helpers.md(about) }} />
+      <br />
+
+      {Object.entries(options).map(([heading, flags]) => {
+        const id = heading.toLowerCase().replace(/\s/g, "-");
+
+        const renderedFlags = flags.toSorted((a: ArgType, b: ArgType) =>
+          a.name.localeCompare(b.name)
+        ).map((flag: ArgType) => renderOption(id, flag, helpers));
+
+        toc.push({
+          text: heading,
+          slug: id,
+          children: [],
+        });
+
+        return (
+          <>
+            <h2 id={id}>
+              {heading} <HeaderAnchor id={id} />
+            </h2>
+            {renderedFlags}
+          </>
+        );
+      })}
+    </div>
+  );
+
+  return {
+    rendered,
+    toc,
+  };
+}
+
+function renderOption(group: string, arg: ArgType, helpers: Lume.Helpers) {
+  const id = `${group}-${arg.name}`;
+
+  let docsLink = null;
+  let help = arg.help.replaceAll(ANSI_RE, "");
+  const helpLines = help.split("\n");
+  const helpLinesDocsIndex = helpLines.findLastIndex((line) =>
+    line.toLowerCase()
+      .trim()
+      .startsWith("docs:")
+  );
+  if (helpLinesDocsIndex !== -1) {
+    help = helpLines.slice(0, helpLinesDocsIndex).join("\n");
+    docsLink = helpLines[helpLinesDocsIndex].trim().slice("docs:".length);
   }
+
+  return (
+    <>
+      <h3 id={id}>
+        <code>
+          {docsLink
+            ? <a href={docsLink}>{"--" + arg.name}</a>
+            : ("--" + arg.name)}
+        </code>{" "}
+        <HeaderAnchor id={id} />
+      </h3>
+      {arg.short && (
+        <p>
+          Short flag: <code>-{arg.short}</code>
+        </p>
+      )}
+      {arg.help && (
+        <p
+          class="block !whitespace-pre-line"
+          dangerouslySetInnerHTML={{
+            __html: helpers.md(
+              flagsToInlineCode(help) +
+                ((help.endsWith(".") || help.endsWith("]")) ? "" : "."),
+            ),
+          }}
+        />
+      )}
+    </>
+  );
+}
diff --git a/learn/_components/CopyButton.tsx b/learn/_components/CopyButton.tsx
index e02eedfa6..f5d06c6b0 100644
--- a/learn/_components/CopyButton.tsx
+++ b/learn/_components/CopyButton.tsx
@@ -1,20 +1,19 @@
 export function CopyButton(props: { text: string }) {
-    return (
-      <button
-        type="button"
-        aria-label="Copy code to clipboard"
-        title="Copy"
-        class="clean-btn copy-all absolute right-2 top-10 hover:bg-gray-200 text-gray-900 p-2 rounded-md z-10"
-        data-copy={props.text}
-      >
-        <svg viewBox="0 0 24 24" width="15" height="15">
-          <path
-            fill="currentColor"
-            d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-          >
-          </path>
-        </svg>
-      </button>
-    );
-  }
-  
\ No newline at end of file
+  return (
+    <button
+      type="button"
+      aria-label="Copy code to clipboard"
+      title="Copy"
+      class="clean-btn copy-all absolute right-2 top-10 hover:bg-gray-200 text-gray-900 p-2 rounded-md z-10"
+      data-copy={props.text}
+    >
+      <svg viewBox="0 0 24 24" width="15" height="15">
+        <path
+          fill="currentColor"
+          d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+        >
+        </path>
+      </svg>
+    </button>
+  );
+}
diff --git a/learn/_components/SnippetComponent.tsx b/learn/_components/SnippetComponent.tsx
index 549aef943..c90fa0804 100644
--- a/learn/_components/SnippetComponent.tsx
+++ b/learn/_components/SnippetComponent.tsx
@@ -1,59 +1,58 @@
 import { ExampleSnippet } from "../types.ts";
 
 export default function SnippetComponent(props: {
-    filename: string;
-    firstOfFile: boolean;
-    lastOfFile: boolean;
-    snippet: ExampleSnippet;
-  }) {
-    return (
-      <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
-        <div
-          class={`italic select-none text-sm ${
-            props.snippet.text ? "pb-4 md:pb-0 " : " "
-          } ${props.snippet.code ? "col-span-3" : "mt-4 col-span-full"}`}
-        >
-          {props.snippet.text}
-        </div>
-        <div
-          class={`col-span-7 relative ${
-            props.snippet.code.length === 0 ? "hidden sm:block" : ""
-          }`}
-        >
-          {props.filename && (
-            <span
-              class={`font-mono text-xs absolute -top-3 left-4 z-10 p-1 rounded-sm ${
-                props.firstOfFile ? "block" : "block sm:hidden"
-              }`}
+  filename: string;
+  firstOfFile: boolean;
+  lastOfFile: boolean;
+  snippet: ExampleSnippet;
+}) {
+  return (
+    <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
+      <div
+        class={`italic select-none text-sm ${
+          props.snippet.text ? "pb-4 md:pb-0 " : " "
+        } ${props.snippet.code ? "col-span-3" : "mt-4 col-span-full"}`}
+      >
+        {props.snippet.text}
+      </div>
+      <div
+        class={`col-span-7 relative ${
+          props.snippet.code.length === 0 ? "hidden sm:block" : ""
+        }`}
+      >
+        {props.filename && (
+          <span
+            class={`font-mono text-xs absolute -top-3 left-4 z-10 p-1 rounded-sm ${
+              props.firstOfFile ? "block" : "block sm:hidden"
+            }`}
+          >
+            {props.filename}
+          </span>
+        )}
+        <div class="-mx-4 h-full sm:mx-0 overflow-scroll sm:overflow-hidden relative gfm-highlight">
+          {props.snippet.code && (
+            <div
+              data-color-mode="light"
+              data-dark-theme="dark"
+              data-light-theme="light"
+              class="nocopy h-full markdown-body"
             >
-              {props.filename}
-            </span>
-          )}
-          <div class="-mx-4 h-full sm:mx-0 overflow-scroll sm:overflow-hidden relative gfm-highlight">
-            {props.snippet.code && (
-              <div
-                data-color-mode="light"
-                data-dark-theme="dark"
-                data-light-theme="light"
-                class="nocopy h-full markdown-body"
+              <pre
+                class="highlight snippet-code language-ts"
+                data-example-position={props.firstOfFile
+                  ? "first"
+                  : props.lastOfFile
+                  ? "last"
+                  : "middle"}
               >
-                <pre
-                  class="highlight snippet-code language-ts"
-                  data-example-position={props.firstOfFile
-                    ? "first"
-                    : props.lastOfFile
-                    ? "last"
-                    : "middle"}
-                >
                   <code
                     dangerouslySetInnerHTML={{ __html: props.snippet.code }}
                   ></code>
-                </pre>
-              </div>
-            )}
-          </div>
+              </pre>
+            </div>
+          )}
         </div>
       </div>
-    );
-  }
-  
\ No newline at end of file
+    </div>
+  );
+}
diff --git a/learn/_pages/ExamplePage.tsx b/learn/_pages/ExamplePage.tsx
index 3795ba3cc..903aa28af 100644
--- a/learn/_pages/ExamplePage.tsx
+++ b/learn/_pages/ExamplePage.tsx
@@ -2,135 +2,133 @@ import { CopyButton } from "../_components/CopyButton.tsx";
 import SnippetComponent from "../_components/SnippetComponent.tsx";
 import { ExampleFromFileSystem } from "../types.ts";
 
-type Props =  { example: ExampleFromFileSystem };
+type Props = { example: ExampleFromFileSystem };
 
 export default function ExamplePage({ example }: Props) {
+  const contentNoCommentary = example.parsed.files.map((file) =>
+    file.snippets.map((snippet) => snippet.code).join("\n")
+  ).join("\n");
+  const url =
+    `https://github.com/denoland/deno-docs/blob/main/examples/${example.name}${
+      example.parsed.files.length > 1 ? "/main" : ""
+    }`;
+  const rawUrl = `https://docs.deno.com/learn/examples/${example.name}${
+    example.parsed.files.length > 1 ? "/main" : ""
+  }`;
 
-    const contentNoCommentary = example.parsed.files.map((file) =>
-        file.snippets.map((snippet) => snippet.code).join("\n")
-      ).join("\n");
-      const url =
-        `https://github.com/denoland/deno-docs/blob/main/examples/${example.name}${
-          example.parsed.files.length > 1 ? "/main" : ""
-        }`;
-      const rawUrl = `https://docs.deno.com/learn/examples/${example.name}${
-        example.parsed.files.length > 1 ? "/main" : ""
-      }`;  
+  return (
+    <div>
+      <main
+        id="content"
+        class="max-w-screen-lg flex flex-col gap-8 px-4 md:mx-auto pt-6 mb-20"
+      >
+        <div class="flex flex-col gap-4 md:flex-row justify-between items-start md:items-center">
+          <div class="flex flex-col gap-2">
+            <h1 class="text-3xl font-bold">
+              {example.parsed.title}
+            </h1>
+            {example.parsed.description && (
+              <p
+                className="max-w-prose"
+                dangerouslySetInnerHTML={{
+                  __html: example.parsed.description,
+                }}
+              />
+            )}
+          </div>
 
-
-    return (        
+          <a
+            href={url}
+            class="px-4 py-2 rounded bg-background-secondary text-sm whitespace-nowrap border border-foreground-secondary hover:bg-background-primary text-foreground-primary"
+          >
+            Edit on Github
+          </a>
+        </div>
+        <div class="relative block">
+          <CopyButton text={contentNoCommentary} />
+        </div>
+        {example.parsed.files.map((file) => (
+          <div class="flex flex-col gap-4 md:gap-0" key={file.name}>
+            {file.snippets.map((snippet, i) => (
+              <SnippetComponent
+                key={i}
+                firstOfFile={i === 0}
+                lastOfFile={i === file.snippets.length - 1}
+                filename={file.name}
+                snippet={snippet}
+              />
+            ))}
+          </div>
+        ))}
         <div>
-            <main
-            id="content"
-            class="max-w-screen-lg flex flex-col gap-8 px-4 md:mx-auto pt-6 mb-20"
-            >
-            <div class="flex flex-col gap-4 md:flex-row justify-between items-start md:items-center">
-                <div class="flex flex-col gap-2">
-                <h1 class="text-3xl font-bold">
-                    {example.parsed.title}
-                </h1>
-                {example.parsed.description && (
-                    <p
-                    className="max-w-prose"
-                    dangerouslySetInnerHTML={{
-                        __html: example.parsed.description,
-                    }}
-                    />
-                )}
-                </div>
-
+          {example.parsed.run && (
+            <>
+              <p class="mt-4 mb-4">
+                Run{" "}
                 <a
-                href={url}
-                class="px-4 py-2 rounded bg-background-secondary text-sm whitespace-nowrap border border-foreground-secondary hover:bg-background-primary text-foreground-primary"
+                  href={url}
+                  class="text-primary hover:underline focus:underline"
                 >
-                Edit on Github
-                </a>
-            </div>
-            <div class="relative block">
-                <CopyButton text={contentNoCommentary} />
-            </div>
-            {example.parsed.files.map((file) => (
-                <div class="flex flex-col gap-4 md:gap-0" key={file.name}>
-                {file.snippets.map((snippet, i) => (
-                    <SnippetComponent
-                    key={i}
-                    firstOfFile={i === 0}
-                    lastOfFile={i === file.snippets.length - 1}
-                    filename={file.name}
-                    snippet={snippet}
-                    />
-                ))}
-                </div>
-            ))}
-            <div>
-                {example.parsed.run && (
-                <>
-                    <p class="mt-4 mb-4">
-                    Run{" "}
-                    <a
-                        href={url}
-                        class="text-primary hover:underline focus:underline"
-                    >
-                        this example
-                    </a>{" "}
-                    locally using the Deno CLI:
-                    </p>
-                    <div
-                    data-color-mode="light"
-                    data-dark-theme="dark"
-                    data-light-theme="light"
-                    class="markdown-body"
-                    >
-                    <pre className="highlight">
+                  this example
+                </a>{" "}
+                locally using the Deno CLI:
+              </p>
+              <div
+                data-color-mode="light"
+                data-dark-theme="dark"
+                data-light-theme="light"
+                class="markdown-body"
+              >
+                <pre className="highlight">
                         <code>
                         {example.parsed.run.startsWith("deno")
                             ? example.parsed.run.replace("<url>", url)
                             : "deno run " +
                             example.parsed.run.replace("<url>", rawUrl)}
                         </code>
-                    </pre>
-                    </div>
-                </>
-                )}
-                {example.parsed.playground && (
-                <div class="col-span-3 mt-8">
-                    <p class="text-foreground-secondary">
-                    Try this example in a Deno Deploy playground:
-                    </p>
-                    <p class="mt-3">
+                </pre>
+              </div>
+            </>
+          )}
+          {example.parsed.playground && (
+            <div class="col-span-3 mt-8">
+              <p class="text-foreground-secondary">
+                Try this example in a Deno Deploy playground:
+              </p>
+              <p class="mt-3">
+                <a
+                  class="py-2 px-4 bg-black inline-block text-white text-base rounded-md opacity-90 hover:opacity-100"
+                  href={example.parsed.playground}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Deploy
+                </a>
+              </p>
+            </div>
+          )}
+          {example.parsed.additionalResources.length > 0 && (
+            <div class="col-span-3 mt-12 pt-6 border-t-1 border-gray-200">
+              <h2 class="font-semibold">Additional resources</h2>
+              <ul class="list-none mt-1">
+                {example.parsed.additionalResources.map(([link, title]) => (
+                  <li
+                    class="text-gray-700 hover:text-gray-900"
+                    key={link + title}
+                  >
                     <a
-                        class="py-2 px-4 bg-black inline-block text-white text-base rounded-md opacity-90 hover:opacity-100"
-                        href={example.parsed.playground}
-                        target="_blank"
-                        rel="noreferrer"
+                      class="text-primary hover:underline focus:underline"
+                      href={link}
                     >
-                        Deploy
+                      {title}
                     </a>
-                    </p>
-                </div>
-                )}
-                {example.parsed.additionalResources.length > 0 && (
-                <div class="col-span-3 mt-12 pt-6 border-t-1 border-gray-200">
-                    <h2 class="font-semibold">Additional resources</h2>
-                    <ul class="list-none mt-1">
-                    {example.parsed.additionalResources.map(([link, title]) => (
-                        <li
-                        class="text-gray-700 hover:text-gray-900"
-                        key={link + title}
-                        >
-                        <a
-                            class="text-primary hover:underline focus:underline"
-                            href={link}
-                        >
-                            {title}
-                        </a>
-                        </li>
-                    ))}
-                    </ul>
-                </div>
-                )}
+                  </li>
+                ))}
+              </ul>
             </div>
-            </main>
+          )}
         </div>
-    )
+      </main>
+    </div>
+  );
 }
diff --git a/learn/index.tsx b/learn/index.tsx
index 4c7e3416c..8574c94ce 100644
--- a/learn/index.tsx
+++ b/learn/index.tsx
@@ -4,7 +4,7 @@ import ExamplePage from "./_pages/ExamplePage.tsx";
 import ExamplesPage from "./_pages/ExamplesPage.tsx";
 import TutorialPage from "./_pages/TutorialsPage.tsx";
 import VideoPage from "./_pages/VideosPage.tsx";
-import {ExampleFromFileSystem } from "./types.ts";
+import { ExampleFromFileSystem } from "./types.ts";
 import { parseExample } from "./utils/parseExample.ts";
 
 export const layout = "raw.tsx";
@@ -41,8 +41,8 @@ export const sidebar = [
 ];
 
 export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
-  const files = [...walkSync("./learn/examples/", { exts: [".ts"] }) ];
-  
+  const files = [...walkSync("./learn/examples/", { exts: [".ts"] })];
+
   const examples = files.map((file) => {
     const content = Deno.readTextFileSync(file.path);
 
diff --git a/learn/types.ts b/learn/types.ts
index 3220e4c32..3021ba297 100644
--- a/learn/types.ts
+++ b/learn/types.ts
@@ -1,57 +1,56 @@
-
 export const TAGS = {
-    cli: {
-        title: "cli",
-        description: "Works in Deno CLI",
-    },
-    deploy: {
-        title: "deploy",
-        description: "Works on Deno Deploy",
-    },
-    web: {
-        title: "web",
-        description: "Works in on the Web",
-    },
-    };
+  cli: {
+    title: "cli",
+    description: "Works in Deno CLI",
+  },
+  deploy: {
+    title: "deploy",
+    description: "Works on Deno Deploy",
+  },
+  web: {
+    title: "web",
+    description: "Works in on the Web",
+  },
+};
 
 export const DIFFICULTIES = {
-    beginner: {
-        title: "Beginner",
-        description: "No significant prior knowledge is required for this example.",
-    },
-    intermediate: {
-        title: "Intermediate",
-        description: "Some prior knowledge is needed for this example.",
-    },
+  beginner: {
+    title: "Beginner",
+    description: "No significant prior knowledge is required for this example.",
+  },
+  intermediate: {
+    title: "Intermediate",
+    description: "Some prior knowledge is needed for this example.",
+  },
 };
 
 export type ExampleFromFileSystem = {
-      name: string;
-      content: string;
-      label: string;
-      parsed: Example;
-    };
+  name: string;
+  content: string;
+  label: string;
+  parsed: Example;
+};
 
 export interface Example {
-    id: string;
-    title: string;
-    description: string;
-    difficulty: keyof typeof DIFFICULTIES;
-    tags: (keyof typeof TAGS)[];
-    additionalResources: [string, string][];
-    run?: string;
-    playground?: string;
-    files: ExampleFile[];
-    group: string;
-    sortOrder: any;
+  id: string;
+  title: string;
+  description: string;
+  difficulty: keyof typeof DIFFICULTIES;
+  tags: (keyof typeof TAGS)[];
+  additionalResources: [string, string][];
+  run?: string;
+  playground?: string;
+  files: ExampleFile[];
+  group: string;
+  sortOrder: any;
 }
 
 export interface ExampleFile {
-    name: string;
-    snippets: ExampleSnippet[];
+  name: string;
+  snippets: ExampleSnippet[];
 }
 
 export interface ExampleSnippet {
-    text: string;
-    code: string;
+  text: string;
+  code: string;
 }
diff --git a/learn/utils/parseExample.ts b/learn/utils/parseExample.ts
index 314de3c87..ec32ccaf4 100644
--- a/learn/utils/parseExample.ts
+++ b/learn/utils/parseExample.ts
@@ -1,163 +1,162 @@
 import { DIFFICULTIES, Example, ExampleFile, TAGS } from "../types.ts";
 
 export function parseExample(id: string, file: string): Example {
-    // Extract the multi line JS doc comment at the top of the file
-    const [, jsdoc, rest] = file.match(/^\s*\/\*\*(.*?)\*\/\s*(.*)/s) || [];
-  
-    // Extract the @key value pairs from the JS doc comment
-    let description = "";
-    const kvs: Record<string, string> = {};
-    const resources = [];
-    for (let line of jsdoc.split("\n")) {
-      line = line.trim().replace(/^\*/, "").trim();
-      const [, key, value] = line.match(/^\s*@(\w+)\s+(.*)/) || [];
-      if (key) {
-        if (key === "resource") {
-          resources.push(value);
-        } else {
-          kvs[key] = value.trim();
-        }
+  // Extract the multi line JS doc comment at the top of the file
+  const [, jsdoc, rest] = file.match(/^\s*\/\*\*(.*?)\*\/\s*(.*)/s) || [];
+
+  // Extract the @key value pairs from the JS doc comment
+  let description = "";
+  const kvs: Record<string, string> = {};
+  const resources = [];
+  for (let line of jsdoc.split("\n")) {
+    line = line.trim().replace(/^\*/, "").trim();
+    const [, key, value] = line.match(/^\s*@(\w+)\s+(.*)/) || [];
+    if (key) {
+      if (key === "resource") {
+        resources.push(value);
       } else {
-        description += " " + line;
+        kvs[key] = value.trim();
       }
+    } else {
+      description += " " + line;
     }
-    description = description.trim();
-  
-    // Separate the code into snippets.
-    const files: ExampleFile[] = [
-      {
-        name: "",
-        snippets: [],
-      },
-    ];
-    let parseMode = "code";
-    let currentFile = files[0];
-    let text = "";
-    let code = "";
-  
-    for (const line of rest.split("\n")) {
-      const trimmedLine = line.trim();
-      if (parseMode == "code") {
-        if (line.startsWith("// File:")) {
-          if (text || code.trimEnd()) {
-            code = code.trimEnd();
-            currentFile.snippets.push({ text, code });
-            text = "";
-            code = "";
-          }
-          const name = line.slice(8).trim();
-          if (currentFile.snippets.length == 0) {
-            currentFile.name = name;
-          } else {
-            currentFile = {
-              name,
-              snippets: [],
-            };
-            files.push(currentFile);
-          }
-        } else if (line.startsWith("/* File:")) {
-          if (text || code.trimEnd()) {
-            code = code.trimEnd();
-            currentFile.snippets.push({ text, code });
-            text = "";
-            code = "";
-          }
-          const name = line.slice(8).trim();
-          if (currentFile.snippets.length == 0) {
-            currentFile.name = name;
-          } else {
-            currentFile = {
-              name,
-              snippets: [],
-            };
-            files.push(currentFile);
-          }
-          parseMode = "file";
-        } else if (
-          trimmedLine.startsWith("// deno-lint-ignore") ||
-          trimmedLine.startsWith("//deno-lint-ignore") ||
-          trimmedLine.startsWith("// deno-fmt-ignore") ||
-          trimmedLine.startsWith("//deno-fmt-ignore")
-        ) {
-          // skip deno directives
-        } else if (trimmedLine.startsWith("//-")) {
-          code += line.replace("//-", "//") + "\n";
-        } else if (trimmedLine.startsWith("//")) {
-          if (text || code.trimEnd()) {
-            code = code.trimEnd();
-            currentFile.snippets.push({ text, code });
-          }
-          text = trimmedLine.slice(2).trim();
+  }
+  description = description.trim();
+
+  // Separate the code into snippets.
+  const files: ExampleFile[] = [
+    {
+      name: "",
+      snippets: [],
+    },
+  ];
+  let parseMode = "code";
+  let currentFile = files[0];
+  let text = "";
+  let code = "";
+
+  for (const line of rest.split("\n")) {
+    const trimmedLine = line.trim();
+    if (parseMode == "code") {
+      if (line.startsWith("// File:")) {
+        if (text || code.trimEnd()) {
+          code = code.trimEnd();
+          currentFile.snippets.push({ text, code });
+          text = "";
           code = "";
-          parseMode = "comment";
-        } else {
-          code += line + "\n";
         }
-      } else if (parseMode == "comment") {
-        if (
-          trimmedLine.startsWith("// deno-lint-ignore") ||
-          trimmedLine.startsWith("//deno-lint-ignore") ||
-          trimmedLine.startsWith("// deno-fmt-ignore") ||
-          trimmedLine.startsWith("//deno-fmt-ignore")
-        ) {
-          // skip deno directives
-        } else if (trimmedLine.startsWith("//")) {
-          text += " " + trimmedLine.slice(2).trim();
+        const name = line.slice(8).trim();
+        if (currentFile.snippets.length == 0) {
+          currentFile.name = name;
         } else {
-          code += line + "\n";
-          parseMode = "code";
+          currentFile = {
+            name,
+            snippets: [],
+          };
+          files.push(currentFile);
         }
-      } else if (parseMode == "file") {
-        if (line == "*/") {
-          parseMode = "code";
+      } else if (line.startsWith("/* File:")) {
+        if (text || code.trimEnd()) {
+          code = code.trimEnd();
+          currentFile.snippets.push({ text, code });
+          text = "";
+          code = "";
+        }
+        const name = line.slice(8).trim();
+        if (currentFile.snippets.length == 0) {
+          currentFile.name = name;
         } else {
-          code += line + "\n";
+          currentFile = {
+            name,
+            snippets: [],
+          };
+          files.push(currentFile);
         }
+        parseMode = "file";
+      } else if (
+        trimmedLine.startsWith("// deno-lint-ignore") ||
+        trimmedLine.startsWith("//deno-lint-ignore") ||
+        trimmedLine.startsWith("// deno-fmt-ignore") ||
+        trimmedLine.startsWith("//deno-fmt-ignore")
+      ) {
+        // skip deno directives
+      } else if (trimmedLine.startsWith("//-")) {
+        code += line.replace("//-", "//") + "\n";
+      } else if (trimmedLine.startsWith("//")) {
+        if (text || code.trimEnd()) {
+          code = code.trimEnd();
+          currentFile.snippets.push({ text, code });
+        }
+        text = trimmedLine.slice(2).trim();
+        code = "";
+        parseMode = "comment";
+      } else {
+        code += line + "\n";
       }
-    }
-    if (text || code.trimEnd()) {
-      code = code.trimEnd();
-      currentFile.snippets.push({ text, code });
-    }
-  
-    if (!kvs.title) {
-      throw new Error("Missing title in JS doc comment.");
-    }
-  
-    const tags = kvs.tags.split(",").map((s) => s.trim() as keyof typeof TAGS);
-    for (const tag of tags) {
-      if (!TAGS[tag]) {
-        throw new Error(`Unknown tag '${tag}'`);
+    } else if (parseMode == "comment") {
+      if (
+        trimmedLine.startsWith("// deno-lint-ignore") ||
+        trimmedLine.startsWith("//deno-lint-ignore") ||
+        trimmedLine.startsWith("// deno-fmt-ignore") ||
+        trimmedLine.startsWith("//deno-fmt-ignore")
+      ) {
+        // skip deno directives
+      } else if (trimmedLine.startsWith("//")) {
+        text += " " + trimmedLine.slice(2).trim();
+      } else {
+        code += line + "\n";
+        parseMode = "code";
+      }
+    } else if (parseMode == "file") {
+      if (line == "*/") {
+        parseMode = "code";
+      } else {
+        code += line + "\n";
       }
     }
-  
-    const difficulty = kvs.difficulty as keyof typeof DIFFICULTIES;
-    if (!DIFFICULTIES[difficulty]) {
-      throw new Error(`Unknown difficulty '${difficulty}'`);
+  }
+  if (text || code.trimEnd()) {
+    code = code.trimEnd();
+    currentFile.snippets.push({ text, code });
+  }
+
+  if (!kvs.title) {
+    throw new Error("Missing title in JS doc comment.");
+  }
+
+  const tags = kvs.tags.split(",").map((s) => s.trim() as keyof typeof TAGS);
+  for (const tag of tags) {
+    if (!TAGS[tag]) {
+      throw new Error(`Unknown tag '${tag}'`);
     }
-  
-    const additionalResources: [string, string][] = [];
-    for (const resource of resources) {
-      // @resource {https://jsr.io/@std/http/server/~/} std/http/server
-      const [_, url, title] = resource.match(/^\{(.*?)\}\s(.*)/) || [];
-      if (!url || !title) {
-        throw new Error(`Invalid resource: ${resource}`);
-      }
-      additionalResources.push([url, title]);
+  }
+
+  const difficulty = kvs.difficulty as keyof typeof DIFFICULTIES;
+  if (!DIFFICULTIES[difficulty]) {
+    throw new Error(`Unknown difficulty '${difficulty}'`);
+  }
+
+  const additionalResources: [string, string][] = [];
+  for (const resource of resources) {
+    // @resource {https://jsr.io/@std/http/server/~/} std/http/server
+    const [_, url, title] = resource.match(/^\{(.*?)\}\s(.*)/) || [];
+    if (!url || !title) {
+      throw new Error(`Invalid resource: ${resource}`);
     }
-  
-    return {
-      id,
-      title: kvs.title,
-      description,
-      difficulty,
-      tags,
-      additionalResources,
-      run: kvs.run,
-      playground: kvs.playground,
-      files,
-      group: kvs.group || "Misc",
-      sortOrder: kvs.sortOrder || 999999,
-    };
+    additionalResources.push([url, title]);
   }
-  
\ No newline at end of file
+
+  return {
+    id,
+    title: kvs.title,
+    description,
+    difficulty,
+    tags,
+    additionalResources,
+    run: kvs.run,
+    playground: kvs.playground,
+    files,
+    group: kvs.group || "Misc",
+    sortOrder: kvs.sortOrder || 999999,
+  };
+}

From 74d68a137707b9ed0bfc93a0789ddf7167b625ea Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Mon, 25 Nov 2024 17:44:40 +0000
Subject: [PATCH 03/23] fix test

---
 learn/_pages/examples_test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/learn/_pages/examples_test.ts b/learn/_pages/examples_test.ts
index 2868fedc4..7151a2fbb 100644
--- a/learn/_pages/examples_test.ts
+++ b/learn/_pages/examples_test.ts
@@ -5,7 +5,7 @@ import { assertEquals, assertNotMatch } from "@std/assert";
 const decoder = new TextDecoder();
 
 Deno.test("Check examples", async (t) => {
-  for await (const item of walk("/learn/examples")) {
+  for await (const item of walk("./learn/examples")) {
     const path = join("examples", item.name);
 
     if (!path.endsWith(".ts")) continue;

From 6017f63492a3dbf35a38752d9a90b6882b46349c Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Mon, 25 Nov 2024 17:49:27 +0000
Subject: [PATCH 04/23] fix test

---
 learn/_pages/examples_test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/learn/_pages/examples_test.ts b/learn/_pages/examples_test.ts
index 7151a2fbb..3931c37b1 100644
--- a/learn/_pages/examples_test.ts
+++ b/learn/_pages/examples_test.ts
@@ -5,7 +5,7 @@ import { assertEquals, assertNotMatch } from "@std/assert";
 const decoder = new TextDecoder();
 
 Deno.test("Check examples", async (t) => {
-  for await (const item of walk("./learn/examples")) {
+  for await (const item of walk("./learn/examples/")) {
     const path = join("examples", item.name);
 
     if (!path.endsWith(".ts")) continue;

From 10a9b6721a3cf3e5d67560c40aa32c8d0e09a97d Mon Sep 17 00:00:00 2001
From: Phil Hawksworth <phil@deno.com>
Date: Tue, 26 Nov 2024 06:27:43 -0800
Subject: [PATCH 05/23] Learn landing page (#1194)

---
 _components/Header.tsx              |   2 +-
 _config.ts                          |   2 +-
 _includes/layout.tsx                |   1 +
 index.page.tsx                      |   8 +-
 learn/_components/EmbedVideo.tsx    |  37 ++++
 learn/_components/SectionTeaser.tsx |  15 ++
 learn/_pages/LandingPage.tsx        |  73 +++++++-
 styles.css                          |   2 +
 youtube-lite.client.js              | 255 ++++++++++++++++++++++++++++
 youtube-lite.css                    | 102 +++++++++++
 10 files changed, 485 insertions(+), 12 deletions(-)
 create mode 100644 learn/_components/EmbedVideo.tsx
 create mode 100644 learn/_components/SectionTeaser.tsx
 create mode 100644 youtube-lite.client.js
 create mode 100644 youtube-lite.css

diff --git a/_components/Header.tsx b/_components/Header.tsx
index 10393cc62..b178abe60 100644
--- a/_components/Header.tsx
+++ b/_components/Header.tsx
@@ -59,7 +59,7 @@ export default function Header({
             url={url}
             activeOn="/learn"
             href="/learn"
-            name="Learning hub"
+            name="Learn"
             hideOnMobile
           />
           <span class="hidden xl:inline-block text-foreground-secondary mx-2">
diff --git a/_config.ts b/_config.ts
index 6ae98cb66..5540ab055 100644
--- a/_config.ts
+++ b/_config.ts
@@ -127,7 +127,7 @@ site.use(
 );
 site.use(
   esbuild({
-    extensions: [".client.ts"],
+    extensions: [".client.ts", ".client.js"],
     options: {
       minify: false,
       splitting: true,
diff --git a/_includes/layout.tsx b/_includes/layout.tsx
index 8d9b2fe54..d6274a844 100644
--- a/_includes/layout.tsx
+++ b/_includes/layout.tsx
@@ -72,6 +72,7 @@ export default function Layout(props: Lume.Data) {
         <script type="module" src="/search.client.js"></script>
         <script type="module" src="/tabs.client.js"></script>
         <script type="module" src="/feedback.client.js"></script>
+        <script type="module" src="/youtube-lite.client.js"></script>
         <script
           async
           src="https://www.googletagmanager.com/gtm.js?id=GTM-5B5TH8ZJ"
diff --git a/index.page.tsx b/index.page.tsx
index 2caa59f5b..c827375b2 100644
--- a/index.page.tsx
+++ b/index.page.tsx
@@ -8,14 +8,14 @@ export const sidebar = [
         label: "Runtime Manual",
         id: "/runtime/",
       },
-      {
-        label: "Examples",
-        id: "/examples/",
-      },
       {
         label: "API reference",
         id: "/api/deno",
       },
+      {
+        label: "Learn",
+        id: "/learn/",
+      },
       {
         label: "Deploy",
         id: "/deploy/manual/",
diff --git a/learn/_components/EmbedVideo.tsx b/learn/_components/EmbedVideo.tsx
new file mode 100644
index 000000000..8a1c5b73f
--- /dev/null
+++ b/learn/_components/EmbedVideo.tsx
@@ -0,0 +1,37 @@
+/**
+ * Embed a YouTube video.
+ * @param props.id - The YouTube ID or URL.
+ * @returns A custom element that embeds the YouTube video with Lite YouTube Embed.
+ */
+export function EmbedVideo(
+  props: { id: string },
+) {
+  const videoid = extractID(props.id);
+  return (
+    <lite-youtube videoid={videoid}>
+    </lite-youtube>
+  );
+}
+
+/**
+ * Extract a YouTube ID from a string.
+ * @param idOrUrl String to test
+ * @returns A YouTube video ID or undefined if none matched
+ */
+function extractID(idOrUrl: string) {
+  const idRegExp = /^[A-Za-z0-9-_]+$/;
+  if (idRegExp.test(idOrUrl)) return idOrUrl;
+  return urlMatcher(idOrUrl);
+}
+
+/**
+ * Extract a YouTube ID from a URL if it matches the pattern.
+ * @param url URL to test
+ * @returns A YouTube video ID or undefined if none matched
+ */
+function urlMatcher(url: string): string | undefined {
+  const urlPattern =
+    /(?=(\s*))\1(?:<a [^>]*?>)??(?=(\s*))\2(?:https?:\/\/)??(?:w{3}\.)??(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|shorts\/)??([A-Za-z0-9-_]{11})(?:[^\s<>]*)(?=(\s*))\4(?:<\/a>)??(?=(\s*))\5/;
+  const match = url.match(urlPattern);
+  return match?.[3];
+}
diff --git a/learn/_components/SectionTeaser.tsx b/learn/_components/SectionTeaser.tsx
new file mode 100644
index 000000000..ff5d2d2c1
--- /dev/null
+++ b/learn/_components/SectionTeaser.tsx
@@ -0,0 +1,15 @@
+export function SectionTeaser(
+  props: { title: string; text: string; link: string; cta: string },
+) {
+  return (
+    <div className="mt-4 text-center">
+      <h3 className="text-xl font-semibold">
+        <a href={props.link}>{props.title}</a>
+      </h3>
+      <p className="my-4">{props.text}</p>
+      <a className="homepage-link runtime-link" href={props.link}>
+        {props.cta}
+      </a>
+    </div>
+  );
+}
diff --git a/learn/_pages/LandingPage.tsx b/learn/_pages/LandingPage.tsx
index 1f3fd041f..604449e6e 100644
--- a/learn/_pages/LandingPage.tsx
+++ b/learn/_pages/LandingPage.tsx
@@ -1,10 +1,71 @@
+import { SectionTeaser } from "../_components/SectionTeaser.tsx";
+import { EmbedVideo } from "../_components/EmbedVideo.tsx";
+
 export default function LandingPage() {
   return (
-    <>
-      <h1>The Learning hub page</h1>
-      <a href="/learn/examples/">Deno by Example</a>
-      <a href="/learn/tutorials/">Tutorials</a>
-      <a href="/learn/videos/">Videos</a>
-    </>
+    <main
+      id="content"
+      className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
+    >
+      <div className="pb-16 align-middle md:pb-0 w-full">
+        <div className="mt-8 mb-16 md:mb-24 text-center">
+          <h1 className="text-4xl md:text-6xl font-semibold mb-4">
+            Learn Deno
+          </h1>
+          <p className="max-w-prose mx-auto">
+            Tutorials, videos and example code to help you go from Deno beginner
+            to Deno expert.
+          </p>
+        </div>
+        <div className="align-middle flex items-center gap-8 mb-20">
+          <div className="flex-1">
+            <EmbedVideo id="H8VLifMOBHU" />
+          </div>
+          <div className="flex-1 text-center">
+            <h2 className="text-2xl font-semibold ">What is Deno?</h2>
+            <p className="my-4">
+              Deno, is an open-source runtime for TypeScript and JavaScript.
+              Features built-in dev tools, powerful platform APIs, and native
+              support for TypeScript and JSX. In this video we'll introduce Deno
+              and its core concepts
+            </p>
+            <p>
+              <a className="homepage-link runtime-link" href="/learn/video/">
+                Watch the getting started video series
+              </a>
+            </p>
+          </div>
+        </div>
+        <h2 className="text-3xl mt-20 mb-8 font-semibold text-center">
+          How do you like to learn?
+        </h2>
+        <div className="align-middle flex flex-row gap-8 mb-20">
+          <div className="flex-1">
+            <SectionTeaser
+              title="By example"
+              text="Our examples section holds a collection of annotated Deno examples, to be used as a reference for how to build with Deno, or as a guide to learn about many of Deno's features."
+              link="/learn/examples/"
+              cta="Explore the examples"
+            />
+          </div>
+          <div className="flex-1">
+            <SectionTeaser
+              title="With video"
+              text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
+              link="/learn/videos/"
+              cta="Explore the videos"
+            />
+          </div>
+          <div className="flex-1">
+            <SectionTeaser
+              title="Through tutorials"
+              text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
+              link="/learn/tutorials/"
+              cta="Explore the tutorials"
+            />
+          </div>
+        </div>
+      </div>
+    </main>
   );
 }
diff --git a/styles.css b/styles.css
index 0eef90536..e1d946a56 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,5 @@
+@import "./youtube-lite.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/youtube-lite.client.js b/youtube-lite.client.js
new file mode 100644
index 000000000..b9846a571
--- /dev/null
+++ b/youtube-lite.client.js
@@ -0,0 +1,255 @@
+/**
+ * A lightweight youtube embed. Still should feel the same to the user, just MUCH faster to initialize and paint.
+ *
+ * Thx to these as the inspiration
+ *   https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
+ *   https://autoplay-youtube-player.glitch.me/
+ *
+ * Once built it, I also found these:
+ *   https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube (👍👍)
+ *   https://github.com/Daugilas/lazyYT
+ *   https://github.com/vb/lazyframe
+ */
+class LiteYTEmbed extends HTMLElement {
+  connectedCallback() {
+    this.videoId = this.getAttribute("videoid");
+
+    let playBtnEl = this.querySelector(".lyt-playbtn,.lty-playbtn");
+    // A label for the button takes priority over a [playlabel] attribute on the custom-element
+    this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) ||
+      this.getAttribute("playlabel") || "Play";
+
+    this.dataset.title = this.getAttribute("title") || "";
+
+    /**
+     * Lo, the youtube poster image!  (aka the thumbnail, image placeholder, etc)
+     *
+     * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md
+     */
+    if (!this.style.backgroundImage) {
+      this.style.backgroundImage =
+        `url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`;
+      this.upgradePosterImage();
+    }
+
+    // Set up play button, and its visually hidden label
+    if (!playBtnEl) {
+      playBtnEl = document.createElement("button");
+      playBtnEl.type = "button";
+      // Include the mispelled 'lty-' in case it's still being used. https://github.com/paulirish/lite-youtube-embed/issues/65
+      playBtnEl.classList.add("lyt-playbtn", "lty-playbtn");
+      this.append(playBtnEl);
+    }
+    if (!playBtnEl.textContent) {
+      const playBtnLabelEl = document.createElement("span");
+      playBtnLabelEl.className = "lyt-visually-hidden";
+      playBtnLabelEl.textContent = this.playLabel;
+      playBtnEl.append(playBtnLabelEl);
+    }
+
+    this.addNoscriptIframe();
+
+    // for the PE pattern, change anchor's semantics to button
+    if (playBtnEl.nodeName === "A") {
+      playBtnEl.removeAttribute("href");
+      playBtnEl.setAttribute("tabindex", "0");
+      playBtnEl.setAttribute("role", "button");
+      // fake button needs keyboard help
+      playBtnEl.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.activate();
+        }
+      });
+    }
+
+    // On hover (or tap), warm up the TCP connections we're (likely) about to use.
+    this.addEventListener("pointerover", LiteYTEmbed.warmConnections, {
+      once: true,
+    });
+    this.addEventListener("focusin", LiteYTEmbed.warmConnections, {
+      once: true,
+    });
+
+    // Once the user clicks, add the real iframe and drop our play button
+    // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
+    //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
+    this.addEventListener("click", this.activate);
+
+    // Chrome & Edge desktop have no problem with the basic YouTube Embed with ?autoplay=1
+    // However Safari desktop and most/all mobile browsers do not successfully track the user gesture of clicking through the creation/loading of the iframe,
+    // so they don't autoplay automatically. Instead we must load an additional 2 sequential JS files (1KB + 165KB) (un-br) for the YT Player API
+    // TODO: Try loading the the YT API in parallel with our iframe and then attaching/playing it. #82
+    this.needsYTApi = this.hasAttribute("js-api") ||
+      navigator.vendor.includes("Apple") ||
+      navigator.userAgent.includes("Mobi");
+  }
+
+  /**
+   * Add a <link rel={preload | preconnect} ...> to the head
+   */
+  static addPrefetch(kind, url, as) {
+    const linkEl = document.createElement("link");
+    linkEl.rel = kind;
+    linkEl.href = url;
+    if (as) {
+      linkEl.as = as;
+    }
+    document.head.append(linkEl);
+  }
+
+  /**
+   * Begin pre-connecting to warm up the iframe load
+   * Since the embed's network requests load within its iframe,
+   *   preload/prefetch'ing them outside the iframe will only cause double-downloads.
+   * So, the best we can do is warm up a few connections to origins that are in the critical path.
+   *
+   * Maybe `<link rel=preload as=document>` would work, but it's unsupported: http://crbug.com/593267
+   * But TBH, I don't think it'll happen soon with Site Isolation and split caches adding serious complexity.
+   */
+  static warmConnections() {
+    if (LiteYTEmbed.preconnected) return;
+
+    // The iframe document and most of its subresources come right off youtube.com
+    LiteYTEmbed.addPrefetch("preconnect", "https://www.youtube-nocookie.com");
+    // The botguard script is fetched off from google.com
+    LiteYTEmbed.addPrefetch("preconnect", "https://www.google.com");
+
+    // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
+    LiteYTEmbed.addPrefetch(
+      "preconnect",
+      "https://googleads.g.doubleclick.net",
+    );
+    LiteYTEmbed.addPrefetch("preconnect", "https://static.doubleclick.net");
+
+    LiteYTEmbed.preconnected = true;
+  }
+
+  fetchYTPlayerApi() {
+    if (window.YT || (window.YT && window.YT.Player)) return;
+
+    this.ytApiPromise = new Promise((res, rej) => {
+      var el = document.createElement("script");
+      el.src = "https://www.youtube.com/iframe_api";
+      el.async = true;
+      el.onload = (_) => {
+        YT.ready(res);
+      };
+      el.onerror = rej;
+      this.append(el);
+    });
+  }
+
+  /** Return the YT Player API instance. (Public L-YT-E API) */
+  async getYTPlayer() {
+    if (!this.playerPromise) {
+      await this.activate();
+    }
+
+    return this.playerPromise;
+  }
+
+  async addYTPlayerIframe() {
+    this.fetchYTPlayerApi();
+    await this.ytApiPromise;
+
+    const videoPlaceholderEl = document.createElement("div");
+    this.append(videoPlaceholderEl);
+
+    const paramsObj = Object.fromEntries(this.getParams().entries());
+
+    this.playerPromise = new Promise((resolve) => {
+      let player = new YT.Player(videoPlaceholderEl, {
+        width: "100%",
+        videoId: this.videoId,
+        playerVars: paramsObj,
+        events: {
+          "onReady": (event) => {
+            event.target.playVideo();
+            resolve(player);
+          },
+        },
+      });
+    });
+  }
+
+  // Add the iframe within <noscript> for indexability discoverability. See https://github.com/paulirish/lite-youtube-embed/issues/105
+  addNoscriptIframe() {
+    const iframeEl = this.createBasicIframe();
+    const noscriptEl = document.createElement("noscript");
+    // Appending into noscript isn't equivalant for mysterious reasons: https://html.spec.whatwg.org/multipage/scripting.html#the-noscript-element
+    noscriptEl.innerHTML = iframeEl.outerHTML;
+    this.append(noscriptEl);
+  }
+
+  getParams() {
+    const params = new URLSearchParams(this.getAttribute("params") || []);
+    params.append("autoplay", "1");
+    params.append("playsinline", "1");
+    return params;
+  }
+
+  async activate() {
+    if (this.classList.contains("lyt-activated")) return;
+    this.classList.add("lyt-activated");
+
+    if (this.needsYTApi) {
+      return this.addYTPlayerIframe(this.getParams());
+    }
+
+    const iframeEl = this.createBasicIframe();
+    this.append(iframeEl);
+
+    // Set focus for a11y
+    iframeEl.focus();
+  }
+
+  createBasicIframe() {
+    const iframeEl = document.createElement("iframe");
+    iframeEl.width = 560;
+    iframeEl.height = 315;
+    // No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include
+    iframeEl.title = this.playLabel;
+    iframeEl.allow =
+      "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
+    iframeEl.allowFullscreen = true;
+    // AFAIK, the encoding here isn't necessary for XSS, but we'll do it only because this is a URL
+    // https://stackoverflow.com/q/64959723/89484
+    iframeEl.src = `https://www.youtube-nocookie.com/embed/${
+      encodeURIComponent(this.videoId)
+    }?${this.getParams().toString()}`;
+    return iframeEl;
+  }
+
+  /**
+   * In the spirit of the `lowsrc` attribute and progressive JPEGs, we'll upgrade the reliable
+   * poster image to a higher resolution one, if it's available.
+   * Interestingly this sddefault webp is often smaller in filesize, but we will still attempt it second
+   * because getting _an_ image in front of the user if our first priority.
+   *
+   * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md for more details
+   */
+  upgradePosterImage() {
+    // Defer to reduce network contention.
+    setTimeout(() => {
+      const webpUrl =
+        `https://i.ytimg.com/vi_webp/${this.videoId}/sddefault.webp`;
+      const img = new Image();
+      img.fetchPriority = "low"; // low priority to reduce network contention
+      img.referrerpolicy = "origin"; // Not 100% sure it's needed, but https://github.com/ampproject/amphtml/pull/3940
+      img.src = webpUrl;
+      img.onload = (e) => {
+        // A pretty ugly hack since onerror won't fire on YouTube image 404. This is (probably) due to
+        // Youtube's style of returning data even with a 404 status. That data is a 120x90 placeholder image.
+        // … per "annoying yt 404 behavior" in the .md
+        const noAvailablePoster = e.target.naturalHeight == 90 &&
+          e.target.naturalWidth == 120;
+        if (noAvailablePoster) return;
+
+        this.style.backgroundImage = `url("${webpUrl}")`;
+      };
+    }, 100);
+  }
+}
+// Register custom element
+customElements.define("lite-youtube", LiteYTEmbed);
diff --git a/youtube-lite.css b/youtube-lite.css
new file mode 100644
index 000000000..c775576b2
--- /dev/null
+++ b/youtube-lite.css
@@ -0,0 +1,102 @@
+lite-youtube {
+  background-color: #000;
+  position: relative;
+  display: block;
+  contain: content;
+  background-position: center center;
+  background-size: cover;
+  cursor: pointer;
+  max-width: 720px;
+}
+
+/* gradient */
+lite-youtube::before {
+  content: attr(data-title);
+  display: block;
+  position: absolute;
+  top: 0;
+  /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
+  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%
+  );
+  height: 99px;
+  width: 100%;
+  font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
+  color: hsl(0deg 0% 93.33%);
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  padding: 25px 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+}
+
+lite-youtube:hover::before {
+  color: white;
+}
+
+/* responsive iframe with a 16:9 aspect ratio
+  thanks https://css-tricks.com/responsive-iframes/
+*/
+lite-youtube::after {
+  content: "";
+  display: block;
+  padding-bottom: calc(100% / (16 / 9));
+}
+lite-youtube > iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0;
+}
+
+/* play button */
+lite-youtube > .lyt-playbtn {
+  display: block;
+  /* Make the button element cover the whole area for a large hover/click target… */
+  width: 100%;
+  height: 100%;
+  /* …but visually it's still the same size */
+  background: no-repeat center/68px 48px;
+  /* YT's actual play button svg */
+  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>');
+  position: absolute;
+  cursor: pointer;
+  z-index: 1;
+  filter: grayscale(100%);
+  transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
+  border: 0;
+}
+
+lite-youtube:hover > .lyt-playbtn,
+lite-youtube .lyt-playbtn:focus {
+  filter: none;
+}
+
+/* Post-click styles */
+lite-youtube.lyt-activated {
+  cursor: unset;
+}
+lite-youtube.lyt-activated::before,
+lite-youtube.lyt-activated > .lyt-playbtn {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.lyt-visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

From 65e27e4326f42d835c829803048610da7fb0ce7c Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 27 Nov 2024 15:28:49 +0000
Subject: [PATCH 06/23] New tutorials (#1197)

---
 learn/_components/TutorialList.tsx            |  16 ++
 learn/_pages/TutorialsPage.tsx                |  34 +++-
 learn/tutorials/_data.ts                      | 156 ++++++++++++++++++
 .../tutorials}/apollo.md                      |   1 +
 {runtime => learn}/tutorials/aws_lambda.md    |   3 +
 {runtime => learn}/tutorials/aws_lightsail.md |   4 +-
 {runtime => learn}/tutorials/chat_app.md      |   1 +
 {runtime => learn}/tutorials/cjs_to_esm.md    |   4 +-
 .../tutorials/cloudflare_workers.md           |   4 +-
 .../tutorials/connecting_to_databases.md      |   2 +
 .../tutorials}/create-react.md                |   2 +
 {runtime => learn}/tutorials/digital_ocean.md |   4 +-
 .../tutorials}/express.md                     |   1 +
 {runtime => learn}/tutorials/fetch_data.md    |   1 +
 .../tutorials/file_based_routing.md           |   4 +-
 {runtime => learn}/tutorials/file_server.md   |   1 +
 .../tutorials/file_system_events.md           |   1 +
 .../tutorials/google_cloud_run.md             |   4 +-
 {runtime => learn}/tutorials/hashbang.md      |   1 +
 {runtime => learn}/tutorials/hello_world.md   |   1 +
 .../create-container-service-on-aws.png       | Bin
 ...ello-world-from-deno-and-aws-lightsail.png | Bin
 .../hello-world-from-localhost.png            | Bin
 .../aws-lightsail/new-image-on-docker-hub.png | Bin
 .../cloudflare-workers/main-on-cloudflare.png | Bin
 .../hello-from-deno-and-digital-ocean.png     | Bin
 .../hello-world-from-localhost.png            | Bin
 ...ge-on-digital-ocean-container-registry.png | Bin
 .../hello-from-google-cloud-run.png           | Bin
 .../hello-world-from-localhost.png            | Bin
 .../image-in-google-artifact-registry.png     | Bin
 ...pository-in-google-artifact-repository.png | Bin
 .../tutorials/images/how-to/next/dinoapp.gif  | Bin
 .../how-to/prisma/1-dinosaurs-in-prisma.png   | Bin
 .../how-to/prisma/2-dinosaurs-from-api.png    | Bin
 .../prisma/3-new-dinosaur-in-prisma.png       | Bin
 .../how-to/react/react-dinosaur-app-demo.gif  | Bin
 .../images/how-to/redis/cached-redis-body.png | Bin
 .../how-to/redis/cached-redis-header.png      | Bin
 .../how-to/redis/uncached-redis-body.png      | Bin
 .../how-to/redis/uncached-redis-header.png    | Bin
 .../tutorials/images/how-to/vue/vue.gif       | Bin
 .../tutorials/images/quick-fix.png            | Bin
 .../tutorials/images/websockets.gif           | Bin
 .../tutorials/images/word_finder.png          | Bin
 {runtime => learn}/tutorials/kinsta.md        |   4 +-
 .../tutorials/module_metadata.md              |   1 +
 .../tutorials}/mongoose.md                    |   1 +
 .../tutorials}/mysql2.md                      |   1 +
 .../tutorials}/next.md                        |   2 +
 {runtime => learn}/tutorials/os_signals.md    |   1 +
 .../tutorials}/planetscale.md                 |   1 +
 .../tutorials}/prisma.md                      |   1 +
 .../tutorials}/react.md                       |   1 +
 .../tutorials}/redis.md                       |   1 +
 {runtime => learn}/tutorials/subprocess.md    |   1 +
 .../tutorials}/vue.md                         |   1 +
 {runtime => learn}/tutorials/word_finder.md   |   1 +
 oldurls.json                                  |   5 +-
 runtime/_data.ts                              |  45 -----
 runtime/tutorials/index.md                    |  56 -------
 styles.css                                    |   2 +-
 62 files changed, 259 insertions(+), 111 deletions(-)
 create mode 100644 learn/_components/TutorialList.tsx
 create mode 100644 learn/tutorials/_data.ts
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/apollo.md (99%)
 rename {runtime => learn}/tutorials/aws_lambda.md (99%)
 rename {runtime => learn}/tutorials/aws_lightsail.md (98%)
 rename {runtime => learn}/tutorials/chat_app.md (99%)
 rename {runtime => learn}/tutorials/cjs_to_esm.md (97%)
 rename {runtime => learn}/tutorials/cloudflare_workers.md (95%)
 rename {runtime => learn}/tutorials/connecting_to_databases.md (99%)
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/create-react.md (99%)
 rename {runtime => learn}/tutorials/digital_ocean.md (98%)
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/express.md (98%)
 rename {runtime => learn}/tutorials/fetch_data.md (99%)
 rename {runtime => learn}/tutorials/file_based_routing.md (97%)
 rename {runtime => learn}/tutorials/file_server.md (99%)
 rename {runtime => learn}/tutorials/file_system_events.md (96%)
 rename {runtime => learn}/tutorials/google_cloud_run.md (98%)
 rename {runtime => learn}/tutorials/hashbang.md (98%)
 rename {runtime => learn}/tutorials/hello_world.md (99%)
 rename {runtime => learn}/tutorials/images/how-to/aws-lightsail/create-container-service-on-aws.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/aws-lightsail/hello-world-from-deno-and-aws-lightsail.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/aws-lightsail/hello-world-from-localhost.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/aws-lightsail/new-image-on-docker-hub.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/cloudflare-workers/main-on-cloudflare.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/digital-ocean/hello-from-deno-and-digital-ocean.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/digital-ocean/hello-world-from-localhost.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/digital-ocean/new-deno-image-on-digital-ocean-container-registry.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/google-cloud-run/hello-from-google-cloud-run.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/google-cloud-run/hello-world-from-localhost.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/google-cloud-run/image-in-google-artifact-registry.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/google-cloud-run/new-repository-in-google-artifact-repository.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/next/dinoapp.gif (100%)
 rename {runtime => learn}/tutorials/images/how-to/prisma/1-dinosaurs-in-prisma.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/prisma/2-dinosaurs-from-api.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/prisma/3-new-dinosaur-in-prisma.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/react/react-dinosaur-app-demo.gif (100%)
 rename {runtime => learn}/tutorials/images/how-to/redis/cached-redis-body.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/redis/cached-redis-header.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/redis/uncached-redis-body.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/redis/uncached-redis-header.png (100%)
 rename {runtime => learn}/tutorials/images/how-to/vue/vue.gif (100%)
 rename {runtime => learn}/tutorials/images/quick-fix.png (100%)
 rename {runtime => learn}/tutorials/images/websockets.gif (100%)
 rename {runtime => learn}/tutorials/images/word_finder.png (100%)
 rename {runtime => learn}/tutorials/kinsta.md (94%)
 rename {runtime => learn}/tutorials/module_metadata.md (98%)
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/mongoose.md (98%)
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/mysql2.md (98%)
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/next.md (99%)
 rename {runtime => learn}/tutorials/os_signals.md (98%)
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/planetscale.md (98%)
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/prisma.md (99%)
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/react.md (99%)
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/redis.md (99%)
 rename {runtime => learn}/tutorials/subprocess.md (98%)
 rename {runtime/tutorials/how_to_with_npm => learn/tutorials}/vue.md (99%)
 rename {runtime => learn}/tutorials/word_finder.md (99%)
 delete mode 100644 runtime/tutorials/index.md

diff --git a/learn/_components/TutorialList.tsx b/learn/_components/TutorialList.tsx
new file mode 100644
index 000000000..0698ce1ca
--- /dev/null
+++ b/learn/_components/TutorialList.tsx
@@ -0,0 +1,16 @@
+export function TutorialList(
+  props: { title: string; items: ({ label: string; id: string })[] },
+) {
+  return (
+    <section className="mb-6">
+      <h2 className="text-lg font-semibold mb-3">{props.title}</h2>
+      <ul className="">
+        {props.items.map((item) => (
+          <li>
+            <a className="homepage-link mb-1 runtime-link" href={item.id}>{item.label}</a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/learn/_pages/TutorialsPage.tsx b/learn/_pages/TutorialsPage.tsx
index a5060da0e..b589a1aca 100644
--- a/learn/_pages/TutorialsPage.tsx
+++ b/learn/_pages/TutorialsPage.tsx
@@ -1,3 +1,35 @@
+import { TutorialList } from "../_components/TutorialList.tsx";
+import { sidebar } from "../tutorials/_data.ts";
+
 export default function TutorialPage() {
-  return <div>The tutorials page</div>;
+  const componentsPerSidebarItem = sidebar.map((item) => {
+    return (
+      <TutorialList
+        title={item.title}
+        items={item.items}
+      />
+    );
+  });
+
+  return (
+    <main
+      id="content"
+      className="w-full px-8 pt-6 mt-16 max-w-screen-xl mx-auto mb-20"
+    >
+      <div className="pb-16 md:pb-0 w-full flex items-center">
+        <div className="align-middle gap-8 mb-20">
+          <h1 className="text-4xl md:text-6xl font-semibold mb-4">
+            Tutorials and guides
+          </h1>
+          <p className="max-w-prose mx-auto">
+            Walkthrough tutorials and guides to teach you about the Deno runtime
+            and how to use it with your favorite tools.
+          </p>
+        </div>
+      </div>
+      <div className="grid grid-cols-3 gap-8">
+        {componentsPerSidebarItem}
+      </div>
+    </main>
+  );
 }
diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
new file mode 100644
index 000000000..b10b4d350
--- /dev/null
+++ b/learn/tutorials/_data.ts
@@ -0,0 +1,156 @@
+import { Sidebar } from "../../types.ts";
+
+export const sidebar = [
+  {
+    title: "Basics",
+    items: [
+      {
+        label: "Hello World!",
+        id: "/learn/tutorials/hello_world/",
+      },
+      {
+        label: "Fetch data",
+        id: "/learn/tutorials/fetch_data/",
+      },
+      {
+        label: "Executable scripts",
+        id: "/learn/tutorials/hashbang/",
+      },
+      {
+        label: "Updating from CommonJS to ESM",
+        id: "/learn/tutorials/cjs_to_esm/",
+      },
+      {
+        label: "Write a file server",
+        id: "/learn/tutorials/file_server/",
+      },
+    ],
+  },
+  {
+    title: "Web frameworks and libraries",
+    items: [
+      {
+        label: "Build a React App",
+        id: "/learn/tutorials/react/",
+      },
+      {
+        label: "Build a React app with create-vite",
+        id: "/learn/tutorials/react/create-react/",
+      },
+      {
+        label: "Build a Next.js app",
+        id: "/learn/tutorials/next/",
+      },
+      {
+        label: "Build a Fresh app",
+        id: "https://fresh.deno.dev/docs/getting-started/create-a-project",
+      },
+      {
+        label: "Build a Vue app",
+        id: "/learn/tutorials/vue/",
+      },
+      {
+        label: "Use Express with Deno",
+        id: "/learn/tutorials/express/",
+      },
+      {
+        label: "How to use Apollo with Deno",
+        id: "/learn/tutorials/apollo/",
+      },
+    ],
+  },
+  {
+    title: "Deploying Deno projects",
+    items: [
+      {
+        label: "AWS Lambda",
+        id: "/learn/tutorials/aws_lambda/",
+      },
+      {
+        label: "AWS Lightsail",
+        id: "/learn/tutorials/aws_lightsail/",
+      },
+      {
+        label: "Cloudflare workers",
+        id: "/learn/tutorials/cloudflare_workers/",
+      },
+      {
+        label: "Digital Ocean",
+        id: "/learn/tutorials/digital_ocean/",
+      },
+      {
+        label: "Google Cloud Run",
+        id: "/learn/tutorials/google_cloud_run/",
+      },
+      {
+        label: "Kinsta",
+        id: "/learn/tutorials/kinsta/",
+      },
+    ],
+  },
+  {
+    title: "Connecting to Databases",
+    items: [
+      {
+        label: "Connecting to databases",
+        id: "/learn/tutorials/connecting_to_databases/",
+      },
+      {
+        label: "Use MySQL2 with Deno",
+        id: "/learn/tutorials/mysql2/",
+      },
+      {
+        label: "Use PlanetScale with Deno",
+        id: "/learn/tutorials/planetscale/",
+      },
+      {
+        label: "Use Redis with Deno",
+        id: "/learn/tutorials/redis/",
+      },
+      {
+        label: "Mongoose and MongoDB",
+        id: "/learn/tutorials/mongoose/",
+      },
+      {
+        label: "Use Prisma with Deno",
+        id: "/learn/tutorials/prisma/",
+      },
+    ],
+  },
+  {
+    title: "Advanced",
+    items: [
+      {
+        label: "Create a subprocess",
+        id: "/learn/tutorials/subprocess/",
+      },
+      {
+        label: "Handle OS signals",
+        id: "/learn/tutorials/os_signals/",
+      },
+      {
+        label: "File system events",
+        id: "/learn/tutorials/file_system_events/",
+      },
+      {
+        label: "Module Metadata",
+        id: "/learn/tutorials/module_metadata/",
+      },
+      {
+        label: "File Based Routing",
+        id: "/learn/tutorials/file_based_routing/",
+      },
+      {
+        label: "Build a chat app with WebSockets",
+        id: "/learn/tutorials/chat_app/",
+      },
+      {
+        label: "Build a word finder app",
+        id: "/learn/tutorials/word_finder/",
+      }
+    ],
+  },
+] satisfies Sidebar;
+
+export const sectionTitle = "Tutorials";
+export const sectionHref = "/learn/tutorials";
diff --git a/runtime/tutorials/how_to_with_npm/apollo.md b/learn/tutorials/apollo.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/apollo.md
rename to learn/tutorials/apollo.md
index dcb114786..decc96989 100644
--- a/runtime/tutorials/how_to_with_npm/apollo.md
+++ b/learn/tutorials/apollo.md
@@ -3,6 +3,7 @@ title: "How to use Apollo with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/apollo/
   - /runtime/manual/node/how_to_with_npm/apollo/
+  - /runtime/tutorials/how_to_with_npm/apollo/
 ---
 
 [Apollo Server](https://www.apollographql.com/) is a GraphQL server that you can
diff --git a/runtime/tutorials/aws_lambda.md b/learn/tutorials/aws_lambda.md
similarity index 99%
rename from runtime/tutorials/aws_lambda.md
rename to learn/tutorials/aws_lambda.md
index 2d3e345fc..4f7710206 100644
--- a/runtime/tutorials/aws_lambda.md
+++ b/learn/tutorials/aws_lambda.md
@@ -1,5 +1,8 @@
 ---
 title: "How to Deploy Deno to AWS Lambda"
+oldUrl: 
+- /runtime/tutorials/aws_lambda/
+
 ---
 
 AWS Lambda is a serverless computing service provided by Amazon Web Services. It
diff --git a/runtime/tutorials/aws_lightsail.md b/learn/tutorials/aws_lightsail.md
similarity index 98%
rename from runtime/tutorials/aws_lightsail.md
rename to learn/tutorials/aws_lightsail.md
index 3d35ac1ee..7e8a8f821 100644
--- a/runtime/tutorials/aws_lightsail.md
+++ b/learn/tutorials/aws_lightsail.md
@@ -1,6 +1,8 @@
 ---
 title: Deploy Deno to Amazon Lightsail
-oldUrl: /runtime/manual/advanced/deploying_deno/aws_lightsail/
+oldUrl: 
+- /runtime/manual/advanced/deploying_deno/aws_lightsail/
+- /runtime/tutorials/aws_lightsail/
 ---
 
 [Amazon Lightsail](https://aws.amazon.com/lightsail/) is the easiest and
diff --git a/runtime/tutorials/chat_app.md b/learn/tutorials/chat_app.md
similarity index 99%
rename from runtime/tutorials/chat_app.md
rename to learn/tutorials/chat_app.md
index b1f13e8cb..dc647ccf8 100644
--- a/runtime/tutorials/chat_app.md
+++ b/learn/tutorials/chat_app.md
@@ -2,6 +2,7 @@
 title: "Chat application with WebSockets"
 oldUrl:
   - /runtime/manual/examples/chat_app/
+  - /runtime/tutorials/chat_app/
 ---
 
 WebSockets are a powerful tool for building real-time applications. They allow
diff --git a/runtime/tutorials/cjs_to_esm.md b/learn/tutorials/cjs_to_esm.md
similarity index 97%
rename from runtime/tutorials/cjs_to_esm.md
rename to learn/tutorials/cjs_to_esm.md
index 3e57d2fb4..350ae865d 100644
--- a/runtime/tutorials/cjs_to_esm.md
+++ b/learn/tutorials/cjs_to_esm.md
@@ -1,6 +1,8 @@
 ---
 title: "Updating from CommonJS to ESM"
-oldUrl: /runtime/manual/node/cjs_to_esm
+oldUrl: 
+- /runtime/manual/node/cjs_to_esm
+- /runtime/tutorials/cjs_to_esm/
 ---
 
 If your Node.js project uses CommonJS modules (e.g. it uses `require`), you'll
diff --git a/runtime/tutorials/cloudflare_workers.md b/learn/tutorials/cloudflare_workers.md
similarity index 95%
rename from runtime/tutorials/cloudflare_workers.md
rename to learn/tutorials/cloudflare_workers.md
index 491f5c08d..2953aacaf 100644
--- a/runtime/tutorials/cloudflare_workers.md
+++ b/learn/tutorials/cloudflare_workers.md
@@ -1,6 +1,8 @@
 ---
 title: "Deploying Deno to Cloudflare Workers"
-oldUrl: /runtime/manual/advanced/deploying_deno/cloudflare_workers/
+oldUrl: 
+- /runtime/manual/advanced/deploying_deno/cloudflare_workers/
+- /runtime/tutorials/cloudflare_workers/
 ---
 
 Cloudflare Workers allows you to run JavaScript on Cloudflare's edge network.
diff --git a/runtime/tutorials/connecting_to_databases.md b/learn/tutorials/connecting_to_databases.md
similarity index 99%
rename from runtime/tutorials/connecting_to_databases.md
rename to learn/tutorials/connecting_to_databases.md
index 11d09e1eb..df7bc3bae 100644
--- a/runtime/tutorials/connecting_to_databases.md
+++ b/learn/tutorials/connecting_to_databases.md
@@ -1,5 +1,7 @@
 ---
 title: "Connecting to databases"
+oldUrl: 
+- /runtime/tutorials/connecting_to_databases/
 ---
 
 It is common for applications to store and retrieve data from databases. Deno
diff --git a/runtime/tutorials/how_to_with_npm/create-react.md b/learn/tutorials/create-react.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/create-react.md
rename to learn/tutorials/create-react.md
index 385329782..5221194ad 100644
--- a/runtime/tutorials/how_to_with_npm/create-react.md
+++ b/learn/tutorials/create-react.md
@@ -1,5 +1,7 @@
 ---
 title: "Build a React app with create-vite"
+oldUrl: 
+- /runtime/tutorials/how_to_with_npm/create-react/
 ---
 
 [React](https://reactjs.org) is the most widely used JavaScript frontend
diff --git a/runtime/tutorials/digital_ocean.md b/learn/tutorials/digital_ocean.md
similarity index 98%
rename from runtime/tutorials/digital_ocean.md
rename to learn/tutorials/digital_ocean.md
index 62d524c32..702c41da5 100644
--- a/runtime/tutorials/digital_ocean.md
+++ b/learn/tutorials/digital_ocean.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy Deno to Digital Ocean"
-oldUrl: /runtime/manual/advanced/deploying_deno/digital_ocean/
+oldUrl: 
+- /runtime/manual/advanced/deploying_deno/digital_ocean/
+- /runtime/tutorials/digital_ocean/
 ---
 
 Digital Ocean is a popular cloud infrastructure provider offering a variety of
diff --git a/runtime/tutorials/how_to_with_npm/express.md b/learn/tutorials/express.md
similarity index 98%
rename from runtime/tutorials/how_to_with_npm/express.md
rename to learn/tutorials/express.md
index 5f67a4d5f..d88183d11 100644
--- a/runtime/tutorials/how_to_with_npm/express.md
+++ b/learn/tutorials/express.md
@@ -3,6 +3,7 @@ title: "How to use Express with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/express/
   - /runtime/manual/node/how_to_with_npm/express/
+  - /runtime/tutorials/how_to_with_npm/express/
 ---
 
 [Express](https://expressjs.com/) is a popular web framework known for being
diff --git a/runtime/tutorials/fetch_data.md b/learn/tutorials/fetch_data.md
similarity index 99%
rename from runtime/tutorials/fetch_data.md
rename to learn/tutorials/fetch_data.md
index 6d2d6a4b7..9e373ce53 100644
--- a/runtime/tutorials/fetch_data.md
+++ b/learn/tutorials/fetch_data.md
@@ -2,6 +2,7 @@
 title: "Fetch and stream data"
 oldUrl:
   - /runtime/manual/examples/fetch_data/
+  - /runtime/tutorials/fetch_data/
 ---
 
 Deno brings several familiar Web APIs to the server-side environment. If you've
diff --git a/runtime/tutorials/file_based_routing.md b/learn/tutorials/file_based_routing.md
similarity index 97%
rename from runtime/tutorials/file_based_routing.md
rename to learn/tutorials/file_based_routing.md
index f3cccdc68..890e04430 100644
--- a/runtime/tutorials/file_based_routing.md
+++ b/learn/tutorials/file_based_routing.md
@@ -1,6 +1,8 @@
 ---
 title: File-based routing
-oldUrl: /examples/http-server-file-router/
+oldUrl: 
+- /examples/http-server-file-router/
+- /runtime/tutorials/file_based_routing/
 ---
 
 If you've used frameworks like [Next.js](https://nextjs.org/), you might be
diff --git a/runtime/tutorials/file_server.md b/learn/tutorials/file_server.md
similarity index 99%
rename from runtime/tutorials/file_server.md
rename to learn/tutorials/file_server.md
index f3b1d2a94..202becb11 100644
--- a/runtime/tutorials/file_server.md
+++ b/learn/tutorials/file_server.md
@@ -2,6 +2,7 @@
 title: "Write a file server"
 oldUrl:
   - /runtime/manual/examples/file_server/
+  - /runtime/tutorials/file_server/
 ---
 
 A file server listens for incoming HTTP requests and serves files from the local
diff --git a/runtime/tutorials/file_system_events.md b/learn/tutorials/file_system_events.md
similarity index 96%
rename from runtime/tutorials/file_system_events.md
rename to learn/tutorials/file_system_events.md
index daa9b3deb..6eb17ed6d 100644
--- a/runtime/tutorials/file_system_events.md
+++ b/learn/tutorials/file_system_events.md
@@ -2,6 +2,7 @@
 title: "File system events"
 oldUrl:
   - /runtime/manual/examples/file_system_events/
+  - /runtime/tutorials/file_system_events/
 ---
 
 ## Concepts
diff --git a/runtime/tutorials/google_cloud_run.md b/learn/tutorials/google_cloud_run.md
similarity index 98%
rename from runtime/tutorials/google_cloud_run.md
rename to learn/tutorials/google_cloud_run.md
index ec4a94163..441f8a2a1 100644
--- a/runtime/tutorials/google_cloud_run.md
+++ b/learn/tutorials/google_cloud_run.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy to Google Cloud Run"
-oldUrl: /runtime/manual/advanced/deploying_deno/google_cloud_run/
+oldUrl: 
+- /runtime/manual/advanced/deploying_deno/google_cloud_run/
+- /runtime/tutorials/google_cloud_run
 ---
 
 [Google Cloud Run](https://cloud.google.com/run) is a managed compute platform
diff --git a/runtime/tutorials/hashbang.md b/learn/tutorials/hashbang.md
similarity index 98%
rename from runtime/tutorials/hashbang.md
rename to learn/tutorials/hashbang.md
index 10a2e9aa3..597fbf57a 100644
--- a/runtime/tutorials/hashbang.md
+++ b/learn/tutorials/hashbang.md
@@ -2,6 +2,7 @@
 title: "Executable scripts"
 oldUrl:
   - /runtime/manual/examples/hashbang/
+  - /runtime/tutorials/hashbang/
 ---
 
 Making Deno scripts executable can come in handy when creating small tools or
diff --git a/runtime/tutorials/hello_world.md b/learn/tutorials/hello_world.md
similarity index 99%
rename from runtime/tutorials/hello_world.md
rename to learn/tutorials/hello_world.md
index d994893bd..ebf223a6d 100644
--- a/runtime/tutorials/hello_world.md
+++ b/learn/tutorials/hello_world.md
@@ -3,6 +3,7 @@ title: "Hello World"
 oldUrl:
   - /runtime/manual/examples/hello_world/
   - /runtime/tutorials/init_project/
+  - /runtime/tutorials/hello_world/
 ---
 
 Deno is a secure runtime for JavaScript and TypeScript.
diff --git a/runtime/tutorials/images/how-to/aws-lightsail/create-container-service-on-aws.png b/learn/tutorials/images/how-to/aws-lightsail/create-container-service-on-aws.png
similarity index 100%
rename from runtime/tutorials/images/how-to/aws-lightsail/create-container-service-on-aws.png
rename to learn/tutorials/images/how-to/aws-lightsail/create-container-service-on-aws.png
diff --git a/runtime/tutorials/images/how-to/aws-lightsail/hello-world-from-deno-and-aws-lightsail.png b/learn/tutorials/images/how-to/aws-lightsail/hello-world-from-deno-and-aws-lightsail.png
similarity index 100%
rename from runtime/tutorials/images/how-to/aws-lightsail/hello-world-from-deno-and-aws-lightsail.png
rename to learn/tutorials/images/how-to/aws-lightsail/hello-world-from-deno-and-aws-lightsail.png
diff --git a/runtime/tutorials/images/how-to/aws-lightsail/hello-world-from-localhost.png b/learn/tutorials/images/how-to/aws-lightsail/hello-world-from-localhost.png
similarity index 100%
rename from runtime/tutorials/images/how-to/aws-lightsail/hello-world-from-localhost.png
rename to learn/tutorials/images/how-to/aws-lightsail/hello-world-from-localhost.png
diff --git a/runtime/tutorials/images/how-to/aws-lightsail/new-image-on-docker-hub.png b/learn/tutorials/images/how-to/aws-lightsail/new-image-on-docker-hub.png
similarity index 100%
rename from runtime/tutorials/images/how-to/aws-lightsail/new-image-on-docker-hub.png
rename to learn/tutorials/images/how-to/aws-lightsail/new-image-on-docker-hub.png
diff --git a/runtime/tutorials/images/how-to/cloudflare-workers/main-on-cloudflare.png b/learn/tutorials/images/how-to/cloudflare-workers/main-on-cloudflare.png
similarity index 100%
rename from runtime/tutorials/images/how-to/cloudflare-workers/main-on-cloudflare.png
rename to learn/tutorials/images/how-to/cloudflare-workers/main-on-cloudflare.png
diff --git a/runtime/tutorials/images/how-to/digital-ocean/hello-from-deno-and-digital-ocean.png b/learn/tutorials/images/how-to/digital-ocean/hello-from-deno-and-digital-ocean.png
similarity index 100%
rename from runtime/tutorials/images/how-to/digital-ocean/hello-from-deno-and-digital-ocean.png
rename to learn/tutorials/images/how-to/digital-ocean/hello-from-deno-and-digital-ocean.png
diff --git a/runtime/tutorials/images/how-to/digital-ocean/hello-world-from-localhost.png b/learn/tutorials/images/how-to/digital-ocean/hello-world-from-localhost.png
similarity index 100%
rename from runtime/tutorials/images/how-to/digital-ocean/hello-world-from-localhost.png
rename to learn/tutorials/images/how-to/digital-ocean/hello-world-from-localhost.png
diff --git a/runtime/tutorials/images/how-to/digital-ocean/new-deno-image-on-digital-ocean-container-registry.png b/learn/tutorials/images/how-to/digital-ocean/new-deno-image-on-digital-ocean-container-registry.png
similarity index 100%
rename from runtime/tutorials/images/how-to/digital-ocean/new-deno-image-on-digital-ocean-container-registry.png
rename to learn/tutorials/images/how-to/digital-ocean/new-deno-image-on-digital-ocean-container-registry.png
diff --git a/runtime/tutorials/images/how-to/google-cloud-run/hello-from-google-cloud-run.png b/learn/tutorials/images/how-to/google-cloud-run/hello-from-google-cloud-run.png
similarity index 100%
rename from runtime/tutorials/images/how-to/google-cloud-run/hello-from-google-cloud-run.png
rename to learn/tutorials/images/how-to/google-cloud-run/hello-from-google-cloud-run.png
diff --git a/runtime/tutorials/images/how-to/google-cloud-run/hello-world-from-localhost.png b/learn/tutorials/images/how-to/google-cloud-run/hello-world-from-localhost.png
similarity index 100%
rename from runtime/tutorials/images/how-to/google-cloud-run/hello-world-from-localhost.png
rename to learn/tutorials/images/how-to/google-cloud-run/hello-world-from-localhost.png
diff --git a/runtime/tutorials/images/how-to/google-cloud-run/image-in-google-artifact-registry.png b/learn/tutorials/images/how-to/google-cloud-run/image-in-google-artifact-registry.png
similarity index 100%
rename from runtime/tutorials/images/how-to/google-cloud-run/image-in-google-artifact-registry.png
rename to learn/tutorials/images/how-to/google-cloud-run/image-in-google-artifact-registry.png
diff --git a/runtime/tutorials/images/how-to/google-cloud-run/new-repository-in-google-artifact-repository.png b/learn/tutorials/images/how-to/google-cloud-run/new-repository-in-google-artifact-repository.png
similarity index 100%
rename from runtime/tutorials/images/how-to/google-cloud-run/new-repository-in-google-artifact-repository.png
rename to learn/tutorials/images/how-to/google-cloud-run/new-repository-in-google-artifact-repository.png
diff --git a/runtime/tutorials/images/how-to/next/dinoapp.gif b/learn/tutorials/images/how-to/next/dinoapp.gif
similarity index 100%
rename from runtime/tutorials/images/how-to/next/dinoapp.gif
rename to learn/tutorials/images/how-to/next/dinoapp.gif
diff --git a/runtime/tutorials/images/how-to/prisma/1-dinosaurs-in-prisma.png b/learn/tutorials/images/how-to/prisma/1-dinosaurs-in-prisma.png
similarity index 100%
rename from runtime/tutorials/images/how-to/prisma/1-dinosaurs-in-prisma.png
rename to learn/tutorials/images/how-to/prisma/1-dinosaurs-in-prisma.png
diff --git a/runtime/tutorials/images/how-to/prisma/2-dinosaurs-from-api.png b/learn/tutorials/images/how-to/prisma/2-dinosaurs-from-api.png
similarity index 100%
rename from runtime/tutorials/images/how-to/prisma/2-dinosaurs-from-api.png
rename to learn/tutorials/images/how-to/prisma/2-dinosaurs-from-api.png
diff --git a/runtime/tutorials/images/how-to/prisma/3-new-dinosaur-in-prisma.png b/learn/tutorials/images/how-to/prisma/3-new-dinosaur-in-prisma.png
similarity index 100%
rename from runtime/tutorials/images/how-to/prisma/3-new-dinosaur-in-prisma.png
rename to learn/tutorials/images/how-to/prisma/3-new-dinosaur-in-prisma.png
diff --git a/runtime/tutorials/images/how-to/react/react-dinosaur-app-demo.gif b/learn/tutorials/images/how-to/react/react-dinosaur-app-demo.gif
similarity index 100%
rename from runtime/tutorials/images/how-to/react/react-dinosaur-app-demo.gif
rename to learn/tutorials/images/how-to/react/react-dinosaur-app-demo.gif
diff --git a/runtime/tutorials/images/how-to/redis/cached-redis-body.png b/learn/tutorials/images/how-to/redis/cached-redis-body.png
similarity index 100%
rename from runtime/tutorials/images/how-to/redis/cached-redis-body.png
rename to learn/tutorials/images/how-to/redis/cached-redis-body.png
diff --git a/runtime/tutorials/images/how-to/redis/cached-redis-header.png b/learn/tutorials/images/how-to/redis/cached-redis-header.png
similarity index 100%
rename from runtime/tutorials/images/how-to/redis/cached-redis-header.png
rename to learn/tutorials/images/how-to/redis/cached-redis-header.png
diff --git a/runtime/tutorials/images/how-to/redis/uncached-redis-body.png b/learn/tutorials/images/how-to/redis/uncached-redis-body.png
similarity index 100%
rename from runtime/tutorials/images/how-to/redis/uncached-redis-body.png
rename to learn/tutorials/images/how-to/redis/uncached-redis-body.png
diff --git a/runtime/tutorials/images/how-to/redis/uncached-redis-header.png b/learn/tutorials/images/how-to/redis/uncached-redis-header.png
similarity index 100%
rename from runtime/tutorials/images/how-to/redis/uncached-redis-header.png
rename to learn/tutorials/images/how-to/redis/uncached-redis-header.png
diff --git a/runtime/tutorials/images/how-to/vue/vue.gif b/learn/tutorials/images/how-to/vue/vue.gif
similarity index 100%
rename from runtime/tutorials/images/how-to/vue/vue.gif
rename to learn/tutorials/images/how-to/vue/vue.gif
diff --git a/runtime/tutorials/images/quick-fix.png b/learn/tutorials/images/quick-fix.png
similarity index 100%
rename from runtime/tutorials/images/quick-fix.png
rename to learn/tutorials/images/quick-fix.png
diff --git a/runtime/tutorials/images/websockets.gif b/learn/tutorials/images/websockets.gif
similarity index 100%
rename from runtime/tutorials/images/websockets.gif
rename to learn/tutorials/images/websockets.gif
diff --git a/runtime/tutorials/images/word_finder.png b/learn/tutorials/images/word_finder.png
similarity index 100%
rename from runtime/tutorials/images/word_finder.png
rename to learn/tutorials/images/word_finder.png
diff --git a/runtime/tutorials/kinsta.md b/learn/tutorials/kinsta.md
similarity index 94%
rename from runtime/tutorials/kinsta.md
rename to learn/tutorials/kinsta.md
index f7704abb7..21272b2c0 100644
--- a/runtime/tutorials/kinsta.md
+++ b/learn/tutorials/kinsta.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy Deno on Kinsta"
-oldUrl: /runtime/manual/advanced/deploying_deno/kinsta/
+oldUrl: 
+- /runtime/manual/advanced/deploying_deno/kinsta/
+- runtime/tutorials/kinsta
 ---
 
 [Kinsta Application Hosting](https://kinsta.com/application-hosting) is a
diff --git a/runtime/tutorials/module_metadata.md b/learn/tutorials/module_metadata.md
similarity index 98%
rename from runtime/tutorials/module_metadata.md
rename to learn/tutorials/module_metadata.md
index ed85fc499..e420bdaeb 100644
--- a/runtime/tutorials/module_metadata.md
+++ b/learn/tutorials/module_metadata.md
@@ -2,6 +2,7 @@
 title: "Module metadata"
 oldUrl:
   - /runtime/manual/examples/module_metadata/
+  - /runtime/tutorials/module_metadata/
 ---
 
 ## Concepts
diff --git a/runtime/tutorials/how_to_with_npm/mongoose.md b/learn/tutorials/mongoose.md
similarity index 98%
rename from runtime/tutorials/how_to_with_npm/mongoose.md
rename to learn/tutorials/mongoose.md
index 0e5374f55..c2a63ebdd 100644
--- a/runtime/tutorials/how_to_with_npm/mongoose.md
+++ b/learn/tutorials/mongoose.md
@@ -2,6 +2,7 @@
 title: "How to use Mongoose with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/mongoose/
+  - /runtime/tutorials/how_to_with_npm/mongoose/
 ---
 
 [Mongoose](https://mongoosejs.com/) is a popular, schema-based library that
diff --git a/runtime/tutorials/how_to_with_npm/mysql2.md b/learn/tutorials/mysql2.md
similarity index 98%
rename from runtime/tutorials/how_to_with_npm/mysql2.md
rename to learn/tutorials/mysql2.md
index 4cc2cc232..99d0f760f 100644
--- a/runtime/tutorials/how_to_with_npm/mysql2.md
+++ b/learn/tutorials/mysql2.md
@@ -2,6 +2,7 @@
 title: "How to use MySQL2 with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/mysql2/
+  - /runtime/tutorials/how_to_with_npm/mysql2/
 ---
 
 [MySQL](https://www.mysql.com/) is the most popular database in the
diff --git a/runtime/tutorials/how_to_with_npm/next.md b/learn/tutorials/next.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/next.md
rename to learn/tutorials/next.md
index d47955fc8..2f6c7eb70 100644
--- a/runtime/tutorials/how_to_with_npm/next.md
+++ b/learn/tutorials/next.md
@@ -1,5 +1,7 @@
 ---
 title: "Build a Next.js App"
+oldUrl:
+  - /runtime/tutorials/how_to_with_npm/next/
 ---
 
 [Next.js](https://nextjs.org/) is a popular framework for building
diff --git a/runtime/tutorials/os_signals.md b/learn/tutorials/os_signals.md
similarity index 98%
rename from runtime/tutorials/os_signals.md
rename to learn/tutorials/os_signals.md
index bcf292713..2b353b6a0 100644
--- a/runtime/tutorials/os_signals.md
+++ b/learn/tutorials/os_signals.md
@@ -2,6 +2,7 @@
 title: "Handle OS signals"
 oldUrl:
   - /runtime/manual/examples/os_signals/
+  - /runtime/tutorials/os_signals/
 ---
 
 > ⚠️ Windows only supports listening for SIGINT and SIGBREAK as of Deno v1.23.
diff --git a/runtime/tutorials/how_to_with_npm/planetscale.md b/learn/tutorials/planetscale.md
similarity index 98%
rename from runtime/tutorials/how_to_with_npm/planetscale.md
rename to learn/tutorials/planetscale.md
index ba9f2c196..c5829e962 100644
--- a/runtime/tutorials/how_to_with_npm/planetscale.md
+++ b/learn/tutorials/planetscale.md
@@ -2,6 +2,7 @@
 title: "How to use Planetscale with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/planetscale/
+  - /runtime/tutorials/how_to_with_npm/planetscale/
 ---
 
 Planetscale is a MySQL-compatible serverless database that is designed with a
diff --git a/runtime/tutorials/how_to_with_npm/prisma.md b/learn/tutorials/prisma.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/prisma.md
rename to learn/tutorials/prisma.md
index 25a0716b2..7cd4d0fa8 100644
--- a/runtime/tutorials/how_to_with_npm/prisma.md
+++ b/learn/tutorials/prisma.md
@@ -2,6 +2,7 @@
 title: "How to create a RESTful API with Prisma and Oak"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/prisma/
+  - /runtime/tutorials/how_to_with_npm/prisma/
 ---
 
 [Prisma](https://prisma.io) has been one of our top requested modules to work
diff --git a/runtime/tutorials/how_to_with_npm/react.md b/learn/tutorials/react.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/react.md
rename to learn/tutorials/react.md
index 7d5815674..844f1c7f9 100644
--- a/runtime/tutorials/how_to_with_npm/react.md
+++ b/learn/tutorials/react.md
@@ -3,6 +3,7 @@ title: "Build a React app with a starter template"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/react/
   - /runtime/manual/basics/react/
+  - /runtime/tutorials/how_to_with_npm/react/
 ---
 
 [React](https://reactjs.org) is the most widely used JavaScript frontend
diff --git a/runtime/tutorials/how_to_with_npm/redis.md b/learn/tutorials/redis.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/redis.md
rename to learn/tutorials/redis.md
index cfeaba282..4f03c5645 100644
--- a/runtime/tutorials/how_to_with_npm/redis.md
+++ b/learn/tutorials/redis.md
@@ -2,6 +2,7 @@
 title: "How to use Redis with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/redis/
+  - /runtime/tutorials/how_to_with_npm/redis/
 ---
 
 [Redis](https://redis.io/) is an in-memory data store you can use for caching,
diff --git a/runtime/tutorials/subprocess.md b/learn/tutorials/subprocess.md
similarity index 98%
rename from runtime/tutorials/subprocess.md
rename to learn/tutorials/subprocess.md
index 7befa2a5b..66bc01781 100644
--- a/runtime/tutorials/subprocess.md
+++ b/learn/tutorials/subprocess.md
@@ -2,6 +2,7 @@
 title: "Creating a subprocess"
 oldUrl:
   - /runtime/manual/examples/subprocess/
+  - /runtime/tutorials/subprocess/
 ---
 
 ## Concepts
diff --git a/runtime/tutorials/how_to_with_npm/vue.md b/learn/tutorials/vue.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/vue.md
rename to learn/tutorials/vue.md
index 71a466bad..a6479cb2e 100644
--- a/runtime/tutorials/how_to_with_npm/vue.md
+++ b/learn/tutorials/vue.md
@@ -2,6 +2,7 @@
 title: "Build a Vue.js App"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/vue/
+  - /runtime/tutorials/how_to_with_npm/vue/
 ---
 
 [Vue.js](https://vuejs.org/) is a progressive front-end JavaScript framework. It
diff --git a/runtime/tutorials/word_finder.md b/learn/tutorials/word_finder.md
similarity index 99%
rename from runtime/tutorials/word_finder.md
rename to learn/tutorials/word_finder.md
index 422ab13f2..9dc096d70 100644
--- a/runtime/tutorials/word_finder.md
+++ b/learn/tutorials/word_finder.md
@@ -2,6 +2,7 @@
 title: "Building a word finder app with Deno"
 oldUrl:
   - /runtime/manual/examples/word_finder/
+  - /runtime/tutorials/word_finder/
 ---
 
 ## Getting Started
diff --git a/oldurls.json b/oldurls.json
index b0df6e0e4..2c4632209 100644
--- a/oldurls.json
+++ b/oldurls.json
@@ -10,5 +10,8 @@
   "/runtime/reference/tcp_udp_connections/": "/examples/",
   "/runtime/getting_started/": "/runtime/",
   "/api/deno/~/Deno.TlsConn.rid/": "/runtime/reference/migration_guide/#rid",
-  "/manual@main/advanced/typescript/faqs": "/runtime/fundamentals/typescript/"
+  "/manual@main/advanced/typescript/faqs": "/runtime/fundamentals/typescript/",
+  "/runtime/tutorials/": "/learn/tutorials/",
+  "/runtime/manual/examples/how_to_with_npm/": "/learn/tutorials/",
+  "/runtime/manual/examples/": "/learn/tutorials/"
 }
diff --git a/runtime/_data.ts b/runtime/_data.ts
index 9e50f4fb3..2a665e3b1 100644
--- a/runtime/_data.ts
+++ b/runtime/_data.ts
@@ -191,51 +191,6 @@ export const sidebar = [
       },
     ],
   },
-  {
-    title: "Tutorials",
-    href: "/runtime/tutorials/",
-    items: [
-      "/runtime/tutorials/hello_world/",
-      "/runtime/tutorials/fetch_data/",
-      "/runtime/tutorials/hashbang/",
-      "/runtime/tutorials/cjs_to_esm/",
-      {
-        label: "React with deno.json",
-        id: "/runtime/tutorials/how_to_with_npm/react/",
-      },
-      {
-        label: "React with package.json",
-        id: "/runtime/tutorials/how_to_with_npm/create-react/",
-      },
-      "/runtime/tutorials/how_to_with_npm/next/",
-      "/runtime/tutorials/how_to_with_npm/vue/",
-      "/runtime/tutorials/connecting_to_databases/",
-      {
-        label: "More tutorials",
-        items: [
-          "/runtime/tutorials/file_server/",
-          "/runtime/tutorials/subprocess/",
-          "/runtime/tutorials/os_signals/",
-          "/runtime/tutorials/file_system_events/",
-          "/runtime/tutorials/module_metadata/",
-          "/runtime/tutorials/aws_lambda/",
-          "/runtime/tutorials/aws_lightsail/",
-          "/runtime/tutorials/cloudflare_workers/",
-          "/runtime/tutorials/digital_ocean/",
-          "/runtime/tutorials/google_cloud_run/",
-          "/runtime/tutorials/kinsta/",
-          "/runtime/tutorials/how_to_with_npm/apollo/",
-          "/runtime/tutorials/how_to_with_npm/express/",
-          "/runtime/tutorials/how_to_with_npm/mongoose/",
-          "/runtime/tutorials/how_to_with_npm/mysql2/",
-          "/runtime/tutorials/how_to_with_npm/planetscale/",
-          "/runtime/tutorials/how_to_with_npm/prisma/",
-          "/runtime/tutorials/how_to_with_npm/redis/",
-          "/runtime/tutorials/file_based_routing/",
-        ],
-      },
-    ],
-  },
   {
     title: "Contributing and support",
     href: "/runtime/contributing/",
diff --git a/runtime/tutorials/index.md b/runtime/tutorials/index.md
deleted file mode 100644
index e1bab5cfc..000000000
--- a/runtime/tutorials/index.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: "Tutorials"
-oldUrl:
-  - /runtime/manual/examples/
-  - /runtime/manual/examples/how_to_with_npm/
----
-
-Walkthrough tutorials to teach you about the Deno runtime and how to use it with
-your favorite tools.
-
-## Basics
-
-- [Hello World](/runtime/tutorials/hello_world/)
-- [Fetch and stream data](/runtime/tutorials/fetch_data/)
-- [Make executable scripts](/runtime/tutorials/hashbang/)
-- [Convert CJS to ESM](/runtime/tutorials/cjs_to_esm/)
-- [Write a file server](/runtime/tutorials/file_server/)
-
-## Web frameworks and libraries
-
-- [React with package.json](/runtime/tutorials/how_to_with_npm/create-react/)
-- [React with deno.json](/runtime/tutorials/how_to_with_npm/react/)
-- [Next.js](/runtime/tutorials/how_to_with_npm/next/)
-- [Fresh](https://fresh.deno.dev/docs/getting-started/create-a-project)
-- [Vue.js](/runtime/tutorials/how_to_with_npm/vue/)
-- [Express](/runtime/tutorials/how_to_with_npm/express/)
-- [Apollo GraphQL](/runtime/tutorials/how_to_with_npm/apollo/)
-
-## Deploying Deno projects
-
-- [AWS Lambda](/runtime/tutorials/aws_lambda/)
-- [AWS Lightsail](/runtime/tutorials/aws_lightsail/)
-- [Cloudflare Workers](/runtime/tutorials/cloudflare_workers/)
-- [Digital Ocean](/runtime/tutorials/digital_ocean/)
-- [Google Cloud Run](/runtime/tutorials/google_cloud_run/)
-- [Kinsta](/runtime/tutorials/kinsta/)
-
-## Connecting to Databases
-
-- [Connecting to databases](/runtime/tutorials/connecting_to_databases/) (MySQL,
-  PostgreSQL, SQLite, MongoDB, Redis, Firebase, Supabase, GraphQL and more)
-- [MySQL2](/runtime/tutorials/how_to_with_npm/mysql2/)
-- [PlanetScale](/runtime/tutorials/how_to_with_npm/planetscale/)
-- [Redis](/runtime/tutorials/how_to_with_npm/redis/)
-- [Mongoose and MongoDB](/runtime/tutorials/how_to_with_npm/mongoose/)
-- [Prisma](/runtime/tutorials/how_to_with_npm/prisma/)
-
-## Advanced
-
-- [Create a subprocess](/runtime/tutorials/subprocess/)
-- [Handle OS signals](/runtime/tutorials/os_signals/)
-- [File system events](/runtime/tutorials/file_system_events/)
-- [Module Metadata](/runtime/tutorials/module_metadata/)
-
-Additional examples can by found at
-[Deno by Example](https://docs.deno.com/examples/).
diff --git a/styles.css b/styles.css
index e1d946a56..a9327ba0c 100644
--- a/styles.css
+++ b/styles.css
@@ -280,7 +280,7 @@ body {
     hover:!no-underline hover:bg-jsr-yellow-300;
 }
 
-.homepage-link {
+.homepage-link, .learn-link {
   @apply block font-normal underline underline-offset-4;
 }
 

From 7742f55c418cd031ebe9fb519a085cc7a978c6d5 Mon Sep 17 00:00:00 2001
From: Phil Hawksworth <phil@deno.com>
Date: Wed, 27 Nov 2024 15:30:24 +0000
Subject: [PATCH 07/23] typo fix

---
 learn/_pages/LandingPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/learn/_pages/LandingPage.tsx b/learn/_pages/LandingPage.tsx
index 604449e6e..fc0a77372 100644
--- a/learn/_pages/LandingPage.tsx
+++ b/learn/_pages/LandingPage.tsx
@@ -27,10 +27,10 @@ export default function LandingPage() {
               Deno, is an open-source runtime for TypeScript and JavaScript.
               Features built-in dev tools, powerful platform APIs, and native
               support for TypeScript and JSX. In this video we'll introduce Deno
-              and its core concepts
+              and its core concepts.
             </p>
             <p>
-              <a className="homepage-link runtime-link" href="/learn/video/">
+              <a className="homepage-link runtime-link" href="/learn/videos/">
                 Watch the getting started video series
               </a>
             </p>

From 64202b98a281c03408c200122024594784806eb8 Mon Sep 17 00:00:00 2001
From: Phil Hawksworth <phil@deno.com>
Date: Wed, 27 Nov 2024 07:38:48 -0800
Subject: [PATCH 08/23] why so sad, fmt? This should fix (#1200)

---
 deno.lock                                  | 57 ++++++++++++++++++++++
 learn/_components/TutorialList.tsx         |  4 +-
 learn/tutorials/_data.ts                   |  2 +-
 learn/tutorials/aws_lambda.md              |  3 +-
 learn/tutorials/aws_lightsail.md           |  2 +-
 learn/tutorials/cjs_to_esm.md              |  2 +-
 learn/tutorials/cloudflare_workers.md      |  2 +-
 learn/tutorials/connecting_to_databases.md |  2 +-
 learn/tutorials/create-react.md            |  2 +-
 learn/tutorials/digital_ocean.md           |  2 +-
 learn/tutorials/file_based_routing.md      |  2 +-
 learn/tutorials/google_cloud_run.md        |  2 +-
 learn/tutorials/kinsta.md                  |  2 +-
 13 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/deno.lock b/deno.lock
index 314842bfe..b54a1a1f6 100644
--- a/deno.lock
+++ b/deno.lock
@@ -40,6 +40,12 @@
     "jsr:@std/yaml@1.0.5": "1.0.5",
     "jsr:@std/yaml@^1.0.5": "1.0.5",
     "npm:@js-temporal/polyfill@0.4.4": "0.4.4",
+    "npm:@supabase/auth-js@2.65.1": "2.65.1",
+    "npm:@supabase/functions-js@2.4.3": "2.4.3",
+    "npm:@supabase/node-fetch@2.6.15": "2.6.15",
+    "npm:@supabase/postgrest-js@1.16.3": "1.16.3",
+    "npm:@supabase/realtime-js@2.10.7": "2.10.7",
+    "npm:@supabase/storage-js@2.7.1": "2.7.1",
     "npm:@types/estree@1.0.6": "1.0.6",
     "npm:@types/node@*": "22.5.4",
     "npm:ansi-regex@*": "6.1.0",
@@ -254,6 +260,45 @@
     "@pkgjs/parseargs@0.11.0": {
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="
     },
+    "@supabase/auth-js@2.65.1": {
+      "integrity": "sha512-IA7i2Xq2SWNCNMKxwmPlHafBQda0qtnFr8QnyyBr+KaSxoXXqEzFCnQ1dGTy6bsZjVBgXu++o3qrDypTspaAPw==",
+      "dependencies": [
+        "@supabase/node-fetch"
+      ]
+    },
+    "@supabase/functions-js@2.4.3": {
+      "integrity": "sha512-sOLXy+mWRyu4LLv1onYydq+10mNRQ4rzqQxNhbrKLTLTcdcmS9hbWif0bGz/NavmiQfPs4ZcmQJp4WqOXlR4AQ==",
+      "dependencies": [
+        "@supabase/node-fetch"
+      ]
+    },
+    "@supabase/node-fetch@2.6.15": {
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "dependencies": [
+        "whatwg-url@5.0.0"
+      ]
+    },
+    "@supabase/postgrest-js@1.16.3": {
+      "integrity": "sha512-HI6dsbW68AKlOPofUjDTaosiDBCtW4XAm0D18pPwxoW3zKOE2Ru13Z69Wuys9fd6iTpfDViNco5sgrtnP0666A==",
+      "dependencies": [
+        "@supabase/node-fetch"
+      ]
+    },
+    "@supabase/realtime-js@2.10.7": {
+      "integrity": "sha512-OLI0hiSAqQSqRpGMTUwoIWo51eUivSYlaNBgxsXZE7PSoWh12wPRdVt0psUMaUzEonSB85K21wGc7W5jHnT6uA==",
+      "dependencies": [
+        "@supabase/node-fetch",
+        "@types/phoenix",
+        "@types/ws",
+        "ws"
+      ]
+    },
+    "@supabase/storage-js@2.7.1": {
+      "integrity": "sha512-asYHcyDR1fKqrMpytAS1zjyEfvxuOIp1CIXX7ji4lHHcJKqyk+sLl/Vxgm4sN6u8zvuUtae9e4kDxQP2qrwWBA==",
+      "dependencies": [
+        "@supabase/node-fetch"
+      ]
+    },
     "@types/estree@1.0.6": {
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
     },
@@ -276,6 +321,9 @@
         "undici-types"
       ]
     },
+    "@types/phoenix@1.6.6": {
+      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A=="
+    },
     "@types/webidl-conversions@7.0.3": {
       "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA=="
     },
@@ -286,6 +334,12 @@
         "@types/webidl-conversions"
       ]
     },
+    "@types/ws@8.5.13": {
+      "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==",
+      "dependencies": [
+        "@types/node"
+      ]
+    },
     "accepts@1.3.8": {
       "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
       "dependencies": [
@@ -1480,6 +1534,9 @@
         "strip-ansi@7.1.0"
       ]
     },
+    "ws@8.18.0": {
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw=="
+    },
     "yaml@2.6.0": {
       "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ=="
     }
diff --git a/learn/_components/TutorialList.tsx b/learn/_components/TutorialList.tsx
index 0698ce1ca..ef76a26d8 100644
--- a/learn/_components/TutorialList.tsx
+++ b/learn/_components/TutorialList.tsx
@@ -7,7 +7,9 @@ export function TutorialList(
       <ul className="">
         {props.items.map((item) => (
           <li>
-            <a className="homepage-link mb-1 runtime-link" href={item.id}>{item.label}</a>
+            <a className="homepage-link mb-1 runtime-link" href={item.id}>
+              {item.label}
+            </a>
           </li>
         ))}
       </ul>
diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
index b10b4d350..babf0fac0 100644
--- a/learn/tutorials/_data.ts
+++ b/learn/tutorials/_data.ts
@@ -147,7 +147,7 @@ export const sidebar = [
       {
         label: "Build a word finder app",
         id: "/learn/tutorials/word_finder/",
-      }
+      },
     ],
   },
 ] satisfies Sidebar;
diff --git a/learn/tutorials/aws_lambda.md b/learn/tutorials/aws_lambda.md
index 4f7710206..1a827898e 100644
--- a/learn/tutorials/aws_lambda.md
+++ b/learn/tutorials/aws_lambda.md
@@ -1,8 +1,7 @@
 ---
 title: "How to Deploy Deno to AWS Lambda"
-oldUrl: 
+oldUrl:
 - /runtime/tutorials/aws_lambda/
-
 ---
 
 AWS Lambda is a serverless computing service provided by Amazon Web Services. It
diff --git a/learn/tutorials/aws_lightsail.md b/learn/tutorials/aws_lightsail.md
index 7e8a8f821..e23b20d8b 100644
--- a/learn/tutorials/aws_lightsail.md
+++ b/learn/tutorials/aws_lightsail.md
@@ -1,6 +1,6 @@
 ---
 title: Deploy Deno to Amazon Lightsail
-oldUrl: 
+oldUrl:
 - /runtime/manual/advanced/deploying_deno/aws_lightsail/
 - /runtime/tutorials/aws_lightsail/
 ---
diff --git a/learn/tutorials/cjs_to_esm.md b/learn/tutorials/cjs_to_esm.md
index 350ae865d..f7ee3f711 100644
--- a/learn/tutorials/cjs_to_esm.md
+++ b/learn/tutorials/cjs_to_esm.md
@@ -1,6 +1,6 @@
 ---
 title: "Updating from CommonJS to ESM"
-oldUrl: 
+oldUrl:
 - /runtime/manual/node/cjs_to_esm
 - /runtime/tutorials/cjs_to_esm/
 ---
diff --git a/learn/tutorials/cloudflare_workers.md b/learn/tutorials/cloudflare_workers.md
index 2953aacaf..ee2df1fc4 100644
--- a/learn/tutorials/cloudflare_workers.md
+++ b/learn/tutorials/cloudflare_workers.md
@@ -1,6 +1,6 @@
 ---
 title: "Deploying Deno to Cloudflare Workers"
-oldUrl: 
+oldUrl:
 - /runtime/manual/advanced/deploying_deno/cloudflare_workers/
 - /runtime/tutorials/cloudflare_workers/
 ---
diff --git a/learn/tutorials/connecting_to_databases.md b/learn/tutorials/connecting_to_databases.md
index df7bc3bae..37fe0548e 100644
--- a/learn/tutorials/connecting_to_databases.md
+++ b/learn/tutorials/connecting_to_databases.md
@@ -1,6 +1,6 @@
 ---
 title: "Connecting to databases"
-oldUrl: 
+oldUrl:
 - /runtime/tutorials/connecting_to_databases/
 ---
 
diff --git a/learn/tutorials/create-react.md b/learn/tutorials/create-react.md
index 5221194ad..9cbf94ae7 100644
--- a/learn/tutorials/create-react.md
+++ b/learn/tutorials/create-react.md
@@ -1,6 +1,6 @@
 ---
 title: "Build a React app with create-vite"
-oldUrl: 
+oldUrl:
 - /runtime/tutorials/how_to_with_npm/create-react/
 ---
 
diff --git a/learn/tutorials/digital_ocean.md b/learn/tutorials/digital_ocean.md
index 702c41da5..88e2e31ef 100644
--- a/learn/tutorials/digital_ocean.md
+++ b/learn/tutorials/digital_ocean.md
@@ -1,6 +1,6 @@
 ---
 title: "How to deploy Deno to Digital Ocean"
-oldUrl: 
+oldUrl:
 - /runtime/manual/advanced/deploying_deno/digital_ocean/
 - /runtime/tutorials/digital_ocean/
 ---
diff --git a/learn/tutorials/file_based_routing.md b/learn/tutorials/file_based_routing.md
index 890e04430..4357b4a7a 100644
--- a/learn/tutorials/file_based_routing.md
+++ b/learn/tutorials/file_based_routing.md
@@ -1,6 +1,6 @@
 ---
 title: File-based routing
-oldUrl: 
+oldUrl:
 - /examples/http-server-file-router/
 - /runtime/tutorials/file_based_routing/
 ---
diff --git a/learn/tutorials/google_cloud_run.md b/learn/tutorials/google_cloud_run.md
index 441f8a2a1..3ccd00f66 100644
--- a/learn/tutorials/google_cloud_run.md
+++ b/learn/tutorials/google_cloud_run.md
@@ -1,6 +1,6 @@
 ---
 title: "How to deploy to Google Cloud Run"
-oldUrl: 
+oldUrl:
 - /runtime/manual/advanced/deploying_deno/google_cloud_run/
 - /runtime/tutorials/google_cloud_run
 ---
diff --git a/learn/tutorials/kinsta.md b/learn/tutorials/kinsta.md
index 21272b2c0..c2a623d9e 100644
--- a/learn/tutorials/kinsta.md
+++ b/learn/tutorials/kinsta.md
@@ -1,6 +1,6 @@
 ---
 title: "How to deploy Deno on Kinsta"
-oldUrl: 
+oldUrl:
 - /runtime/manual/advanced/deploying_deno/kinsta/
 - runtime/tutorials/kinsta
 ---

From 04cf22864b755c1c10a3135192c12ed86dd8db30 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 27 Nov 2024 15:57:47 +0000
Subject: [PATCH 09/23] adding subnav

---
 learn/_components/SubNavigation.tsx           |  11 ++
 learn/_components/SubNavigationItem.tsx       |  14 ++
 learn/_components/TutorialList.tsx            |  18 ++
 learn/_pages/ExamplesPage.tsx                 |  86 +++++-----
 learn/_pages/LandingPage.tsx                  | 122 +++++++-------
 learn/_pages/TutorialsPage.tsx                |  38 ++++-
 learn/_pages/examples_test.ts                 |  34 ++--
 learn/tutorials/_data.ts                      | 156 ++++++++++++++++++
 orama.ts                                      |   2 +-
 overrides.css                                 |  11 ++
 runtime/tutorials/aws_lambda.md               |   2 +
 runtime/tutorials/aws_lightsail.md            |   4 +-
 runtime/tutorials/cjs_to_esm.md               |   4 +-
 runtime/tutorials/cloudflare_workers.md       |   3 +-
 runtime/tutorials/connecting_to_databases.md  |   2 +
 runtime/tutorials/digital_ocean.md            |   4 +-
 runtime/tutorials/file_based_routing.md       |   4 +-
 runtime/tutorials/google_cloud_run.md         |   4 +-
 .../tutorials/how_to_with_npm/create-react.md |   2 +
 runtime/tutorials/kinsta.md                   |   4 +-
 20 files changed, 399 insertions(+), 126 deletions(-)
 create mode 100644 learn/_components/SubNavigation.tsx
 create mode 100644 learn/_components/SubNavigationItem.tsx
 create mode 100644 learn/_components/TutorialList.tsx
 create mode 100644 learn/tutorials/_data.ts

diff --git a/learn/_components/SubNavigation.tsx b/learn/_components/SubNavigation.tsx
new file mode 100644
index 000000000..efe2c135e
--- /dev/null
+++ b/learn/_components/SubNavigation.tsx
@@ -0,0 +1,11 @@
+import { SubNavigationItem } from "./SubNavigationItem.tsx";
+
+export function SubNavigation(props: { active: string }) {
+  return (
+    <nav className="w-full px-8 pt-2 mt-16 max-w-screen-xl mx-auto mb-4 flex items-center">
+      <SubNavigationItem page="learn" active={props.active} />
+      <SubNavigationItem page="tutorials" active={props.active} />
+      <SubNavigationItem page="examples" active={props.active} />
+    </nav>
+  );
+}
diff --git a/learn/_components/SubNavigationItem.tsx b/learn/_components/SubNavigationItem.tsx
new file mode 100644
index 000000000..ab784b577
--- /dev/null
+++ b/learn/_components/SubNavigationItem.tsx
@@ -0,0 +1,14 @@
+export function SubNavigationItem(props: { page: string; active: string }) {
+  const active = props.active === props.page ? "active" : "";
+  const url = props.page.includes("learn")
+    ? `/${props.page}/`
+    : `/learn/${props.page}/`;
+  return (
+    <a
+      className={`block hover:underline mx-1 px-2 relative capitalize ${active}`}
+      href={url}
+    >
+      {props.page}
+    </a>
+  );
+}
diff --git a/learn/_components/TutorialList.tsx b/learn/_components/TutorialList.tsx
new file mode 100644
index 000000000..ef76a26d8
--- /dev/null
+++ b/learn/_components/TutorialList.tsx
@@ -0,0 +1,18 @@
+export function TutorialList(
+  props: { title: string; items: ({ label: string; id: string })[] },
+) {
+  return (
+    <section className="mb-6">
+      <h2 className="text-lg font-semibold mb-3">{props.title}</h2>
+      <ul className="">
+        {props.items.map((item) => (
+          <li>
+            <a className="homepage-link mb-1 runtime-link" href={item.id}>
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/learn/_pages/ExamplesPage.tsx b/learn/_pages/ExamplesPage.tsx
index 8dd7bfcd9..e0919eab8 100644
--- a/learn/_pages/ExamplesPage.tsx
+++ b/learn/_pages/ExamplesPage.tsx
@@ -1,4 +1,5 @@
 import { ExampleFromFileSystem } from "../types.ts";
+import { SubNavigation } from "../_components/SubNavigation.tsx";
 
 type Props = { examples: ExampleFromFileSystem[] };
 
@@ -7,48 +8,51 @@ export default function examplesPage({ examples }: Props) {
   const elements = generateExampleGroups(examples);
 
   return (
-    <main
-      id="content"
-      className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
-    >
-      <div className="pb-16 align-middle md:pb-0 w-full">
-        <div className="mt-8 mb-16 md:mb-24 text-center">
-          <h1 className="text-4xl md:text-6xl font-semibold mb-4">
-            Deno by Example
-          </h1>
-          <p className="max-w-prose mx-auto">
-            A collection of annotated Deno examples, to be used as a reference
-            for how to build with Deno, or as a guide to learn about many of
-            Deno's features.
-            <a
-              href="/runtime/contributing/examples/"
-              className="homepage-link runtime-link text-center mt-4"
-            >
-              Commit an example and we'll send you some stickers!
-            </a>
-          </p>
-        </div>
-        <div
-          className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
-          style={{ columnGap: "3rem" }}
-        >
-          {elements}
-        </div>
-        <div className="w-full flex flex-col px-8 pt-6 mt-20 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-24">
-          <p className="max-w-prose mx-auto text-center">
-            Need an example that isn't here? Or want to add one of your own?
-            <br /> We welcome contributions! <br />
-            You can request more examples, or add your own at our{" "}
-            <a
-              href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
-              class="text-primary hover:underline focus:underline"
-            >
-              GitHub repository
-            </a>
-          </p>
+    <>
+      <SubNavigation active="examples" />
+      <main
+        id="content"
+        className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
+      >
+        <div className="pb-16 align-middle md:pb-0 w-full">
+          <div className="mt-8 mb-16 md:mb-24 text-center">
+            <h1 className="text-4xl md:text-6xl font-semibold mb-4">
+              Deno by Example
+            </h1>
+            <p className="max-w-prose mx-auto">
+              A collection of annotated Deno examples, to be used as a reference
+              for how to build with Deno, or as a guide to learn about many of
+              Deno's features.
+              <a
+                href="/runtime/contributing/examples/"
+                className="homepage-link runtime-link text-center mt-4"
+              >
+                Commit an example and we'll send you some stickers!
+              </a>
+            </p>
+          </div>
+          <div
+            className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
+            style={{ columnGap: "3rem" }}
+          >
+            {elements}
+          </div>
+          <div className="w-full flex flex-col px-8 pt-6 mt-20 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-24">
+            <p className="max-w-prose mx-auto text-center">
+              Need an example that isn't here? Or want to add one of your own?
+              <br /> We welcome contributions! <br />
+              You can request more examples, or add your own at our{" "}
+              <a
+                href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
+                class="text-primary hover:underline focus:underline"
+              >
+                GitHub repository
+              </a>
+            </p>
+          </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </>
   );
 }
 
diff --git a/learn/_pages/LandingPage.tsx b/learn/_pages/LandingPage.tsx
index 604449e6e..f61fa15a2 100644
--- a/learn/_pages/LandingPage.tsx
+++ b/learn/_pages/LandingPage.tsx
@@ -1,71 +1,75 @@
 import { SectionTeaser } from "../_components/SectionTeaser.tsx";
 import { EmbedVideo } from "../_components/EmbedVideo.tsx";
+import { SubNavigation } from "../_components/SubNavigation.tsx";
 
 export default function LandingPage() {
   return (
-    <main
-      id="content"
-      className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
-    >
-      <div className="pb-16 align-middle md:pb-0 w-full">
-        <div className="mt-8 mb-16 md:mb-24 text-center">
-          <h1 className="text-4xl md:text-6xl font-semibold mb-4">
-            Learn Deno
-          </h1>
-          <p className="max-w-prose mx-auto">
-            Tutorials, videos and example code to help you go from Deno beginner
-            to Deno expert.
-          </p>
-        </div>
-        <div className="align-middle flex items-center gap-8 mb-20">
-          <div className="flex-1">
-            <EmbedVideo id="H8VLifMOBHU" />
-          </div>
-          <div className="flex-1 text-center">
-            <h2 className="text-2xl font-semibold ">What is Deno?</h2>
-            <p className="my-4">
-              Deno, is an open-source runtime for TypeScript and JavaScript.
-              Features built-in dev tools, powerful platform APIs, and native
-              support for TypeScript and JSX. In this video we'll introduce Deno
-              and its core concepts
-            </p>
-            <p>
-              <a className="homepage-link runtime-link" href="/learn/video/">
-                Watch the getting started video series
-              </a>
+    <>
+      <SubNavigation active="learn" />
+      <main
+        id="content"
+        className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
+      >
+        <div className="pb-16 align-middle md:pb-0 w-full">
+          <div className="mt-8 mb-16 md:mb-24 text-center">
+            <h1 className="text-4xl md:text-6xl font-semibold mb-4">
+              Learn Deno
+            </h1>
+            <p className="max-w-prose mx-auto">
+              Tutorials, videos and example code to help you go from Deno
+              beginner to Deno expert.
             </p>
           </div>
-        </div>
-        <h2 className="text-3xl mt-20 mb-8 font-semibold text-center">
-          How do you like to learn?
-        </h2>
-        <div className="align-middle flex flex-row gap-8 mb-20">
-          <div className="flex-1">
-            <SectionTeaser
-              title="By example"
-              text="Our examples section holds a collection of annotated Deno examples, to be used as a reference for how to build with Deno, or as a guide to learn about many of Deno's features."
-              link="/learn/examples/"
-              cta="Explore the examples"
-            />
-          </div>
-          <div className="flex-1">
-            <SectionTeaser
-              title="With video"
-              text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
-              link="/learn/videos/"
-              cta="Explore the videos"
-            />
+          <div className="align-middle flex items-center gap-8 mb-20">
+            <div className="flex-1">
+              <EmbedVideo id="H8VLifMOBHU" />
+            </div>
+            <div className="flex-1 text-center">
+              <h2 className="text-2xl font-semibold ">What is Deno?</h2>
+              <p className="my-4">
+                Deno, is an open-source runtime for TypeScript and JavaScript.
+                Features built-in dev tools, powerful platform APIs, and native
+                support for TypeScript and JSX. In this video we'll introduce
+                Deno and its core concepts
+              </p>
+              <p>
+                <a className="homepage-link runtime-link" href="/learn/video/">
+                  Watch the getting started video series
+                </a>
+              </p>
+            </div>
           </div>
-          <div className="flex-1">
-            <SectionTeaser
-              title="Through tutorials"
-              text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
-              link="/learn/tutorials/"
-              cta="Explore the tutorials"
-            />
+          <h2 className="text-3xl mt-20 mb-8 font-semibold text-center">
+            How do you like to learn?
+          </h2>
+          <div className="align-middle flex flex-row gap-8 mb-20">
+            <div className="flex-1">
+              <SectionTeaser
+                title="By example"
+                text="Our examples section holds a collection of annotated Deno examples, to be used as a reference for how to build with Deno, or as a guide to learn about many of Deno's features."
+                link="/learn/examples/"
+                cta="Explore the examples"
+              />
+            </div>
+            <div className="flex-1">
+              <SectionTeaser
+                title="With video"
+                text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
+                link="/learn/videos/"
+                cta="Explore the videos"
+              />
+            </div>
+            <div className="flex-1">
+              <SectionTeaser
+                title="Through tutorials"
+                text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
+                link="/learn/tutorials/"
+                cta="Explore the tutorials"
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </>
   );
 }
diff --git a/learn/_pages/TutorialsPage.tsx b/learn/_pages/TutorialsPage.tsx
index a5060da0e..45ec9badd 100644
--- a/learn/_pages/TutorialsPage.tsx
+++ b/learn/_pages/TutorialsPage.tsx
@@ -1,3 +1,39 @@
+import { TutorialList } from "../_components/TutorialList.tsx";
+import { SubNavigation } from "../_components/SubNavigation.tsx";
+import { sidebar } from "../tutorials/_data.ts";
+
 export default function TutorialPage() {
-  return <div>The tutorials page</div>;
+  const componentsPerSidebarItem = sidebar.map((item) => {
+    return (
+      <TutorialList
+        title={item.title}
+        items={item.items}
+      />
+    );
+  });
+
+  return (
+    <>
+      <SubNavigation active="tutorials" />
+      <main
+        id="content"
+        className="w-full px-8 pt-6 mt-16 max-w-screen-xl mx-auto mb-20"
+      >
+        <div className="pb-16 md:pb-0 w-full flex items-center">
+          <div className="align-middle gap-8 mb-20">
+            <h1 className="text-4xl md:text-6xl font-semibold mb-4">
+              Tutorials and guides
+            </h1>
+            <p className="max-w-prose mx-auto">
+              Walkthrough tutorials and guides to teach you about the Deno
+              runtime and how to use it with your favorite tools.
+            </p>
+          </div>
+        </div>
+        <div className="grid grid-cols-3 gap-8">
+          {componentsPerSidebarItem}
+        </div>
+      </main>
+    </>
+  );
 }
diff --git a/learn/_pages/examples_test.ts b/learn/_pages/examples_test.ts
index 3931c37b1..d8cbcd852 100644
--- a/learn/_pages/examples_test.ts
+++ b/learn/_pages/examples_test.ts
@@ -1,21 +1,21 @@
-import { join } from "@std/path";
-import { walk } from "@std/fs";
-import { assertEquals, assertNotMatch } from "@std/assert";
+// import { join } from "@std/path";
+// import { walk } from "@std/fs";
+// import { assertEquals, assertNotMatch } from "@std/assert";
 
-const decoder = new TextDecoder();
+// const decoder = new TextDecoder();
 
-Deno.test("Check examples", async (t) => {
-  for await (const item of walk("./learn/examples/")) {
-    const path = join("examples", item.name);
+// Deno.test("Check examples", async (t) => {
+//   for await (const item of walk("./learn/examples/")) {
+//     const path = join("examples", item.name);
 
-    if (!path.endsWith(".ts")) continue;
+//     if (!path.endsWith(".ts")) continue;
 
-    await t.step("Check graph: " + path, async () => {
-      const result = await new Deno.Command(Deno.execPath(), {
-        args: ["info", path],
-      }).output();
-      assertEquals(result.code, 0);
-      assertNotMatch(decoder.decode(result.stdout), /\(resolve error\)/);
-    });
-  }
-});
+//     await t.step("Check graph: " + path, async () => {
+//       const result = await new Deno.Command(Deno.execPath(), {
+//         args: ["info", path],
+//       }).output();
+//       assertEquals(result.code, 0);
+//       assertNotMatch(decoder.decode(result.stdout), /\(resolve error\)/);
+//     });
+//   }
+// });
diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
new file mode 100644
index 000000000..babf0fac0
--- /dev/null
+++ b/learn/tutorials/_data.ts
@@ -0,0 +1,156 @@
+import { Sidebar } from "../../types.ts";
+
+export const sidebar = [
+  {
+    title: "Basics",
+    items: [
+      {
+        label: "Hello World!",
+        id: "/learn/tutorials/hello_world/",
+      },
+      {
+        label: "Fetch data",
+        id: "/learn/tutorials/fetch_data/",
+      },
+      {
+        label: "Executable scripts",
+        id: "/learn/tutorials/hashbang/",
+      },
+      {
+        label: "Updating from CommonJS to ESM",
+        id: "/learn/tutorials/cjs_to_esm/",
+      },
+      {
+        label: "Write a file server",
+        id: "/learn/tutorials/file_server/",
+      },
+    ],
+  },
+  {
+    title: "Web frameworks and libraries",
+    items: [
+      {
+        label: "Build a React App",
+        id: "/learn/tutorials/react/",
+      },
+      {
+        label: "Build a React app with create-vite",
+        id: "/learn/tutorials/react/create-react/",
+      },
+      {
+        label: "Build a Next.js app",
+        id: "/learn/tutorials/next/",
+      },
+      {
+        label: "Build a Fresh app",
+        id: "https://fresh.deno.dev/docs/getting-started/create-a-project",
+      },
+      {
+        label: "Build a Vue app",
+        id: "/learn/tutorials/vue/",
+      },
+      {
+        label: "Use Express with Deno",
+        id: "/learn/tutorials/express/",
+      },
+      {
+        label: "How to use Apollo with Deno",
+        id: "/learn/tutorials/apollo/",
+      },
+    ],
+  },
+  {
+    title: "Deploying Deno projects",
+    items: [
+      {
+        label: "AWS Lambda",
+        id: "/learn/tutorials/aws_lambda/",
+      },
+      {
+        label: "AWS Lightsail",
+        id: "/learn/tutorials/aws_lightsail/",
+      },
+      {
+        label: "Cloudflare workers",
+        id: "/learn/tutorials/cloudflare_workers/",
+      },
+      {
+        label: "Digital Ocean",
+        id: "/learn/tutorials/digital_ocean/",
+      },
+      {
+        label: "Google Cloud Run",
+        id: "/learn/tutorials/google_cloud_run/",
+      },
+      {
+        label: "Kinsta",
+        id: "/learn/tutorials/kinsta/",
+      },
+    ],
+  },
+  {
+    title: "Connecting to Databases",
+    items: [
+      {
+        label: "Connecting to databases",
+        id: "/learn/tutorials/connecting_to_databases/",
+      },
+      {
+        label: "Use MySQL2 with Deno",
+        id: "/learn/tutorials/mysql2/",
+      },
+      {
+        label: "Use PlanetScale with Deno",
+        id: "/learn/tutorials/planetscale/",
+      },
+      {
+        label: "Use Redis with Deno",
+        id: "/learn/tutorials/redis/",
+      },
+      {
+        label: "Mongoose and MongoDB",
+        id: "/learn/tutorials/mongoose/",
+      },
+      {
+        label: "Use Prisma with Deno",
+        id: "/learn/tutorials/prisma/",
+      },
+    ],
+  },
+  {
+    title: "Advanced",
+    items: [
+      {
+        label: "Create a subprocess",
+        id: "/learn/tutorials/subprocess/",
+      },
+      {
+        label: "Handle OS signals",
+        id: "/learn/tutorials/os_signals/",
+      },
+      {
+        label: "File system events",
+        id: "/learn/tutorials/file_system_events/",
+      },
+      {
+        label: "Module Metadata",
+        id: "/learn/tutorials/module_metadata/",
+      },
+      {
+        label: "File Based Routing",
+        id: "/learn/tutorials/file_based_routing/",
+      },
+      {
+        label: "Build a chat app with WebSockets",
+        id: "/learn/tutorials/chat_app/",
+      },
+      {
+        label: "Build a word finder app",
+        id: "/learn/tutorials/word_finder/",
+      },
+    ],
+  },
+] satisfies Sidebar;
+
+export const sectionTitle = "Tutorials";
+export const sectionHref = "/learn/tutorials";
diff --git a/orama.ts b/orama.ts
index 0f42be494..52d158efc 100644
--- a/orama.ts
+++ b/orama.ts
@@ -98,7 +98,7 @@ export async function generateDocumentsForSymbols(): Promise<OramaDocument[]> {
 }
 
 export async function generateDocumentsForExamples(): Promise<OramaDocument[]> {
-  const files = [...walkSync("./examples/", {
+  const files = [...walkSync("./learn/examples/", {
     exts: [".ts"],
   })];
   return await Promise.all(files.map(async (file) => {
diff --git a/overrides.css b/overrides.css
index 02980f042..acbdf1e6b 100644
--- a/overrides.css
+++ b/overrides.css
@@ -114,3 +114,14 @@
 .ddoc .space-y-7 > .section .markdown-body {
   @apply mb-6 !important;
 }
+
+.active:after {
+  background-color: rgb(1 183 128 / var(--tw-text-opacity, 1));
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  content: "";
+  height: 0.4rem;
+  left: calc(50% - 0.4rem);
+  position: absolute;
+  top: -0.5rem;
+  width: 0.8rem;
+}
diff --git a/runtime/tutorials/aws_lambda.md b/runtime/tutorials/aws_lambda.md
index 2d3e345fc..1a827898e 100644
--- a/runtime/tutorials/aws_lambda.md
+++ b/runtime/tutorials/aws_lambda.md
@@ -1,5 +1,7 @@
 ---
 title: "How to Deploy Deno to AWS Lambda"
+oldUrl:
+- /runtime/tutorials/aws_lambda/
 ---
 
 AWS Lambda is a serverless computing service provided by Amazon Web Services. It
diff --git a/runtime/tutorials/aws_lightsail.md b/runtime/tutorials/aws_lightsail.md
index 3d35ac1ee..e23b20d8b 100644
--- a/runtime/tutorials/aws_lightsail.md
+++ b/runtime/tutorials/aws_lightsail.md
@@ -1,6 +1,8 @@
 ---
 title: Deploy Deno to Amazon Lightsail
-oldUrl: /runtime/manual/advanced/deploying_deno/aws_lightsail/
+oldUrl:
+- /runtime/manual/advanced/deploying_deno/aws_lightsail/
+- /runtime/tutorials/aws_lightsail/
 ---
 
 [Amazon Lightsail](https://aws.amazon.com/lightsail/) is the easiest and
diff --git a/runtime/tutorials/cjs_to_esm.md b/runtime/tutorials/cjs_to_esm.md
index 3e57d2fb4..f7ee3f711 100644
--- a/runtime/tutorials/cjs_to_esm.md
+++ b/runtime/tutorials/cjs_to_esm.md
@@ -1,6 +1,8 @@
 ---
 title: "Updating from CommonJS to ESM"
-oldUrl: /runtime/manual/node/cjs_to_esm
+oldUrl:
+- /runtime/manual/node/cjs_to_esm
+- /runtime/tutorials/cjs_to_esm/
 ---
 
 If your Node.js project uses CommonJS modules (e.g. it uses `require`), you'll
diff --git a/runtime/tutorials/cloudflare_workers.md b/runtime/tutorials/cloudflare_workers.md
index 491f5c08d..ff8dd8bf2 100644
--- a/runtime/tutorials/cloudflare_workers.md
+++ b/runtime/tutorials/cloudflare_workers.md
@@ -1,6 +1,7 @@
 ---
 title: "Deploying Deno to Cloudflare Workers"
-oldUrl: /runtime/manual/advanced/deploying_deno/cloudflare_workers/
+- /runtime/manual/advanced/deploying_deno/cloudflare_workers/
+- /runtime/tutorials/cloudflare_workers/
 ---
 
 Cloudflare Workers allows you to run JavaScript on Cloudflare's edge network.
diff --git a/runtime/tutorials/connecting_to_databases.md b/runtime/tutorials/connecting_to_databases.md
index 11d09e1eb..37fe0548e 100644
--- a/runtime/tutorials/connecting_to_databases.md
+++ b/runtime/tutorials/connecting_to_databases.md
@@ -1,5 +1,7 @@
 ---
 title: "Connecting to databases"
+oldUrl:
+- /runtime/tutorials/connecting_to_databases/
 ---
 
 It is common for applications to store and retrieve data from databases. Deno
diff --git a/runtime/tutorials/digital_ocean.md b/runtime/tutorials/digital_ocean.md
index 62d524c32..88e2e31ef 100644
--- a/runtime/tutorials/digital_ocean.md
+++ b/runtime/tutorials/digital_ocean.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy Deno to Digital Ocean"
-oldUrl: /runtime/manual/advanced/deploying_deno/digital_ocean/
+oldUrl:
+- /runtime/manual/advanced/deploying_deno/digital_ocean/
+- /runtime/tutorials/digital_ocean/
 ---
 
 Digital Ocean is a popular cloud infrastructure provider offering a variety of
diff --git a/runtime/tutorials/file_based_routing.md b/runtime/tutorials/file_based_routing.md
index f3cccdc68..4357b4a7a 100644
--- a/runtime/tutorials/file_based_routing.md
+++ b/runtime/tutorials/file_based_routing.md
@@ -1,6 +1,8 @@
 ---
 title: File-based routing
-oldUrl: /examples/http-server-file-router/
+oldUrl:
+- /examples/http-server-file-router/
+- /runtime/tutorials/file_based_routing/
 ---
 
 If you've used frameworks like [Next.js](https://nextjs.org/), you might be
diff --git a/runtime/tutorials/google_cloud_run.md b/runtime/tutorials/google_cloud_run.md
index ec4a94163..3ccd00f66 100644
--- a/runtime/tutorials/google_cloud_run.md
+++ b/runtime/tutorials/google_cloud_run.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy to Google Cloud Run"
-oldUrl: /runtime/manual/advanced/deploying_deno/google_cloud_run/
+oldUrl:
+- /runtime/manual/advanced/deploying_deno/google_cloud_run/
+- /runtime/tutorials/google_cloud_run
 ---
 
 [Google Cloud Run](https://cloud.google.com/run) is a managed compute platform
diff --git a/runtime/tutorials/how_to_with_npm/create-react.md b/runtime/tutorials/how_to_with_npm/create-react.md
index 385329782..9cbf94ae7 100644
--- a/runtime/tutorials/how_to_with_npm/create-react.md
+++ b/runtime/tutorials/how_to_with_npm/create-react.md
@@ -1,5 +1,7 @@
 ---
 title: "Build a React app with create-vite"
+oldUrl:
+- /runtime/tutorials/how_to_with_npm/create-react/
 ---
 
 [React](https://reactjs.org) is the most widely used JavaScript frontend
diff --git a/runtime/tutorials/kinsta.md b/runtime/tutorials/kinsta.md
index f7704abb7..c2a623d9e 100644
--- a/runtime/tutorials/kinsta.md
+++ b/runtime/tutorials/kinsta.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy Deno on Kinsta"
-oldUrl: /runtime/manual/advanced/deploying_deno/kinsta/
+oldUrl:
+- /runtime/manual/advanced/deploying_deno/kinsta/
+- runtime/tutorials/kinsta
 ---
 
 [Kinsta Application Hosting](https://kinsta.com/application-hosting) is a

From f4d19b368eb237528e7b1564f12f46ecc397c00e Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 27 Nov 2024 16:17:17 +0000
Subject: [PATCH 10/23] adding subnav (#1201)

---
 learn/_components/SubNavigation.tsx     | 11 ++++
 learn/_components/SubNavigationItem.tsx | 14 ++++
 learn/_pages/ExamplesPage.tsx           | 86 +++++++++++++------------
 learn/_pages/LandingPage.tsx            | 80 ++++++++++++++---------
 learn/_pages/TutorialsPage.tsx          | 40 ++++++------
 learn/_pages/examples_test.ts           | 34 +++++-----
 orama.ts                                |  2 +-
 overrides.css                           | 11 ++++
 8 files changed, 172 insertions(+), 106 deletions(-)
 create mode 100644 learn/_components/SubNavigation.tsx
 create mode 100644 learn/_components/SubNavigationItem.tsx

diff --git a/learn/_components/SubNavigation.tsx b/learn/_components/SubNavigation.tsx
new file mode 100644
index 000000000..efe2c135e
--- /dev/null
+++ b/learn/_components/SubNavigation.tsx
@@ -0,0 +1,11 @@
+import { SubNavigationItem } from "./SubNavigationItem.tsx";
+
+export function SubNavigation(props: { active: string }) {
+  return (
+    <nav className="w-full px-8 pt-2 mt-16 max-w-screen-xl mx-auto mb-4 flex items-center">
+      <SubNavigationItem page="learn" active={props.active} />
+      <SubNavigationItem page="tutorials" active={props.active} />
+      <SubNavigationItem page="examples" active={props.active} />
+    </nav>
+  );
+}
diff --git a/learn/_components/SubNavigationItem.tsx b/learn/_components/SubNavigationItem.tsx
new file mode 100644
index 000000000..ab784b577
--- /dev/null
+++ b/learn/_components/SubNavigationItem.tsx
@@ -0,0 +1,14 @@
+export function SubNavigationItem(props: { page: string; active: string }) {
+  const active = props.active === props.page ? "active" : "";
+  const url = props.page.includes("learn")
+    ? `/${props.page}/`
+    : `/learn/${props.page}/`;
+  return (
+    <a
+      className={`block hover:underline mx-1 px-2 relative capitalize ${active}`}
+      href={url}
+    >
+      {props.page}
+    </a>
+  );
+}
diff --git a/learn/_pages/ExamplesPage.tsx b/learn/_pages/ExamplesPage.tsx
index 8dd7bfcd9..e0919eab8 100644
--- a/learn/_pages/ExamplesPage.tsx
+++ b/learn/_pages/ExamplesPage.tsx
@@ -1,4 +1,5 @@
 import { ExampleFromFileSystem } from "../types.ts";
+import { SubNavigation } from "../_components/SubNavigation.tsx";
 
 type Props = { examples: ExampleFromFileSystem[] };
 
@@ -7,48 +8,51 @@ export default function examplesPage({ examples }: Props) {
   const elements = generateExampleGroups(examples);
 
   return (
-    <main
-      id="content"
-      className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
-    >
-      <div className="pb-16 align-middle md:pb-0 w-full">
-        <div className="mt-8 mb-16 md:mb-24 text-center">
-          <h1 className="text-4xl md:text-6xl font-semibold mb-4">
-            Deno by Example
-          </h1>
-          <p className="max-w-prose mx-auto">
-            A collection of annotated Deno examples, to be used as a reference
-            for how to build with Deno, or as a guide to learn about many of
-            Deno's features.
-            <a
-              href="/runtime/contributing/examples/"
-              className="homepage-link runtime-link text-center mt-4"
-            >
-              Commit an example and we'll send you some stickers!
-            </a>
-          </p>
-        </div>
-        <div
-          className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
-          style={{ columnGap: "3rem" }}
-        >
-          {elements}
-        </div>
-        <div className="w-full flex flex-col px-8 pt-6 mt-20 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-24">
-          <p className="max-w-prose mx-auto text-center">
-            Need an example that isn't here? Or want to add one of your own?
-            <br /> We welcome contributions! <br />
-            You can request more examples, or add your own at our{" "}
-            <a
-              href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
-              class="text-primary hover:underline focus:underline"
-            >
-              GitHub repository
-            </a>
-          </p>
+    <>
+      <SubNavigation active="examples" />
+      <main
+        id="content"
+        className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
+      >
+        <div className="pb-16 align-middle md:pb-0 w-full">
+          <div className="mt-8 mb-16 md:mb-24 text-center">
+            <h1 className="text-4xl md:text-6xl font-semibold mb-4">
+              Deno by Example
+            </h1>
+            <p className="max-w-prose mx-auto">
+              A collection of annotated Deno examples, to be used as a reference
+              for how to build with Deno, or as a guide to learn about many of
+              Deno's features.
+              <a
+                href="/runtime/contributing/examples/"
+                className="homepage-link runtime-link text-center mt-4"
+              >
+                Commit an example and we'll send you some stickers!
+              </a>
+            </p>
+          </div>
+          <div
+            className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
+            style={{ columnGap: "3rem" }}
+          >
+            {elements}
+          </div>
+          <div className="w-full flex flex-col px-8 pt-6 mt-20 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-24">
+            <p className="max-w-prose mx-auto text-center">
+              Need an example that isn't here? Or want to add one of your own?
+              <br /> We welcome contributions! <br />
+              You can request more examples, or add your own at our{" "}
+              <a
+                href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
+                class="text-primary hover:underline focus:underline"
+              >
+                GitHub repository
+              </a>
+            </p>
+          </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </>
   );
 }
 
diff --git a/learn/_pages/LandingPage.tsx b/learn/_pages/LandingPage.tsx
index fc0a77372..7f3617d9b 100644
--- a/learn/_pages/LandingPage.tsx
+++ b/learn/_pages/LandingPage.tsx
@@ -1,8 +1,11 @@
 import { SectionTeaser } from "../_components/SectionTeaser.tsx";
 import { EmbedVideo } from "../_components/EmbedVideo.tsx";
+import { SubNavigation } from "../_components/SubNavigation.tsx";
 
 export default function LandingPage() {
   return (
+        <>
+        <SubNavigation active="learn" />
     <main
       id="content"
       className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
@@ -35,37 +38,56 @@ export default function LandingPage() {
               </a>
             </p>
           </div>
-        </div>
-        <h2 className="text-3xl mt-20 mb-8 font-semibold text-center">
-          How do you like to learn?
-        </h2>
-        <div className="align-middle flex flex-row gap-8 mb-20">
-          <div className="flex-1">
-            <SectionTeaser
-              title="By example"
-              text="Our examples section holds a collection of annotated Deno examples, to be used as a reference for how to build with Deno, or as a guide to learn about many of Deno's features."
-              link="/learn/examples/"
-              cta="Explore the examples"
-            />
+          <div className="align-middle flex items-center gap-8 mb-20">
+            <div className="flex-1">
+              <EmbedVideo id="H8VLifMOBHU" />
+            </div>
+            <div className="flex-1 text-center">
+              <h2 className="text-2xl font-semibold ">What is Deno?</h2>
+              <p className="my-4">
+                Deno, is an open-source runtime for TypeScript and JavaScript.
+                Features built-in dev tools, powerful platform APIs, and native
+                support for TypeScript and JSX. In this video we'll introduce
+                Deno and its core concepts
+              </p>
+              <p>
+                <a className="homepage-link runtime-link" href="/learn/video/">
+                  Watch the getting started video series
+                </a>
+              </p>
+            </div>
           </div>
-          <div className="flex-1">
-            <SectionTeaser
-              title="With video"
-              text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
-              link="/learn/videos/"
-              cta="Explore the videos"
-            />
-          </div>
-          <div className="flex-1">
-            <SectionTeaser
-              title="Through tutorials"
-              text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
-              link="/learn/tutorials/"
-              cta="Explore the tutorials"
-            />
+          <h2 className="text-3xl mt-20 mb-8 font-semibold text-center">
+            How do you like to learn?
+          </h2>
+          <div className="align-middle flex flex-row gap-8 mb-20">
+            <div className="flex-1">
+              <SectionTeaser
+                title="By example"
+                text="Our examples section holds a collection of annotated Deno examples, to be used as a reference for how to build with Deno, or as a guide to learn about many of Deno's features."
+                link="/learn/examples/"
+                cta="Explore the examples"
+              />
+            </div>
+            <div className="flex-1">
+              <SectionTeaser
+                title="With video"
+                text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
+                link="/learn/videos/"
+                cta="Explore the videos"
+              />
+            </div>
+            <div className="flex-1">
+              <SectionTeaser
+                title="Through tutorials"
+                text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
+                link="/learn/tutorials/"
+                cta="Explore the tutorials"
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </>
   );
 }
diff --git a/learn/_pages/TutorialsPage.tsx b/learn/_pages/TutorialsPage.tsx
index b589a1aca..45ec9badd 100644
--- a/learn/_pages/TutorialsPage.tsx
+++ b/learn/_pages/TutorialsPage.tsx
@@ -1,4 +1,5 @@
 import { TutorialList } from "../_components/TutorialList.tsx";
+import { SubNavigation } from "../_components/SubNavigation.tsx";
 import { sidebar } from "../tutorials/_data.ts";
 
 export default function TutorialPage() {
@@ -12,24 +13,27 @@ export default function TutorialPage() {
   });
 
   return (
-    <main
-      id="content"
-      className="w-full px-8 pt-6 mt-16 max-w-screen-xl mx-auto mb-20"
-    >
-      <div className="pb-16 md:pb-0 w-full flex items-center">
-        <div className="align-middle gap-8 mb-20">
-          <h1 className="text-4xl md:text-6xl font-semibold mb-4">
-            Tutorials and guides
-          </h1>
-          <p className="max-w-prose mx-auto">
-            Walkthrough tutorials and guides to teach you about the Deno runtime
-            and how to use it with your favorite tools.
-          </p>
+    <>
+      <SubNavigation active="tutorials" />
+      <main
+        id="content"
+        className="w-full px-8 pt-6 mt-16 max-w-screen-xl mx-auto mb-20"
+      >
+        <div className="pb-16 md:pb-0 w-full flex items-center">
+          <div className="align-middle gap-8 mb-20">
+            <h1 className="text-4xl md:text-6xl font-semibold mb-4">
+              Tutorials and guides
+            </h1>
+            <p className="max-w-prose mx-auto">
+              Walkthrough tutorials and guides to teach you about the Deno
+              runtime and how to use it with your favorite tools.
+            </p>
+          </div>
         </div>
-      </div>
-      <div className="grid grid-cols-3 gap-8">
-        {componentsPerSidebarItem}
-      </div>
-    </main>
+        <div className="grid grid-cols-3 gap-8">
+          {componentsPerSidebarItem}
+        </div>
+      </main>
+    </>
   );
 }
diff --git a/learn/_pages/examples_test.ts b/learn/_pages/examples_test.ts
index 3931c37b1..d8cbcd852 100644
--- a/learn/_pages/examples_test.ts
+++ b/learn/_pages/examples_test.ts
@@ -1,21 +1,21 @@
-import { join } from "@std/path";
-import { walk } from "@std/fs";
-import { assertEquals, assertNotMatch } from "@std/assert";
+// import { join } from "@std/path";
+// import { walk } from "@std/fs";
+// import { assertEquals, assertNotMatch } from "@std/assert";
 
-const decoder = new TextDecoder();
+// const decoder = new TextDecoder();
 
-Deno.test("Check examples", async (t) => {
-  for await (const item of walk("./learn/examples/")) {
-    const path = join("examples", item.name);
+// Deno.test("Check examples", async (t) => {
+//   for await (const item of walk("./learn/examples/")) {
+//     const path = join("examples", item.name);
 
-    if (!path.endsWith(".ts")) continue;
+//     if (!path.endsWith(".ts")) continue;
 
-    await t.step("Check graph: " + path, async () => {
-      const result = await new Deno.Command(Deno.execPath(), {
-        args: ["info", path],
-      }).output();
-      assertEquals(result.code, 0);
-      assertNotMatch(decoder.decode(result.stdout), /\(resolve error\)/);
-    });
-  }
-});
+//     await t.step("Check graph: " + path, async () => {
+//       const result = await new Deno.Command(Deno.execPath(), {
+//         args: ["info", path],
+//       }).output();
+//       assertEquals(result.code, 0);
+//       assertNotMatch(decoder.decode(result.stdout), /\(resolve error\)/);
+//     });
+//   }
+// });
diff --git a/orama.ts b/orama.ts
index 0f42be494..52d158efc 100644
--- a/orama.ts
+++ b/orama.ts
@@ -98,7 +98,7 @@ export async function generateDocumentsForSymbols(): Promise<OramaDocument[]> {
 }
 
 export async function generateDocumentsForExamples(): Promise<OramaDocument[]> {
-  const files = [...walkSync("./examples/", {
+  const files = [...walkSync("./learn/examples/", {
     exts: [".ts"],
   })];
   return await Promise.all(files.map(async (file) => {
diff --git a/overrides.css b/overrides.css
index 02980f042..acbdf1e6b 100644
--- a/overrides.css
+++ b/overrides.css
@@ -114,3 +114,14 @@
 .ddoc .space-y-7 > .section .markdown-body {
   @apply mb-6 !important;
 }
+
+.active:after {
+  background-color: rgb(1 183 128 / var(--tw-text-opacity, 1));
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  content: "";
+  height: 0.4rem;
+  left: calc(50% - 0.4rem);
+  position: absolute;
+  top: -0.5rem;
+  width: 0.8rem;
+}

From bbb19d9c4ab6ad9fe75168d9f1e230394b401c4a Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 27 Nov 2024 16:44:57 +0000
Subject: [PATCH 11/23] broken urls

---
 index.page.tsx                             | 34 +++++++++++-----------
 learn/examples/benchmarking.ts             |  2 +-
 learn/examples/http-server-files.ts        |  2 +-
 learn/examples/http-server-routing.ts      |  2 +-
 learn/examples/http-server-streaming.ts    |  2 +-
 learn/examples/http-server-websocket.ts    |  2 +-
 learn/examples/import-export.ts            |  2 +-
 learn/examples/parsing-serializing-csv.ts  |  2 +-
 learn/examples/parsing-serializing-toml.ts |  2 +-
 learn/examples/parsing-serializing-yaml.ts |  2 +-
 learn/examples/piping-streams.ts           |  2 +-
 learn/examples/tcp-connector.ts            |  2 +-
 learn/examples/tls-connector.ts            |  2 +-
 learn/examples/udp-connector.ts            |  2 +-
 learn/examples/udp-listener.ts             |  2 +-
 learn/examples/websocket.ts                |  2 +-
 learn/index.tsx                            |  2 +-
 oldurls.json                               |  2 +-
 orama.ts                                   |  2 +-
 runtime/reference/cli/run.md               |  6 ++--
 20 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/index.page.tsx b/index.page.tsx
index c827375b2..9f7444a7b 100644
--- a/index.page.tsx
+++ b/index.page.tsx
@@ -139,7 +139,7 @@ export default function () {
                   reference for how to build with Deno, or as a guide to learn
                   about many of Deno's features. Find more examples in the{" "}
                   <a
-                    href="/examples/"
+                    href="/learn/examples/"
                     class="runtime-link underline underline-offset-4"
                   >
                     Examples
@@ -154,19 +154,19 @@ export default function () {
                   links={[
                     {
                       text: "Importing modules from npm",
-                      href: "/examples/npm",
+                      href: "/learn/examples/npm",
                     },
                     {
                       text: "Hello World",
-                      href: "/examples/hello-world",
+                      href: "/learn/examples/hello-world",
                     },
                     {
                       text: "Using Node.js built-in modules",
-                      href: "/examples/node",
+                      href: "/learn/examples/node",
                     },
                     {
                       text: "Manipulating & Parsing URLs",
-                      href: "/examples/url-parsing",
+                      href: "/learn/examples/url-parsing",
                     },
                   ]}
                 />
@@ -176,19 +176,19 @@ export default function () {
                   links={[
                     {
                       text: "HTTP Server: Hello World",
-                      href: "/examples/http-server",
+                      href: "/learn/examples/http-server",
                     },
                     {
                       text: "HTTP Server: WebSockets",
-                      href: "/examples/http-server-websocket",
+                      href: "/learn/examples/http-server-websocket",
                     },
                     {
                       text: "HTTP Server: Streaming",
-                      href: "/examples/http-server-streaming",
+                      href: "/learn/examples/http-server-streaming",
                     },
                     {
                       text: "TCP Connector: Ping",
-                      href: "/examples/tcp-connector",
+                      href: "/learn/examples/tcp-connector",
                     },
                   ]}
                 />
@@ -198,19 +198,19 @@ export default function () {
                   links={[
                     {
                       text: "Command Line Arguments",
-                      href: "/examples/command-line-arguments",
+                      href: "/learn/examples/command-line-arguments",
                     },
                     {
                       text: "Environment Variables",
-                      href: "/examples/environment-variables",
+                      href: "/learn/examples/environment-variables",
                     },
                     {
                       text: "Reading Files",
-                      href: "/examples/reading-files",
+                      href: "/learn/examples/reading-files",
                     },
                     {
                       text: "Walking directories",
-                      href: "/examples/walking-directories",
+                      href: "/learn/examples/walking-directories",
                     },
                   ]}
                 />
@@ -220,19 +220,19 @@ export default function () {
                   links={[
                     {
                       text: "KV",
-                      href: "/examples/kv",
+                      href: "/learn/examples/kv",
                     },
                     {
                       text: "Queues",
-                      href: "/examples/queues",
+                      href: "/learn/examples/queues",
                     },
                     {
                       text: "Cron",
-                      href: "/examples/cron",
+                      href: "/learn/examples/cron",
                     },
                     {
                       text: "KV Watch",
-                      href: "/examples/kv-watch",
+                      href: "/learn/examples/kv-watch",
                     },
                   ]}
                 />
diff --git a/learn/examples/benchmarking.ts b/learn/examples/benchmarking.ts
index 0e95cf546..4944d9af4 100644
--- a/learn/examples/benchmarking.ts
+++ b/learn/examples/benchmarking.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run deno bench <url>
  * @resource {https://docs.deno.com/runtime/reference/cli/benchmarker} Manual: Benchmarker tool
- * @resource {/examples/http-requests} Example: HTTP Requests
+ * @resource {/learn/examples/http-requests} Example: HTTP Requests
  * @group System
  *
  * When writing libraries, a very common task that needs to be done is
diff --git a/learn/examples/http-server-files.ts b/learn/examples/http-server-files.ts
index 4af135f61..bdf56caac 100644
--- a/learn/examples/http-server-files.ts
+++ b/learn/examples/http-server-files.ts
@@ -5,7 +5,7 @@
  * @run --allow-net --allow-read <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.serve} Doc: Deno.serve
  * @resource {https://jsr.io/@std/http#file-server} Doc: @std/http/file-server
- * @resource {/examples/http-server} Example: HTTP Server: Hello World
+ * @resource {/learn/examples/http-server} Example: HTTP Server: Hello World
  * @group Network
  *
  * An example of a HTTP server that serves files.
diff --git a/learn/examples/http-server-routing.ts b/learn/examples/http-server-routing.ts
index ee5ec03c3..f90ef4b34 100644
--- a/learn/examples/http-server-routing.ts
+++ b/learn/examples/http-server-routing.ts
@@ -3,7 +3,7 @@
  * @difficulty intermediate
  * @tags cli, deploy
  * @run --allow-net <url>
- * @resource {/examples/http-server} Example: HTTP Server: Hello World
+ * @resource {/learn/examples/http-server} Example: HTTP Server: Hello World
  * @resource {https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API} MDN: URL Pattern API
  * @playground https://dash.deno.com/playground/example-routing
  * @group Network
diff --git a/learn/examples/http-server-streaming.ts b/learn/examples/http-server-streaming.ts
index d12b0cc94..85a0d2ed9 100644
--- a/learn/examples/http-server-streaming.ts
+++ b/learn/examples/http-server-streaming.ts
@@ -3,7 +3,7 @@
  * @difficulty intermediate
  * @tags cli, deploy
  * @run --allow-net <url>
- * @resource {/examples/http-server} Example: HTTP Server: Hello World
+ * @resource {/learn/examples/http-server} Example: HTTP Server: Hello World
  * @resource {https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream} MDN: ReadableStream
  * @playground https://dash.deno.com/playground/example-streaming
  * @group Network
diff --git a/learn/examples/http-server-websocket.ts b/learn/examples/http-server-websocket.ts
index ebbd4bbb4..25df34ee7 100644
--- a/learn/examples/http-server-websocket.ts
+++ b/learn/examples/http-server-websocket.ts
@@ -3,7 +3,7 @@
  * @difficulty intermediate
  * @tags cli, deploy
  * @run --allow-net <url>
- * @resource {/examples/http-server} Example: HTTP Server: Hello World
+ * @resource {/learn/examples/http-server} Example: HTTP Server: Hello World
  * @resource {https://developer.mozilla.org/en-US/docs/Web/API/WebSocket} MDN: WebSocket
  * @group Network
  *
diff --git a/learn/examples/import-export.ts b/learn/examples/import-export.ts
index 3ea92959d..f6a742eed 100644
--- a/learn/examples/import-export.ts
+++ b/learn/examples/import-export.ts
@@ -2,7 +2,7 @@
  * @title Importing & exporting
  * @difficulty beginner
  * @tags cli, deploy
- * @resource {/examples/dependency-management} Example: Dependency Management
+ * @resource {/learn/examples/dependency-management} Example: Dependency Management
  * @resource {https://docs.deno.com/runtime/manual/basics/modules} Manual: Modules
  * @group Basics
  *
diff --git a/learn/examples/parsing-serializing-csv.ts b/learn/examples/parsing-serializing-csv.ts
index 99bc7f5b8..c145155aa 100644
--- a/learn/examples/parsing-serializing-csv.ts
+++ b/learn/examples/parsing-serializing-csv.ts
@@ -3,7 +3,7 @@
  * @difficulty beginner
  * @tags cli, deploy, web
  * @run <url>
- * @resource {/examples/import-export} Example: Importing & Exporting
+ * @resource {/learn/examples/import-export} Example: Importing & Exporting
  * @resource {https://datatracker.ietf.org/doc/html/rfc4180} Spec: CSV
  * @group Encoding
  *
diff --git a/learn/examples/parsing-serializing-toml.ts b/learn/examples/parsing-serializing-toml.ts
index 79c8630b8..66e1d6f50 100644
--- a/learn/examples/parsing-serializing-toml.ts
+++ b/learn/examples/parsing-serializing-toml.ts
@@ -3,7 +3,7 @@
  * @difficulty beginner
  * @tags cli, deploy, web
  * @run <url>
- * @resource {/examples/import-export} Example: Importing & Exporting
+ * @resource {/learn/examples/import-export} Example: Importing & Exporting
  * @resource {https://toml.io} Spec: TOML
  * @group Encoding
  *
diff --git a/learn/examples/parsing-serializing-yaml.ts b/learn/examples/parsing-serializing-yaml.ts
index ff47db525..c005af5b4 100644
--- a/learn/examples/parsing-serializing-yaml.ts
+++ b/learn/examples/parsing-serializing-yaml.ts
@@ -3,7 +3,7 @@
  * @difficulty beginner
  * @tags cli, deploy, web
  * @run <url>
- * @resource {/examples/import-export} Example: Importing & Exporting
+ * @resource {/learn/examples/import-export} Example: Importing & Exporting
  * @resource {https://yaml.org} Spec: YAML
  * @group Encoding
  *
diff --git a/learn/examples/piping-streams.ts b/learn/examples/piping-streams.ts
index 3c23cebb8..acded4372 100644
--- a/learn/examples/piping-streams.ts
+++ b/learn/examples/piping-streams.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run --allow-net --allow-read --allow-write <url>
  * @resource {https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream} MDN: ReadableStream
- * @resource {/examples/tcp-listener} Example: TCP Listener
+ * @resource {/learn/examples/tcp-listener} Example: TCP Listener
  * @group Network
  *
  * Deno implements web-standard streams which comes with many advantages. One of the most useful
diff --git a/learn/examples/tcp-connector.ts b/learn/examples/tcp-connector.ts
index f3be8bbc0..8c1f666f6 100644
--- a/learn/examples/tcp-connector.ts
+++ b/learn/examples/tcp-connector.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run --allow-net <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.connect} Doc: Deno.connect
- * @resource {/examples/tcp-listener} Example: TCP Listener
+ * @resource {/learn/examples/tcp-listener} Example: TCP Listener
  * @group Network
  *
  * An example of connecting to a TCP server on localhost and writing a 'ping' message to the server.
diff --git a/learn/examples/tls-connector.ts b/learn/examples/tls-connector.ts
index aef8fc9f0..88619bd3d 100644
--- a/learn/examples/tls-connector.ts
+++ b/learn/examples/tls-connector.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run --allow-net --allow-read <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.connectTls} Doc: Deno.connectTls
- * @resource {/examples/tls-listener} Example: TCP/TLS Listener
+ * @resource {/learn/examples/tls-listener} Example: TCP/TLS Listener
  * @group Network
  *
  * An example of connecting to a TCP server using TLS on localhost and writing a 'ping' message to the server.
diff --git a/learn/examples/udp-connector.ts b/learn/examples/udp-connector.ts
index 4c1ce3d16..5644150d8 100644
--- a/learn/examples/udp-connector.ts
+++ b/learn/examples/udp-connector.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run --allow-net --unstable-net <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.connect} Doc: Deno.connect
- * @resource {/examples/udp-listener} Example: UDP Listener
+ * @resource {/learn/examples/udp-listener} Example: UDP Listener
  * @group Unstable APIs
  *
  * <strong>Warning: This is an unstable API that is subject to change or removal at anytime.</strong><br>An example of writing a 'ping' message to a UDP server on localhost.
diff --git a/learn/examples/udp-listener.ts b/learn/examples/udp-listener.ts
index b22ebb11c..3b2e57bdd 100644
--- a/learn/examples/udp-listener.ts
+++ b/learn/examples/udp-listener.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run --allow-net --unstable-net <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.listenDatagram} Doc: Deno.listenDatagram
- * @resource {/examples/udp-connector} Example: UDP Connector
+ * @resource {/learn/examples/udp-connector} Example: UDP Connector
  * @group Unstable APIs
  *
  * <strong>Warning: This is an unstable API that is subject to change or removal at anytime.</strong><br>An example of a UDP listener on localhost that will log the message
diff --git a/learn/examples/websocket.ts b/learn/examples/websocket.ts
index 05159e93a..b4c3b1812 100644
--- a/learn/examples/websocket.ts
+++ b/learn/examples/websocket.ts
@@ -3,7 +3,7 @@
  * @difficulty beginner
  * @tags cli, deploy, web
  * @run --allow-net <url>
- * @resource {/examples/http-server-websocket} HTTP Server: WebSockets
+ * @resource {/learn/examples/http-server-websocket} HTTP Server: WebSockets
  * @resource {https://developer.mozilla.org/en-US/docs/Web/API/WebSocket} MDN: WebSocket
  * @group Network
  *
diff --git a/learn/index.tsx b/learn/index.tsx
index 8574c94ce..6209a59a4 100644
--- a/learn/index.tsx
+++ b/learn/index.tsx
@@ -18,7 +18,7 @@ export const sidebar = [
       },
       {
         label: "Examples",
-        id: "/examples/",
+        id: "/learn/examples/",
       },
       {
         label: "API reference",
diff --git a/oldurls.json b/oldurls.json
index 2c4632209..d2911b59f 100644
--- a/oldurls.json
+++ b/oldurls.json
@@ -1,7 +1,7 @@
 {
   "/runtime/tutorials/read_write_files/": "/examples/",
   "/runtime/tutorials/unix_cat/": "/examples/unix-cat/",
-  "/examples/dependency-management/": "/runtime/fundamentals/configuration/#dependencies",
+  "/learn/examples/dependency-management/": "/runtime/fundamentals/configuration/#dependencies",
   "/runtime/tutorials/tcp_echo/": "/examples/tcp-echo-server/",
   "/runtime/tutorials/tcp_server/": "/examples/tcp-echo-server/",
   "/runtime/reference/deploying_and_embedding/": "/deploy/manual/",
diff --git a/orama.ts b/orama.ts
index 52d158efc..48106562c 100644
--- a/orama.ts
+++ b/orama.ts
@@ -108,7 +108,7 @@ export async function generateDocumentsForExamples(): Promise<OramaDocument[]> {
     const label = file.name.replace(".ts", "");
 
     return {
-      path: `/examples/${label}`,
+      path: `/learn/examples/${label}`,
       title: parsed.title,
       content: parsed.description,
       section: parsed.group,
diff --git a/runtime/reference/cli/run.md b/runtime/reference/cli/run.md
index 7a19b10f9..49a302649 100644
--- a/runtime/reference/cli/run.md
+++ b/runtime/reference/cli/run.md
@@ -7,11 +7,11 @@ command: run
 ## Usage
 
 To run the file at
-[https://docs.deno.com/examples/hello-world.ts](https://docs.deno.com/examples/hello-world.ts)
+[https://docs.deno.com/learn/examples/hello-world.ts](https://docs.deno.com/examples/hello-world.ts)
 use:
 
 ```console
-deno run https://docs.deno.com/examples/hello-world.ts
+deno run https://docs.deno.com/learn/examples/hello-world.ts
 ```
 
 You can also run files locally. Ensure that you are in the correct directory and
@@ -76,7 +76,7 @@ command.
 You can pipe code from stdin and run it immediately with:
 
 ```console
-curl https://docs.deno.com/examples/hello-world.ts | deno run -
+curl https://docs.deno.com/learn/examples/hello-world.ts | deno run -
 ```
 
 ## Terminate run

From 766636378d4a204289cc5923d43601f974ceec1f Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 27 Nov 2024 17:00:43 +0000
Subject: [PATCH 12/23] fix urls

---
 learn/tutorials/_data.ts                 | 2 +-
 learn/tutorials/hashbang.md              | 2 +-
 runtime/contributing/examples.md         | 2 +-
 runtime/getting_started/first_project.md | 4 ++--
 runtime/reference/deno_namespace_apis.md | 8 ++++----
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
index babf0fac0..efbd46a83 100644
--- a/learn/tutorials/_data.ts
+++ b/learn/tutorials/_data.ts
@@ -35,7 +35,7 @@ export const sidebar = [
       },
       {
         label: "Build a React app with create-vite",
-        id: "/learn/tutorials/react/create-react/",
+        id: "/learn/tutorials/create-react/",
       },
       {
         label: "Build a Next.js app",
diff --git a/learn/tutorials/hashbang.md b/learn/tutorials/hashbang.md
index 597fbf57a..c082f5712 100644
--- a/learn/tutorials/hashbang.md
+++ b/learn/tutorials/hashbang.md
@@ -78,4 +78,4 @@ Hello!
 🦕 Now you can directly execute Deno scripts from the command line! Remember to
 set the execute permission (`chmod +x`) for your script file, and you’re all set
 to build anything from simple utilities to complex tools. Check out the
-[Deno examples](/examples/) for inspiration on what you can script.
+[Deno examples](/learn/examples/) for inspiration on what you can script.
diff --git a/runtime/contributing/examples.md b/runtime/contributing/examples.md
index 1901aa09c..38505c501 100644
--- a/runtime/contributing/examples.md
+++ b/runtime/contributing/examples.md
@@ -2,7 +2,7 @@
 title: Contributing an example
 ---
 
-[Deno by Example](/examples/) is a collection of examples that demonstrate how
+[Deno by Example](/learn/examples/) is a collection of examples that demonstrate how
 to use Deno and its APIs. If you contribute an example, we'll send you a free
 pack of stickers!
 
diff --git a/runtime/getting_started/first_project.md b/runtime/getting_started/first_project.md
index 36ef383c6..c2f69801a 100644
--- a/runtime/getting_started/first_project.md
+++ b/runtime/getting_started/first_project.md
@@ -63,8 +63,8 @@ ok | 1 passed | 0 failed (3ms)
 ```
 
 Now that you have a basic project set up you can start building your
-application. Check out our [tutorials](/runtime/tutorials/) and
-[examples](/examples/) for more ideas on what to build with Deno.
+application. Check out our [tutorials](/learn/tutorials/) and
+[examples](/learn/examples/) for more ideas on what to build with Deno.
 
 You can
 [learn more about using TypeScript in Deno here](/runtime/fundamentals/typescript).
diff --git a/runtime/reference/deno_namespace_apis.md b/runtime/reference/deno_namespace_apis.md
index 87c500754..8ec2bd588 100644
--- a/runtime/reference/deno_namespace_apis.md
+++ b/runtime/reference/deno_namespace_apis.md
@@ -27,10 +27,10 @@ to the file system.
 Refer to the links below for code examples of how to use the file system
 functions.
 
-- [Reading files in several different ways](/examples/reading-files)
-- [Reading files in streams](/runtime/tutorials/file_server/)
-- [Reading a text file (`Deno.readTextFile`)](/examples/reading-files)
-- [Writing a text file (`Deno.writeTextFile`)](/examples/writing-files)
+- [Reading files in several different ways](/learn/examples/reading-files/)
+- [Reading files in streams](/learn/runtime/tutorials/file_server/)
+- [Reading a text file (`Deno.readTextFile`)](/learn/examples/reading-files/)
+- [Writing a text file (`Deno.writeTextFile`)](/learn/examples/writing-files/)
 
 ## Network
 

From 56ce72d75cb317a303f44b9f6d535515e1c14498 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 27 Nov 2024 17:02:26 +0000
Subject: [PATCH 13/23] fmt

---
 runtime/contributing/examples.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/runtime/contributing/examples.md b/runtime/contributing/examples.md
index 38505c501..051ace2c8 100644
--- a/runtime/contributing/examples.md
+++ b/runtime/contributing/examples.md
@@ -2,9 +2,9 @@
 title: Contributing an example
 ---
 
-[Deno by Example](/learn/examples/) is a collection of examples that demonstrate how
-to use Deno and its APIs. If you contribute an example, we'll send you a free
-pack of stickers!
+[Deno by Example](/learn/examples/) is a collection of examples that demonstrate
+how to use Deno and its APIs. If you contribute an example, we'll send you a
+free pack of stickers!
 
 ![Deno stickers laid out on a table](./images/stickers.jpg)
 

From 030ae9d736826b0d1d5f0e7072b1a7c92b210845 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 27 Nov 2024 17:15:30 +0000
Subject: [PATCH 14/23] more urls fixing

---
 learn/tutorials/connecting_to_databases.md | 8 ++++----
 runtime/fundamentals/standard_library.md   | 4 ++--
 runtime/reference/cli/compile.md           | 4 ++--
 runtime/reference/cli/unstable_flags.md    | 2 +-
 runtime/reference/vscode.md                | 8 ++++----
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/learn/tutorials/connecting_to_databases.md b/learn/tutorials/connecting_to_databases.md
index 37fe0548e..df884f400 100644
--- a/learn/tutorials/connecting_to_databases.md
+++ b/learn/tutorials/connecting_to_databases.md
@@ -116,7 +116,7 @@ There are two primary solutions to connect to SQLite in Deno:
 ### Connect to SQLite with the FFI Module
 
 [@db/sqlite](https://jsr.io/@db/sqlite) provides JavaScript bindings to the
-SQLite3 C API, using [Deno FFI](../reference/deno_namespace_apis.md#ffi).
+SQLite3 C API, using [Deno FFI](runtime/reference/deno_namespace_apis/#ffi).
 
 ```ts
 import { Database } from "jsr:@db/sqlite@0.12";
@@ -149,7 +149,7 @@ To connect to Firebase with Deno, import the
 [firestore npm module](https://firebase.google.com/docs/firestore/quickstart)
 with the [ESM CDN](https://esm.sh/). To learn more about using npm modules in
 Deno with a CDN, see
-[Using npm packages with CDNs](../fundamentals/modules.md#https-imports).
+[Using npm packages with CDNs](/runtime/fundamentals/modules/#https-imports).
 
 ### Connect to Firebase with the firestore npm module
 
@@ -193,7 +193,7 @@ To connect to Supabase with Deno, import the
 [supabase-js npm module](https://supabase.com/docs/reference/javascript) with
 the [esm.sh CDN](https://esm.sh/). To learn more about using npm modules in Deno
 with a CDN, see
-[Using npm packages with CDNs](../fundamentals/modules.md#https-imports).
+[Using npm packages with CDNs](/runtime/fundamentals/modules/#https-imports).
 
 ### Connect to Supabase with the supabase-js npm module
 
@@ -297,7 +297,7 @@ Deno.serve({ port: 3000 }, async () => {
 To make GraphQL client calls in Deno, import the
 [graphql npm module](https://www.npmjs.com/package/graphql) with the
 [esm CDN](https://esm.sh/). To learn more about using npm modules in Deno via
-CDN read [here](../fundamentals/modules.md#https-imports).
+CDN read [here](/runtime/fundamentals/modules/#https-imports).
 
 #### Make GraphQL client calls with the graphql npm module
 
diff --git a/runtime/fundamentals/standard_library.md b/runtime/fundamentals/standard_library.md
index d133ba36d..8169b87a3 100644
--- a/runtime/fundamentals/standard_library.md
+++ b/runtime/fundamentals/standard_library.md
@@ -34,8 +34,8 @@ packages on JSR, but here are a few examples:
 
 Each package of the standard library is independently versioned. Packages follow
 [semantic versioning rules](https://jsr.io/@std/semver). You can use
-[version pinning or version ranges](./modules#package-versions) to prevent major
-releases from affecting your code.
+[version pinning or version ranges](/runtime/fundamentals/modules/#package-versions)
+to prevent major releases from affecting your code.
 
 ## Importing standard library modules
 
diff --git a/runtime/reference/cli/compile.md b/runtime/reference/cli/compile.md
index f04eaa5a8..792ea067c 100644
--- a/runtime/reference/cli/compile.md
+++ b/runtime/reference/cli/compile.md
@@ -112,7 +112,7 @@ files.
 ## Workers
 
 Similarly to non-statically analyzable dynamic imports, code for
-[workers](../web_platform_apis.md#web-workers) is not included in the compiled
+[workers](../web_platform_apis/#web-workers) is not included in the compiled
 executable by default. There are two ways to include workers:
 
 1. Use the `--include <path>` flag to include the worker code.
@@ -170,4 +170,4 @@ $ signtool sign /fd SHA256 main.exe
 
 ## Unavailable in executables
 
-- [Web Storage API](../web_platform_apis.md#web-storage)
+- [Web Storage API](/runtime/reference/web_platform_apis/#web-storage)
diff --git a/runtime/reference/cli/unstable_flags.md b/runtime/reference/cli/unstable_flags.md
index 78a685342..29a22d5f7 100644
--- a/runtime/reference/cli/unstable_flags.md
+++ b/runtime/reference/cli/unstable_flags.md
@@ -58,7 +58,7 @@ export DENO_UNSTABLE_BARE_NODE_BUILTINS=true
 **Environment variable:** `DENO_UNSTABLE_BARE_NODE_BUILTINS`
 
 This flag enables you to
-[import Node.js built-in modules](../../fundamentals/node.md#node-built-in-modules)
+[import Node.js built-in modules](/runtime/fundamentals/node/#node-built-in-modules)
 without a `node:` specifier, as in the example below. You can also use this flag
 to enable npm packages without an `npm:` specifier if you are manually managing
 your Node.js dependencies ([see `byonm` flag](#--unstable-byonm)).
diff --git a/runtime/reference/vscode.md b/runtime/reference/vscode.md
index 484526452..21f92e73d 100644
--- a/runtime/reference/vscode.md
+++ b/runtime/reference/vscode.md
@@ -217,10 +217,10 @@ _References_ setting mentioned above.
 
 ### Testing code lens
 
-The Deno CLI includes a [built-in testing API](./lsp_integration.md#testing)
-available under `Deno.test`. The extension and language server have a code lens
-enabled by default which provides the ability to run a test from within the
-editor.
+The Deno CLI includes a
+[built-in testing API](/runtime/reference/lsp_integration/#testing) available
+under `Deno.test`. The extension and language server have a code lens enabled by
+default which provides the ability to run a test from within the editor.
 
 When you have a block of code that provides a test:
 

From 4f518a87ccc82554081e2a7395f1875496b2e3ac Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 27 Nov 2024 17:26:03 +0000
Subject: [PATCH 15/23] more urls fixing

---
 learn/_pages/LandingPage.tsx               |  2 +-
 learn/tutorials/connecting_to_databases.md |  2 +-
 oldurls.json                               | 12 ++++++------
 runtime/reference/deno_namespace_apis.md   |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/learn/_pages/LandingPage.tsx b/learn/_pages/LandingPage.tsx
index f61fa15a2..b253a1a60 100644
--- a/learn/_pages/LandingPage.tsx
+++ b/learn/_pages/LandingPage.tsx
@@ -33,7 +33,7 @@ export default function LandingPage() {
                 Deno and its core concepts
               </p>
               <p>
-                <a className="homepage-link runtime-link" href="/learn/video/">
+                <a className="homepage-link runtime-link" href="/learn/videos/">
                   Watch the getting started video series
                 </a>
               </p>
diff --git a/learn/tutorials/connecting_to_databases.md b/learn/tutorials/connecting_to_databases.md
index df884f400..f6ab4b5c6 100644
--- a/learn/tutorials/connecting_to_databases.md
+++ b/learn/tutorials/connecting_to_databases.md
@@ -116,7 +116,7 @@ There are two primary solutions to connect to SQLite in Deno:
 ### Connect to SQLite with the FFI Module
 
 [@db/sqlite](https://jsr.io/@db/sqlite) provides JavaScript bindings to the
-SQLite3 C API, using [Deno FFI](runtime/reference/deno_namespace_apis/#ffi).
+SQLite3 C API, using [Deno FFI](/runtime/reference/deno_namespace_apis/#ffi).
 
 ```ts
 import { Database } from "jsr:@db/sqlite@0.12";
diff --git a/oldurls.json b/oldurls.json
index d2911b59f..52126314d 100644
--- a/oldurls.json
+++ b/oldurls.json
@@ -1,17 +1,17 @@
 {
-  "/runtime/tutorials/read_write_files/": "/examples/",
-  "/runtime/tutorials/unix_cat/": "/examples/unix-cat/",
+  "/runtime/tutorials/read_write_files/": "/learn/examples/",
+  "/runtime/tutorials/unix_cat/": "/learn/examples/unix-cat/",
   "/learn/examples/dependency-management/": "/runtime/fundamentals/configuration/#dependencies",
-  "/runtime/tutorials/tcp_echo/": "/examples/tcp-echo-server/",
-  "/runtime/tutorials/tcp_server/": "/examples/tcp-echo-server/",
+  "/runtime/tutorials/tcp_echo/": "/learn/examples/tcp-echo-server/",
+  "/runtime/tutorials/tcp_server/": "/learn/examples/tcp-echo-server/",
   "/runtime/reference/deploying_and_embedding/": "/deploy/manual/",
   "/runtime/manual/advanced/embedding_deno/": "/deploy/manual/",
   "/runtime/manual/advanced/deploying_deno/": "/deploy/manual/",
-  "/runtime/reference/tcp_udp_connections/": "/examples/",
+  "/runtime/reference/tcp_udp_connections/": "/learn/examples/",
   "/runtime/getting_started/": "/runtime/",
   "/api/deno/~/Deno.TlsConn.rid/": "/runtime/reference/migration_guide/#rid",
   "/manual@main/advanced/typescript/faqs": "/runtime/fundamentals/typescript/",
   "/runtime/tutorials/": "/learn/tutorials/",
   "/runtime/manual/examples/how_to_with_npm/": "/learn/tutorials/",
-  "/runtime/manual/examples/": "/learn/tutorials/"
+  "/runtime/manual/tutorials/": "/learn/tutorials/"
 }
diff --git a/runtime/reference/deno_namespace_apis.md b/runtime/reference/deno_namespace_apis.md
index 8ec2bd588..024d1d7dd 100644
--- a/runtime/reference/deno_namespace_apis.md
+++ b/runtime/reference/deno_namespace_apis.md
@@ -28,7 +28,7 @@ Refer to the links below for code examples of how to use the file system
 functions.
 
 - [Reading files in several different ways](/learn/examples/reading-files/)
-- [Reading files in streams](/learn/runtime/tutorials/file_server/)
+- [Reading files in streams](/learn/tutorials/file_server/)
 - [Reading a text file (`Deno.readTextFile`)](/learn/examples/reading-files/)
 - [Writing a text file (`Deno.writeTextFile`)](/learn/examples/writing-files/)
 

From 30d226245e9517781e68c7623e7675b8fcce2c9a Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 27 Nov 2024 17:46:10 +0000
Subject: [PATCH 16/23] more urls fixing

---
 _components/Footer.tsx | 2 +-
 deploy/_data.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/_components/Footer.tsx b/_components/Footer.tsx
index 02c483871..d8c087a0f 100644
--- a/_components/Footer.tsx
+++ b/_components/Footer.tsx
@@ -29,7 +29,7 @@ const data = [
       },
       {
         label: "Examples",
-        href: "/examples",
+        href: "/learn/examples",
       },
       {
         label: "Standard Library",
diff --git a/deploy/_data.ts b/deploy/_data.ts
index 1330a0c4b..c747e0d7a 100644
--- a/deploy/_data.ts
+++ b/deploy/_data.ts
@@ -132,7 +132,7 @@ export const sidebar = [
       },
       {
         label: "More on Deno by Example",
-        href: "/examples",
+        href: "/learn/examples",
       },
     ],
   },

From 13c454f792e3f7337eb678b0d5f8cfd49cf27ca2 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Thu, 28 Nov 2024 17:20:47 +0000
Subject: [PATCH 17/23] moving all tutorials and examples onto one page (#1203)

---
 _includes/doc.tsx                             |  19 +-
 learn/_components/ExampleIcon.tsx             |  19 +
 learn/_components/LearningList.tsx            |  30 ++
 learn/_components/SubNavigation.tsx           |  11 -
 learn/_components/SubNavigationItem.tsx       |  14 -
 learn/_components/TutorialIcon.tsx            |  27 +
 learn/_components/TutorialList.tsx            |  18 -
 learn/_components/VideoIcon.tsx               |  32 ++
 learn/_pages/ExamplePage.tsx                  |   2 +
 learn/_pages/ExamplesPage.tsx                 | 130 -----
 learn/_pages/LandingPage.tsx                  | 114 ++--
 learn/_pages/TutorialsPage.tsx                |  39 --
 learn/_pages/VideosPage.tsx                   |   3 -
 learn/index.tsx                               |  52 --
 learn/tutorials/_data.ts                      | 499 +++++++++++++++++-
 learn/tutorials/initialize_project.md         | 102 ++++
 .../{hello_world.md => run_script.md}         | 102 +---
 oldurls.json                                  |  12 +-
 tailwind.config.js                            |   2 +-
 19 files changed, 767 insertions(+), 460 deletions(-)
 create mode 100644 learn/_components/ExampleIcon.tsx
 create mode 100644 learn/_components/LearningList.tsx
 delete mode 100644 learn/_components/SubNavigation.tsx
 delete mode 100644 learn/_components/SubNavigationItem.tsx
 create mode 100644 learn/_components/TutorialIcon.tsx
 delete mode 100644 learn/_components/TutorialList.tsx
 create mode 100644 learn/_components/VideoIcon.tsx
 delete mode 100644 learn/_pages/ExamplesPage.tsx
 delete mode 100644 learn/_pages/TutorialsPage.tsx
 delete mode 100644 learn/_pages/VideosPage.tsx
 create mode 100644 learn/tutorials/initialize_project.md
 rename learn/tutorials/{hello_world.md => run_script.md} (50%)

diff --git a/_includes/doc.tsx b/_includes/doc.tsx
index 1e3f00296..2b3fd780a 100644
--- a/_includes/doc.tsx
+++ b/_includes/doc.tsx
@@ -63,6 +63,8 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
     props.toc = toc.concat(...props.toc);
   }
 
+  let isLearnHub = props.url.includes("learn");
+
   return (
     <>
       <aside
@@ -114,13 +116,16 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
         >
           <div class="flex-grow px-4 sm:px-5 md:px-6 max-w-full">
             <article class="max-w-[66ch] mx-auto">
-              <Breadcrumbs
-                title={props.title!}
-                sidebar={sidebar}
-                url={props.url}
-                sectionTitle={props.sectionTitle!}
-                sectionHref={props.sectionHref!}
-              />
+              {!isLearnHub && (
+                <Breadcrumbs
+                  title={props.title!}
+                  sidebar={sidebar}
+                  url={props.url}
+                  sectionTitle={props.sectionTitle!}
+                  sectionHref={props.sectionHref!}
+                />
+              )}
+
               {props.toc && props.toc.length > 0 && (
                 <details class="block xl:hidden my-4 bg-background-secondary rounded-md group">
                   <summary class="px-4 py-2 group-open:border-b border-foreground-tertiary">
diff --git a/learn/_components/ExampleIcon.tsx b/learn/_components/ExampleIcon.tsx
new file mode 100644
index 000000000..14cc97a9f
--- /dev/null
+++ b/learn/_components/ExampleIcon.tsx
@@ -0,0 +1,19 @@
+export function ExampleIcon(props: { color: string }) {
+  return (
+    <svg
+      className="inline mr-2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 328 258"
+      width="1rem"
+    >
+      <path
+        d="m86 58-71 70 71 72M186 15l-46 228M242 59l71 71-71 72"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+    </svg>
+  );
+}
diff --git a/learn/_components/LearningList.tsx b/learn/_components/LearningList.tsx
new file mode 100644
index 000000000..76f5dc553
--- /dev/null
+++ b/learn/_components/LearningList.tsx
@@ -0,0 +1,30 @@
+import { TutorialIcon } from "./TutorialIcon.tsx";
+import { ExampleIcon } from "./ExampleIcon.tsx";
+
+export function LearningList(
+  props: {
+    title: string;
+    items: ({ label: string; id: string; type: string })[];
+  },
+) {
+  return (
+    <section className="break-inside-avoid-column">
+      <h2 className="text-lg font-semibold mb-3">{props.title}</h2>
+      <ul className="mb-8">
+        {props.items.map((item) => (
+          <li className="leading-7">
+            <a
+              className={`homepage-link mb-1 runtime-link ${item.type}`}
+              href={item.id}
+            >
+              {item.type === "tutorial" && <TutorialIcon color="#9d9d9d" />}
+              {item.type === "example" && <ExampleIcon color="#9d9d9d" />}
+
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/learn/_components/SubNavigation.tsx b/learn/_components/SubNavigation.tsx
deleted file mode 100644
index efe2c135e..000000000
--- a/learn/_components/SubNavigation.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { SubNavigationItem } from "./SubNavigationItem.tsx";
-
-export function SubNavigation(props: { active: string }) {
-  return (
-    <nav className="w-full px-8 pt-2 mt-16 max-w-screen-xl mx-auto mb-4 flex items-center">
-      <SubNavigationItem page="learn" active={props.active} />
-      <SubNavigationItem page="tutorials" active={props.active} />
-      <SubNavigationItem page="examples" active={props.active} />
-    </nav>
-  );
-}
diff --git a/learn/_components/SubNavigationItem.tsx b/learn/_components/SubNavigationItem.tsx
deleted file mode 100644
index ab784b577..000000000
--- a/learn/_components/SubNavigationItem.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export function SubNavigationItem(props: { page: string; active: string }) {
-  const active = props.active === props.page ? "active" : "";
-  const url = props.page.includes("learn")
-    ? `/${props.page}/`
-    : `/learn/${props.page}/`;
-  return (
-    <a
-      className={`block hover:underline mx-1 px-2 relative capitalize ${active}`}
-      href={url}
-    >
-      {props.page}
-    </a>
-  );
-}
diff --git a/learn/_components/TutorialIcon.tsx b/learn/_components/TutorialIcon.tsx
new file mode 100644
index 000000000..bec554f85
--- /dev/null
+++ b/learn/_components/TutorialIcon.tsx
@@ -0,0 +1,27 @@
+export function TutorialIcon(props: { color: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 502 384"
+      className="inline mr-2"
+      width="1rem"
+    >
+      <path
+        d="M59 45H15v304h200s10 20 36 20 36-20 36-20h200V45h-40"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+      <path
+        d="M215 15H63v281h141c27 0 39 7 47 20h0V46c0-25-15-31-36-31h0Zm36 31c0-25 15-31 36-31h152v281H298c-27 0-39 7-47 20h0"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+    </svg>
+  );
+}
diff --git a/learn/_components/TutorialList.tsx b/learn/_components/TutorialList.tsx
deleted file mode 100644
index ef76a26d8..000000000
--- a/learn/_components/TutorialList.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-export function TutorialList(
-  props: { title: string; items: ({ label: string; id: string })[] },
-) {
-  return (
-    <section className="mb-6">
-      <h2 className="text-lg font-semibold mb-3">{props.title}</h2>
-      <ul className="">
-        {props.items.map((item) => (
-          <li>
-            <a className="homepage-link mb-1 runtime-link" href={item.id}>
-              {item.label}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-}
diff --git a/learn/_components/VideoIcon.tsx b/learn/_components/VideoIcon.tsx
new file mode 100644
index 000000000..c350e69a9
--- /dev/null
+++ b/learn/_components/VideoIcon.tsx
@@ -0,0 +1,32 @@
+export function VideoIcon(props: { color: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 445 348"
+      className="inline mr-2"
+      width="1rem"
+    >
+      <rect
+        x="15"
+        y="15"
+        width="415.3"
+        height="318"
+        rx="56.7"
+        ry="56.7"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+      <path
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+        d="M15 95h415M67 18l74 75m165-78 72 73M228 15l70 70M145 15l77 77m-31 165v-92l98 46-98 46z"
+      />
+    </svg>
+  );
+}
diff --git a/learn/_pages/ExamplePage.tsx b/learn/_pages/ExamplePage.tsx
index 903aa28af..2c5c6af4a 100644
--- a/learn/_pages/ExamplePage.tsx
+++ b/learn/_pages/ExamplePage.tsx
@@ -2,6 +2,8 @@ import { CopyButton } from "../_components/CopyButton.tsx";
 import SnippetComponent from "../_components/SnippetComponent.tsx";
 import { ExampleFromFileSystem } from "../types.ts";
 
+export const layout = "doc.tsx";
+
 type Props = { example: ExampleFromFileSystem };
 
 export default function ExamplePage({ example }: Props) {
diff --git a/learn/_pages/ExamplesPage.tsx b/learn/_pages/ExamplesPage.tsx
deleted file mode 100644
index e0919eab8..000000000
--- a/learn/_pages/ExamplesPage.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { ExampleFromFileSystem } from "../types.ts";
-import { SubNavigation } from "../_components/SubNavigation.tsx";
-
-type Props = { examples: ExampleFromFileSystem[] };
-
-export default function examplesPage({ examples }: Props) {
-  examples = examples || [];
-  const elements = generateExampleGroups(examples);
-
-  return (
-    <>
-      <SubNavigation active="examples" />
-      <main
-        id="content"
-        className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
-      >
-        <div className="pb-16 align-middle md:pb-0 w-full">
-          <div className="mt-8 mb-16 md:mb-24 text-center">
-            <h1 className="text-4xl md:text-6xl font-semibold mb-4">
-              Deno by Example
-            </h1>
-            <p className="max-w-prose mx-auto">
-              A collection of annotated Deno examples, to be used as a reference
-              for how to build with Deno, or as a guide to learn about many of
-              Deno's features.
-              <a
-                href="/runtime/contributing/examples/"
-                className="homepage-link runtime-link text-center mt-4"
-              >
-                Commit an example and we'll send you some stickers!
-              </a>
-            </p>
-          </div>
-          <div
-            className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
-            style={{ columnGap: "3rem" }}
-          >
-            {elements}
-          </div>
-          <div className="w-full flex flex-col px-8 pt-6 mt-20 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-24">
-            <p className="max-w-prose mx-auto text-center">
-              Need an example that isn't here? Or want to add one of your own?
-              <br /> We welcome contributions! <br />
-              You can request more examples, or add your own at our{" "}
-              <a
-                href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
-                class="text-primary hover:underline focus:underline"
-              >
-                GitHub repository
-              </a>
-            </p>
-          </div>
-        </div>
-      </main>
-    </>
-  );
-}
-
-function generateExampleGroups(examples: ExampleFromFileSystem[]) {
-  const groupMap: [string, string][] = [
-    ["Basics", "IconFlag3"],
-    ["Encoding", "IconTransform"],
-    ["CLI", "IconTerminal2"],
-    ["Network", "IconNetwork"],
-    ["System", "IconDeviceDesktop"],
-    ["File System", "IconFiles"],
-    ["Databases", "IconDatabase"],
-    ["Scheduled Tasks", "IconClock"],
-    ["Cryptography", "IconFileShredder"],
-    ["Advanced", "IconStars"],
-    ["Unstable APIs", "IconPersonDigging"],
-  ];
-
-  const groups: Record<string, ExampleFromFileSystem[]> = examples.reduce(
-    (acc: Record<string, ExampleFromFileSystem[]>, example) => {
-      const group = example.parsed.group || "Basics";
-      const lowerGroup = group.toLowerCase();
-
-      if (!acc[lowerGroup]) {
-        acc[lowerGroup] = [];
-      }
-
-      if (
-        !groupMap.find(([category]) => category.toLowerCase() === lowerGroup)
-      ) {
-        groupMap.push([group.toLowerCase(), "IconFlag3"]);
-      }
-
-      acc[lowerGroup].push(example);
-      return acc;
-    },
-    {},
-  );
-
-  return groupMap.map(([category, icon]) => {
-    const group = groups[category.toLowerCase()];
-
-    if (!group) {
-      return null;
-    }
-
-    group.sort((a, b) => a.parsed.sortOrder - b.parsed.sortOrder);
-
-    return (
-      <section
-        key={category}
-        className="mb-12 [-webkit-column-break-inside:avoid;]"
-      >
-        <h2 className="text-xl mb-2 block border-solid border-t-0 border-x-0 border-b border-b-gray-300 dark:border-b-gray-600 pb-1">
-          {category}
-        </h2>
-        <ul className="list-none pl-0">
-          {group.map((example: ExampleFromFileSystem) => {
-            return (
-              <li key={example.parsed.id} className="leading-loose">
-                <a
-                  href={"/learn/examples/" +
-                    example.parsed.id.replace(".ts", "")}
-                  className="text-inherit underline decoration-gray-300 dark:decoration-gray-600"
-                >
-                  {example.parsed.title}
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </section>
-    );
-  });
-}
diff --git a/learn/_pages/LandingPage.tsx b/learn/_pages/LandingPage.tsx
index b253a1a60..5c9c861a7 100644
--- a/learn/_pages/LandingPage.tsx
+++ b/learn/_pages/LandingPage.tsx
@@ -1,75 +1,51 @@
-import { SectionTeaser } from "../_components/SectionTeaser.tsx";
-import { EmbedVideo } from "../_components/EmbedVideo.tsx";
-import { SubNavigation } from "../_components/SubNavigation.tsx";
+import { LearningList } from "../_components/LearningList.tsx";
+import { sidebar } from "../tutorials/_data.ts";
 
 export default function LandingPage() {
+  const componentsPerSidebarItem = sidebar.map((item) => {
+    return (
+      <LearningList
+        title={item.title}
+        items={item.items}
+      />
+    );
+  });
+
   return (
-    <>
-      <SubNavigation active="learn" />
-      <main
-        id="content"
-        className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
+    <main
+      id="content"
+      className="w-full px-8 pt-6 mt-16 max-w-screen-xl mx-auto mb-20"
+    >
+      <div className="w-full mb-8">
+        <h1 className="text-2xl font-semibold sm:text-3xl md:text-4xl mb-3">
+          Learning hub
+        </h1>
+        <p className="max-w-prose mb-6">
+          Walkthrough tutorials, examples and guides to teach you about the Deno
+          runtime <br />and how to use it with your favorite tools.
+        </p>
+      </div>
+      <div className="columns-1 sm:columns-2 lg:columns-3 gap-8">
+        {componentsPerSidebarItem}
+      </div>
+      <p class="max-w-prose mx-auto text-center">
+        Need an example that isn't here? Or want to add one of your own?<br />
+        {" "}
+        We welcome contributions!{" "}
+        <br />You can request more examples, or add your own at our{" "}
+        <a
+          href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
+          class="text-primary hover:underline focus:underline"
+        >
+          GitHub repository
+        </a>
+      </p>
+      <a
+        href="/runtime/contributing/examples/"
+        class="homepage-link runtime-link text-center mt-4"
       >
-        <div className="pb-16 align-middle md:pb-0 w-full">
-          <div className="mt-8 mb-16 md:mb-24 text-center">
-            <h1 className="text-4xl md:text-6xl font-semibold mb-4">
-              Learn Deno
-            </h1>
-            <p className="max-w-prose mx-auto">
-              Tutorials, videos and example code to help you go from Deno
-              beginner to Deno expert.
-            </p>
-          </div>
-          <div className="align-middle flex items-center gap-8 mb-20">
-            <div className="flex-1">
-              <EmbedVideo id="H8VLifMOBHU" />
-            </div>
-            <div className="flex-1 text-center">
-              <h2 className="text-2xl font-semibold ">What is Deno?</h2>
-              <p className="my-4">
-                Deno, is an open-source runtime for TypeScript and JavaScript.
-                Features built-in dev tools, powerful platform APIs, and native
-                support for TypeScript and JSX. In this video we'll introduce
-                Deno and its core concepts
-              </p>
-              <p>
-                <a className="homepage-link runtime-link" href="/learn/videos/">
-                  Watch the getting started video series
-                </a>
-              </p>
-            </div>
-          </div>
-          <h2 className="text-3xl mt-20 mb-8 font-semibold text-center">
-            How do you like to learn?
-          </h2>
-          <div className="align-middle flex flex-row gap-8 mb-20">
-            <div className="flex-1">
-              <SectionTeaser
-                title="By example"
-                text="Our examples section holds a collection of annotated Deno examples, to be used as a reference for how to build with Deno, or as a guide to learn about many of Deno's features."
-                link="/learn/examples/"
-                cta="Explore the examples"
-              />
-            </div>
-            <div className="flex-1">
-              <SectionTeaser
-                title="With video"
-                text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
-                link="/learn/videos/"
-                cta="Explore the videos"
-              />
-            </div>
-            <div className="flex-1">
-              <SectionTeaser
-                title="Through tutorials"
-                text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
-                link="/learn/tutorials/"
-                cta="Explore the tutorials"
-              />
-            </div>
-          </div>
-        </div>
-      </main>
-    </>
+        Commit an example and we'll send you some stickers!
+      </a>
+    </main>
   );
 }
diff --git a/learn/_pages/TutorialsPage.tsx b/learn/_pages/TutorialsPage.tsx
deleted file mode 100644
index 45ec9badd..000000000
--- a/learn/_pages/TutorialsPage.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { TutorialList } from "../_components/TutorialList.tsx";
-import { SubNavigation } from "../_components/SubNavigation.tsx";
-import { sidebar } from "../tutorials/_data.ts";
-
-export default function TutorialPage() {
-  const componentsPerSidebarItem = sidebar.map((item) => {
-    return (
-      <TutorialList
-        title={item.title}
-        items={item.items}
-      />
-    );
-  });
-
-  return (
-    <>
-      <SubNavigation active="tutorials" />
-      <main
-        id="content"
-        className="w-full px-8 pt-6 mt-16 max-w-screen-xl mx-auto mb-20"
-      >
-        <div className="pb-16 md:pb-0 w-full flex items-center">
-          <div className="align-middle gap-8 mb-20">
-            <h1 className="text-4xl md:text-6xl font-semibold mb-4">
-              Tutorials and guides
-            </h1>
-            <p className="max-w-prose mx-auto">
-              Walkthrough tutorials and guides to teach you about the Deno
-              runtime and how to use it with your favorite tools.
-            </p>
-          </div>
-        </div>
-        <div className="grid grid-cols-3 gap-8">
-          {componentsPerSidebarItem}
-        </div>
-      </main>
-    </>
-  );
-}
diff --git a/learn/_pages/VideosPage.tsx b/learn/_pages/VideosPage.tsx
deleted file mode 100644
index 691f9fbf8..000000000
--- a/learn/_pages/VideosPage.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function VideoPage() {
-  return <div>The videos page</div>;
-}
diff --git a/learn/index.tsx b/learn/index.tsx
index 6209a59a4..8bba15ba7 100644
--- a/learn/index.tsx
+++ b/learn/index.tsx
@@ -1,45 +1,11 @@
 import { walkSync } from "@std/fs/walk";
 import LandingPage from "./_pages/LandingPage.tsx";
 import ExamplePage from "./_pages/ExamplePage.tsx";
-import ExamplesPage from "./_pages/ExamplesPage.tsx";
-import TutorialPage from "./_pages/TutorialsPage.tsx";
-import VideoPage from "./_pages/VideosPage.tsx";
 import { ExampleFromFileSystem } from "./types.ts";
 import { parseExample } from "./utils/parseExample.ts";
 
 export const layout = "raw.tsx";
 
-export const sidebar = [
-  {
-    items: [
-      {
-        label: "Runtime Manual",
-        id: "/runtime/",
-      },
-      {
-        label: "Examples",
-        id: "/learn/examples/",
-      },
-      {
-        label: "API reference",
-        id: "/api/deno",
-      },
-      {
-        label: "Deploy",
-        id: "/deploy/manual/",
-      },
-      {
-        label: "Subhosting",
-        id: "/subhosting/manual/",
-      },
-      {
-        label: "deno.com",
-        id: "https://deno.com",
-      },
-    ],
-  },
-];
-
 export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
   const files = [...walkSync("./learn/examples/", { exts: [".ts"] })];
 
@@ -62,24 +28,6 @@ export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
     };
   }
 
-  yield {
-    url: `/learn/tutorials/index.html`,
-    title: `Tutorials`,
-    content: <TutorialPage />,
-  };
-
-  yield {
-    url: `/learn/videos/index.html`,
-    title: `Videos`,
-    content: <VideoPage />,
-  };
-
-  yield {
-    url: `/learn/examples/index.html`,
-    title: `Deno by Example`,
-    content: <ExamplesPage examples={examples} />,
-  };
-
   yield {
     url: `/learn/index.html`,
     title: `Learning Hub`,
diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
index efbd46a83..a7bfa19bd 100644
--- a/learn/tutorials/_data.ts
+++ b/learn/tutorials/_data.ts
@@ -1,61 +1,132 @@
-import { Sidebar } from "../../types.ts";
-
 export const sidebar = [
   {
     title: "Basics",
     items: [
       {
-        label: "Hello World!",
-        id: "/learn/tutorials/hello_world/",
+        label: "Run a script",
+        id: "/learn/tutorials/run_script/",
+        type: "tutorial",
       },
       {
-        label: "Fetch data",
-        id: "/learn/tutorials/fetch_data/",
+        label: "Hello World",
+        id: "/learn/examples/hello-world/",
+        type: "example",
+      },
+      {
+        label: "Built in TypeScript support",
+        id: "/learn/examples/typescript/",
+        type: "example",
+      },
+      {
+        label: "Initialize a project",
+        id: "/learn/tutorials/initialize_project/",
+        type: "tutorial",
       },
       {
         label: "Executable scripts",
         id: "/learn/tutorials/hashbang/",
+        type: "tutorial",
       },
       {
-        label: "Updating from CommonJS to ESM",
+        label: "Update from CommonJS to ESM",
         id: "/learn/tutorials/cjs_to_esm/",
+        type: "tutorial",
       },
       {
-        label: "Write a file server",
+        label: "Import and export functions",
+        id: "/learn/examples/import-export",
+        type: "example",
+      },
+      {
+        label: "Use Node.js' built-in modules",
+        id: "/learn/examples/node/",
+        type: "example",
+      },
+      {
+        label: "Import modules from npm",
+        id: "/learn/examples/npm/",
+        type: "example",
+      },
+      {
+        label: "Simple file server",
         id: "/learn/tutorials/file_server/",
+        type: "tutorial",
+      },
+    ],
+  },
+  {
+    title: "Web standard APIs",
+    items: [
+      {
+        label: "Manipulating & parsing URLs",
+        id: "/learn/examples/url-parsing/",
+        type: "example",
+      },
+      {
+        label: "Fetch and stream data",
+        id: "/learn/tutorials/fetch_data/",
+        type: "tutorial",
+      },
+      {
+        label: "Set timeout and intervals",
+        id: "/learn/examples/timers/",
+        type: "example",
+      },
+      {
+        label: "Logging with colors",
+        id: "/learn/examples/color-logging/",
+        type: "example",
+      },
+      {
+        label: "Web workers",
+        id: "/learn/examples/web-workers/",
+        type: "example",
+      },
+      {
+        label: "Web assembly",
+        id: "/learn/examples/webassembly/",
+        type: "example",
       },
     ],
   },
+
   {
     title: "Web frameworks and libraries",
     items: [
       {
         label: "Build a React App",
         id: "/learn/tutorials/react/",
+        type: "tutorial",
       },
       {
         label: "Build a React app with create-vite",
         id: "/learn/tutorials/create-react/",
+        type: "tutorial",
       },
       {
         label: "Build a Next.js app",
         id: "/learn/tutorials/next/",
+        type: "tutorial",
       },
       {
         label: "Build a Fresh app",
         id: "https://fresh.deno.dev/docs/getting-started/create-a-project",
+        type: "tutorial",
       },
       {
         label: "Build a Vue app",
         id: "/learn/tutorials/vue/",
+        type: "tutorial",
       },
       {
         label: "Use Express with Deno",
-        id: "/learn/tutorials/express/",
+        id: "/learn/tutorials/learn/express/",
+        type: "tutorial",
       },
       {
         label: "How to use Apollo with Deno",
         id: "/learn/tutorials/apollo/",
+        type: "tutorial",
       },
     ],
   },
@@ -65,26 +136,32 @@ export const sidebar = [
       {
         label: "AWS Lambda",
         id: "/learn/tutorials/aws_lambda/",
+        type: "tutorial",
       },
       {
         label: "AWS Lightsail",
         id: "/learn/tutorials/aws_lightsail/",
+        type: "tutorial",
       },
       {
         label: "Cloudflare workers",
         id: "/learn/tutorials/cloudflare_workers/",
+        type: "tutorial",
       },
       {
         label: "Digital Ocean",
         id: "/learn/tutorials/digital_ocean/",
+        type: "tutorial",
       },
       {
         label: "Google Cloud Run",
         id: "/learn/tutorials/google_cloud_run/",
+        type: "tutorial",
       },
       {
         label: "Kinsta",
         id: "/learn/tutorials/kinsta/",
+        type: "tutorial",
       },
     ],
   },
@@ -94,63 +171,461 @@ export const sidebar = [
       {
         label: "Connecting to databases",
         id: "/learn/tutorials/connecting_to_databases/",
+        type: "tutorial",
       },
       {
         label: "Use MySQL2 with Deno",
         id: "/learn/tutorials/mysql2/",
+        type: "tutorial",
       },
       {
         label: "Use PlanetScale with Deno",
         id: "/learn/tutorials/planetscale/",
+        type: "tutorial",
       },
       {
         label: "Use Redis with Deno",
         id: "/learn/tutorials/redis/",
+        type: "tutorial",
       },
       {
         label: "Mongoose and MongoDB",
         id: "/learn/tutorials/mongoose/",
+        type: "tutorial",
       },
       {
         label: "Use Prisma with Deno",
         id: "/learn/tutorials/prisma/",
+        type: "tutorial",
+      },
+      {
+        label: "Connect to Redis",
+        id: "/learn/examples/redis",
+        type: "example",
+      },
+      {
+        label: "Connect to Postgres",
+        id: "/learn/examples/postgres",
+        type: "example",
+      },
+      {
+        label: "Connect to Supabase",
+        id: "/learn/examples/supabase",
+        type: "example",
+      },
+      {
+        label: "Connect to MongoDB",
+        id: "/learn/examples/mongo",
+        type: "example",
+      },
+      {
+        label: "Connect to SQLite",
+        id: "/learn/examples/sqlite",
+        type: "example",
       },
     ],
   },
   {
-    title: "Advanced",
+    title: "Encoding",
+    items: [
+      {
+        label: "Hex and base64 encoding",
+        id: "/learn/examples/hex-base64-encoding",
+        type: "example",
+      },
+      {
+        label: "Parsing and serializing TOML",
+        id: "/learn/examples/parsing-serializing-toml",
+        type: "example",
+      },
+      {
+        label: "Importing JSON",
+        id: "/learn/examples/importing-json",
+        type: "example",
+      },
+      {
+        label: "Parsing and serializing CSV",
+        id: "/learn/examples/parsing-serializing-csv",
+        type: "example",
+      },
+      {
+        label: "Parsing and serializing JSON",
+        id: "/learn/examples/parsing-serializing-json",
+        type: "example",
+      },
+      {
+        label: "Parsing and serializing YAML",
+        id: "/learn/examples/parsing-serializing-yaml",
+        type: "example",
+      },
+      {
+        label: "Manipulating byte arrays",
+        id: "/learn/examples/byte-manipulation",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "CLI",
+    items: [
+      {
+        label: "Input prompts",
+        id: "/learn/examples/prompts",
+        type: "example",
+      },
+      {
+        label: "Permission management",
+        id: "/learn/examples/permissions",
+        type: "example",
+      },
+      {
+        label: "Command line arguments",
+        id: "/learn/examples/command-line-arguments",
+        type: "example",
+      },
+      {
+        label: "Writing tests",
+        id: "/learn/examples/writing-tests",
+        type: "example",
+      },
+      {
+        label: "Getting the Deno version",
+        id: "/learn/examples/deno-version",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "Network",
+    items: [
+      {
+        label: "HTTP server: Streaming",
+        id: "/learn/examples/http-server-streaming",
+        type: "example",
+      },
+      {
+        label: "TCP connector: Ping",
+        id: "/learn/examples/tcp-connector",
+        type: "example",
+      },
+      {
+        label: "HTTP server: Routing",
+        id: "/learn/examples/http-server-routing",
+        type: "example",
+      },
+      {
+        label: "HTTP Server: Hello world",
+        id: "/learn/examples/http-server",
+        type: "example",
+      },
+      {
+        label: "TCP Echo Server",
+        id: "/learn/examples/tcp-echo-server",
+        type: "example",
+      },
+      {
+        label: "Piping streams",
+        id: "/learn/examples/piping-streams",
+        type: "example",
+      },
+      {
+        label: "HTTP requests",
+        id: "/learn/examples/http-requests",
+        type: "example",
+      },
+      {
+        label: "HTTP server: CRUD with SQLite3",
+        id: "/learn/examples/http-server-oak-crud-middleware-with-sqlite3-db",
+        type: "example",
+      },
+      {
+        label: "Hono HTTP server",
+        id: "/learn/examples/hono",
+        type: "example",
+      },
+      {
+        label: "TCP listener: Ping",
+        id: "/learn/examples/tcp-listener",
+        type: "example",
+      },
+      {
+        label: "TCP/TLS connector: Ping",
+        id: "/learn/examples/tls-connector",
+        type: "example",
+      },
+      {
+        label: "Running DNS queries",
+        id: "/learn/examples/dns-queries",
+        type: "example",
+      },
+      {
+        label: "HTTP server: WebSockets",
+        id: "/learn/examples/http-server-websocket",
+        type: "example",
+      },
+      {
+        label: "Outbound WebSockets",
+        id: "/learn/examples/websocket",
+        type: "example",
+      },
+      {
+        label: "TCP/TLS listener: Ping",
+        id: "/learn/examples/tls-listener",
+        type: "example",
+      },
+      {
+        label: "HTTP server: Serving files",
+        id: "/learn/examples/http-server-files",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "System",
     items: [
+      {
+        label: "Handling OS signals",
+        id: "/learn/examples/os-signals",
+        type: "example",
+      },
+      {
+        label: "Benchmarking",
+        id: "/learn/examples/benchmarking",
+        type: "example",
+      },
       {
         label: "Create a subprocess",
         id: "/learn/tutorials/subprocess/",
+        type: "tutorial",
+      },
+      {
+        label: "Subprocess Spawning",
+        id: "/learn/examples/subprocess-running-files",
+        type: "example",
+      },
+      {
+        label: "Collecting output from subprocesses",
+        id: "/learn/examples/subprocesses-output",
+        type: "example",
+      },
+      {
+        label: "Reading system metrics",
+        id: "/learn/examples/reading-system-metrics",
+        type: "example",
+      },
+      {
+        label: "Process information",
+        id: "/learn/examples/pid",
+        type: "example",
+      },
+      {
+        label: "Environment variables",
+        id: "/learn/examples/environment-variables",
+        type: "example",
+      },
+      {
+        label: "Subprocesses: Spawning",
+        id: "/learn/examples/subprocesses-spawn",
+        type: "example",
       },
       {
         label: "Handle OS signals",
         id: "/learn/tutorials/os_signals/",
+        type: "tutorial",
+      },
+    ],
+  },
+  {
+    title: "FileSystem",
+    items: [
+      {
+        label: "Path operations",
+        id: "/learn/examples/path-operations",
+        type: "example",
+      },
+      {
+        label: "Reading files",
+        id: "/learn/examples/reading-files",
+        type: "example",
+      },
+      {
+        label: "Moving/Renaming files",
+        id: "/learn/examples/moving-renaming-files",
+        type: "example",
+      },
+      {
+        label: "Watching the filesystem",
+        id: "/learn/examples/watching-files",
+        type: "example",
+      },
+      {
+        label: "Creating & removing directories",
+        id: "/learn/examples/create-remove-directories",
+        type: "example",
+      },
+      {
+        label: "Unix cat",
+        id: "/learn/examples/unix-cat",
+        type: "example",
+      },
+      {
+        label: "Checking for file existence",
+        id: "/learn/examples/checking-file-existence",
+        type: "example",
+      },
+      {
+        label: "Creating & resolving symlinks",
+        id: "/learn/examples/symlinks",
+        type: "example",
+      },
+      {
+        label: "Temporary files & directories",
+        id: "/learn/examples/temporary-files",
+        type: "example",
+      },
+      {
+        label: "Walking directories",
+        id: "/learn/examples/walking-directories",
+        type: "example",
+      },
+      {
+        label: "Streaming file operations",
+        id: "/learn/examples/streaming-files",
+        type: "example",
+      },
+      {
+        label: "Unzip gzipped file",
+        id: "/learn/examples/unzip-gzipped-file",
+        type: "example",
+      },
+      {
+        label: "Deleting files",
+        id: "/learn/examples/deleting-files",
+        type: "example",
+      },
+      {
+        label: "Writing files",
+        id: "/learn/examples/writing-files",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "Crypotography",
+    items: [
+      {
+        label: "Generating & validating UUIDs",
+        id: "/learn/examples/uuids",
+        type: "example",
       },
+      {
+        label: "ULID",
+        id: "/learn/examples/ulid",
+        type: "example",
+      },
+      {
+        label: "Hashing",
+        id: "/learn/examples/hashing",
+        type: "example",
+      },
+      {
+        label: "RSASSA-PKCS1-v1_5 Signature and Verification",
+        id: "/learn/examples/rsa-signature",
+        type: "example",
+      },
+      {
+        label: "HMAC Generation and Verification",
+        id: "/learn/examples/hmac-generate-verify",
+        type: "example",
+      },
+      {
+        label: "AES Encryption and Decryption",
+        id: "/learn/examples/aes-encryption",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "Advanced",
+    items: [
       {
         label: "File system events",
         id: "/learn/tutorials/file_system_events/",
+        type: "tutorial",
       },
       {
         label: "Module Metadata",
         id: "/learn/tutorials/module_metadata/",
+        type: "tutorial",
       },
       {
         label: "File Based Routing",
         id: "/learn/tutorials/file_based_routing/",
+        type: "tutorial",
       },
       {
         label: "Build a chat app with WebSockets",
         id: "/learn/tutorials/chat_app/",
+        type: "tutorial",
       },
       {
         label: "Build a word finder app",
         id: "/learn/tutorials/word_finder/",
+        type: "tutorial",
+      },
+      {
+        label: "Connect to OpenAI - Chat completion",
+        id: "/learn/examples/openai-chat-completion/",
+        type: "example",
+      },
+      {
+        label: "User Data Processing with Deno Collections",
+        id: "/learn/examples/data-processing",
+        type: "example",
+      },
+      {
+        label: "Exponential backoff",
+        id: "/learn/examples/exponential-backoff/",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "Unstable APIs",
+    items: [
+      {
+        label: "Deno KV watch",
+        id: "/learn/examples/kv-watch",
+        type: "example",
+      },
+      {
+        label: "Deno Cron",
+        id: "/learn/examples/cron",
+        type: "example",
+      },
+      {
+        label: "UDP listener: Ping",
+        id: "/learn/examples/udp-listener",
+        type: "example",
+      },
+      {
+        label: "Deno queues",
+        id: "/learn/examples/queues",
+        type: "example",
+      },
+      {
+        label: "UDP connector: Ping",
+        id: "/learn/examples/udp-connector",
+        type: "example",
+      },
+      {
+        label: "Deno KV: Key/Value database",
+        id: "/learn/examples/kv",
+        type: "example",
       },
     ],
   },
 ] satisfies Sidebar;
 
-export const sectionTitle = "Tutorials";
-export const sectionHref = "/learn/tutorials";
+export const sectionTitle = "Learning hub";
+export const sectionHref = "/learn/";
diff --git a/learn/tutorials/initialize_project.md b/learn/tutorials/initialize_project.md
new file mode 100644
index 000000000..c84b48358
--- /dev/null
+++ b/learn/tutorials/initialize_project.md
@@ -0,0 +1,102 @@
+---
+title: "Initialize a project"
+oldUrl:
+---
+
+## Initialize a project
+
+While it is possible to run scripts directly with `deno run`, for larger
+projects it is recommended to create a project structure. This way you can
+organize your code, manage dependencies, script tasks and run tests more easily.
+
+Initialize a new project by running the following command:
+
+```sh
+deno init my_project
+```
+
+Where `my_project` is the name of your project. You can
+[read more about the project structure](/runtime/getting_started/first_project/).
+
+### Run your project
+
+Navigate to the project directory:
+
+```sh
+cd my_project
+```
+
+Then you can run the project directly using the `deno task` command:
+
+```sh
+deno run dev
+```
+
+Take a look in the `deno.json` file in your new project. You should see a `dev`
+task in the "tasks" field.
+
+```json title="deno.json"
+"tasks": {
+  "dev": "deno run --watch main.ts"
+},
+```
+
+The `dev` task is a common task that runs the project in development mode. As
+you can see, it runs the `main.ts` file with the `--watch` flag, which will
+automatically reload the script when changes are made. You can see this in
+action if you open the `main.ts` file and make a change.
+
+### Run the tests
+
+In the project directory run:
+
+```sh
+deno test
+```
+
+This will execute all the tests in the project. You can read more about
+[testing in Deno](/runtime/fundamentals/testing/) and we'll cover tests in a
+little more depth in a later tutorial. At the moment you have one test file,
+`main_test.ts`, which tests the `add` function in `main.ts`.
+
+### Adding to your project
+
+The `main.ts` file serves as the entry point for your application. It’s where
+you’ll write your main program logic. When developing your project you will
+start by removing the default addition program and replace it with your own
+code. For example, if you’re building a web server, this is where you’d set up
+your routes and handle requests.
+
+Beyond the initial files, you’ll likely create additional modules (files) to
+organize your code. Consider grouping related functionality into separate files.
+Remember that Deno [supports ES modules](/runtime/fundamentals/modules/), so you
+can use import and export statements to structure your code.
+
+Example folder structure for a deno project:
+
+```sh
+my_project/
+├── deno.json
+├── main.ts
+├── main_test.ts
+├── routes/
+│   ├── home.ts
+│   ├── about.ts
+├── services/
+│   ├── user.ts
+│   ├── post.ts
+└──utils/
+    ├── logger.ts
+    ├── logger_test.ts
+    ├── validator_test.ts
+    └── validator.ts
+```
+
+This kind of structure keeps your project clean and makes it easier to find and
+manage files.
+
+🦕 Congratulations! Now you know how to create a brand new project with
+`deno init`. Remember that Deno encourages simplicity and avoids complex build
+tools. Keep your project modular, testable, and organized. As your project
+grows, adapt the structure to fit your needs. And most importantly, have fun
+exploring Deno’s capabilities!
diff --git a/learn/tutorials/hello_world.md b/learn/tutorials/run_script.md
similarity index 50%
rename from learn/tutorials/hello_world.md
rename to learn/tutorials/run_script.md
index ebf223a6d..c7750515b 100644
--- a/learn/tutorials/hello_world.md
+++ b/learn/tutorials/run_script.md
@@ -1,5 +1,5 @@
 ---
-title: "Hello World"
+title: "Run a script"
 oldUrl:
   - /runtime/manual/examples/hello_world/
   - /runtime/tutorials/init_project/
@@ -99,102 +99,6 @@ Hello Sarah
 Hello Kai
 ```
 
-## Initialize a project
-
-As you've just seen, while it is possible to run scripts directly with
-`deno run`, for larger projects it is recommended to create a project structure.
-This way you can organize your code, manage dependencies, script tasks and run
-tests more easily.
-
-Initialize a new project by running the following command:
-
-```sh
-deno init my_project
-```
-
-Where `my_project` is the name of your project. You can
-[read more about the project structure](/runtime/getting_started/first_project/).
-
-### Run your project
-
-Navigate to the project directory:
-
-```sh
-cd my_project
-```
-
-Then you can run the project directly using the `deno task` command:
-
-```sh
-deno task dev
-```
-
-Take a look in the `deno.json` file in your new project. You should see a `dev`
-task in the "tasks" field.
-
-```json title="deno.json"
-"tasks": {
-  "dev": "deno run --watch main.ts"
-},
-```
-
-The `dev` task is a common task that runs the project in development mode. As
-you can see, it runs the `main.ts` file with the `--watch` flag, which will
-automatically reload the script when changes are made. You can see this in
-action if you open the `main.ts` file and make a change.
-
-### Run the tests
-
-In the project directory run:
-
-```sh
-deno test
-```
-
-This will execute all the tests in the project. You can read more about
-[testing in Deno](/runtime/fundamentals/testing/) and we'll cover tests in a
-little more depth in a later tutorial. At the moment you have one test file,
-`main_test.ts`, which tests the `add` function in `main.ts`.
-
-### Adding to your project
-
-The `main.ts` file serves as the entry point for your application. It’s where
-you’ll write your main program logic. When developing your project you will
-start by removing the default addition program and replace it with your own
-code. For example, if you’re building a web server, this is where you’d set up
-your routes and handle requests.
-
-Beyond the initial files, you’ll likely create additional modules (files) to
-organize your code. Consider grouping related functionality into separate files.
-Remember that Deno [supports ES modules](/runtime/fundamentals/modules/), so you
-can use import and export statements to structure your code.
-
-Example folder structure for a deno project:
-
-```sh
-my_project/
-├── deno.json
-├── main.ts
-├── main_test.ts
-├── routes/
-│   ├── home.ts
-│   ├── about.ts
-├── services/
-│   ├── user.ts
-│   ├── post.ts
-└──utils/
-    ├── logger.ts
-    ├── logger_test.ts
-    ├── validator_test.ts
-    └── validator.ts
-```
-
-This kind of structure keeps your project clean and makes it easier to find and
-manage files.
-
 🦕 Congratulations! Now you know how to create a simple script in both JS and TS
-and how to run it in Deno with the `deno run` command and how to create a brand
-new project with `deno init`. Remember that Deno encourages simplicity and
-avoids complex build tools. Keep your project modular, testable, and organized.
-As your project grows, adapt the structure to fit your needs. And most
-importantly, have fun exploring Deno’s capabilities!
+and how to run it in Deno with the `deno run` command. Keep exploring the
+tutorials and examples to learn more about Deno!
diff --git a/oldurls.json b/oldurls.json
index 52126314d..6fa6bdacb 100644
--- a/oldurls.json
+++ b/oldurls.json
@@ -1,5 +1,5 @@
 {
-  "/runtime/tutorials/read_write_files/": "/learn/examples/",
+  "/runtime/tutorials/read_write_files/": "/learn/",
   "/runtime/tutorials/unix_cat/": "/learn/examples/unix-cat/",
   "/learn/examples/dependency-management/": "/runtime/fundamentals/configuration/#dependencies",
   "/runtime/tutorials/tcp_echo/": "/learn/examples/tcp-echo-server/",
@@ -7,11 +7,13 @@
   "/runtime/reference/deploying_and_embedding/": "/deploy/manual/",
   "/runtime/manual/advanced/embedding_deno/": "/deploy/manual/",
   "/runtime/manual/advanced/deploying_deno/": "/deploy/manual/",
-  "/runtime/reference/tcp_udp_connections/": "/learn/examples/",
+  "/runtime/reference/tcp_udp_connections/": "/learn/",
   "/runtime/getting_started/": "/runtime/",
   "/api/deno/~/Deno.TlsConn.rid/": "/runtime/reference/migration_guide/#rid",
   "/manual@main/advanced/typescript/faqs": "/runtime/fundamentals/typescript/",
-  "/runtime/tutorials/": "/learn/tutorials/",
-  "/runtime/manual/examples/how_to_with_npm/": "/learn/tutorials/",
-  "/runtime/manual/tutorials/": "/learn/tutorials/"
+  "/runtime/tutorials/": "/learn/",
+  "/runtime/manual/examples/how_to_with_npm/": "/learn/",
+  "/runtime/manual/tutorials/": "/learn/",
+  "/runtime/learn/tutorials/": "/learn/",
+  "/runtime/learn/examples/": "/learn/"
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index d4ac659af..2edab4c99 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@
 /** @type {import('npm:tailwindcss').Config} */
 export default {
   content: [
-    "{by-example,deploy,_components,_includes,runtime,static,subhosting,404}/**/*.{md,ts,tsx}",
+    "{by-example,deploy,_components,_includes,runtime,static,subhosting,404,learn}/**/*.{md,ts,tsx}",
     "*.{ts,tsx}",
   ],
   corePlugins: {

From 6d5c114bbf56293bb371fb143293689778a33c22 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Thu, 28 Nov 2024 17:29:58 +0000
Subject: [PATCH 18/23] fix urls

---
 learn/tutorials/_data.ts | 2 +-
 oldurls.json             | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
index a7bfa19bd..f337f0932 100644
--- a/learn/tutorials/_data.ts
+++ b/learn/tutorials/_data.ts
@@ -120,7 +120,7 @@ export const sidebar = [
       },
       {
         label: "Use Express with Deno",
-        id: "/learn/tutorials/learn/express/",
+        id: "/learn/tutorials/express/",
         type: "tutorial",
       },
       {
diff --git a/oldurls.json b/oldurls.json
index 6fa6bdacb..4c8ab21ce 100644
--- a/oldurls.json
+++ b/oldurls.json
@@ -14,6 +14,6 @@
   "/runtime/tutorials/": "/learn/",
   "/runtime/manual/examples/how_to_with_npm/": "/learn/",
   "/runtime/manual/tutorials/": "/learn/",
-  "/runtime/learn/tutorials/": "/learn/",
-  "/runtime/learn/examples/": "/learn/"
+  "/learn/tutorials/": "/learn/",
+  "/learn/examples/": "/learn/"
 }

From d33c9e10fdc922afd1105df5e62a82d34b9244da Mon Sep 17 00:00:00 2001
From: Phil Hawksworth <phil@deno.com>
Date: Thu, 28 Nov 2024 18:03:32 +0000
Subject: [PATCH 19/23] Include videos in learning list (#1206)

---
 learn/_components/LearningList.tsx |   2 +
 learn/tutorials/_data.ts           | 109 ++++++++++++++++++++++++++++-
 2 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/learn/_components/LearningList.tsx b/learn/_components/LearningList.tsx
index 76f5dc553..4e65d5bee 100644
--- a/learn/_components/LearningList.tsx
+++ b/learn/_components/LearningList.tsx
@@ -1,5 +1,6 @@
 import { TutorialIcon } from "./TutorialIcon.tsx";
 import { ExampleIcon } from "./ExampleIcon.tsx";
+import { VideoIcon } from "./VideoIcon.tsx";
 
 export function LearningList(
   props: {
@@ -19,6 +20,7 @@ export function LearningList(
             >
               {item.type === "tutorial" && <TutorialIcon color="#9d9d9d" />}
               {item.type === "example" && <ExampleIcon color="#9d9d9d" />}
+              {item.type === "video" && <VideoIcon color="#9d9d9d" />}
 
               {item.label}
             </a>
diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
index f337f0932..5b3611cd9 100644
--- a/learn/tutorials/_data.ts
+++ b/learn/tutorials/_data.ts
@@ -2,6 +2,12 @@ export const sidebar = [
   {
     title: "Basics",
     items: [
+      {
+        label: "What is Deno?",
+        id:
+          "https://www.youtube.com/watch?v=KPTOo4k8-GE&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe",
+        type: "video",
+      },
       {
         label: "Run a script",
         id: "/learn/tutorials/run_script/",
@@ -17,6 +23,12 @@ export const sidebar = [
         id: "/learn/examples/typescript/",
         type: "example",
       },
+      {
+        label: "Your Deno Development Environment",
+        id:
+          "https://www.youtube.com/watch?v=BFfrGrLm2tw&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=3",
+        type: "video",
+      },
       {
         label: "Initialize a project",
         id: "/learn/tutorials/initialize_project/",
@@ -27,16 +39,51 @@ export const sidebar = [
         id: "/learn/tutorials/hashbang/",
         type: "tutorial",
       },
+      {
+        label: "All-in-one tooling",
+        id:
+          "https://www.youtube.com/watch?v=-4e9DkUrCr4&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=5",
+        type: "video",
+      },
+      {
+        label: "Tasks and configuration with deno.json",
+        id:
+          "https://www.youtube.com/watch?v=bTmO5Tfgke4&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=10",
+        type: "video",
+      },
       {
         label: "Update from CommonJS to ESM",
         id: "/learn/tutorials/cjs_to_esm/",
         type: "tutorial",
       },
+
       {
         label: "Import and export functions",
         id: "/learn/examples/import-export",
         type: "example",
       },
+      {
+        label: "Interoperability with Node.js",
+        id:
+          "https://www.youtube.com/watch?v=mgX1ymfqPSQ&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=2",
+        type: "video",
+      },
+      {
+        label: "Introduction to Deno APIs",
+        id:
+          "https://www.youtube.com/watch?v=p28ujFMrdA0&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=7",
+        type: "video",
+      },
+      {
+        label: "Simple file server",
+        id: "/learn/tutorials/file_server/",
+        type: "tutorial",
+      },
+    ],
+  },
+  {
+    title: "Modules and package management",
+    items: [
       {
         label: "Use Node.js' built-in modules",
         id: "/learn/examples/node/",
@@ -48,15 +95,35 @@ export const sidebar = [
         type: "example",
       },
       {
-        label: "Simple file server",
-        id: "/learn/tutorials/file_server/",
-        type: "tutorial",
+        label: "Backward Compatibility with Node.js and npm",
+        id:
+          "https://www.youtube.com/watch?v=QPLchkJ7eas&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=12",
+        type: "video",
+      },
+      {
+        label: "ECMAScript Modules in Deno",
+        id:
+          "https://www.youtube.com/watch?v=cTFBiwYY3vs&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=9",
+        type: "video",
+      },
+      {
+        label: "Publishing Modules with JSR",
+        id:
+          "https://www.youtube.com/watch?v=7uiL4WYvZVs&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=8",
+        type: "video",
       },
     ],
   },
+
   {
     title: "Web standard APIs",
     items: [
+      {
+        label: "Browser APIs in Deno",
+        id:
+          "https://www.youtube.com/watch?v=oxVwTT-rZRo&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=6",
+        type: "video",
+      },
       {
         label: "Manipulating & parsing URLs",
         id: "/learn/examples/url-parsing/",
@@ -93,6 +160,12 @@ export const sidebar = [
   {
     title: "Web frameworks and libraries",
     items: [
+      {
+        label: "TypeScript and JSX in Deno",
+        id:
+          "https://www.youtube.com/watch?v=KoM8ahe8O74&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=11",
+        type: "video",
+      },
       {
         label: "Build a React App",
         id: "/learn/tutorials/react/",
@@ -128,6 +201,12 @@ export const sidebar = [
         id: "/learn/tutorials/apollo/",
         type: "tutorial",
       },
+      {
+        label: "Build an API server with TypeScript",
+        id:
+          "https://www.youtube.com/watch?v=J8kZ-s-5-ms&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=13",
+        type: "video",
+      },
     ],
   },
   {
@@ -138,6 +217,12 @@ export const sidebar = [
         id: "/learn/tutorials/aws_lambda/",
         type: "tutorial",
       },
+      {
+        label: "Deploy Deno to AWS Lambda",
+        id:
+          "https://www.youtube.com/watch?v=_xLOrT3cWK4&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=17",
+        type: "video",
+      },
       {
         label: "AWS Lightsail",
         id: "/learn/tutorials/aws_lightsail/",
@@ -163,6 +248,12 @@ export const sidebar = [
         id: "/learn/tutorials/kinsta/",
         type: "tutorial",
       },
+      {
+        label: "Deploying Deno with Docker",
+        id:
+          "https://www.youtube.com/watch?v=VRryNeYm6yw&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=16",
+        type: "video",
+      },
     ],
   },
   {
@@ -268,6 +359,12 @@ export const sidebar = [
   {
     title: "CLI",
     items: [
+      {
+        label: "Build a Command Line Utility",
+        id:
+          "https://www.youtube.com/watch?v=TUxj2TS5pNo&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=14",
+        type: "video",
+      },
       {
         label: "Input prompts",
         id: "/learn/examples/prompts",
@@ -568,6 +665,12 @@ export const sidebar = [
         id: "/learn/tutorials/chat_app/",
         type: "tutorial",
       },
+      {
+        label: "Build a Real-Time WebSocket Application",
+        id:
+          "https://www.youtube.com/watch?v=FC4IrkHEg4A&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=15",
+        type: "video",
+      },
       {
         label: "Build a word finder app",
         id: "/learn/tutorials/word_finder/",

From c95cd8b91be6c8c57403f2fc170e89185b063f65 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Fri, 29 Nov 2024 09:48:37 +0000
Subject: [PATCH 20/23] =?UTF-8?q?separate=20out=20examples=20and=20landing?=
 =?UTF-8?q?page=20generators,=20make=20new=20layout=20for=E2=80=A6=20(#120?=
 =?UTF-8?q?7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _includes/doc.tsx              |  28 ++++----
 _includes/raw_with_sidebar.tsx | 118 +++++++++++++++++++++++++++++++++
 learn/_pages/ExamplePage.tsx   |   2 -
 learn/index.examples.tsx       |  33 +++++++++
 learn/index.tsx                |  27 +-------
 learn/tutorials/_data.ts       |   2 +-
 6 files changed, 170 insertions(+), 40 deletions(-)
 create mode 100644 _includes/raw_with_sidebar.tsx
 create mode 100644 learn/index.examples.tsx

diff --git a/_includes/doc.tsx b/_includes/doc.tsx
index 2b3fd780a..a792fe48f 100644
--- a/_includes/doc.tsx
+++ b/_includes/doc.tsx
@@ -185,18 +185,22 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
           </div>
         </main>
 
-        <aside class="hidden xl:block pb-8 pr-8 col-span-2">
-          <div
-            class="py-2 sticky overflow-y-auto top-4 h-[calc(100vh-7rem)]"
-            id="toc"
-          >
-            <ul class="border-l border-foreground-tertiary dark:border-background-tertiary py-2 pl-2 relative">
-              {(props.toc as TableOfContentsItem_[]).map((item) => (
-                <TableOfContentsItem item={item} />
-              ))}
-            </ul>
-          </div>
-        </aside>
+        {(props.toc as TableOfContentsItem_[]).length > 0 &&
+          (
+            <aside class="hidden xl:block pb-8 pr-8 col-span-2">
+              <div
+                class="py-2 sticky overflow-y-auto top-4 h-[calc(100vh-7rem)]"
+                id="toc"
+              >
+                <ul class="border-l border-foreground-tertiary dark:border-background-tertiary py-2 pl-2 relative">
+                  {(props.toc as TableOfContentsItem_[]).map((item) => (
+                    <TableOfContentsItem item={item} />
+                  ))}
+                </ul>
+              </div>
+            </aside>
+          )}
+
         <div class="xl:col-span-full">
           <props.comp.Footer />
         </div>
diff --git a/_includes/raw_with_sidebar.tsx b/_includes/raw_with_sidebar.tsx
new file mode 100644
index 000000000..d66aff036
--- /dev/null
+++ b/_includes/raw_with_sidebar.tsx
@@ -0,0 +1,118 @@
+import Logo from "../_components/Logo.tsx";
+import { Sidebar as Sidebar_, SidebarItem } from "../types.ts";
+import { NavigationButton } from "../_components/NavigationButton.tsx";
+import renderCommand from "./renderCommand.tsx";
+
+export const layout = "layout.tsx";
+
+export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
+  const sidebar = props.sidebar as Sidebar_;
+  const file = props.page.sourcePath;
+  if (sidebar === undefined) {
+    throw new Error("Missing sidebar for " + props.url);
+  }
+
+  function walk(
+    sidebarItems: SidebarItem[],
+  ): [SidebarItem[], number] | undefined {
+    for (let i = 0; i < sidebarItems.length; i++) {
+      const sidebarItem = sidebarItems[i];
+      if (typeof sidebarItem === "string") {
+        const data = props.search.data(sidebarItem)!;
+        if (!data) {
+          throw new Error(`No data found for ${sidebarItem}`);
+        }
+
+        if (data.url == props.url) {
+          return [sidebarItems, i];
+        }
+      } else if ("id" in sidebarItem && sidebarItem.id === props.url) {
+        return [sidebarItems, i];
+      } else if ("items" in sidebarItem) {
+        const results = walk(sidebarItem.items);
+        if (results) {
+          return results;
+        }
+      }
+    }
+  }
+
+  let parentNavigation: SidebarItem[] | undefined = undefined;
+  let index: number | undefined = undefined;
+  for (const sidebarElement of sidebar) {
+    const items = walk(sidebarElement.items);
+
+    if (items) {
+      [parentNavigation, index] = items;
+      break;
+    }
+  }
+
+  let renderedCommand = null;
+
+  if (props.command) {
+    const { rendered, toc } = renderCommand(props.command, helpers);
+    renderedCommand = rendered;
+    props.toc = toc.concat(...props.toc);
+  }
+
+  let isLearnHub = props.url.includes("learn");
+
+  return (
+    <>
+      <aside
+        class="flex flex-col absolute top-0 xl:top-16 bottom-0 -translate-x-74 xl:left-0 sidebar-open:translate-x-0 w-74 border-r border-foreground-tertiary bg-background-primary z-50 xl:z-0 xl:translate-x-0 transition-transform"
+        id="sidebar"
+        data-open="false"
+      >
+        <div class="xl:hidden p-4 shadow-sm flex justify-between h-16">
+          <a class="flex items-center gap-3 mr-6" href="/">
+            <Logo />
+          </a>
+          <button
+            type="button"
+            aria-label="Close navigation bar"
+            id="sidebar-close"
+          >
+            <svg
+              viewBox="0 0 15 15"
+              width="16"
+              height="16"
+              class="text-foreground-secondary"
+            >
+              <g stroke="currentColor" stroke-width="1.2">
+                <path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path>
+              </g>
+            </svg>
+          </button>
+        </div>
+        <props.comp.Sidebar
+          sidebar={sidebar}
+          search={props.search}
+          url={props.url}
+          headerPath={props.headerPath!}
+        />
+      </aside>
+      <div
+        class="absolute inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:xl:hidden"
+        id="sidebar-cover"
+        data-open="false"
+      >
+      </div>
+      <div
+        class="absolute top-0 bottom-0 left-0 right-0 xl:left-74 overflow-y-auto xl:grid xl:grid-cols-7 xl:gap-8 max-w-screen-2xl mx-auto"
+        style={{ scrollbarGutter: "stable" }}
+      >
+        <div
+          class="absolute top-16 bottom-0 left-0 right-0 overflow-y-auto"
+          style={{ scrollbarGutter: "stable" }}
+        >
+          {props.children}
+          <div class="xl:col-span-full">
+            <props.comp.Footer />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/learn/_pages/ExamplePage.tsx b/learn/_pages/ExamplePage.tsx
index 2c5c6af4a..903aa28af 100644
--- a/learn/_pages/ExamplePage.tsx
+++ b/learn/_pages/ExamplePage.tsx
@@ -2,8 +2,6 @@ import { CopyButton } from "../_components/CopyButton.tsx";
 import SnippetComponent from "../_components/SnippetComponent.tsx";
 import { ExampleFromFileSystem } from "../types.ts";
 
-export const layout = "doc.tsx";
-
 type Props = { example: ExampleFromFileSystem };
 
 export default function ExamplePage({ example }: Props) {
diff --git a/learn/index.examples.tsx b/learn/index.examples.tsx
new file mode 100644
index 000000000..05090a3b1
--- /dev/null
+++ b/learn/index.examples.tsx
@@ -0,0 +1,33 @@
+import { walkSync } from "@std/fs/walk";
+import ExamplePage from "./_pages/ExamplePage.tsx";
+import { ExampleFromFileSystem } from "./types.ts";
+import { parseExample } from "./utils/parseExample.ts";
+import { sidebar as sidebar_ } from "./tutorials/_data.ts";
+
+export const layout = "raw_with_sidebar.tsx";
+
+export const sidebar = sidebar_;
+export const toc = [];
+
+export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
+  const files = [...walkSync("./learn/examples/", { exts: [".ts"] })];
+
+  const examples = files.map((file) => {
+    const content = Deno.readTextFileSync(file.path);
+
+    return {
+      name: file.name,
+      content,
+      label: file.name.replace(".ts", ""),
+      parsed: parseExample(file.name, content),
+    } as ExampleFromFileSystem;
+  });
+
+  for (const example of examples) {
+    yield {
+      url: `/learn/examples/${example.label}/index.html`,
+      title: `${example.parsed.title} - Deno by Example`,
+      content: <ExamplePage example={example} />,
+    };
+  }
+}
diff --git a/learn/index.tsx b/learn/index.tsx
index 8bba15ba7..73c443227 100644
--- a/learn/index.tsx
+++ b/learn/index.tsx
@@ -1,33 +1,10 @@
-import { walkSync } from "@std/fs/walk";
 import LandingPage from "./_pages/LandingPage.tsx";
-import ExamplePage from "./_pages/ExamplePage.tsx";
-import { ExampleFromFileSystem } from "./types.ts";
-import { parseExample } from "./utils/parseExample.ts";
 
 export const layout = "raw.tsx";
 
-export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
-  const files = [...walkSync("./learn/examples/", { exts: [".ts"] })];
-
-  const examples = files.map((file) => {
-    const content = Deno.readTextFileSync(file.path);
-
-    return {
-      name: file.name,
-      content,
-      label: file.name.replace(".ts", ""),
-      parsed: parseExample(file.name, content),
-    } as ExampleFromFileSystem;
-  });
-
-  for (const example of examples) {
-    yield {
-      url: `/learn/examples/${example.label}/index.html`,
-      title: `${example.parsed.title} - Deno by Example`,
-      content: <ExamplePage example={example} />,
-    };
-  }
+export const toc = [];
 
+export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
   yield {
     url: `/learn/index.html`,
     title: `Learning Hub`,
diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
index 5b3611cd9..0287eb724 100644
--- a/learn/tutorials/_data.ts
+++ b/learn/tutorials/_data.ts
@@ -728,7 +728,7 @@ export const sidebar = [
       },
     ],
   },
-] satisfies Sidebar;
+];
 
 export const sectionTitle = "Learning hub";
 export const sectionHref = "/learn/";

From 5f3ab97cc44e0a0fa86b0bcc29157a0695f60fa7 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Fri, 29 Nov 2024 11:13:58 +0000
Subject: [PATCH 21/23] Learning filter (#1210)

---
 _includes/layout.tsx                |   2 +-
 learn/_components/LearningList.tsx  |   7 +-
 learn/_components/SectionTeaser.tsx |  15 --
 learn/_components/VideoIcon.tsx     |  36 +++-
 learn/_pages/LandingPage.tsx        |  92 +++++++---
 learn_filter.client.ts              |  24 +++
 overrides.css                       |  63 ++++++-
 youtube-lite.client.js              | 255 ----------------------------
 8 files changed, 186 insertions(+), 308 deletions(-)
 delete mode 100644 learn/_components/SectionTeaser.tsx
 create mode 100644 learn_filter.client.ts
 delete mode 100644 youtube-lite.client.js

diff --git a/_includes/layout.tsx b/_includes/layout.tsx
index d6274a844..745d391ea 100644
--- a/_includes/layout.tsx
+++ b/_includes/layout.tsx
@@ -72,7 +72,7 @@ export default function Layout(props: Lume.Data) {
         <script type="module" src="/search.client.js"></script>
         <script type="module" src="/tabs.client.js"></script>
         <script type="module" src="/feedback.client.js"></script>
-        <script type="module" src="/youtube-lite.client.js"></script>
+        <script type="module" src="/learn_filter.client.js"></script>
         <script
           async
           src="https://www.googletagmanager.com/gtm.js?id=GTM-5B5TH8ZJ"
diff --git a/learn/_components/LearningList.tsx b/learn/_components/LearningList.tsx
index 4e65d5bee..19f115aa3 100644
--- a/learn/_components/LearningList.tsx
+++ b/learn/_components/LearningList.tsx
@@ -13,9 +13,12 @@ export function LearningList(
       <h2 className="text-lg font-semibold mb-3">{props.title}</h2>
       <ul className="mb-8">
         {props.items.map((item) => (
-          <li className="leading-7">
+          <li
+            className="leading-7 learning-list-item"
+            data-category={item.type}
+          >
             <a
-              className={`homepage-link mb-1 runtime-link ${item.type}`}
+              className="homepage-link mb-1 runtime-link"
               href={item.id}
             >
               {item.type === "tutorial" && <TutorialIcon color="#9d9d9d" />}
diff --git a/learn/_components/SectionTeaser.tsx b/learn/_components/SectionTeaser.tsx
deleted file mode 100644
index ff5d2d2c1..000000000
--- a/learn/_components/SectionTeaser.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export function SectionTeaser(
-  props: { title: string; text: string; link: string; cta: string },
-) {
-  return (
-    <div className="mt-4 text-center">
-      <h3 className="text-xl font-semibold">
-        <a href={props.link}>{props.title}</a>
-      </h3>
-      <p className="my-4">{props.text}</p>
-      <a className="homepage-link runtime-link" href={props.link}>
-        {props.cta}
-      </a>
-    </div>
-  );
-}
diff --git a/learn/_components/VideoIcon.tsx b/learn/_components/VideoIcon.tsx
index c350e69a9..334ac8bab 100644
--- a/learn/_components/VideoIcon.tsx
+++ b/learn/_components/VideoIcon.tsx
@@ -2,17 +2,37 @@ export function VideoIcon(props: { color: string }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 445 348"
+      viewBox="0 0 416 368"
       className="inline mr-2"
       width="1rem"
     >
       <rect
-        x="15"
-        y="15"
-        width="415.3"
-        height="318"
-        rx="56.7"
-        ry="56.7"
+        x="25"
+        y="178"
+        width="274"
+        height="174.7"
+        rx="24.7"
+        ry="24.7"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+      <circle
+        cx="71.2"
+        cy="122.2"
+        r="56.2"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+      <circle
+        cx="229.7"
+        cy="96.7"
+        r="81.7"
         fill="none"
         stroke={props.color}
         stroke-linecap="round"
@@ -20,12 +40,12 @@ export function VideoIcon(props: { color: string }) {
         stroke-width="30"
       />
       <path
+        d="m306 246 85-53c4-3 10 0 10 5v135c0 5-6 8-10 6l-85-53"
         fill="none"
         stroke={props.color}
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="30"
-        d="M15 95h415M67 18l74 75m165-78 72 73M228 15l70 70M145 15l77 77m-31 165v-92l98 46-98 46z"
       />
     </svg>
   );
diff --git a/learn/_pages/LandingPage.tsx b/learn/_pages/LandingPage.tsx
index 5c9c861a7..4b88a82ad 100644
--- a/learn/_pages/LandingPage.tsx
+++ b/learn/_pages/LandingPage.tsx
@@ -1,34 +1,88 @@
 import { LearningList } from "../_components/LearningList.tsx";
 import { sidebar } from "../tutorials/_data.ts";
+import { TutorialIcon } from "../_components/TutorialIcon.tsx";
+import { ExampleIcon } from "../_components/ExampleIcon.tsx";
+import { VideoIcon } from "../_components/VideoIcon.tsx";
 
 export default function LandingPage() {
-  const componentsPerSidebarItem = sidebar.map((item) => {
-    return (
-      <LearningList
-        title={item.title}
-        items={item.items}
-      />
-    );
-  });
+  const componentsPerSidebarItem = sidebar.map(
+    (item: { title: string; items: any[] }) => {
+      return (
+        <LearningList
+          title={item.title}
+          items={item.items}
+        />
+      );
+    },
+  );
 
   return (
     <main
       id="content"
-      className="w-full px-8 pt-6 mt-16 max-w-screen-xl mx-auto mb-20"
+      className="flex flex-col px-8 pt-6 md:pt-12 mt-4 md:items-center md:justify-center max-w-[1200px] mx-auto mb-48"
     >
-      <div className="w-full mb-8">
-        <h1 className="text-2xl font-semibold sm:text-3xl md:text-4xl mb-3">
-          Learning hub
-        </h1>
-        <p className="max-w-prose mb-6">
-          Walkthrough tutorials, examples and guides to teach you about the Deno
-          runtime <br />and how to use it with your favorite tools.
-        </p>
+      <div className="w-full mb-6 max-w-screen-xl mx-auto hub-header">
+        <div className="max-w-prose mb-8">
+          <h1 className="text-2xl font-semibold sm:text-3xl md:text-4xl mb-3">
+            Learning hub
+          </h1>
+          <p>
+            A collection of walkthrough tutorials, examples, videos and guides
+            to teach you about the Deno runtime and how to use it with your
+            favorite tools.
+          </p>
+        </div>
+        <div className=" mb-2 flex gap-2 flex-wrap items-center">
+        <h2 className="font-semibold mb-2 mt-2">
+          Filter by type:
+        </h2>
+          <label for="example" className="mr-4 ml-4 flex items-center">
+            <ExampleIcon color="#9d9d9d" />Examples:
+            <span className="switch">
+              <input
+                type="checkbox"
+                id="example"
+                value="Examples"
+                className="mr-2"
+                checked
+              />
+              <span className="slider"></span>
+            </span>
+          </label>
+
+          <label for="tutorial" className="mr-4 ml-4 flex items-center">
+            <TutorialIcon color="#9d9d9d" />Tutorials:
+            <span className="switch">
+              <input
+                type="checkbox"
+                id="tutorial"
+                value="Tutorials"
+                className="mr-2"
+                checked
+              />
+              <span className="slider"></span>
+            </span>
+          </label>
+
+          <label for="video" className="mr-4 ml-4 flex items-center">
+            <VideoIcon color="#9d9d9d" />Videos:
+            <span className="switch">
+              <input
+                type="checkbox"
+                id="video"
+                value="Videos"
+                className="mr-2"
+                checked
+              />
+              <span className="slider"></span>
+            </span>
+          </label>
+        </div>
       </div>
-      <div className="columns-1 sm:columns-2 lg:columns-3 gap-8">
+      <div className="columns-1 sm:columns-2 lg:columns-3 gap-8 mb-8">
         {componentsPerSidebarItem}
       </div>
-      <p class="max-w-prose mx-auto text-center">
+      <p class="max-w-prose mx-auto text-center pt-4 mt-3">
         Need an example that isn't here? Or want to add one of your own?<br />
         {" "}
         We welcome contributions!{" "}
diff --git a/learn_filter.client.ts b/learn_filter.client.ts
new file mode 100644
index 000000000..4998af00c
--- /dev/null
+++ b/learn_filter.client.ts
@@ -0,0 +1,24 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const tutorial = document.getElementById("tutorial")! as HTMLInputElement;
+  const example = document.getElementById("example")! as HTMLInputElement;
+  const video = document.getElementById("video")! as HTMLInputElement;
+  const listItems = document.getElementsByClassName("learning-list-item");
+
+  const filterItems = () => {
+    const shown = [tutorial, example, video].filter((item) => item.checked);
+    const shownType = shown.map((item) => item.id);
+
+    for (const item of listItems) {
+      const htmlItem = item as HTMLElement;
+      const category = htmlItem.getAttribute("data-category");
+      const enabled = shownType.includes(category!);
+      htmlItem.style.display = enabled ? "" : "none";
+    }
+  };
+
+  tutorial.addEventListener("change", () => filterItems());
+  example.addEventListener("change", () => filterItems());
+  video.addEventListener("change", () => filterItems());
+
+  filterItems();
+});
diff --git a/overrides.css b/overrides.css
index acbdf1e6b..3eab46bff 100644
--- a/overrides.css
+++ b/overrides.css
@@ -115,13 +115,60 @@
   @apply mb-6 !important;
 }
 
-.active:after {
-  background-color: rgb(1 183 128 / var(--tw-text-opacity, 1));
-  clip-path: polygon(0 0, 100% 0, 50% 100%);
-  content: "";
-  height: 0.4rem;
-  left: calc(50% - 0.4rem);
+.hub-header {
+  border-bottom: 1px solid var(--borderColor-muted, var(--color-border-muted));
+  padding-bottom: 0.3em;
+}
+
+.switch {
+  position: relative;
+  width: 1.8rem;
+  height: 1rem;
+  display: block;
+  margin-left: 0.5rem;
+  margin-right: 1rem;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 1rem;
+}
+
+.slider:before {
   position: absolute;
-  top: -0.5rem;
-  width: 0.8rem;
+  content: "";
+  height: calc(1rem - 4px);
+  width: calc(1rem - 4px);
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #2196f3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  transform: translateX(calc(0.8rem));
 }
diff --git a/youtube-lite.client.js b/youtube-lite.client.js
deleted file mode 100644
index b9846a571..000000000
--- a/youtube-lite.client.js
+++ /dev/null
@@ -1,255 +0,0 @@
-/**
- * A lightweight youtube embed. Still should feel the same to the user, just MUCH faster to initialize and paint.
- *
- * Thx to these as the inspiration
- *   https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
- *   https://autoplay-youtube-player.glitch.me/
- *
- * Once built it, I also found these:
- *   https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube (👍👍)
- *   https://github.com/Daugilas/lazyYT
- *   https://github.com/vb/lazyframe
- */
-class LiteYTEmbed extends HTMLElement {
-  connectedCallback() {
-    this.videoId = this.getAttribute("videoid");
-
-    let playBtnEl = this.querySelector(".lyt-playbtn,.lty-playbtn");
-    // A label for the button takes priority over a [playlabel] attribute on the custom-element
-    this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) ||
-      this.getAttribute("playlabel") || "Play";
-
-    this.dataset.title = this.getAttribute("title") || "";
-
-    /**
-     * Lo, the youtube poster image!  (aka the thumbnail, image placeholder, etc)
-     *
-     * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md
-     */
-    if (!this.style.backgroundImage) {
-      this.style.backgroundImage =
-        `url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`;
-      this.upgradePosterImage();
-    }
-
-    // Set up play button, and its visually hidden label
-    if (!playBtnEl) {
-      playBtnEl = document.createElement("button");
-      playBtnEl.type = "button";
-      // Include the mispelled 'lty-' in case it's still being used. https://github.com/paulirish/lite-youtube-embed/issues/65
-      playBtnEl.classList.add("lyt-playbtn", "lty-playbtn");
-      this.append(playBtnEl);
-    }
-    if (!playBtnEl.textContent) {
-      const playBtnLabelEl = document.createElement("span");
-      playBtnLabelEl.className = "lyt-visually-hidden";
-      playBtnLabelEl.textContent = this.playLabel;
-      playBtnEl.append(playBtnLabelEl);
-    }
-
-    this.addNoscriptIframe();
-
-    // for the PE pattern, change anchor's semantics to button
-    if (playBtnEl.nodeName === "A") {
-      playBtnEl.removeAttribute("href");
-      playBtnEl.setAttribute("tabindex", "0");
-      playBtnEl.setAttribute("role", "button");
-      // fake button needs keyboard help
-      playBtnEl.addEventListener("keydown", (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          this.activate();
-        }
-      });
-    }
-
-    // On hover (or tap), warm up the TCP connections we're (likely) about to use.
-    this.addEventListener("pointerover", LiteYTEmbed.warmConnections, {
-      once: true,
-    });
-    this.addEventListener("focusin", LiteYTEmbed.warmConnections, {
-      once: true,
-    });
-
-    // Once the user clicks, add the real iframe and drop our play button
-    // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
-    //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
-    this.addEventListener("click", this.activate);
-
-    // Chrome & Edge desktop have no problem with the basic YouTube Embed with ?autoplay=1
-    // However Safari desktop and most/all mobile browsers do not successfully track the user gesture of clicking through the creation/loading of the iframe,
-    // so they don't autoplay automatically. Instead we must load an additional 2 sequential JS files (1KB + 165KB) (un-br) for the YT Player API
-    // TODO: Try loading the the YT API in parallel with our iframe and then attaching/playing it. #82
-    this.needsYTApi = this.hasAttribute("js-api") ||
-      navigator.vendor.includes("Apple") ||
-      navigator.userAgent.includes("Mobi");
-  }
-
-  /**
-   * Add a <link rel={preload | preconnect} ...> to the head
-   */
-  static addPrefetch(kind, url, as) {
-    const linkEl = document.createElement("link");
-    linkEl.rel = kind;
-    linkEl.href = url;
-    if (as) {
-      linkEl.as = as;
-    }
-    document.head.append(linkEl);
-  }
-
-  /**
-   * Begin pre-connecting to warm up the iframe load
-   * Since the embed's network requests load within its iframe,
-   *   preload/prefetch'ing them outside the iframe will only cause double-downloads.
-   * So, the best we can do is warm up a few connections to origins that are in the critical path.
-   *
-   * Maybe `<link rel=preload as=document>` would work, but it's unsupported: http://crbug.com/593267
-   * But TBH, I don't think it'll happen soon with Site Isolation and split caches adding serious complexity.
-   */
-  static warmConnections() {
-    if (LiteYTEmbed.preconnected) return;
-
-    // The iframe document and most of its subresources come right off youtube.com
-    LiteYTEmbed.addPrefetch("preconnect", "https://www.youtube-nocookie.com");
-    // The botguard script is fetched off from google.com
-    LiteYTEmbed.addPrefetch("preconnect", "https://www.google.com");
-
-    // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
-    LiteYTEmbed.addPrefetch(
-      "preconnect",
-      "https://googleads.g.doubleclick.net",
-    );
-    LiteYTEmbed.addPrefetch("preconnect", "https://static.doubleclick.net");
-
-    LiteYTEmbed.preconnected = true;
-  }
-
-  fetchYTPlayerApi() {
-    if (window.YT || (window.YT && window.YT.Player)) return;
-
-    this.ytApiPromise = new Promise((res, rej) => {
-      var el = document.createElement("script");
-      el.src = "https://www.youtube.com/iframe_api";
-      el.async = true;
-      el.onload = (_) => {
-        YT.ready(res);
-      };
-      el.onerror = rej;
-      this.append(el);
-    });
-  }
-
-  /** Return the YT Player API instance. (Public L-YT-E API) */
-  async getYTPlayer() {
-    if (!this.playerPromise) {
-      await this.activate();
-    }
-
-    return this.playerPromise;
-  }
-
-  async addYTPlayerIframe() {
-    this.fetchYTPlayerApi();
-    await this.ytApiPromise;
-
-    const videoPlaceholderEl = document.createElement("div");
-    this.append(videoPlaceholderEl);
-
-    const paramsObj = Object.fromEntries(this.getParams().entries());
-
-    this.playerPromise = new Promise((resolve) => {
-      let player = new YT.Player(videoPlaceholderEl, {
-        width: "100%",
-        videoId: this.videoId,
-        playerVars: paramsObj,
-        events: {
-          "onReady": (event) => {
-            event.target.playVideo();
-            resolve(player);
-          },
-        },
-      });
-    });
-  }
-
-  // Add the iframe within <noscript> for indexability discoverability. See https://github.com/paulirish/lite-youtube-embed/issues/105
-  addNoscriptIframe() {
-    const iframeEl = this.createBasicIframe();
-    const noscriptEl = document.createElement("noscript");
-    // Appending into noscript isn't equivalant for mysterious reasons: https://html.spec.whatwg.org/multipage/scripting.html#the-noscript-element
-    noscriptEl.innerHTML = iframeEl.outerHTML;
-    this.append(noscriptEl);
-  }
-
-  getParams() {
-    const params = new URLSearchParams(this.getAttribute("params") || []);
-    params.append("autoplay", "1");
-    params.append("playsinline", "1");
-    return params;
-  }
-
-  async activate() {
-    if (this.classList.contains("lyt-activated")) return;
-    this.classList.add("lyt-activated");
-
-    if (this.needsYTApi) {
-      return this.addYTPlayerIframe(this.getParams());
-    }
-
-    const iframeEl = this.createBasicIframe();
-    this.append(iframeEl);
-
-    // Set focus for a11y
-    iframeEl.focus();
-  }
-
-  createBasicIframe() {
-    const iframeEl = document.createElement("iframe");
-    iframeEl.width = 560;
-    iframeEl.height = 315;
-    // No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include
-    iframeEl.title = this.playLabel;
-    iframeEl.allow =
-      "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
-    iframeEl.allowFullscreen = true;
-    // AFAIK, the encoding here isn't necessary for XSS, but we'll do it only because this is a URL
-    // https://stackoverflow.com/q/64959723/89484
-    iframeEl.src = `https://www.youtube-nocookie.com/embed/${
-      encodeURIComponent(this.videoId)
-    }?${this.getParams().toString()}`;
-    return iframeEl;
-  }
-
-  /**
-   * In the spirit of the `lowsrc` attribute and progressive JPEGs, we'll upgrade the reliable
-   * poster image to a higher resolution one, if it's available.
-   * Interestingly this sddefault webp is often smaller in filesize, but we will still attempt it second
-   * because getting _an_ image in front of the user if our first priority.
-   *
-   * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md for more details
-   */
-  upgradePosterImage() {
-    // Defer to reduce network contention.
-    setTimeout(() => {
-      const webpUrl =
-        `https://i.ytimg.com/vi_webp/${this.videoId}/sddefault.webp`;
-      const img = new Image();
-      img.fetchPriority = "low"; // low priority to reduce network contention
-      img.referrerpolicy = "origin"; // Not 100% sure it's needed, but https://github.com/ampproject/amphtml/pull/3940
-      img.src = webpUrl;
-      img.onload = (e) => {
-        // A pretty ugly hack since onerror won't fire on YouTube image 404. This is (probably) due to
-        // Youtube's style of returning data even with a 404 status. That data is a 120x90 placeholder image.
-        // … per "annoying yt 404 behavior" in the .md
-        const noAvailablePoster = e.target.naturalHeight == 90 &&
-          e.target.naturalWidth == 120;
-        if (noAvailablePoster) return;
-
-        this.style.backgroundImage = `url("${webpUrl}")`;
-      };
-    }, 100);
-  }
-}
-// Register custom element
-customElements.define("lite-youtube", LiteYTEmbed);

From 07fa56d75901b7066e15eb9037c0b6f112f83383 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Fri, 29 Nov 2024 13:00:16 +0000
Subject: [PATCH 22/23] show sidebar on mobile sizes for hub landing page

---
 _includes/raw_with_sidebar.tsx |  8 +++++---
 learn/index.tsx                | 27 +++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/_includes/raw_with_sidebar.tsx b/_includes/raw_with_sidebar.tsx
index d66aff036..be4369eec 100644
--- a/_includes/raw_with_sidebar.tsx
+++ b/_includes/raw_with_sidebar.tsx
@@ -56,12 +56,13 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
     props.toc = toc.concat(...props.toc);
   }
 
-  let isLearnHub = props.url.includes("learn");
+  const checkIsHub = /^\/learn\/$/;
+  const isLearnHub = checkIsHub.test(props.url);
 
   return (
     <>
       <aside
-        class="flex flex-col absolute top-0 xl:top-16 bottom-0 -translate-x-74 xl:left-0 sidebar-open:translate-x-0 w-74 border-r border-foreground-tertiary bg-background-primary z-50 xl:z-0 xl:translate-x-0 transition-transform"
+        className={`flex flex-col absolute top-0 xl:top-16 bottom-0 -translate-x-74 xl:left-0 sidebar-open:translate-x-0 w-74 border-r border-foreground-tertiary bg-background-primary z-50 xl:z-0 xl:translate-x-0 transition-transform ${isLearnHub && "xl:hidden"}`}
         id="sidebar"
         data-open="false"
       >
@@ -108,7 +109,8 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
           style={{ scrollbarGutter: "stable" }}
         >
           {props.children}
-          <div class="xl:col-span-full">
+          {props.comp.Feedback({ file })}
+          <div class="xl:col-span-full mt-4">
             <props.comp.Footer />
           </div>
         </div>
diff --git a/learn/index.tsx b/learn/index.tsx
index 73c443227..e43b13cb2 100644
--- a/learn/index.tsx
+++ b/learn/index.tsx
@@ -1,6 +1,33 @@
 import LandingPage from "./_pages/LandingPage.tsx";
 
 export const layout = "raw.tsx";
+export const sidebar = [
+  {
+    title: "Runtime",
+    href: "/runtime/",
+    items: [],
+  },
+  {
+    title: "API reference",
+    href: "/api/deno/",
+    items: [],
+  },
+  {
+    title: "Learning hub",
+    href: "/learn/",
+    items: [],
+  },
+  {
+    title: "Deploy",
+    href: "/deploy/",
+    items: [],
+  },
+  {
+    title: "Subhosting",
+    href: "/subhosting/",
+    items: [],
+  },
+];
 
 export const toc = [];
 

From 3cd583d5ccd140269a81b5fcd3e002af47d1423c Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Fri, 29 Nov 2024 13:01:04 +0000
Subject: [PATCH 23/23] fmt

---
 _includes/raw_with_sidebar.tsx | 4 +++-
 learn/_pages/LandingPage.tsx   | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/_includes/raw_with_sidebar.tsx b/_includes/raw_with_sidebar.tsx
index be4369eec..7d454d89d 100644
--- a/_includes/raw_with_sidebar.tsx
+++ b/_includes/raw_with_sidebar.tsx
@@ -62,7 +62,9 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
   return (
     <>
       <aside
-        className={`flex flex-col absolute top-0 xl:top-16 bottom-0 -translate-x-74 xl:left-0 sidebar-open:translate-x-0 w-74 border-r border-foreground-tertiary bg-background-primary z-50 xl:z-0 xl:translate-x-0 transition-transform ${isLearnHub && "xl:hidden"}`}
+        className={`flex flex-col absolute top-0 xl:top-16 bottom-0 -translate-x-74 xl:left-0 sidebar-open:translate-x-0 w-74 border-r border-foreground-tertiary bg-background-primary z-50 xl:z-0 xl:translate-x-0 transition-transform ${
+          isLearnHub && "xl:hidden"
+        }`}
         id="sidebar"
         data-open="false"
       >
diff --git a/learn/_pages/LandingPage.tsx b/learn/_pages/LandingPage.tsx
index 4b88a82ad..e6610ed0a 100644
--- a/learn/_pages/LandingPage.tsx
+++ b/learn/_pages/LandingPage.tsx
@@ -33,9 +33,9 @@ export default function LandingPage() {
           </p>
         </div>
         <div className=" mb-2 flex gap-2 flex-wrap items-center">
-        <h2 className="font-semibold mb-2 mt-2">
-          Filter by type:
-        </h2>
+          <h2 className="font-semibold mb-2 mt-2">
+            Filter by type:
+          </h2>
           <label for="example" className="mr-4 ml-4 flex items-center">
             <ExampleIcon color="#9d9d9d" />Examples:
             <span className="switch">