@sp-days-framework/slidev-theme-sykehuspartner 1.1.0-beta3 → 1.1.1-beta1

package/docs/advanced-configuration.mdx

@@ -32,6 +32,37 @@ Layouts with images support:
 | `imagePosition` | string | varies | Position: `'left'` or `'right'` |
 | `imageBackgroundMode` | boolean | varies | Background vs foreground mode |
 
+### Image Path Resolution
+
+The theme automatically resolves image paths in frontmatter, so you can use different path formats:
+
+| Path Format | Example | Description |
+|-------------|---------|-------------|
+| **Relative** | `./image.png` | Relative to the markdown file |
+| **Parent relative** | `../assets/img.png` | Navigate to parent directories |
+| **Same directory** | `image.png` | File in same folder as markdown |
+| **Public directory** | `/image.png` | Absolute path from `/public` folder |
+| **External URL** | `https://...` | Remote images |
+
+:::tip Relative Paths Recommended
+Using relative paths (e.g., `./assets/diagram.png`) is recommended when working with the `docusaurus-plugin-slidev` integration. The theme's Vite plugin automatically resolves these paths and ensures images are correctly bundled during build.
+:::
+
+```markdown title="Example: Using relative image paths"
+---
+layout: image-left
+imageSrc: ./assets/architecture.png
+---
+
+# Architecture Overview
+
+This diagram shows our system design.
+```
+
+:::note Public Directory
+For images in the `/public` directory, use absolute paths starting with `/`. These are served as-is without processing.
+:::
+
 ## Global Theme Configuration
 
 Configure theme-wide settings in your presentation frontmatter:

package/docs/changelog.mdx

@@ -19,32 +19,73 @@ All packages within `@sp-days-framework` use the same version number. In some ca
 
 ---
 
-## Version 1.1.0-beta3 ![Update](https://img.shields.io/badge/update-bug--fixes-green)
+## Version 1.1.1-beta1 ![beta](https://img.shields.io/badge/release-beta-yellow)
 
-Bug fixes and improvements for theme stability across different project setups.
+Asset handling improvements for theme components
 
 <details>
-<summary><strong>Details</strong> (2025 December 12)</summary>
+<summary><strong>Beta Details</strong> (2026 January 12)</summary>
 
-### Bug Fixes
+### New in Beta 1
 
-- **uno.config.ts**: Fixed codeblock icon scanning to work correctly when the theme is installed as a dependency in other projects
-- **two-cols-header**: Fixed h2 and h3 heading margins to be consistent with other layouts
-- **end layout**: Fixed text centering so content is properly horizontally centered
+- Enhanced asset handling to support improved resource management in Slidev presentations
 
 </details>
 
 ---
 
-## Version 1.1.0-beta2 ![Sync](https://img.shields.io/badge/sync-version--bump-lightgrey)
+## Version 1.1.1-beta1 ![Beta](https://img.shields.io/badge/release-beta-orange)
+
+Automatic relative image path resolution for image-based layouts
+
+<details open>
+<summary><strong>Details</strong> (2026 January 12)</summary>
+
+### New Features
+
+- **Relative Image Paths**: Image-based layouts (`image`, `image-left`, `image-right`, `intro`, `about-me`) now support relative paths in frontmatter (e.g., `imageSrc: ./assets/diagram.png`)
+- **Vite Plugin**: Added `setup/vite-plugins.ts` that automatically transforms relative image paths into proper imports during build
+- **Build Compatibility**: Images referenced with relative paths are now correctly bundled and hashed in production builds
+
+### How It Works
+
+The theme includes a Vite plugin that intercepts frontmatter and transforms relative image paths:
 
-Version bump to match other packages in the framework with minor documentation improvements
+| Path Type | Example | Processed? |
+|-----------|---------|------------|
+| Relative | `./image.png`, `../assets/img.png` | ✅ Yes |
+| Same directory | `image.png` | ✅ Yes |
+| Absolute (public) | `/image.png` | ❌ No (served from public) |
+| External URL | `https://...` | ❌ No |
+| Data URI | `data:image/...` | ❌ No |
+
+### Migration
+
+No changes required. Existing presentations using `/public` directory paths continue to work. You can now also use relative paths for better portability.
+
+</details>
 
 ---
 
-## Version 1.1.0-beta1 ![Sync](https://img.shields.io/badge/sync-version--bump-lightgrey)
+## Version 1.1.0 ![Release](https://img.shields.io/badge/release-production-blue)
+
+Bug fixes for VSCode icons and layout improvements
+
+<details>
+<summary><strong>Details</strong> (2026 January 07)</summary>
 
-Version bump to match other packages in the framework. Documentation is now bundled with the npm package for easier reference during development.
+### Bug Fixes
+
+- **uno.config.ts**: Fixed codeblock icon scanning to work correctly when the theme is installed as a dependency in other projects
+- **uno.config.ts**: Fixed VSCode icons not appearing when built through `docusaurus-plugin-slidev` by adding support for `SLIDEV_ORIGINAL_SOURCE` and `SLIDEV_ORIGINAL_SOURCE_DIR` environment variables
+- **two-cols-header**: Fixed h2 and h3 heading margins to be consistent with other layouts
+- **end layout**: Fixed text centering so content is properly horizontally centered
+
+### Improvements
+
+- **Package Documentation**: Documentation is now bundled with the npm package for easier reference during development
+
+</details>
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sp-days-framework/slidev-theme-sykehuspartner",
-  "version": "1.1.0-beta3",
+  "version": "1.1.1-beta1",
   "description": "A Slidev theme for Sykehuspartner presentations.",
   "type": "module",
   "repository": {
@@ -37,6 +37,7 @@
     "@slidev/types": "^52.9.1"
   },
   "peerDependencies": {
+    "@iconify-json/vscode-icons": "^1.2.0",
     "@slidev/cli": ">=52.0.0",
     "@slidev/types": ">=52.0.0"
   },

package/setup/vite-plugins.ts

@@ -0,0 +1,153 @@
+/**
+ * Vite Plugin Setup for Sykehuspartner Slidev Theme
+ * 
+ * This plugin automatically resolves relative image paths in frontmatter
+ * so they work correctly after build. Without this, images referenced in
+ * frontmatter like `imageSrc: ./image.png` would break after build because
+ * Vite can't statically analyze frontmatter values.
+ * 
+ * The plugin intercepts the frontmatter virtual modules generated by Slidev
+ * and transforms relative image paths into proper imports.
+ */
+import { defineVitePluginsSetup } from '@slidev/types'
+import type { Plugin } from 'vite'
+import { resolve, dirname, isAbsolute } from 'node:path'
+import { existsSync } from 'node:fs'
+
+// Image properties that should be resolved in frontmatter
+const IMAGE_PROPS = [
+  'imageSrc',
+  'background',
+  'image',
+]
+
+// Supported image extensions
+const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'avif', 'ico']
+const IMAGE_EXT_PATTERN = IMAGE_EXTENSIONS.join('|')
+
+export default defineVitePluginsSetup((options) => {
+  const { userRoot, data } = options
+  
+  /**
+   * Plugin that transforms frontmatter image paths into imports
+   */
+  const frontmatterImagePlugin: Plugin = {
+    name: 'slidev-theme-sykehuspartner:frontmatter-images',
+    enforce: 'post', // Run after Slidev's loader generates the frontmatter module
+    
+    transform(code, id) {
+      // Only process frontmatter virtual modules from Slidev
+      if (!id.includes('__slidev_') || !id.endsWith('.frontmatter')) {
+        return null
+      }
+
+      // Find the slide's markdown file path to resolve relative images
+      const slideMatch = id.match(/(.+?)__slidev_(\d+)\.frontmatter$/)
+      if (!slideMatch) return null
+      
+      const mdFilePath = slideMatch[1]
+      const mdDir = dirname(mdFilePath)
+      
+      // Regex to find relative image paths in frontmatter properties
+      // Matches: "imageSrc": "./image.png" or 'imageSrc': './image.png'
+      // Also matches paths without ./ prefix like "image.png"
+      const relativePathRegex = new RegExp(
+        `(["'])((?:\\.\\/|\\.\\.\\/|(?![/]|https?:|data:))[^"']*\\.(${IMAGE_EXT_PATTERN}))\\1`,
+        'gi'
+      )
+      
+      const matches = [...code.matchAll(relativePathRegex)]
+      
+      if (matches.length === 0) {
+        return null
+      }
+      
+      // Track unique imports to avoid duplicates
+      const imports: Map<string, string> = new Map()
+      let importIndex = 0
+      let newCode = code
+      
+      for (const match of matches) {
+        const fullMatch = match[0]
+        const quote = match[1]
+        const relativePath = match[2]
+        
+        // Resolve the absolute path to check if file exists
+        const absolutePath = resolve(mdDir, relativePath)
+        
+        // Only transform if the file actually exists
+        if (!existsSync(absolutePath)) {
+          console.warn(`[slidev-theme-sykehuspartner] Image not found: ${relativePath} (resolved to ${absolutePath})`)
+          continue
+        }
+        
+        // Get or create import variable name for this path
+        let varName = imports.get(relativePath)
+        if (!varName) {
+          varName = `__spImg${importIndex++}`
+          imports.set(relativePath, varName)
+        }
+        
+        // Replace the string path with the import variable
+        // "imageSrc": "./image.png" becomes "imageSrc": __spImg0
+        newCode = newCode.replace(fullMatch, varName)
+      }
+      
+      if (imports.size === 0) {
+        return null
+      }
+      
+      // Generate import statements
+      const importStatements = Array.from(imports.entries())
+        .map(([path, varName]) => `import ${varName} from "${path}"`)
+        .join('\n')
+      
+      // Prepend imports to the module code
+      const transformedCode = importStatements + '\n' + newCode
+      
+      return {
+        code: transformedCode,
+        map: null, // Source map not needed for this transformation
+      }
+    },
+  }
+  
+  /**
+   * Plugin that ensures images referenced in layouts are resolved correctly
+   * This handles the case where images are passed as props to layout components
+   */
+  const layoutImagePlugin: Plugin = {
+    name: 'slidev-theme-sykehuspartner:layout-images',
+    enforce: 'pre',
+    
+    async resolveId(source, importer) {
+      // Only process if importer is a markdown slide file
+      if (!importer || !importer.includes('__slidev_')) {
+        return null
+      }
+      
+      // Check if this looks like a relative image path
+      const isRelativePath = source.startsWith('./') || source.startsWith('../')
+      const isImageFile = new RegExp(`\\.(${IMAGE_EXT_PATTERN})$`, 'i').test(source)
+      
+      if (isRelativePath && isImageFile) {
+        // Find the original markdown file path
+        const mdMatch = importer.match(/(.+?)__slidev_\d+/)
+        if (mdMatch) {
+          const mdDir = dirname(mdMatch[1])
+          const resolved = resolve(mdDir, source)
+          if (existsSync(resolved)) {
+            return resolved
+          }
+        }
+      }
+      
+      return null
+    },
+  }
+  
+  return [
+    frontmatterImagePlugin,
+    layoutImagePlugin,
+  ]
+})

package/uno.config.ts

@@ -1,48 +1,117 @@
 import { defineConfig } from 'unocss'
 import fs from 'fs'
+import path from 'path'
 import { globSync } from 'glob'
 
-// Function to scan files for icon patterns
-function scanFilesForIcons() {
+/**
+ * Scans markdown files for VSCode icon patterns used in code blocks.
+ * Icons are referenced with syntax: ~i-vscode-icons:file-type-name~
+ * 
+ * When built through docusaurus-plugin-slidev, uses environment variables:
+ * - SLIDEV_ORIGINAL_SOURCE: Path to the original markdown file
+ * - SLIDEV_ORIGINAL_SOURCE_DIR: Directory containing the source file
+ * - SLIDEV_SITE_DIR: The Docusaurus site directory
+ */
+function scanFilesForIcons(): string[] {
     try {
-        // Find all markdown files in the project directory and all subdirectories
-        // Use process.cwd() to scan from the actual project root, not the theme package location
-        const slideFiles = globSync('**/*.md', { absolute: true, cwd: process.cwd() })
+        // Try multiple strategies to find markdown files
+        const searchRoots: string[] = [
+            process.cwd(),
+            path.resolve(process.cwd(), 'slidev'),
+            path.resolve(process.cwd(), '..'),
+            path.resolve(process.cwd(), '.docusaurus'),
+        ]
+        
+        // Add paths from docusaurus-plugin-slidev environment variables
+        if (process.env.SLIDEV_ORIGINAL_SOURCE_DIR) {
+            searchRoots.push(process.env.SLIDEV_ORIGINAL_SOURCE_DIR)
+        }
+        if (process.env.SLIDEV_SITE_DIR) {
+            searchRoots.push(process.env.SLIDEV_SITE_DIR)
+            searchRoots.push(path.resolve(process.env.SLIDEV_SITE_DIR, 'slidev'))
+        }
         
         // Pattern to match icon references like ~i-vscode-icons:file-type-ansible~
         const iconPattern = /~(i-[a-zA-Z0-9-]+:[a-zA-Z0-9-]+)~/g
         
-        // Set to store unique icons
-        const icons = new Set(['i-vscode-icons:file-type-docker']) // Include default icon
+        // Set to store unique icons - include common defaults
+        const icons = new Set([
+            'i-vscode-icons:file-type-docker',
+            'i-vscode-icons:file-type-python',
+            'i-vscode-icons:file-type-typescript-official',
+            'i-vscode-icons:file-type-js-official',
+            'i-vscode-icons:file-type-yaml',
+            'i-vscode-icons:file-type-json',
+            'i-vscode-icons:file-type-markdown',
+            'i-vscode-icons:file-type-vue',
+            'i-vscode-icons:file-type-html',
+            'i-vscode-icons:file-type-css',
+            'i-vscode-icons:file-type-shell',
+            'i-vscode-icons:file-type-powershell',
+            'i-vscode-icons:file-type-git',
+            'i-vscode-icons:file-type-ansible',
+            'i-vscode-icons:file-type-terraform',
+            'i-vscode-icons:file-type-kubernetes',
+        ])
         
-        // Scan each file for icon patterns
-        slideFiles.forEach((file: string) => {
+        // Read the original source file directly if available (from docusaurus-plugin-slidev)
+        if (process.env.SLIDEV_ORIGINAL_SOURCE && fs.existsSync(process.env.SLIDEV_ORIGINAL_SOURCE)) {
             try {
-                const content = fs.readFileSync(file, 'utf-8')
+                const content = fs.readFileSync(process.env.SLIDEV_ORIGINAL_SOURCE, 'utf-8')
                 let match
                 while ((match = iconPattern.exec(content)) !== null) {
                     if (match[1]) {
                         icons.add(match[1])
                     }
                 }
-            } catch (err) {
-                console.warn(`Error reading file ${file}:`, err)
+            } catch {
+                // Silently ignore read errors
+            }
+        }
+        
+        // Scan from each root
+        for (const searchRoot of searchRoots) {
+            try {
+                if (!fs.existsSync(searchRoot)) continue
+                
+                // Find all markdown files, excluding node_modules but INCLUDE .docusaurus
+                const slideFiles = globSync('**/*.md', { 
+                    absolute: true, 
+                    cwd: searchRoot,
+                    ignore: ['**/node_modules/**', '**/dist/**', '**/build/**'],
+                    dot: true
+                })
+                
+                // Scan each file for icon patterns
+                slideFiles.forEach((file: string) => {
+                    try {
+                        const content = fs.readFileSync(file, 'utf-8')
+                        let match
+                        while ((match = iconPattern.exec(content)) !== null) {
+                            if (match[1]) {
+                                icons.add(match[1])
+                            }
+                        }
+                    } catch {
+                        // Silently ignore read errors
+                    }
+                })
+            } catch {
+                // Silently ignore scan errors
             }
-        })
+        }
         
-        return Array.from(icons)
-    } catch (err) {
-        console.warn('Error scanning files for icons:', err)
-        return ['i-vscode-icons:file-type-docker'] // Fallback to default icon
+        return Array.from(icons) as string[]
+    } catch {
+        // Return default icon on error
+        return ['i-vscode-icons:file-type-docker']
     }
 }
 
 export default defineConfig({
     safelist: [
-        // Static icons that should always be included
-        'i-vscode-icons:file-type-docker',
-        
         // Dynamically scan for icons in slide files
-        () => scanFilesForIcons()
+        // This returns an array of icon class names that should be included
+        ...scanFilesForIcons()
     ],
 })

package/utils/layoutHelper.ts

@@ -1,8 +1,20 @@
 import type { CSSProperties } from "vue";
 
 /**
- * Simple function to resolve image paths
- * Works for URLs, absolute paths, and relative paths
+ * Resolve image paths for use in layouts.
+ * 
+ * This function handles multiple types of image paths:
+ * - Already resolved paths (from Vite plugin transformation) - returned as-is
+ * - Full URLs (http/https) - returned as-is
+ * - Data URLs (data:) - returned as-is  
+ * - Blob URLs (blob:) - returned as-is
+ * - Root-relative paths (/path) - returned as-is
+ * - Colors (#hex, rgb) - returned as-is
+ * - Relative paths (./path, path) - converted to root-relative
+ * 
+ * When the vite-plugins.ts is active, relative paths in frontmatter are
+ * automatically transformed into resolved import URLs before reaching
+ * this function, so they'll be handled by the "already resolved" case.
  */
 export function getImageUrl(path?: string): string {
   if (!path) return "";
@@ -10,14 +22,36 @@ export function getImageUrl(path?: string): string {
   // If it's a color, don't process it
   if (path.startsWith("#") || path.startsWith("rgb")) return path;
 
-  // If it's a full URL, use it as is
-  if (path.match(/^https?:\/\//)) return path;
+  // If it's already a resolved URL (from Vite import), use as-is
+  // This includes:
+  // - Data URLs: data:image/...
+  // - Blob URLs: blob:...
+  // - Full URLs: http:// or https://
+  // - Vite asset URLs: /assets/image.hash.png or /@fs/...
+  if (
+    path.startsWith("data:") ||
+    path.startsWith("blob:") ||
+    path.match(/^https?:\/\//) ||
+    path.startsWith("/@fs/") ||
+    path.match(/^\/assets\//)
+  ) {
+    return path;
+  }
 
   // If it's a root-relative path (starts with /), use it as is
   if (path.startsWith("/")) return path;
 
-  // Otherwise, treat as relative path and add leading slash
-  return `/${path}`;
+  // For relative paths, try to use the base URL if available
+  // This handles the case where images are in the public folder
+  const baseUrl = typeof import.meta !== 'undefined' 
+    ? (import.meta.env?.BASE_URL || '/') 
+    : '/';
+  
+  // Remove ./ prefix if present
+  const cleanPath = path.startsWith("./") ? path.slice(2) : path;
+  
+  // Return with base URL
+  return `${baseUrl}${cleanPath}`;
 }
 
 /**