slidev-workspace 0.2.2 → 0.3.0

package/README.md

@@ -0,0 +1,59 @@
+# Slidev Workspace
+
+[![npm version](https://badge.fury.io/js/slidev-workspace.svg)](https://badge.fury.io/js/slidev-workspace)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Slidev Workspace is a specialized command-line tool designed to manage and showcase multiple [Slidev](https://sli.dev) presentations. It provides a unified web interface to browse, search, and access Slidev presentations distributed across different directories.
+
+- **[Slidev Workspace Starter](https://github.com/leochiu-a/slidev-workspace-starter)** - Ready-to-use template
+- **[Live Demo](https://leochiu-a.github.io/slidev-workspace-starter/)** - See it in action
+- **[Documentation](https://leochiu-a.github.io/slidev-workspace/)**
+
+## Features
+
+✨ **Multi-presentation management** - Organize multiple Slidev presentations in one workspace  
+📱 **Responsive interface** - Clean, modern UI for presentation management  
+🔧 **Easy configuration** - Simple YAML-based configuration  
+📦 **Build & Deploy** - Built-in commands for production builds  
+🎨 **Thumbnail previews** - Visual presentation previews in the workspace
+
+## Usage
+
+Slidev Workspace provides two flexible ways to work with your presentations:
+
+### Built-in Preview Interface
+
+Use the command-line tool for an out-of-the-box solution:
+
+```bash
+slidev-workspace preview
+```
+
+This launches a responsive web interface with presentation management, search functionality, and thumbnail previews - perfect for users who want to get started quickly without building custom UI.
+
+### Content API
+
+For developers who need custom UI integration, access slide data programmatically:
+
+```typescript
+import { useSlides } from "slidev-workspace";
+
+const { slides } = useSlides();
+```
+
+The `useSlides` composable returns frontmatter data from all discovered presentations, enabling you to build entirely custom interfaces while leveraging Slidev Workspace's presentation discovery and parsing capabilities.
+
+## Quick Start
+
+Get started in 5 minutes! See our [Quick Start Guide](https://leochiu-a.github.io/slidev-workspace/getting-started/quick-start.html).
+
+## Documentation
+
+- 📚 [Quick Start Guide](https://leochiu-a.github.io/slidev-workspace/getting-started/quick-start.html) - Get up and running in 5 minutes
+- 🚀 [Deployment Guide](https://leochiu-a.github.io/slidev-workspace/getting-started/deploy.html) - Deploy to GitHub Pages
+
+## Related Projects
+
+- [Slidev](https://sli.dev) - Presentation slides for developers
+- [Vue.js](https://vuejs.org) - The progressive JavaScript framework
+- [Vite](https://vitejs.dev) - Next generation frontend tooling

package/dist/cli.js

@@ -17,7 +17,11 @@ const DEFAULT_CONFIG = {
 	slidesDir: ["./slides"],
 	outputDir: "./dist",
 	baseUrl: "/",
-	exclude: ["node_modules", ".git"]
+	exclude: ["node_modules", ".git"],
+	hero: {
+		title: "Slide Deck",
+		description: "Browse all available slide decks and use the search function to quickly find what you need."
+	}
 };
 function loadConfig(workingDir) {
 	const configPaths = [
@@ -60,6 +64,7 @@ function resolveSlidesDirs(config, workingDir) {
 //#region src/scripts/getSlideFrontmatter.ts
 function getSlideFrontmatterByPath(slideDir, slideName) {
 	try {
+		const config = loadConfig();
 		const fullPath = join$1(slideDir, slideName, "slides.md");
 		if (!existsSync$1(fullPath)) {
 			console.warn(`File not found: ${fullPath}`);
@@ -81,7 +86,8 @@ function getSlideFrontmatterByPath(slideDir, slideName) {
 			fullPath,
 			sourceDir: slideDir,
 			frontmatter,
-			content: content.replace(frontmatterMatch[0], "")
+			content: content.replace(frontmatterMatch[0], ""),
+			baseUrl: config.baseUrl
 		};
 	} catch (error) {
 		console.error(`Error parsing frontmatter for ${slideName} in ${slideDir}:`, error);
@@ -238,7 +244,7 @@ function slidesPlugin() {
 			});
 		},
 		resolveId(id) {
-			if (id === "slidev:content") return id;
+			if (id === "slidev:content" || id === "slidev:config") return id;
 		},
 		load(id) {
 			if (id === "slidev:content") try {
@@ -250,6 +256,16 @@ export default slidesData;`;
 				return `export const slidesData = [];
 export default slidesData;`;
 			}
+			if (id === "slidev:config") try {
+				const config = loadConfig();
+				const configData = { hero: config.hero };
+				return `export const configData = ${JSON.stringify(configData, null, 2)};
+export default configData;`;
+			} catch (error) {
+				console.error("Error loading config:", error);
+				return `export const configData = { hero: {} };
+export default configData;`;
+			}
 		}
 	};
 }
@@ -301,7 +317,9 @@ async function buildAllSlides() {
 			console.log(`📦 Building slide: ${slideName}`);
 			try {
 				const baseUrl = config.baseUrl.endsWith("/") ? config.baseUrl : config.baseUrl + "/";
-				const buildCmd = `pnpm --filter "./slides/${slideName}" run build --base ${baseUrl}${slideName}/`;
+				const subDir = slideDir.startsWith(workspaceCwd) ? slideDir.replace(workspaceCwd, "").replace(/^\//, "") : slideDir;
+				const buildCmd = `pnpm --filter "./${subDir}" run build --base ${baseUrl}${slideName}/`;
+				console.log(buildCmd);
 				execSync(buildCmd, {
 					cwd: workspaceCwd,
 					stdio: "inherit"

package/dist/index.d.ts

@@ -27,6 +27,8 @@ interface SlideInfo {
   sourceDir: string;
   frontmatter: SlideFrontmatter;
   content: string;
+  /** The base URL of the slide, which is defined in slidev-workspace.yml */
+  baseUrl: string;
 }
 interface SlideData {
   title: string;
@@ -49,11 +51,16 @@ declare function useSlides(): {
 };
 //#endregion
 //#region src/types/config.d.ts
+interface HeroConfig {
+  title: string;
+  description: string;
+}
 interface SlidevWorkspaceConfig {
   slidesDir: string[];
   outputDir: string;
   baseUrl: string;
   exclude: string[];
+  hero: HeroConfig;
 }
 //#endregion
 export { type SlideData, type SlideFrontmatter, type SlideInfo, type SlidevWorkspaceConfig, useSlides };

package/dist/index.js

@@ -3,6 +3,33 @@ import { computed, ref } from "vue";
 //#region src/preview/constants/env.ts
 const IS_DEVELOPMENT = import.meta.env.MODE === "development";
 
+//#endregion
+//#region src/preview/lib/pathJoin.ts
+/**
+* Join multiple path segments into a single path
+* - Removes duplicate slashes
+* - Handles leading and trailing slashes properly
+* - Works with both relative and absolute paths
+*
+* @example
+* pathJoin('/base/', '/path/', 'file.jpg') // '/base/path/file.jpg'
+* pathJoin('base', 'path', 'file.jpg') // 'base/path/file.jpg'
+* pathJoin('/base/', 'path') // '/base/path'
+*/
+function pathJoin(...segments) {
+	if (segments.length === 0) return "";
+	const filtered = segments.filter((segment) => segment !== "");
+	if (filtered.length === 0) return "";
+	const isAbsolute = filtered[0].startsWith("/");
+	const processed = filtered.map((segment) => {
+		return segment.replace(/^\/+|\/+$/g, "");
+	});
+	const nonEmpty = processed.filter((segment) => segment !== "");
+	if (nonEmpty.length === 0) return isAbsolute ? "/" : "";
+	const joined = nonEmpty.join("/");
+	return isAbsolute ? `/${joined}` : joined;
+}
+
 //#endregion
 //#region src/preview/composables/useSlides.ts
 /**
@@ -18,19 +45,33 @@ function isUrl(str) {
 	}
 }
 /**
-* Resolve background image path
-* If the background is not a URL, construct the full path using slide.path as base
+* Resolve background image path.
+* If the background is not a URL, construct the full path using slide.path as the base.
+*
+* Example (development mode):
+* {
+*   background: "/bg1.jpg",
+*   slidePath: "/slides-presentation-1",
+*   baseUrl: "/slidev-workspace-starter/",
+*   domain: "http://localhost:3001" // domain of the current server
+* }
+* returns: "http://localhost:3001/slides-presentation-1/bg1.jpg"
+*
+* Example (production mode):
+* {
+*   background: "/bg1.jpg",
+*   slidePath: "/slides-presentation-1",
+*   baseUrl: "/slidev-workspace-starter/",
+*   domain: "https://my-slides.com" // domain of the current server
+* }
+* returns: "https://my-slides.com/slidev-workspace-starter/slides-presentation-1/bg1.jpg"
 */
 function resolveBackgroundPath(params) {
-	const { background, slidePath, devServerUrl } = params;
+	const { background, slidePath, domain, baseUrl } = params;
 	if (!background) return "";
 	if (isUrl(background)) return background;
 	try {
-		const domain = IS_DEVELOPMENT ? devServerUrl : window.location.origin;
-		const basePath = slidePath.endsWith("/") ? slidePath : slidePath + "/";
-		const relativeBg = background.startsWith("/") ? background.slice(1) : background;
-		const resolvedUrl = new URL(basePath + relativeBg, domain);
-		return resolvedUrl.href;
+		return IS_DEVELOPMENT ? new URL(pathJoin(slidePath, background), domain).href : new URL(pathJoin(baseUrl, slidePath, background), domain).href;
 	} catch (error) {
 		console.error("Failed to resolve background path:", error);
 		return background;
@@ -60,7 +101,8 @@ function useSlides() {
 			const imageUrl = background ? resolveBackgroundPath({
 				background: slide.frontmatter.background,
 				slidePath: slide.path,
-				devServerUrl
+				baseUrl: slide.baseUrl,
+				domain: IS_DEVELOPMENT ? devServerUrl : window.location.origin
 			}) : "https://cover.sli.dev";
 			return {
 				title: slide.frontmatter.title || slide.path,

package/dist/plugin-slides.js

@@ -8,7 +8,11 @@ const DEFAULT_CONFIG = {
 	slidesDir: ["./slides"],
 	outputDir: "./dist",
 	baseUrl: "/",
-	exclude: ["node_modules", ".git"]
+	exclude: ["node_modules", ".git"],
+	hero: {
+		title: "Slide Deck",
+		description: "Browse all available slide decks and use the search function to quickly find what you need."
+	}
 };
 function loadConfig(workingDir) {
 	const configPaths = [
@@ -51,6 +55,7 @@ function resolveSlidesDirs(config, workingDir) {
 //#region src/scripts/getSlideFrontmatter.ts
 function getSlideFrontmatterByPath(slideDir, slideName) {
 	try {
+		const config = loadConfig();
 		const fullPath = join(slideDir, slideName, "slides.md");
 		if (!existsSync(fullPath)) {
 			console.warn(`File not found: ${fullPath}`);
@@ -72,7 +77,8 @@ function getSlideFrontmatterByPath(slideDir, slideName) {
 			fullPath,
 			sourceDir: slideDir,
 			frontmatter,
-			content: content.replace(frontmatterMatch[0], "")
+			content: content.replace(frontmatterMatch[0], ""),
+			baseUrl: config.baseUrl
 		};
 	} catch (error) {
 		console.error(`Error parsing frontmatter for ${slideName} in ${slideDir}:`, error);
@@ -229,7 +235,7 @@ function slidesPlugin() {
 			});
 		},
 		resolveId(id) {
-			if (id === "slidev:content") return id;
+			if (id === "slidev:content" || id === "slidev:config") return id;
 		},
 		load(id) {
 			if (id === "slidev:content") try {
@@ -241,6 +247,16 @@ export default slidesData;`;
 				return `export const slidesData = [];
 export default slidesData;`;
 			}
+			if (id === "slidev:config") try {
+				const config = loadConfig();
+				const configData = { hero: config.hero };
+				return `export const configData = ${JSON.stringify(configData, null, 2)};
+export default configData;`;
+			} catch (error) {
+				console.error("Error loading config:", error);
+				return `export const configData = { hero: {} };
+export default configData;`;
+			}
 		}
 	};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-workspace",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A workspace tool for managing multiple Slidev presentations with API-based content management",
   "type": "module",
   "license": "MIT",

package/src/preview/components/SlideDeck.vue

@@ -4,10 +4,9 @@
   >
     <div class="max-w-5xl mx-auto">
       <div class="mb-8">
-        <h1 class="text-3xl font-bold mb-2">Slide Deck</h1>
+        <h1 class="text-3xl font-bold mb-2">{{ hero.title }}</h1>
         <p class="text-muted-foreground">
-          Browse all available slide decks and use the search function to
-          quickly find what you need.
+          {{ hero.description }}
         </p>
       </div>
 
@@ -52,11 +51,13 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useSlides } from "../composables/useSlides";
+import { useConfig } from "../composables/useConfig";
 import { Input } from "../components/ui/input";
 import SlideCard from "./SlideCard.vue";
 
 const searchTerm = ref("");
 const { slides, slidesCount } = useSlides();
+const { hero } = useConfig();
 
 const filteredSlides = computed(() => {
   if (!searchTerm.value) return slides.value;

package/src/preview/composables/__mocks__/slidev-config.ts

@@ -0,0 +1,15 @@
+import type { HeroConfig } from "../../../types/config";
+
+interface ConfigData {
+  hero: HeroConfig;
+}
+
+const mockConfigData: ConfigData = {
+  hero: {
+    title: "Slide Deck",
+    description:
+      "Browse all available slide decks and use the search function to quickly find what you need.",
+  },
+};
+
+export default mockConfigData;

package/src/preview/composables/__mocks__/slidev-content.ts

@@ -17,6 +17,7 @@ const mockSlidesData: SlideInfo[] = [
       class: "text-center",
     },
     content: "# Slide content",
+    baseUrl: "/slidev-workspace-starter/",
   },
   {
     id: "slide-2",
@@ -32,6 +33,7 @@ const mockSlidesData: SlideInfo[] = [
       },
     },
     content: "# Another slide",
+    baseUrl: "/slidev-workspace-starter/",
   },
   {
     id: "slide-3",
@@ -40,6 +42,7 @@ const mockSlidesData: SlideInfo[] = [
     sourceDir: "/path/to/slides",
     frontmatter: {},
     content: "# Minimal slide",
+    baseUrl: "/slidev-workspace-starter/",
   },
 ];
 

package/src/preview/composables/useConfig.test.ts

@@ -0,0 +1,158 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+
+describe("useConfig", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  /**
+   * Helper function to setup useConfig and wait for data to load
+   */
+  async function setupUseConfig(configData?: {
+    hero: { title: string; description: string };
+  }) {
+    vi.resetModules();
+
+    // Mock the virtual module
+    vi.doMock("slidev:config", () => ({
+      default: configData || {
+        hero: {
+          title: "Slide Deck",
+          description:
+            "Browse all available slide decks and use the search function to quickly find what you need.",
+        },
+      },
+    }));
+
+    const { useConfig } = await import("./useConfig");
+    const result = useConfig();
+
+    // Wait for data to finish loading
+    await vi.waitFor(
+      () => {
+        // Check if config has loaded by comparing with expected values
+        if (configData) {
+          expect(result.hero.value.title).toBe(configData.hero.title);
+        } else {
+          expect(result.hero.value.title).toBe("Slide Deck");
+        }
+      },
+      { timeout: 1000, interval: 10 },
+    );
+
+    return result;
+  }
+
+  describe("hero config", () => {
+    it("should return hero config from slidev:config", async () => {
+      const result = await setupUseConfig({
+        hero: {
+          title: "Test Workspace",
+          description: "Test Description",
+        },
+      });
+
+      expect(result.hero.value.title).toBe("Test Workspace");
+      expect(result.hero.value.description).toBe("Test Description");
+    });
+
+    it("should provide reactive hero config", async () => {
+      const result = await setupUseConfig({
+        hero: {
+          title: "Initial Title",
+          description: "Initial Description",
+        },
+      });
+
+      // Initial values
+      expect(result.hero.value.title).toBe("Initial Title");
+      expect(result.hero.value.description).toBe("Initial Description");
+
+      // Hero should be reactive
+      expect(result.hero.value).toBeDefined();
+      expect(typeof result.hero.value).toBe("object");
+    });
+
+    it("should return default hero values when no config provided", async () => {
+      const result = await setupUseConfig();
+
+      expect(result.hero.value.title).toBe("Slide Deck");
+      expect(result.hero.value.description).toContain("Browse all available");
+    });
+  });
+
+  describe("HeroConfig properties", () => {
+    it("should have title and description properties", async () => {
+      const result = await setupUseConfig({
+        hero: {
+          title: "Test Title",
+          description: "Test Description",
+        },
+      });
+
+      const hero = result.hero.value;
+
+      expect("title" in hero).toBe(true);
+      expect("description" in hero).toBe(true);
+      expect(typeof hero.title).toBe("string");
+      expect(typeof hero.description).toBe("string");
+    });
+
+    it("should handle long descriptions", async () => {
+      const longDescription =
+        "This is a very long description that could contain multiple sentences and paragraphs to describe the workspace";
+
+      const result = await setupUseConfig({
+        hero: {
+          title: "My Workspace",
+          description: longDescription,
+        },
+      });
+
+      expect(result.hero.value.description).toBe(longDescription);
+      expect(result.hero.value.description.length).toBeGreaterThan(50);
+    });
+
+    it("should handle special characters in title and description", async () => {
+      const result = await setupUseConfig({
+        hero: {
+          title: "My Slides & Presentations",
+          description: "Browse <all> available slides @ our company",
+        },
+      });
+
+      expect(result.hero.value.title).toContain("&");
+      expect(result.hero.value.description).toContain("<");
+      expect(result.hero.value.description).toContain("@");
+    });
+  });
+
+  describe("error handling", () => {
+    it("should use default values when import fails", async () => {
+      vi.resetModules();
+
+      // Mock import to throw error
+      vi.doMock("slidev:config", () => {
+        throw new Error("Failed to load config");
+      });
+
+      const { useConfig } = await import("./useConfig");
+      const result = useConfig();
+
+      // Should fall back to default values
+      await vi.waitFor(
+        () => {
+          expect(result.hero.value.title).toBe("Slide Deck");
+          expect(result.hero.value.description).toContain(
+            "Browse all available",
+          );
+        },
+        { timeout: 1000, interval: 10 },
+      );
+    });
+  });
+});

package/src/preview/composables/useConfig.ts

@@ -0,0 +1,31 @@
+import { computed, ref } from "vue";
+import type { HeroConfig } from "../../types/config.js";
+
+const DEFAULT_CONFIG = {
+  hero: {
+    title: "Slide Deck",
+    description:
+      "Browse all available slide decks and use the search function to quickly find what you need.",
+  },
+};
+
+export function useConfig() {
+  const heroData = ref<HeroConfig>(DEFAULT_CONFIG.hero);
+
+  const loadConfigData = async () => {
+    try {
+      const module = await import("slidev:config");
+      heroData.value = module.default?.hero || heroData.value;
+    } catch (error) {
+      console.warn("Failed to load config data:", error);
+    }
+  };
+
+  loadConfigData();
+
+  const hero = computed(() => heroData.value);
+
+  return {
+    hero,
+  };
+}

package/src/preview/composables/useSlides.test.ts

@@ -201,7 +201,7 @@ describe("useSlides (Production Mode)", () => {
       const firstSlide = result.slides.value[0];
 
       expect(firstSlide.image).toBe(
-        "https://my-slides.com/slides-presentation-1/bg1.jpg",
+        "https://my-slides.com/slidev-workspace-starter/slides-presentation-1/bg1.jpg",
       );
     });
 

package/src/preview/composables/useSlides.ts

@@ -1,6 +1,7 @@
 import { computed, ref } from "vue";
 import type { SlideData, SlideInfo } from "../../types/slide";
 import { IS_DEVELOPMENT } from "../constants/env";
+import { pathJoin } from "../lib/pathJoin";
 
 /**
  * Check if a string is a valid URL
@@ -17,33 +18,47 @@ function isUrl(str: string | undefined): boolean {
 }
 
 /**
- * Resolve background image path
- * If the background is not a URL, construct the full path using slide.path as base
+ * Resolve background image path.
+ * If the background is not a URL, construct the full path using slide.path as the base.
+ *
+ * Example (development mode):
+ * {
+ *   background: "/bg1.jpg",
+ *   slidePath: "/slides-presentation-1",
+ *   baseUrl: "/slidev-workspace-starter/",
+ *   domain: "http://localhost:3001" // domain of the current server
+ * }
+ * returns: "http://localhost:3001/slides-presentation-1/bg1.jpg"
+ *
+ * Example (production mode):
+ * {
+ *   background: "/bg1.jpg",
+ *   slidePath: "/slides-presentation-1",
+ *   baseUrl: "/slidev-workspace-starter/",
+ *   domain: "https://my-slides.com" // domain of the current server
+ * }
+ * returns: "https://my-slides.com/slidev-workspace-starter/slides-presentation-1/bg1.jpg"
  */
 function resolveBackgroundPath(params: {
   background: string | undefined;
   slidePath: string;
-  devServerUrl: string;
+  baseUrl: string;
+  domain: string;
 }): string {
-  const { background, slidePath, devServerUrl } = params;
+  const { background, slidePath, domain, baseUrl } = params;
 
-  if (!background) return "";
+  if (!background) {
+    return "";
+  }
 
   if (isUrl(background)) {
     return background;
   }
 
   try {
-    const domain = IS_DEVELOPMENT ? devServerUrl : window.location.origin;
-    // Ensure slidePath ends with / for proper path resolution
-    const basePath = slidePath.endsWith("/") ? slidePath : slidePath + "/";
-    // Remove leading / from background to treat it as relative
-    const relativeBg = background.startsWith("/")
-      ? background.slice(1)
-      : background;
-    const resolvedUrl = new URL(basePath + relativeBg, domain);
-
-    return resolvedUrl.href;
+    return IS_DEVELOPMENT
+      ? new URL(pathJoin(slidePath, background), domain).href
+      : new URL(pathJoin(baseUrl, slidePath, background), domain).href;
   } catch (error) {
     console.error("Failed to resolve background path:", error);
     return background;
@@ -86,7 +101,8 @@ export function useSlides() {
         ? resolveBackgroundPath({
             background: slide.frontmatter.background,
             slidePath: slide.path,
-            devServerUrl,
+            baseUrl: slide.baseUrl,
+            domain: IS_DEVELOPMENT ? devServerUrl : window.location.origin,
           })
         : "https://cover.sli.dev";
 

package/src/preview/lib/pathJoin.test.ts

@@ -0,0 +1,120 @@
+import { describe, it, expect } from "vitest";
+import { pathJoin } from "./pathJoin";
+
+describe("pathJoin", () => {
+  describe("basic functionality", () => {
+    it("should join simple path segments", () => {
+      expect(pathJoin("a", "b", "c")).toBe("a/b/c");
+    });
+
+    it("should handle single segment", () => {
+      expect(pathJoin("path")).toBe("path");
+    });
+
+    it("should return empty string for no arguments", () => {
+      expect(pathJoin()).toBe("");
+    });
+
+    it("should return empty string for all empty segments", () => {
+      expect(pathJoin("", "", "")).toBe("");
+    });
+  });
+
+  describe("leading slashes", () => {
+    it("should preserve leading slash for absolute paths", () => {
+      expect(pathJoin("/a", "b", "c")).toBe("/a/b/c");
+    });
+
+    it("should not add leading slash for relative paths", () => {
+      expect(pathJoin("a", "b", "c")).toBe("a/b/c");
+    });
+
+    it("should preserve leading slash with trailing slashes", () => {
+      expect(pathJoin("/a/", "b/", "c/")).toBe("/a/b/c");
+    });
+  });
+
+  describe("trailing slashes", () => {
+    it("should remove trailing slashes from segments", () => {
+      expect(pathJoin("a/", "b/", "c/")).toBe("a/b/c");
+    });
+
+    it("should handle segments with both leading and trailing slashes", () => {
+      expect(pathJoin("/a/", "/b/", "/c/")).toBe("/a/b/c");
+    });
+  });
+
+  describe("duplicate slashes", () => {
+    it("should remove duplicate slashes between segments", () => {
+      expect(pathJoin("a//", "//b", "c")).toBe("a/b/c");
+    });
+
+    it("should handle multiple consecutive slashes", () => {
+      expect(pathJoin("a///", "///b///", "///c")).toBe("a/b/c");
+    });
+
+    it("should handle absolute paths with multiple slashes", () => {
+      expect(pathJoin("///a", "b", "c")).toBe("/a/b/c");
+    });
+  });
+
+  describe("empty segments", () => {
+    it("should filter out empty segments", () => {
+      expect(pathJoin("a", "", "b", "", "c")).toBe("a/b/c");
+    });
+
+    it("should handle empty segments with slashes", () => {
+      expect(pathJoin("/a", "", "/b", "", "c")).toBe("/a/b/c");
+    });
+  });
+
+  describe("real-world use cases", () => {
+    it("should join base URL and relative path", () => {
+      expect(pathJoin("/base/", "/path/", "file.jpg")).toBe(
+        "/base/path/file.jpg",
+      );
+    });
+
+    it("should join without leading slash", () => {
+      expect(pathJoin("base", "path", "file.jpg")).toBe("base/path/file.jpg");
+    });
+
+    it("should join base and path segments", () => {
+      expect(pathJoin("/base/", "path")).toBe("/base/path");
+    });
+
+    it("should handle slidev-workspace paths", () => {
+      expect(
+        pathJoin(
+          "/slidev-workspace-starter",
+          "/slides-presentation-1/",
+          "bg1.jpg",
+        ),
+      ).toBe("/slidev-workspace-starter/slides-presentation-1/bg1.jpg");
+    });
+
+    it("should handle relative paths for slide backgrounds", () => {
+      expect(pathJoin("slides-presentation-1/", "bg1.jpg")).toBe(
+        "slides-presentation-1/bg1.jpg",
+      );
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle only slashes", () => {
+      expect(pathJoin("/", "/", "/")).toBe("/");
+    });
+
+    it("should handle single slash", () => {
+      expect(pathJoin("/")).toBe("/");
+    });
+
+    it("should handle path with dots", () => {
+      expect(pathJoin("path", "to", "../file.jpg")).toBe("path/to/../file.jpg");
+    });
+
+    it("should handle file extensions", () => {
+      expect(pathJoin("/path", "file.name.ext")).toBe("/path/file.name.ext");
+    });
+  });
+});

package/src/preview/lib/pathJoin.ts

@@ -0,0 +1,39 @@
+/**
+ * Join multiple path segments into a single path
+ * - Removes duplicate slashes
+ * - Handles leading and trailing slashes properly
+ * - Works with both relative and absolute paths
+ *
+ * @example
+ * pathJoin('/base/', '/path/', 'file.jpg') // '/base/path/file.jpg'
+ * pathJoin('base', 'path', 'file.jpg') // 'base/path/file.jpg'
+ * pathJoin('/base/', 'path') // '/base/path'
+ */
+export function pathJoin(...segments: string[]): string {
+  if (segments.length === 0) return "";
+
+  // Filter out empty segments
+  const filtered = segments.filter((segment) => segment !== "");
+  if (filtered.length === 0) return "";
+
+  // Check if path should start with /
+  const isAbsolute = filtered[0].startsWith("/");
+
+  // Process each segment: remove leading and trailing slashes
+  const processed = filtered.map((segment) => {
+    return segment.replace(/^\/+|\/+$/g, "");
+  });
+
+  // Filter out empty strings after processing
+  const nonEmpty = processed.filter((segment) => segment !== "");
+
+  if (nonEmpty.length === 0) {
+    return isAbsolute ? "/" : "";
+  }
+
+  // Join with single slash
+  const joined = nonEmpty.join("/");
+
+  // Add leading slash if original path was absolute
+  return isAbsolute ? `/${joined}` : joined;
+}