Refactor image handling in documentation and components. Updated paths for co-located images in posts, enhanced ImageCompare component to resolve paths with base URL, and added new static assets directory for Vue components.

Author: af8a2a

.claude/settings.local.json

@@ -5,7 +5,8 @@
       "Bash(mkdir:*)",
       "Bash(for d in advanced-postprocessing anti-aliasing bindless c computeshader denoiser-and-accumulation depthoffield favoritesblog fidelityfx fluid-and-volumetric globalillumination graphicsapi lighting ltc meshlet-and-meshshader misc performance physicallybasedrendering postprocessingeffect rendergraph rtx screenspaceraytracing shadow ssao tonemapping--and--colorgrading vrs workgraphs)",
       "Bash(do mv \"$d\" Topic/)",
-      "Bash(done)"
+      "Bash(done)",
+      "WebFetch(domain:vitepress.dev)"
     ]
   }
 }

CLAUDE.md

@@ -29,18 +29,20 @@ packages/
 │       └── sync-content.js       # Auto-generates sidebar from posts
 └── content/                      # Markdown content and assets
     ├── index.md                  # Homepage
+    ├── public/                   # Static assets (copied as-is)
+    │   └── images/               # Images for Vue components
     └── posts/
         └── my-post/              # Each post is a folder
             ├── index.md          # Post content
-            └── image.png         # Co-located images
+            └── image.png         # Co-located images (markdown only)
 ```
 
 ## Architecture Notes
 
 - **Monorepo with npm workspaces**: `@blog/core` (VitePress) and `@blog/content` (markdown/images)
 - **srcDir**: Core's VitePress config points to `../content` as source directory
 - **Content sync**: `npm run sync` scans posts and updates sidebar config automatically
-- **Co-located images**: Each post folder contains its own images
+- **Co-located images**: Each post folder contains its own images for markdown use
 - Static site only, no SSR
 
 ## Adding Content
@@ -51,9 +53,23 @@ packages/
 4. Run `npm run sync` to update sidebar
 5. Optionally use frontmatter `order: N` to control sort order
 
+## Image Handling
+
+**Markdown images** (co-located, relative paths):
+```md
+![screenshot](./image.png)
+```
+
+**Vue component images** (public folder, absolute paths):
+- Place images in `packages/content/public/images/<post-name>/`
+- Reference with absolute path (base URL added automatically):
+```md
+<ImageCompare before="/images/my-post/before.png" after="/images/my-post/after.png" />
+```
+
 ## Custom Components
 
 Use in markdown:
 ```md
-<ImageCompare before="./noisy.png" after="./denoised.png" />
+<ImageCompare before="/images/my-post/noisy.png" after="/images/my-post/denoised.png" />
 ```

packages/content/posts/image-denoising/index.md

@@ -5,8 +5,8 @@ Image denoising removes noise from images while preserving important details.
 ## Comparison
 
 <ImageCompare
-  before="./noisy.png"
-  after="./denoised.png"
+  before="/images/image-denoising/noisy.png"
+  after="/images/image-denoising/denoised.png"
   beforeLabel="Noisy"
   afterLabel="Denoised"
 />

packages/core/.vitepress/theme/components/ImageCompare.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue'
+import { withBase } from 'vitepress'
 
 const props = defineProps({
   before: { type: String, required: true },
@@ -14,6 +15,10 @@ const container = ref(null)
 
 const clipPath = computed(() => `inset(0 ${100 - position.value}% 0 0)`)
 
+// Resolve paths with base URL
+const beforeSrc = computed(() => withBase(props.before))
+const afterSrc = computed(() => withBase(props.after))
+
 function updatePosition(e) {
   if (!container.value) return
   const rect = container.value.getBoundingClientRect()
@@ -48,12 +53,12 @@ function stopDrag() {
     @touchend="stopDrag"
   >
     <!-- After image (bottom layer) -->
-    <img class="compare-image" :src="after" :alt="afterLabel" />
+    <img class="compare-image" :src="afterSrc" :alt="afterLabel" />
 
     <!-- Before image (top layer, clipped) -->
     <img
       class="compare-image before-image"
-      :src="before"
+      :src="beforeSrc"
       :alt="beforeLabel"
       :style="{ clipPath }"
     />