docs: add video component implementation plan

2026-03-31 14:48:45 +02:00
parent 650164e412
commit f6819b42bd
1 changed files with 142 additions and 0 deletions
--- a/docs/superpowers/plans/2026-03-31-video-component.md
+++ b/docs/superpowers/plans/2026-03-31-video-component.md
@@ -0,0 +1,142 @@
+# Video Component Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Create a reusable `<Video>` MDX component with sensible defaults and an optional caption.
+
+**Architecture:** A single React component in `components/video.tsx` registered in the MDXRemote `components` prop in `app/posts/[slug]/page.tsx`. No per-post imports needed.
+
+**Tech Stack:** Next.js 15, React 19, Tailwind v4, next-mdx-remote
+
+---
+
+### Task 1: Create Video component
+
+**Files:**
+- Create: `components/video.tsx`
+
+- [ ] **Step 1: Create the component**
+
+```tsx
+interface VideoProps {
+  src: string;
+  caption?: string;
+}
+
+export default function Video({ src, caption }: VideoProps) {
+  return (
+    <figure className="my-4">
+      <div className="rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm overflow-hidden shadow-md">
+        <video
+          src={src}
+          width="100%"
+          controls
+          loop
+          muted
+          playsInline
+        />
+      </div>
+      {caption && (
+        <figcaption className="mt-2 text-center text-sm text-gray-500 italic">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add components/video.tsx
+git commit -m "feat: add Video component"
+```
+
+---
+
+### Task 2: Register Video in MDXRemote
+
+**Files:**
+- Modify: `app/posts/[slug]/page.tsx`
+
+- [ ] **Step 1: Add import at top of file**
+
+After the existing imports, add:
+```tsx
+import Video from "@/components/video";
+```
+
+- [ ] **Step 2: Add components prop to MDXRemote**
+
+Find the `<MDXRemote ... />` call (around line 64) and add a `components` prop:
+
+```tsx
+<MDXRemote
+  source={postData.content}
+  components={{ Video }}
+  options={{
+    mdxOptions: {
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [
+        rehypeSlug,
+        [
+          rehypePrettyCode,
+          {
+            theme: "github-dark-dimmed",
+            keepBackground: false,
+          },
+        ],
+      ],
+    },
+  }}
+/>
+```
+
+- [ ] **Step 3: Verify dev server compiles without errors**
+
+```bash
+bun dev
+```
+
+Expected: server starts, no TypeScript errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add app/posts/[slug]/page.tsx
+git commit -m "feat: register Video component in MDXRemote"
+```
+
+---
+
+### Task 3: Use component in a post
+
+**Files:**
+- Modify: `posts/my-2024-and-2025-roadmap.mdx`
+
+- [ ] **Step 1: Replace raw video tag with component**
+
+Find (around line 54):
+```html
+<video width="100%" height="auto" controls loop muted playsInline>
+  <source src="/posts/rts.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+```
+
+Replace with:
+```mdx
+<Video src="/posts/rts.mp4" caption="My failed RTS engine attempt" />
+```
+
+- [ ] **Step 2: Verify in browser**
+
+Open the post in the dev server and confirm the video renders with styling and caption.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add posts/my-2024-and-2025-roadmap.mdx
+git commit -m "chore: use Video component in roadmap post"
+```