slidev-workspace 0.2.0 → 0.2.1

package/dist/index.d.ts

@@ -45,6 +45,7 @@ declare function useSlides(): {
   slides: vue0.ComputedRef<SlideData[]>;
   slidesCount: vue0.ComputedRef<number>;
   loadSlidesData: () => Promise<void>;
+  isLoading: vue0.Ref<boolean, boolean>;
 };
 //#endregion
 //#region src/types/config.d.ts

package/dist/index.js

@@ -1,8 +1,44 @@
 import { computed, ref } from "vue";
 
+//#region src/env.ts
+const IS_DEVELOPMENT = import.meta.env.MODE === "development";
+
+//#endregion
 //#region src/preview/composables/useSlides.ts
+/**
+* Check if a string is a valid URL
+*/
+function isUrl(str) {
+	if (!str) return false;
+	try {
+		new URL(str);
+		return true;
+	} catch {
+		return false;
+	}
+}
+/**
+* Resolve background image path
+* If the background is not a URL, construct the full path using slide.path as base
+*/
+function resolveBackgroundPath(params) {
+	const { background, slidePath, devServerUrl } = 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;
+	} catch (error) {
+		console.error("Failed to resolve background path:", error);
+		return background;
+	}
+}
 function useSlides() {
 	const slidesData = ref([]);
+	const isLoading = ref(true);
 	const loadSlidesData = async () => {
 		try {
 			const module = await import("slidev:content");
@@ -10,6 +46,8 @@ function useSlides() {
 		} catch (error) {
 			console.warn("Failed to load slides data:", error);
 			slidesData.value = [];
+		} finally {
+			isLoading.value = false;
 		}
 	};
 	loadSlidesData();
@@ -18,11 +56,17 @@ function useSlides() {
 		return slidesData.value.map((slide, index) => {
 			const port = 3001 + index;
 			const devServerUrl = `http://localhost:${port}`;
+			const background = slide.frontmatter.seoMeta?.ogImage || slide.frontmatter.background;
+			const imageUrl = background ? resolveBackgroundPath({
+				background: slide.frontmatter.background,
+				slidePath: slide.path,
+				devServerUrl
+			}) : "https://cover.sli.dev";
 			return {
 				title: slide.frontmatter.title || slide.path,
-				url: process.env.NODE_ENV === "development" ? devServerUrl : slide.path,
+				url: IS_DEVELOPMENT ? devServerUrl : slide.path,
 				description: slide.frontmatter.info || slide.frontmatter.seoMeta?.ogDescription || "No description available",
-				image: slide.frontmatter.background || slide.frontmatter.seoMeta?.ogImage || "https://cover.sli.dev",
+				image: imageUrl,
 				author: slide.frontmatter.author || "Unknown Author",
 				date: slide.frontmatter.date || new Date().toISOString().split("T")[0],
 				theme: slide.frontmatter.theme,
@@ -35,7 +79,8 @@ function useSlides() {
 	return {
 		slides,
 		slidesCount,
-		loadSlidesData
+		loadSlidesData,
+		isLoading
 	};
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-workspace",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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

@@ -0,0 +1,46 @@
+import type { SlideInfo } from "../../../types/slide";
+
+const mockSlidesData: SlideInfo[] = [
+  {
+    id: "slide-1",
+    path: "/slides-presentation-1/",
+    fullPath: "/path/to/slides-presentation-1",
+    sourceDir: "/path/to/slides",
+    frontmatter: {
+      title: "My First Presentation",
+      background: "/bg1.jpg",
+      info: "This is my first presentation",
+      author: "John Doe",
+      date: "2024-01-15",
+      theme: "default",
+      transition: "fade",
+      class: "text-center",
+    },
+    content: "# Slide content",
+  },
+  {
+    id: "slide-2",
+    path: "/slides-presentation-2/",
+    fullPath: "/path/to/slides-presentation-2",
+    sourceDir: "/path/to/slides",
+    frontmatter: {
+      title: "Second Presentation",
+      background: "https://example.com/bg.jpg",
+      seoMeta: {
+        ogImage: "https://example.com/og-image.jpg",
+        ogDescription: "SEO description",
+      },
+    },
+    content: "# Another slide",
+  },
+  {
+    id: "slide-3",
+    path: "/slides-presentation-3/",
+    fullPath: "/path/to/slides-presentation-3",
+    sourceDir: "/path/to/slides",
+    frontmatter: {},
+    content: "# Minimal slide",
+  },
+];
+
+export default mockSlidesData;

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

@@ -0,0 +1,222 @@
+import {
+  describe,
+  it,
+  expect,
+  beforeEach,
+  vi,
+  afterEach,
+  beforeAll,
+} from "vitest";
+
+describe("useSlides (Development Mode)", () => {
+  beforeAll(async () => {
+    vi.resetModules();
+    vi.doMock("../../env", () => ({
+      IS_DEVELOPMENT: true,
+    }));
+  });
+
+  beforeEach(() => {
+    // Reset window.location
+    delete (window as unknown as { location: unknown }).location;
+    (window as unknown as { location: { origin: string } }).location = {
+      origin: "http://localhost:3000",
+    };
+
+    // Clear all mocks
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  /**
+   * Helper function to setup useSlides in development mode and wait for data to load
+   */
+  async function setupUseSlides() {
+    const { useSlides } = await import("./useSlides");
+    const result = useSlides();
+
+    // Wait for data to finish loading using vitest's waitFor
+    await vi.waitFor(
+      () => {
+        expect(result.isLoading.value).toBe(false);
+      },
+      { timeout: 1000, interval: 10 },
+    );
+
+    return result;
+  }
+
+  describe("slide data transformation", () => {
+    it("should transform slide data correctly with all frontmatter fields", async () => {
+      const { slides } = await setupUseSlides();
+
+      const firstSlide = slides.value[0];
+
+      expect(firstSlide.title).toBe("My First Presentation");
+      expect(firstSlide.description).toBe("This is my first presentation");
+      expect(firstSlide.author).toBe("John Doe");
+      expect(firstSlide.date).toBe("2024-01-15");
+      expect(firstSlide.theme).toBe("default");
+      expect(firstSlide.transition).toBe("fade");
+      expect(firstSlide.class).toBe("text-center");
+    });
+
+    it("should use path as title fallback", async () => {
+      const { slides } = await setupUseSlides();
+
+      const thirdSlide = slides.value[2];
+
+      expect(thirdSlide.title).toBe("/slides-presentation-3/");
+    });
+
+    it("should use default description when no info available", async () => {
+      const { slides } = await setupUseSlides();
+
+      const thirdSlide = slides.value[2];
+
+      expect(thirdSlide.description).toBe("No description available");
+    });
+
+    it("should use seoMeta.ogDescription as description fallback", async () => {
+      const { slides } = await setupUseSlides();
+
+      const secondSlide = slides.value[1];
+
+      expect(secondSlide.description).toBe("SEO description");
+    });
+
+    it("should use 'Unknown Author' as author fallback", async () => {
+      const { slides } = await setupUseSlides();
+
+      const thirdSlide = slides.value[2];
+
+      expect(thirdSlide.author).toBe("Unknown Author");
+    });
+
+    it("should use current date as date fallback", async () => {
+      const { slides } = await setupUseSlides();
+
+      const thirdSlide = slides.value[2];
+      const expectedDate = new Date().toISOString().split("T")[0];
+
+      expect(thirdSlide.date).toBe(expectedDate);
+    });
+  });
+
+  describe("URL generation", () => {
+    it("should generate correct dev server URLs with incremental ports", async () => {
+      const { slides } = await setupUseSlides();
+
+      expect(slides.value[0].url).toBe("http://localhost:3001");
+      expect(slides.value[1].url).toBe("http://localhost:3002");
+      expect(slides.value[2].url).toBe("http://localhost:3003");
+    });
+  });
+
+  describe("background image resolution", () => {
+    it("should keep absolute URL backgrounds unchanged", async () => {
+      const { slides } = await setupUseSlides();
+
+      const secondSlide = slides.value[1];
+
+      expect(secondSlide.image).toBe("https://example.com/bg.jpg");
+    });
+
+    it("should resolve relative background paths in development mode", async () => {
+      const { slides } = await setupUseSlides();
+
+      const firstSlide = slides.value[0];
+
+      expect(firstSlide.image).toBe(
+        "http://localhost:3001/slides-presentation-1/bg1.jpg",
+      );
+    });
+
+    it("should use default cover when no background is provided", async () => {
+      const { slides } = await setupUseSlides();
+
+      const thirdSlide = slides.value[2];
+
+      expect(thirdSlide.image).toBe("https://cover.sli.dev");
+    });
+  });
+});
+
+describe("useSlides (Production Mode)", () => {
+  beforeAll(async () => {
+    vi.resetModules();
+    vi.doMock("../../env", () => ({
+      IS_DEVELOPMENT: false,
+    }));
+  });
+
+  beforeEach(() => {
+    // Reset window.location
+    delete (window as unknown as { location: unknown }).location;
+    (window as unknown as { location: { origin: string } }).location = {
+      origin: "https://my-slides.com",
+    };
+
+    // Clear all mocks
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  /**
+   * Helper to setup production mode useSlides
+   */
+  async function setupUseSlidesProduction() {
+    const { useSlides: useSlidesProduction } = await import("./useSlides");
+    const result = useSlidesProduction();
+
+    await vi.waitFor(
+      () => {
+        expect(result.isLoading.value).toBe(false);
+      },
+      { timeout: 1000, interval: 10 },
+    );
+
+    return result;
+  }
+
+  describe("URL generation in production", () => {
+    it("should use slide path as URL in production mode", async () => {
+      const result = await setupUseSlidesProduction();
+
+      expect(result.slides.value[0].url).toBe("/slides-presentation-1/");
+      expect(result.slides.value[1].url).toBe("/slides-presentation-2/");
+      expect(result.slides.value[2].url).toBe("/slides-presentation-3/");
+    });
+  });
+
+  describe("background image resolution in production", () => {
+    it("should resolve relative background paths with window.location.origin", async () => {
+      const result = await setupUseSlidesProduction();
+      const firstSlide = result.slides.value[0];
+
+      expect(firstSlide.image).toBe(
+        "https://my-slides.com/slides-presentation-1/bg1.jpg",
+      );
+    });
+
+    it("should keep absolute URL backgrounds unchanged in production", async () => {
+      const result = await setupUseSlidesProduction();
+      const secondSlide = result.slides.value[1];
+
+      expect(secondSlide.image).toBe("https://example.com/bg.jpg");
+    });
+
+    it("should use default cover when no background in production", async () => {
+      const result = await setupUseSlidesProduction();
+      const thirdSlide = result.slides.value[2];
+
+      expect(thirdSlide.image).toBe("https://cover.sli.dev");
+    });
+  });
+});

package/src/preview/composables/useSlides.ts

@@ -1,8 +1,58 @@
 import { computed, ref } from "vue";
-import type { SlideData, SlideInfo } from "../../types/slide.js";
+import type { SlideData, SlideInfo } from "../../types/slide";
+import { IS_DEVELOPMENT } from "../../env";
+
+/**
+ * Check if a string is a valid URL
+ */
+function isUrl(str: string | undefined): boolean {
+  if (!str) return false;
+
+  try {
+    new URL(str);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Resolve background image path
+ * If the background is not a URL, construct the full path using slide.path as base
+ */
+function resolveBackgroundPath(params: {
+  background: string | undefined;
+  slidePath: string;
+  devServerUrl: string;
+}): string {
+  const { background, slidePath, devServerUrl } = params;
+
+  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;
+  } catch (error) {
+    console.error("Failed to resolve background path:", error);
+    return background;
+  }
+}
 
 export function useSlides() {
   const slidesData = ref<SlideInfo[]>([]);
+  const isLoading = ref(true);
 
   // Dynamically import slidev:content to avoid build-time issues
   const loadSlidesData = async () => {
@@ -12,6 +62,8 @@ export function useSlides() {
     } catch (error) {
       console.warn("Failed to load slides data:", error);
       slidesData.value = [];
+    } finally {
+      isLoading.value = false;
     }
   };
 
@@ -27,17 +79,25 @@ export function useSlides() {
       // Create dev server URL
       const devServerUrl = `http://localhost:${port}`;
 
+      // Resolve background image path
+      const background =
+        slide.frontmatter.seoMeta?.ogImage || slide.frontmatter.background;
+      const imageUrl = background
+        ? resolveBackgroundPath({
+            background: slide.frontmatter.background,
+            slidePath: slide.path,
+            devServerUrl,
+          })
+        : "https://cover.sli.dev";
+
       return {
         title: slide.frontmatter.title || slide.path,
-        url: process.env.NODE_ENV === "development" ? devServerUrl : slide.path,
+        url: IS_DEVELOPMENT ? devServerUrl : slide.path,
         description:
           slide.frontmatter.info ||
           slide.frontmatter.seoMeta?.ogDescription ||
           "No description available",
-        image:
-          slide.frontmatter.background ||
-          slide.frontmatter.seoMeta?.ogImage ||
-          "https://cover.sli.dev",
+        image: imageUrl,
         author: slide.frontmatter.author || "Unknown Author",
         date: slide.frontmatter.date || new Date().toISOString().split("T")[0],
         theme: slide.frontmatter.theme,
@@ -53,5 +113,6 @@ export function useSlides() {
     slides,
     slidesCount,
     loadSlidesData,
+    isLoading,
   };
 }