livemark 0.13.1 → 0.15.0

package/source/helpers/resolve-asset-path.ts

@@ -1,9 +1,16 @@
-import { dirname, relative, resolve } from "node:path"
+import { dirname, relative, resolve, sep } from "node:path"
+import { prefixUrl } from "./prefix-url.ts"
 
 /** Resolve a relative asset path to an absolute URL serveable by Vite */
-export function resolveAssetPath(url: string, filePath: string, root: string) {
-  if (url.startsWith("http") || url.startsWith("/") || url.startsWith("data:"))
-    return url
+export function resolveAssetPath(
+  url: string,
+  filePath: string,
+  root: string,
+  base?: string,
+) {
+  if (url.startsWith("http") || url.startsWith("data:")) return url
+  if (url.startsWith("/")) return prefixUrl(url, base)
   const absolute = resolve(dirname(filePath), url)
-  return "/" + relative(root, absolute)
+  const rel = relative(root, absolute).split(sep).join("/")
+  return prefixUrl("/" + rel, base)
 }

package/source/helpers/resolve-asset-path.unit.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vite-plus/test"
+import { resolveAssetPath } from "./resolve-asset-path.ts"
+
+describe("resolveAssetPath", () => {
+  const root = "/site"
+  const filePath = "/site/docs/page.md"
+
+  it("should resolve a sibling relative path", () => {
+    expect(resolveAssetPath("./logo.png", filePath, root)).toBe(
+      "/docs/logo.png",
+    )
+  })
+
+  it("should resolve a parent relative path", () => {
+    expect(resolveAssetPath("../assets/x.png", filePath, root)).toBe(
+      "/assets/x.png",
+    )
+  })
+
+  it("should pass through a root-relative url", () => {
+    expect(resolveAssetPath("/foo.png", filePath, root)).toBe("/foo.png")
+  })
+
+  it("should pass through an http url", () => {
+    expect(resolveAssetPath("https://x.com/y.png", filePath, root)).toBe(
+      "https://x.com/y.png",
+    )
+  })
+
+  it("should pass through a data url", () => {
+    expect(resolveAssetPath("data:image/png;base64,xyz", filePath, root)).toBe(
+      "data:image/png;base64,xyz",
+    )
+  })
+
+  it("should prefix a resolved relative path with base", () => {
+    expect(resolveAssetPath("./logo.png", filePath, root, "/repo")).toBe(
+      "/repo/docs/logo.png",
+    )
+  })
+
+  it("should prefix a root-relative url with base", () => {
+    expect(resolveAssetPath("/foo.png", filePath, root, "/repo")).toBe(
+      "/repo/foo.png",
+    )
+  })
+
+  it("should not double-prefix an already-prefixed url", () => {
+    expect(resolveAssetPath("/repo/foo.png", filePath, root, "/repo")).toBe(
+      "/repo/foo.png",
+    )
+  })
+
+  it("should not prefix external urls when base is set", () => {
+    expect(
+      resolveAssetPath("https://x.com/y.png", filePath, root, "/repo"),
+    ).toBe("https://x.com/y.png")
+  })
+})

package/source/models/config.ts

@@ -23,6 +23,14 @@ export type UserConfig = Omit<z.infer<typeof UserConfig>, "vite"> & {
 }
 export const UserConfig = z.object({
   site: z.string().optional(),
+  base: z
+    .string()
+    .optional()
+    .transform(v => {
+      if (!v) return undefined
+      const trimmed = v.replace(/^\/|\/$/g, "")
+      return trimmed ? `/${trimmed}` : undefined
+    }),
   favicon: z.string().optional(),
   logo: z.string().optional(),
   title: z.string().default("Livemark"),
@@ -46,6 +54,7 @@ export const WebsiteConfig = UserConfig.pick({
   title: true,
   description: true,
   site: true,
+  base: true,
   favicon: true,
   logo: true,
   links: true,

package/source/plugins/remark-image.ts

@@ -5,12 +5,12 @@ import { resolveAssetPath } from "../helpers/resolve-asset-path.ts"
 
 /** Remark plugin that resolves relative image paths and unwraps image-only paragraphs */
 export const remarkImage: Plugin<
-  [{ filePath: string; root: string }],
+  [{ filePath: string; root: string; base?: string }],
   Root
-> = ({ filePath, root }) => {
+> = ({ filePath, root, base }) => {
   return tree => {
     visit(tree, "image", node => {
-      node.url = resolveAssetPath(node.url, filePath, root)
+      node.url = resolveAssetPath(node.url, filePath, root, base)
     })
 
     visit(tree, "paragraph", (node, index, parent) => {

package/source/plugins/vite-livemark.ts

@@ -50,6 +50,11 @@ export function livemark(opts: LivemarkOptions): Plugin {
       targetDir = buildTarget(opts.config.configPath)
       const base: ViteUserConfig = {
         root: targetDir,
+        // Mount everything (asset URLs, modulepreloads, dev server) under
+        // `config.base` so the same build works at root or at a sub-path
+        // (e.g. GitHub Pages `https://user.github.io/repo/`). The router
+        // and asset-path resolver mirror this at runtime.
+        base: opts.config.base ? `${opts.config.base}/` : "/",
         // outDir lives outside the target root (in the consumer's
         // .livemark/) so the consumer can find their deployable output
         // without digging into node_modules. Vite's default refusal to

package/source/router.tsx

@@ -1,3 +1,4 @@
+import { config } from "livemark:virtual"
 import { QueryClient } from "@tanstack/react-query"
 import { createRouter } from "@tanstack/react-router"
 import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query"
@@ -10,6 +11,7 @@ export function getRouter() {
 
   const router = createRouter({
     routeTree,
+    basepath: config.base,
     context: { queryClient },
     trailingSlash: "always",
     defaultPreload: "intent",

package/source/routes/__root.tsx

@@ -15,13 +15,17 @@ import { DefaultCatchBoundary } from "../components/DefaultCatchBoundary.tsx"
 import { NotFound } from "../components/NotFound.tsx"
 import { Toaster } from "../elements/sonner.tsx"
 import { faviconType } from "../helpers/favicon.ts"
+import { prefixUrl } from "../helpers/prefix-url.ts"
 import defaultFavicon from "../assets/logo.svg"
 import generalCss from "../styles/general.css?url"
 import markdownCss from "../styles/markdown.css?url"
 
 export const Route = createRootRoute({
   head: () => {
-    const favicon = config.favicon ?? config.logo ?? defaultFavicon
+    const favicon = prefixUrl(
+      config.favicon ?? config.logo ?? defaultFavicon,
+      config.base,
+    )
     return {
       meta: [
         { charSet: "utf-8" },

package/source/vite.config.ts

@@ -18,12 +18,26 @@ export default defineConfig({
     contentCollections({ configPath: "content-collections.ts" }),
     tanstackStart({
       srcDirectory: ".",
-      pages: [{ path: "/" }],
-      prerender: { enabled: true, crawlLinks: true },
+      // Seed path must match what the crawler produces (router-emitted
+      // hrefs include the basepath), otherwise prerender records both
+      // shapes and the sitemap ends up with duplicate entries.
+      pages: [{ path: config.base ? `${config.base}/` : "/" }],
+      // Disable route-tree auto-discovery: it produces basepath-naive
+      // paths (e.g. `/`) that duplicate the crawl-derived prefixed paths,
+      // bloating pages.json and sitemap. Crawling from the seed already
+      // reaches every linked page.
+      prerender: {
+        enabled: true,
+        crawlLinks: true,
+        autoStaticPathsDiscovery: false,
+      },
       sitemap: config.site
         ? { enabled: true, host: config.site }
         : { enabled: false },
-      router: { generatedRouteTree: "routeTree.gen.ts" },
+      router: {
+        generatedRouteTree: "routeTree.gen.ts",
+        basepath: config.base,
+      },
     }),
     react(),
     svgr(),