media

docs/superpowers/plans/2026-03-31-video-component.md

@@ -1,142 +0,0 @@
-# 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"
-```

docs/superpowers/specs/2026-03-31-video-component-design.md

@@ -1,30 +0,0 @@
-# Video Component Design
-
-## Summary
-
-A reusable `<Video>` MDX component for embedding videos in blog posts with sensible defaults and optional caption.
-
-## Component
-
-**File:** `components/video.tsx`
-
-**Props:**
-- `src: string` — video file path (required)
-- `caption?: string` — text displayed below video (optional)
-
-**Video defaults:** `controls loop muted playsInline width="100%"`
-
-**Styling:**
-- Container: `rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm overflow-hidden shadow-md`
-- Caption: small, muted, italic, centered
-
-## Integration
-
-Register `Video` in `page.tsx` MDXRemote `components` prop so it's available in all MDX posts without per-post imports.
-
-## Usage in MDX
-
-```mdx
-<Video src="/posts/rts.mp4" />
-<Video src="/posts/rts.mp4" caption="My failed RTS attempt" />
-```

posts/my-2024-and-2025-roadmap.mdx

@@ -41,6 +41,8 @@ Next, I started working on a **Missile Commander clone**—a recreation of the o
 
 ![missile_commander](/posts/missile_commander.webp)
 
+<Video src="/posts/missile_commander.mp4" />
+
 ## March - A Sokoban Game in Java
 
 In March, I only worked on one toy project—a **Sokoban game in Java** using Raylib. Why Java? No idea. I guess I just wanted to refresh my skills in the language.
@@ -67,10 +69,16 @@ Last but not least, I created **better_notepad**, a Notepad-like app because I w
 
 In May, I started a **2D platformer in Unity**, inspired by **Brave Dwarves 2** (a childhood favorite). I focused on **composition over inheritance**, and I loved that approach—so much that I still use it in all future projects. Unfortunately, I abandoned the game.
 
+<Video src="/posts/dwarves.mp4" />
+
 I also built a **tiny social network** inspired by the late 2000s and early 2010s, when social media was more about you and your friends rather than memes, ads, and algorithm-driven feeds. My idea was simple: users could publish short thoughts (up to 128 characters), follow friends, and see only their friends' posts in the feed. I used Django, but I plan to rewrite it in Rust for lower memory usage. I might even make it **decentralized using ActivityPub**, because I recently fell in love with that concept.
 
+<Video src="/posts/thoughts-2024.mp4" />
+
 I also built my own **r/place clone** in Rust, using WebSockets via _socket.io_ and plain JavaScript for the client. It worked pretty well! However, I ran into an issue where I was sending data inefficiently, which caused massive memory usage—something like **~100MB per user connection**. I don’t remember if I ever fixed it, but debugging network-related stuff is still a bit of a mystery to me.
 
+<Video src="/posts/rplace.mp4" />
+
 ## June - A Grand Strategy Game Attempt
 
 In June, I made another attempt at an **RTS/Strategy game**, this time a **turn-based grand strategy game** similar to _Civilization_. I used **Bevy** and the **hexx crate**, but as you can imagine, I didn’t get very far—I got stuck on the turn system :p
@@ -83,16 +91,22 @@ In **August**, I experimented with **Godot** and started developing a **boomer s
 
 This was yet another project I left unfinished. While I enjoy working with **Godot**, I found its 3D tools a bit too clunky for my workflow.
 
+<Video src="/posts/boomer_shooter_attempt.mp4" />
+
 ## September - My Own Podcast Platform
 
 In September, I built my own **podcast platform**! I wrote the backend in **Loco.rs** and the frontend in **Svelte**. I was really happy with how it turned out, but after recording just **one episode**, I lost interest. Shame.
 
+<Video src="/posts/podcast.mp4" />
+
 In the meantime, I created a **mod for VTOL VR**, which currently has **623 subscribers**! One day, I would love to create my own **VR game**, but for now, I have **zero ideas** for what it could be :&lt;
 
 ## December - Back to Game Development
 
 In December, I tried **Advent of Code**, but I gave up after **three days** :p. Instead, I started working again on my **2D platformer game, Mr. Brick Adventures**. This time, I _vow_ to finish it and release it on **Steam**! I’m using **Godot** again, and I have to admit—it’s quite nice for 2D development. I wanted to use Rust, but it was a bit too tedious, so I stuck with GDScript.
 
+<Video src="/posts/mr_brick_2024.mp4" />
+
 ---
 
 # 2025 Roadmap