slidev-workspace 0.2.2 → 0.2.3

package/dist/cli.js

@@ -60,6 +60,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 +82,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);

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;

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

@@ -51,6 +51,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 +73,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);

package/package.json

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

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/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;
+}