143 lines
3.1 KiB
Markdown
143 lines
3.1 KiB
Markdown
# 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"
|
|
```
|