diff --git a/packages/docs/src/components/guide-page-layout.tsx b/packages/docs/src/components/guide-page-layout.tsx
deleted file mode 100644
index 437429a..0000000
--- a/packages/docs/src/components/guide-page-layout.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import clsx from "clsx"
-import React from "react"
-import { guideLinks } from "../data/guide-links"
-import { useScrolled } from "../hooks/dom/use-scrolled"
-import {
-  docsProseClass,
-  linkClass,
-  maxWidthContainer,
-} from "../styles/components"
-import { AppLink } from "./app-link"
-import { MainNavigation } from "./main-navigation"
-
-export function GuidePageLayout() {
-  return (
-    <>
-      <HeaderPanel>
-        <div className={maxWidthContainer}>
-          <MainNavigation />
-        </div>
-      </HeaderPanel>
-      <main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
-        <nav className="w-48 sticky top-24 hidden md:block">
-          <h2 className="text-2xl">Guides</h2>
-          <ul className="mt-3 flex flex-col gap-2 items-start">
-            {guideLinks.map((link) => (
-              <li key={link.to}>
-                <AppLink {...link} className={linkClass} />
-              </li>
-            ))}
-          </ul>
-        </nav>
-        <section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
-          {/* todo */}
-        </section>
-      </main>
-    </>
-  )
-}
-
-function HeaderPanel({ children }: { children: React.ReactNode }) {
-  const isScrolled = useScrolled()
-
-  const className = clsx(
-    isScrolled ? "bg-slate-700/30" : "bg-slate-800",
-    "shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
-  )
-
-  return <header className={className}>{children}</header>
-}
diff --git a/packages/docs/src/constants.ts b/packages/docs/src/constants.ts
new file mode 100644
index 0000000..9b13893
--- /dev/null
+++ b/packages/docs/src/constants.ts
@@ -0,0 +1,7 @@
+import { join } from "node:path"
+
+const projectRoot = new URL("../", import.meta.url).pathname
+
+export function fromProjectRoot(...subPaths: string[]) {
+  return join(projectRoot, ...subPaths)
+}
diff --git a/packages/docs/src/data/guide-links.tsx b/packages/docs/src/data/guide-links.tsx
index 7c4188e..a360a77 100644
--- a/packages/docs/src/data/guide-links.tsx
+++ b/packages/docs/src/data/guide-links.tsx
@@ -3,8 +3,9 @@ import grayMatter from "gray-matter"
 import { readFile } from "node:fs/promises"
 import { join } from "node:path"
 import type { AppLinkProps } from "../components/app-link"
+import { fromProjectRoot } from "../constants"
 
-const docsFolderPath = new URL("../docs", import.meta.url).pathname
+const docsFolderPath = fromProjectRoot("src/docs")
 const guideFiles = await glob("**/*.md", { cwd: docsFolderPath })
 
 const entries = await Promise.all(
diff --git a/packages/docs/src/main.tsx b/packages/docs/src/main.tsx
index 9587a37..6e158fe 100644
--- a/packages/docs/src/main.tsx
+++ b/packages/docs/src/main.tsx
@@ -6,6 +6,7 @@ import httpTerminator from "http-terminator"
 import pino from "pino"
 import pinoHttp from "pino-http"
 import * as React from "react"
+import { fromProjectRoot } from "./constants"
 import { renderMarkdownFile } from "./helpers/markdown"
 import { sendJsx } from "./helpers/send-jsx"
 import { serveCompiledScript } from "./helpers/serve-compiled-script"
@@ -29,19 +30,19 @@ const router = Router()
 
   .get(
     "/prism-theme.css",
-    serveFile(new URL("./styles/prism-theme.css", import.meta.url).pathname),
+    serveFile(fromProjectRoot("src/styles/prism-theme.css")),
   )
 
   .get(
     "/popover-menu.client.js",
     await serveCompiledScript(
-      new URL("./components/popover-menu.client.tsx", import.meta.url).pathname,
+      fromProjectRoot("src/components/popover-menu.client.tsx"),
     ),
   )
 
   .get("/docs/*", async (req: Request<{ 0: string }>, res) => {
     const { html, data } = await renderMarkdownFile(
-      `src/docs/${req.params[0]}.md`,
+      fromProjectRoot(`src/docs/${req.params[0]}.md`),
     )
     sendJsx(
       res,
diff --git a/packages/docs/src/pages/landing.tsx b/packages/docs/src/pages/landing.tsx
index c44159a..633760b 100644
--- a/packages/docs/src/pages/landing.tsx
+++ b/packages/docs/src/pages/landing.tsx
@@ -1,12 +1,13 @@
 import packageJson from "reacord/package.json"
 import React from "react"
 import { MainNavigation } from "../components/main-navigation"
+import { fromProjectRoot } from "../constants"
 import { renderMarkdownFile } from "../helpers/markdown"
 import { Html } from "../html"
 import { maxWidthContainer } from "../styles/components"
 
 const landingExample = await renderMarkdownFile(
-  new URL("../components/landing-example.md", import.meta.url).pathname,
+  fromProjectRoot("src/components/landing-example.md"),
 )
 
 export function Landing() {