add tutorial video

rossrobino · Sep 25, 2024 · 5b99315 · 5b99315
1 parent 6490621
commit 5b99315
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/apps/docs/src/client/+script.ts b/apps/docs/src/client/+script.ts
@@ -2,6 +2,7 @@ import "@/client/tailwind.css";
 import "drab/details/define";
 import "drab/dialog/define";
 import "drab/prefetch/define";
+import "drab/youtube/define";
 
 const toCopy = document.querySelectorAll("pre, .copy-text");
 toCopy.forEach((pre) => {

diff --git a/apps/docs/src/client/tailwind.css b/apps/docs/src/client/tailwind.css
@@ -87,6 +87,15 @@
 		width: auto;
 		height: auto;
 	}
+
+	/* For youtube embeds */
+	iframe {
+		border: 2px solid theme(colors.muted.foreground);
+		border-radius: theme(borderRadius.DEFAULT);
+		background-color: theme(colors.muted.foreground);
+		aspect-ratio: 16 / 9;
+		width: 100%;
+	}
 }
 
 @layer components {

diff --git a/apps/docs/src/server/content/tutorial.md b/apps/docs/src/server/content/tutorial.md
@@ -4,6 +4,10 @@
 
 The following documentation covers the basics of creating a site and all of the features domco provides in addition to Vite. See the [Vite documentation](https://vitejs.dev/) for more information and configuration options.
 
+<drab-youtube aria-label="YouTube Tutorial" uid="jWnzCZru6cU">
+    <iframe data-content loading="lazy"></iframe>
+</drab-youtube>
+
 ## Create a new project
 
 To get started, you'll need to have [Node](https://nodejs.org) (recommended), [Bun](https://bun.sh/), or [Deno](https://deno.com) (experimental support) or installed on your computer. Then run the [`create-domco`](https://github.com/rossrobino/domco/tree/main/packages/create-domco) script to create a new project. If you already have an existing client-side Vite project check out the [migration instructions](/migrate).