slidev-workspace 0.4.2 → 0.5.1

package/dist/cli.js

@@ -80,6 +80,8 @@ function getSlideFrontmatterByPath(slideDir, slideName) {
 		const frontmatter = parse(frontmatterYaml);
 		const sourceBasename = basename(slideDir);
 		const slideId = `${sourceBasename}/${slideName}`;
+		const ogImagePath = join$1(slideDir, slideName, "og-image.png");
+		const hasOgImage = existsSync$1(ogImagePath);
 		return {
 			id: slideId,
 			path: slideName,
@@ -87,7 +89,8 @@ function getSlideFrontmatterByPath(slideDir, slideName) {
 			sourceDir: slideDir,
 			frontmatter,
 			content: content.replace(frontmatterMatch[0], ""),
-			baseUrl: config.baseUrl
+			baseUrl: config.baseUrl,
+			hasOgImage
 		};
 	} catch (error) {
 		console.error(`Error parsing frontmatter for ${slideName} in ${slideDir}:`, error);

package/dist/index.d.ts

@@ -29,6 +29,8 @@ interface SlideInfo {
   content: string;
   /** The base URL of the slide, which is defined in slidev-workspace.yml */
   baseUrl: string;
+  /** Whether og-image.png exists in the slide directory */
+  hasOgImage: boolean;
 }
 interface SlideData {
   title: string;
@@ -43,6 +45,7 @@ interface SlideData {
 }
 //#endregion
 //#region src/preview/composables/useSlides.d.ts
+
 declare function useSlides(): {
   slides: vue0.ComputedRef<SlideData[]>;
   slidesCount: vue0.ComputedRef<number>;

package/dist/index.js

@@ -45,37 +45,48 @@ function isUrl(str) {
 	}
 }
 /**
-* Resolve background image path.
-* If the background is not a URL, construct the full path using slide.path as the base.
+* Resolve image URL with fallback priority:
+* 1. og-image.png (if it exists in the slides root directory)
+* 2. seoMeta.ogImage (explicit og-image config)
+* 3. background (background image)
+* 4. default cover image (https://cover.sli.dev)
 *
-* 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 (development mode with og-image.png):
+* returns: "http://localhost:3001/og-image.png"
 *
-* 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"
+* Example (production mode with og-image.png):
+* returns: "https://my-slides.com/slidev-workspace-starter/og-image.png"
 */
-function resolveBackgroundPath(params) {
-	const { background, slidePath, domain, baseUrl } = params;
-	if (!background) return "";
-	if (isUrl(background)) return background;
-	try {
-		return IS_DEVELOPMENT ? new URL(pathJoin(slidePath, background), domain).href : new URL(pathJoin(baseUrl, slidePath, background), domain).href;
+function resolveImageUrl(slide, domain) {
+	const { hasOgImage, path: slidePath, baseUrl, frontmatter } = slide;
+	const seoOgImage = frontmatter.seoMeta?.ogImage;
+	const background = frontmatter.background;
+	if (hasOgImage) try {
+		const path = IS_DEVELOPMENT ? "/og-image.png" : pathJoin(baseUrl, "og-image.png");
+		return new URL(path, domain).href;
 	} catch (error) {
-		console.error("Failed to resolve background path:", error);
-		return background;
+		console.error("Failed to resolve og-image.png path:", error);
+		return "https://cover.sli.dev";
+	}
+	if (seoOgImage) {
+		if (isUrl(seoOgImage)) return seoOgImage;
+		try {
+			return IS_DEVELOPMENT ? new URL(seoOgImage, domain).href : new URL(pathJoin(baseUrl, slidePath, seoOgImage), domain).href;
+		} catch (error) {
+			console.error("Failed to resolve seoMeta.ogImage path:", error);
+			return "https://cover.sli.dev";
+		}
+	}
+	if (background) {
+		if (isUrl(background)) return background;
+		try {
+			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 "https://cover.sli.dev";
+		}
 	}
+	return "https://cover.sli.dev";
 }
 function useSlides() {
 	const slidesData = ref([]);
@@ -97,13 +108,8 @@ 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,
-				baseUrl: slide.baseUrl,
-				domain: IS_DEVELOPMENT ? devServerUrl : window.location.origin
-			}) : "https://cover.sli.dev";
+			const domain = IS_DEVELOPMENT ? devServerUrl : window.location.origin;
+			const imageUrl = resolveImageUrl(slide, domain);
 			return {
 				title: slide.frontmatter.title || slide.path,
 				url: IS_DEVELOPMENT ? devServerUrl : slide.path,

package/dist/plugin-slides.js

@@ -71,6 +71,8 @@ function getSlideFrontmatterByPath(slideDir, slideName) {
 		const frontmatter = parse(frontmatterYaml);
 		const sourceBasename = basename(slideDir);
 		const slideId = `${sourceBasename}/${slideName}`;
+		const ogImagePath = join(slideDir, slideName, "og-image.png");
+		const hasOgImage = existsSync(ogImagePath);
 		return {
 			id: slideId,
 			path: slideName,
@@ -78,7 +80,8 @@ function getSlideFrontmatterByPath(slideDir, slideName) {
 			sourceDir: slideDir,
 			frontmatter,
 			content: content.replace(frontmatterMatch[0], ""),
-			baseUrl: config.baseUrl
+			baseUrl: config.baseUrl,
+			hasOgImage
 		};
 	} catch (error) {
 		console.error(`Error parsing frontmatter for ${slideName} in ${slideDir}:`, error);

package/package.json

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

package/src/preview/components/SlideCard.vue

@@ -5,11 +5,26 @@
       @click="$emit('click')"
     >
       <div class="relative overflow-hidden rounded-t-lg">
+        <Skeleton
+          v-if="isLoading && image"
+          class="w-full h-48 rounded-b-none"
+        />
         <img
-          :src="image || '/placeholder.svg'"
+          v-if="image"
+          ref="imageRef"
+          v-show="!isLoading"
+          :src="image"
           :alt="title"
           class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-200"
+          @load="onImageLoad"
+          @error="onImageError"
         />
+        <div
+          v-if="!image"
+          class="w-full h-48 bg-muted flex items-center justify-center"
+        >
+          <span class="text-muted-foreground">No Image</span>
+        </div>
       </div>
 
       <CardHeader class="pb-2">
@@ -58,6 +73,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref, useTemplateRef } from "vue";
 import { Calendar, User } from "lucide-vue-next";
 
 import {
@@ -67,8 +83,9 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 
-defineProps<{
+const props = defineProps<{
   title: string;
   image?: string;
   description?: string;
@@ -82,4 +99,29 @@ defineProps<{
 defineEmits<{
   click: [];
 }>();
+
+const imageRef = useTemplateRef<HTMLImageElement>("imageRef");
+const isLoading = ref(true);
+const retryCount = ref(0);
+
+const MAX_RETRIES = 5;
+const RETRY_DELAY = 1000; // 1 second
+
+const onImageLoad = () => {
+  isLoading.value = false;
+};
+
+const onImageError = () => {
+  if (retryCount.value < MAX_RETRIES) {
+    retryCount.value++;
+
+    setTimeout(() => {
+      if (imageRef.value && props.image) {
+        imageRef.value.src = props.image;
+      }
+    }, RETRY_DELAY);
+  } else {
+    isLoading.value = false;
+  }
+};
 </script>

package/src/preview/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+  class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<SkeletonProps>();
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
+  />
+</template>

package/src/preview/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue";

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

@@ -18,6 +18,7 @@ const mockSlidesData: SlideInfo[] = [
     },
     content: "# Slide content",
     baseUrl: "/slidev-workspace-starter/",
+    hasOgImage: true,
   },
   {
     id: "slide-2",
@@ -34,6 +35,7 @@ const mockSlidesData: SlideInfo[] = [
     },
     content: "# Another slide",
     baseUrl: "/slidev-workspace-starter/",
+    hasOgImage: false,
   },
   {
     id: "slide-3",
@@ -43,6 +45,7 @@ const mockSlidesData: SlideInfo[] = [
     frontmatter: {},
     content: "# Minimal slide",
     baseUrl: "/slidev-workspace-starter/",
+    hasOgImage: false,
   },
 ];
 

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

@@ -7,6 +7,319 @@ import {
   afterEach,
   beforeAll,
 } from "vitest";
+import type { SlideInfo } from "../../types/slide";
+
+/**
+ * Helper function to create a mock SlideInfo object
+ */
+function createMockSlide(overrides: Partial<SlideInfo> = {}): SlideInfo {
+  return {
+    path: "/slides-presentation-1/",
+    baseUrl: "/slidev-workspace-starter",
+    hasOgImage: false,
+    frontmatter: {
+      title: "Test Slide",
+      author: "Test Author",
+      date: "2024-01-01",
+    },
+    ...overrides,
+  } as SlideInfo;
+}
+
+describe("resolveImageUrl (Development Mode)", () => {
+  beforeAll(async () => {
+    vi.resetModules();
+    vi.doMock("../constants/env", () => ({
+      IS_DEVELOPMENT: true,
+    }));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should return og-image.png URL when hasOgImage is true in development", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({ hasOgImage: true });
+    const domain = "http://localhost:3001";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("http://localhost:3001/og-image.png");
+  });
+
+  it("should return seoMeta.ogImage when it's an absolute URL", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      frontmatter: {
+        title: "Test",
+        seoMeta: {
+          ogImage: "https://example.com/image.jpg",
+        },
+      },
+    });
+    const domain = "http://localhost:3001";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("https://example.com/image.jpg");
+  });
+
+  it("should resolve relative seoMeta.ogImage URL in development", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      path: "/slides-presentation-1/",
+      frontmatter: {
+        title: "Test",
+        seoMeta: {
+          ogImage: "custom-image.jpg",
+        },
+      },
+    });
+    const domain = "http://localhost:3001";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("http://localhost:3001/custom-image.jpg");
+  });
+
+  it("should return absolute background URL unchanged", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      frontmatter: {
+        title: "Test",
+        background: "https://example.com/bg.jpg",
+      },
+    });
+    const domain = "http://localhost:3001";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("https://example.com/bg.jpg");
+  });
+
+  it("should resolve relative background URL in development", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      path: "/slides-presentation-1/",
+      frontmatter: {
+        title: "Test",
+        background: "background.jpg",
+      },
+    });
+    const domain = "http://localhost:3001";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe(
+      "http://localhost:3001/slides-presentation-1/background.jpg",
+    );
+  });
+
+  it("should return default cover when no image sources provided", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      frontmatter: {
+        title: "Test",
+      },
+    });
+    const domain = "http://localhost:3001";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("https://cover.sli.dev");
+  });
+
+  it("should prioritize og-image.png over seoMeta.ogImage", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: true,
+      frontmatter: {
+        title: "Test",
+        seoMeta: {
+          ogImage: "https://example.com/image.jpg",
+        },
+      },
+    });
+    const domain = "http://localhost:3001";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("http://localhost:3001/og-image.png");
+    expect(result).not.toBe("https://example.com/image.jpg");
+  });
+
+  it("should prioritize seoMeta.ogImage over background", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      frontmatter: {
+        title: "Test",
+        seoMeta: {
+          ogImage: "https://example.com/image.jpg",
+        },
+        background: "https://example.com/bg.jpg",
+      },
+    });
+    const domain = "http://localhost:3001";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("https://example.com/image.jpg");
+    expect(result).not.toBe("https://example.com/bg.jpg");
+  });
+
+  it("should return default cover on URL construction error", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    const slide = createMockSlide({
+      hasOgImage: false,
+      frontmatter: {
+        title: "Test",
+        seoMeta: {
+          ogImage: "not a valid url at all!!!",
+        },
+      },
+    });
+    const domain = "invalid domain";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("https://cover.sli.dev");
+    expect(consoleErrorSpy).toHaveBeenCalled();
+
+    consoleErrorSpy.mockRestore();
+  });
+});
+
+describe("resolveImageUrl (Production Mode)", () => {
+  beforeAll(async () => {
+    vi.resetModules();
+    vi.doMock("../constants/env", () => ({
+      IS_DEVELOPMENT: false,
+    }));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should return og-image.png URL with baseUrl in production", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: true,
+      baseUrl: "/slidev-workspace-starter",
+    });
+    const domain = "https://my-slides.com";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe(
+      "https://my-slides.com/slidev-workspace-starter/og-image.png",
+    );
+  });
+
+  it("should resolve seoMeta.ogImage with baseUrl and path in production", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      baseUrl: "/slidev-workspace-starter",
+      path: "/slides-presentation-1/",
+      frontmatter: {
+        title: "Test",
+        seoMeta: {
+          ogImage: "custom-image.jpg",
+        },
+      },
+    });
+    const domain = "https://my-slides.com";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe(
+      "https://my-slides.com/slidev-workspace-starter/slides-presentation-1/custom-image.jpg",
+    );
+  });
+
+  it("should resolve background with baseUrl and path in production", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      baseUrl: "/slidev-workspace-starter",
+      path: "/slides-presentation-1/",
+      frontmatter: {
+        title: "Test",
+        background: "background.jpg",
+      },
+    });
+    const domain = "https://my-slides.com";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe(
+      "https://my-slides.com/slidev-workspace-starter/slides-presentation-1/background.jpg",
+    );
+  });
+
+  it("should keep absolute URL seoMeta.ogImage unchanged in production", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      baseUrl: "/slidev-workspace-starter",
+      frontmatter: {
+        title: "Test",
+        seoMeta: {
+          ogImage: "https://example.com/image.jpg",
+        },
+      },
+    });
+    const domain = "https://my-slides.com";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("https://example.com/image.jpg");
+  });
+
+  it("should keep absolute URL background unchanged in production", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      baseUrl: "/slidev-workspace-starter",
+      frontmatter: {
+        title: "Test",
+        background: "https://example.com/bg.jpg",
+      },
+    });
+    const domain = "https://my-slides.com";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("https://example.com/bg.jpg");
+  });
+
+  it("should return default cover when no image sources in production", async () => {
+    const { resolveImageUrl } = await import("./useSlides");
+    const slide = createMockSlide({
+      hasOgImage: false,
+      frontmatter: {
+        title: "Test",
+      },
+    });
+    const domain = "https://my-slides.com";
+
+    const result = resolveImageUrl(slide, domain);
+
+    expect(result).toBe("https://cover.sli.dev");
+  });
+});
 
 describe("useSlides (Development Mode)", () => {
   beforeAll(async () => {
@@ -122,7 +435,7 @@ describe("useSlides (Development Mode)", () => {
 
       const secondSlide = slides.value[1];
 
-      expect(secondSlide.image).toBe("https://example.com/bg.jpg");
+      expect(secondSlide.image).toBe("https://example.com/og-image.jpg");
     });
 
     it("should resolve relative background paths in development mode", async () => {
@@ -130,9 +443,7 @@ describe("useSlides (Development Mode)", () => {
 
       const firstSlide = slides.value[0];
 
-      expect(firstSlide.image).toBe(
-        "http://localhost:3001/slides-presentation-1/bg1.jpg",
-      );
+      expect(firstSlide.image).toBe("http://localhost:3001/og-image.png");
     });
 
     it("should use default cover when no background is provided", async () => {
@@ -143,6 +454,35 @@ describe("useSlides (Development Mode)", () => {
       expect(thirdSlide.image).toBe("https://cover.sli.dev");
     });
   });
+
+  describe("og-image.png priority", () => {
+    it("should prioritize og-image.png when hasOgImage is true", async () => {
+      const { slides } = await setupUseSlides();
+
+      const firstSlide = slides.value[0];
+
+      // First slide has hasOgImage: true, so should use og-image.png
+      expect(firstSlide.image).toContain("og-image.png");
+    });
+
+    it("should use seoMeta.ogImage when hasOgImage is false", async () => {
+      const { slides } = await setupUseSlides();
+
+      const secondSlide = slides.value[1];
+
+      // Second slide has hasOgImage: false, so should use seoMeta.ogImage
+      expect(secondSlide.image).toBe("https://example.com/og-image.jpg");
+    });
+
+    it("should use background when hasOgImage is false and no seoMeta.ogImage", async () => {
+      const { slides } = await setupUseSlides();
+
+      const thirdSlide = slides.value[2];
+
+      // Third slide has hasOgImage: false and no seoMeta, so should use background or default
+      expect(thirdSlide.image).toBe("https://cover.sli.dev");
+    });
+  });
 });
 
 describe("useSlides (Production Mode)", () => {
@@ -201,7 +541,7 @@ describe("useSlides (Production Mode)", () => {
       const firstSlide = result.slides.value[0];
 
       expect(firstSlide.image).toBe(
-        "https://my-slides.com/slidev-workspace-starter/slides-presentation-1/bg1.jpg",
+        "https://my-slides.com/slidev-workspace-starter/og-image.png",
       );
     });
 
@@ -209,7 +549,7 @@ describe("useSlides (Production Mode)", () => {
       const result = await setupUseSlidesProduction();
       const secondSlide = result.slides.value[1];
 
-      expect(secondSlide.image).toBe("https://example.com/bg.jpg");
+      expect(secondSlide.image).toBe("https://example.com/og-image.jpg");
     });
 
     it("should use default cover when no background in production", async () => {
@@ -219,4 +559,25 @@ describe("useSlides (Production Mode)", () => {
       expect(thirdSlide.image).toBe("https://cover.sli.dev");
     });
   });
+
+  describe("og-image.png priority in production", () => {
+    it("should prioritize og-image.png when hasOgImage is true in production", async () => {
+      const result = await setupUseSlidesProduction();
+      const firstSlide = result.slides.value[0];
+
+      // First slide has hasOgImage: true, so should use og-image.png
+      expect(firstSlide.image).toContain("og-image.png");
+      expect(firstSlide.image).toBe(
+        "https://my-slides.com/slidev-workspace-starter/og-image.png",
+      );
+    });
+
+    it("should use seoMeta.ogImage when hasOgImage is false in production", async () => {
+      const result = await setupUseSlidesProduction();
+      const secondSlide = result.slides.value[1];
+
+      // Second slide has hasOgImage: false, so should use seoMeta.ogImage
+      expect(secondSlide.image).toBe("https://example.com/og-image.jpg");
+    });
+  });
 });

package/src/preview/composables/useSlides.ts

@@ -18,51 +18,70 @@ 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 the base.
+ * Resolve image URL with fallback priority:
+ * 1. og-image.png (if it exists in the slides root directory)
+ * 2. seoMeta.ogImage (explicit og-image config)
+ * 3. background (background image)
+ * 4. default cover image (https://cover.sli.dev)
  *
- * 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 (development mode with og-image.png):
+ * returns: "http://localhost:3001/og-image.png"
  *
- * 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"
+ * Example (production mode with og-image.png):
+ * returns: "https://my-slides.com/slidev-workspace-starter/og-image.png"
  */
-function resolveBackgroundPath(params: {
-  background: string | undefined;
-  slidePath: string;
-  baseUrl: string;
-  domain: string;
-}): string {
-  const { background, slidePath, domain, baseUrl } = params;
-
-  if (!background) {
-    return "";
+export function resolveImageUrl(slide: SlideInfo, domain: string): string {
+  const { hasOgImage, path: slidePath, baseUrl, frontmatter } = slide;
+  const seoOgImage = frontmatter.seoMeta?.ogImage;
+  const background = frontmatter.background;
+
+  // Priority 1: og-image.png (if exists)
+  if (hasOgImage) {
+    try {
+      const path = IS_DEVELOPMENT
+        ? "/og-image.png"
+        : pathJoin(baseUrl, "og-image.png");
+      return new URL(path, domain).href;
+    } catch (error) {
+      console.error("Failed to resolve og-image.png path:", error);
+      return "https://cover.sli.dev";
+    }
   }
 
-  if (isUrl(background)) {
-    return background;
+  // Priority 2: seoMeta.ogImage
+  if (seoOgImage) {
+    if (isUrl(seoOgImage)) {
+      return seoOgImage;
+    }
+
+    try {
+      return IS_DEVELOPMENT
+        ? new URL(seoOgImage, domain).href
+        : new URL(pathJoin(baseUrl, slidePath, seoOgImage), domain).href;
+    } catch (error) {
+      console.error("Failed to resolve seoMeta.ogImage path:", error);
+      return "https://cover.sli.dev";
+    }
   }
 
-  try {
-    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;
+  // Priority 3: background
+  if (background) {
+    if (isUrl(background)) {
+      return background;
+    }
+
+    try {
+      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 "https://cover.sli.dev";
+    }
   }
+
+  // Priority 4: default cover
+  return "https://cover.sli.dev";
 }
 
 export function useSlides() {
@@ -93,18 +112,9 @@ export function useSlides() {
       const port = 3001 + index;
       // Create dev server URL
       const devServerUrl = `http://localhost:${port}`;
+      const domain = IS_DEVELOPMENT ? devServerUrl : window.location.origin;
 
-      // Resolve background image path
-      const background =
-        slide.frontmatter.seoMeta?.ogImage || slide.frontmatter.background;
-      const imageUrl = background
-        ? resolveBackgroundPath({
-            background: slide.frontmatter.background,
-            slidePath: slide.path,
-            baseUrl: slide.baseUrl,
-            domain: IS_DEVELOPMENT ? devServerUrl : window.location.origin,
-          })
-        : "https://cover.sli.dev";
+      const imageUrl = resolveImageUrl(slide, domain);
 
       return {
         title: slide.frontmatter.title || slide.path,