Video page template (#1213)

denoland · Nov 29, 2024 · 0c86469 · 0c86469
1 parent 5f3ab97
commit 0c86469
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 18 deletions.
diff --git a/_includes/doc.tsx b/_includes/doc.tsx
@@ -115,7 +115,7 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
           class="mx-auto max-w-screen-xl w-full pt-2 pb-8 flex flex-grow xl:col-span-5"
         >
           <div class="flex-grow px-4 sm:px-5 md:px-6 max-w-full">
-            <article class="max-w-[66ch] mx-auto">
+            <article class="{props.toc && props.toc.length > 0 && (max-w-[66ch])} mx-auto">
               {!isLearnHub && (
                 <Breadcrumbs
                   title={props.title!}

diff --git a/learn/_pages/VideoPage.tsx b/learn/_pages/VideoPage.tsx
@@ -0,0 +1,16 @@
+import { EmbedVideo } from "../_components/EmbedVideo.tsx";
+import { ExampleFromFileSystem } from "../types.ts";
+
+type Props = { example: ExampleFromFileSystem };
+
+export default function VideoPage({ example }: Props) {
+  return (
+    <>
+      <EmbedVideo id={example.externalURL} />
+      <div className="my-12">
+        Find more videos in the <a href="/learn/">Learning Hub</a> and on our
+        {"  "}<a href="https://www.youtube.com/@deno_land">YouTube channel</a>.
+      </div>
+    </>
+  );
+}
diff --git a/learn/index.videos.tsx b/learn/index.videos.tsx
@@ -0,0 +1,27 @@
+import { walkSync } from "@std/fs/walk";
+import ExamplePage from "./_pages/ExamplePage.tsx";
+import VideoPage from "./_pages/VideoPage.tsx";
+import { ExampleFromFileSystem } from "./types.ts";
+import { parseExample } from "./utils/parseExample.ts";
+import { sidebar as sidebar_ } from "./tutorials/_data.ts";
+
+export const layout = "doc.tsx";
+// export const layout = "raw_with_sidebar.tsx";
+
+export const sidebar = sidebar_;
+export const toc = [];
+
+export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
+  // flatten the sidebar object into a single array of items
+  const flattenedVideos = sidebar.flatMap((item) => item.items);
+  const videos = flattenedVideos.filter((item) => item.type === "video");
+
+  // Generate a page for each item listed in the data
+  for (const video of videos) {
+    yield {
+      url: `${video.id}/index.html`,
+      title: `${video.label}`,
+      content: <VideoPage example={video} />,
+    };
+  }
+}
diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
@@ -4,7 +4,8 @@ export const sidebar = [
     items: [
       {
         label: "What is Deno?",
-        id:
+        id: "/learn/videos/what-is-deno/",
+        externalURL:
           "https://www.youtube.com/watch?v=KPTOo4k8-GE&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe",
         type: "video",
       },
@@ -25,7 +26,8 @@ export const sidebar = [
       },
       {
         label: "Your Deno Development Environment",
-        id:
+        id: "/learn/videos/your-deno-development-environment/",
+        externalURL:
           "https://www.youtube.com/watch?v=BFfrGrLm2tw&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=3",
         type: "video",
       },
@@ -41,13 +43,15 @@ export const sidebar = [
       },
       {
         label: "All-in-one tooling",
-        id:
+        id: "/learn/videos/all-in-one-tooling/",
+        externalURL:
           "https://www.youtube.com/watch?v=-4e9DkUrCr4&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=5",
         type: "video",
       },
       {
         label: "Tasks and configuration with deno.json",
-        id:
+        id: "/learn/videos/tasks-and-configuration-with-deno-json/",
+        externalURL:
           "https://www.youtube.com/watch?v=bTmO5Tfgke4&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=10",
         type: "video",
       },
@@ -64,13 +68,15 @@ export const sidebar = [
       },
       {
         label: "Interoperability with Node.js",
-        id:
+        id: "/learn/videos/interoperability-with-nodejs/",
+        externalURL:
           "https://www.youtube.com/watch?v=mgX1ymfqPSQ&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=2",
         type: "video",
       },
       {
         label: "Introduction to Deno APIs",
-        id:
+        id: "/learn/videos/introduction-to-deno-apis/",
+        externalURL:
           "https://www.youtube.com/watch?v=p28ujFMrdA0&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=7",
         type: "video",
       },
@@ -96,19 +102,22 @@ export const sidebar = [
       },
       {
         label: "Backward Compatibility with Node.js and npm",
-        id:
+        id: "/learn/videos/backward-compatibility-with-nodejs-and-npm/",
+        externalURL:
           "https://www.youtube.com/watch?v=QPLchkJ7eas&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=12",
         type: "video",
       },
       {
         label: "ECMAScript Modules in Deno",
-        id:
+        id: "/learn/videos/ecmascript-modules-in-deno/",
+        externalURL:
           "https://www.youtube.com/watch?v=cTFBiwYY3vs&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=9",
         type: "video",
       },
       {
         label: "Publishing Modules with JSR",
-        id:
+        id: "/learn/videos/publishing-modules-with-jsr/",
+        externalURL:
           "https://www.youtube.com/watch?v=7uiL4WYvZVs&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=8",
         type: "video",
       },
@@ -120,7 +129,8 @@ export const sidebar = [
     items: [
       {
         label: "Browser APIs in Deno",
-        id:
+        id: "/learn/videos/browser-apis-in-deno/",
+        externalURL:
           "https://www.youtube.com/watch?v=oxVwTT-rZRo&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=6",
         type: "video",
       },
@@ -162,7 +172,8 @@ export const sidebar = [
     items: [
       {
         label: "TypeScript and JSX in Deno",
-        id:
+        id: "/learn/videos/typescript-and-jsx-in-deno/",
+        externalURL:
           "https://www.youtube.com/watch?v=KoM8ahe8O74&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=11",
         type: "video",
       },
@@ -203,7 +214,8 @@ export const sidebar = [
       },
       {
         label: "Build an API server with TypeScript",
-        id:
+        id: "/learn/videos/build-an-api-server-with-typescript/",
+        externalURL:
           "https://www.youtube.com/watch?v=J8kZ-s-5-ms&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=13",
         type: "video",
       },
@@ -219,7 +231,8 @@ export const sidebar = [
       },
       {
         label: "Deploy Deno to AWS Lambda",
-        id:
+        id: "/learn/videos/deploy-deno-to-aws-lambda/",
+        externalURL:
           "https://www.youtube.com/watch?v=_xLOrT3cWK4&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=17",
         type: "video",
       },
@@ -250,7 +263,8 @@ export const sidebar = [
       },
       {
         label: "Deploying Deno with Docker",
-        id:
+        id: "/learn/videos/deploying-deno-with-docker/",
+        externalURL:
           "https://www.youtube.com/watch?v=VRryNeYm6yw&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=16",
         type: "video",
       },
@@ -361,7 +375,8 @@ export const sidebar = [
     items: [
       {
         label: "Build a Command Line Utility",
-        id:
+        id: "/learn/videos/build-a-command-line-utility/",
+        externalURL:
           "https://www.youtube.com/watch?v=TUxj2TS5pNo&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=14",
         type: "video",
       },
@@ -667,7 +682,8 @@ export const sidebar = [
       },
       {
         label: "Build a Real-Time WebSocket Application",
-        id:
+        id: "/learn/videos/build-a-real-time-websocket-application/",
+        externalURL:
           "https://www.youtube.com/watch?v=FC4IrkHEg4A&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=15",
         type: "video",
       },

diff --git a/learn/types.ts b/learn/types.ts
@@ -29,6 +29,7 @@ export type ExampleFromFileSystem = {
   content: string;
   label: string;
   parsed: Example;
+  externalURL?: string;
 };
 
 export interface Example {

diff --git a/youtube-lite.css b/youtube-lite.css
@@ -6,7 +6,6 @@ lite-youtube {
   background-position: center center;
   background-size: cover;
   cursor: pointer;
-  max-width: 720px;
 }
 
 /* gradient */