denoland · philhawksworth · Nov 28, 2024 · Nov 28, 2024 · Nov 28, 2024 · Nov 28, 2024
diff --git 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
@@ -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
@@ -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
diff --git a/learn/_components/SubNavigationItem.tsx b/learn/_components/SubNavigationItem.tsx
diff --git a/learn/_components/TutorialIcon.tsx 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
diff --git a/learn/_components/VideoIcon.tsx 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
@@ -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