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

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,6 +19,44 @@ All packages within `@sp-days-framework` use the same version number. In some ca
 
 ---
 
+## Version 1.1.1 ![Release](https://img.shields.io/badge/release-production-blue)
+
+Relative image path support and security updates
+
+<details>
+<summary><strong>Details</strong> (2026 February 09)</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
+
+### Improvements
+
+- **Security**: Added `lodash-es` and `chevrotain` overrides to fix prototype pollution vulnerability (CVE in lodash-es < 4.17.23)
+- **Dependencies**: Upgraded all dependencies to latest versions — @iconify-json/vscode-icons 1.2.40 and more
+
+### How It Works
+
+The theme includes a Vite plugin that intercepts frontmatter and transforms relative image paths:
+
+| 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 ![Release](https://img.shields.io/badge/release-production-blue)
 
 Bug fixes for VSCode icons and layout improvements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sp-days-framework/slidev-theme-sykehuspartner",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A Slidev theme for Sykehuspartner presentations.",
   "type": "module",
   "repository": {
@@ -42,7 +42,9 @@
     "@slidev/types": ">=52.0.0"
   },
   "overrides": {
-    "dompurify": "^3.2.4"
+    "dompurify": "^3.2.4",
+    "lodash-es": ">=4.17.23",
+    "chevrotain": ">=11.1.1"
   },
   "files": [
     "layouts/",

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/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}`;
 }
 
 /**