Migrate www to Fumadocs #219
Conversation
…orrect behavior during user loading.
…ion, and core application pages.
…and downgrade `@esbuild` packages.
…th Bedstack branding, and initialize documentation structure.
…e associated assets, and add `clsx` dependency.
…tHub Discussions.
…ayout to notebook style.
…apsible sidebar, and container styling, and enable Tailwind CSS parsing in Biome.
… shell command formatting in getting started guides.
…out props and footer styling; chore: remove unused CSS.
…__dirname` polyfill.
…y using `path.resolve` instead of a custom `__dirname` utility.
…lysiaJS, and Drizzle on the homepage.
…ce a bed illustration, and update the GitHub icon.
…ono fonts, and refine global navigation styles.
…ing, and improve responsive logo sizing.
…nd refining flex properties for alignment.
…ude subnav div, and update sidebar positioning and height.
…navigation styling.
…d refine navigation background transparency and body overflow.
… and `#nd-notebook-layout`.
…rator and footer.
…ce configuration.
…m the left content column to the right image column.
…ge dimensions, and 'Zzz' animation appearance and timing.
… keyboard shortcuts, and update the favicon to `logo-mini.png`.
…ation links to utilize it.
….tsx` to `(home)/layout.tsx`.
…move 'as any' type assertion from docs navigation mode.
…, and apply to docs layout
…nt, and refine the Bedstack acronym definition.
…g Started' to 'RealWorld' and refreshing homepage content.
…Started' card title.
github-actions
bot
added
github actions
WalkthroughMigrates the bedstack.js.org documentation site from VitePress to Fumadocs with Next.js as the foundation. Removes Discord contact links from issue templates and support documentation. Preserves the legacy VitePress setup in apps/www-legacy while establishing a new documentation structure in apps/www using Fumadocs MDX, Tailwind CSS, and Next.js routing. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…ead of `apps/www`.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 16
🤖 Fix all issues with AI agents
In @.github/workflows/deploy-www.yml:
- Around line 51-58: The workflow's docs:build step runs the npm script that
executes "turbo run build --filter=www" (building Next.js under the www package)
but the Upload artifact step points to "apps/www-legacy/.vitepress/dist"
(VitePress) causing an empty artifact; either change the build invocation to
target the legacy site (run turbo run build --filter=www-legacy / update
docs:build to build www-legacy) or change the upload path to the Next.js output
(apps/www/.next) so the artifact matches the built package; update the
.github/workflows/deploy-www.yml steps accordingly, keeping the names "Build
with VitePress"/"Upload artifact" consistent with the chosen target.
In `@apps/www-legacy/.vitepress/config.ts`:
- Line 37: The navigation entry with text 'Getting Started' currently uses the
link '/realworld' which points to a non-existent page; update that navigation
object (the { text: 'Getting Started', link: '/realworld' } entry) to use the
existing page path '/getting-started' or alternatively add a new realworld.md
page to the site so the '/realworld' link resolves.
In `@apps/www-legacy/package.json`:
- Around line 6-10: The package.json declares a "clean" script that calls rimraf
but rimraf is not listed in this package's devDependencies; add a
devDependencies entry for "rimraf" with version "^6.1.2" in apps/www-legacy's
package.json (alongside existing devDependencies) so the "clean" script's
dependency is explicit and versioned.
In `@apps/www/content/docs/realworld.mdx`:
- Line 12: The markdown link text "[Bun](https://bun.com/)" is pointing to the
wrong domain; update the URL to the official site by replacing
"https://bun.com/" with "https://bun.sh/" in the line that reads
'[Bun](https://bun.com/) version 1.0.6 or higher.' so the link correctly targets
Bun's official website.
- Around line 21-43: The numbered list's fenced code blocks are inconsistently
indented (step 1 has two leading spaces while steps 2–4 have none), which can
break MDX list nesting; update each fenced code block under the steps ("1.
**Ensure...", "2. **Ensure Docker...", "3. **Migrate...", "4. **Run the app") so
the opening and closing ```sh and their contents are indented the same amount
(use 3 or 4 spaces consistently, e.g., indent the ```sh, commands, and closing
``` by three spaces) so all code blocks remain correctly nested within their
list items.
In `@apps/www/README.md`:
- Line 1: Replace the placeholder title line "# ." in the README with a
meaningful project title; edit the top-level heading (the line containing "# .")
to something descriptive such as "# Bedstack Docs" or "# www" so the README has
a proper title and clearly identifies the repository.
- Line 16: Replace the bare URL in the README line "Open http://localhost:3000
with your browser to see the result." with a proper markdown link (e.g.,
[http://localhost:3000](http://localhost:3000)) or angle-bracket form
(<http://localhost:3000>) so the URL is rendered/clickable; update that single
sentence accordingly.
- Around line 22-23: Update the README entries that reference lib/source.ts and
lib/layout.shared.tsx to use the correct paths (src/lib/source.ts and
src/lib/layout.shared.tsx); locate the paragraph listing these files in
README.md and replace the two occurrences so the documented filenames match the
actual project structure.
In `@apps/www/src/app/`(home)/page.tsx:
- Line 33: The className string on the JSX element contains both
"transition-colors" and "transition" which is redundant; edit the className (the
JSX element with the long inline className containing "inline-flex ...
transition-colors transition duration-150") and remove the redundant
"transition" token, keeping "transition-colors duration-150" for the intended
behavior.
In `@apps/www/src/app/docs/`[[...slug]]/page.tsx:
- Around line 20-24: Update the placeholder values in the gitConfig object: set
gitConfig.user to "yamcodes" and gitConfig.repo to "bedstack" (leave branch as
"main"); locate the gitConfig declaration in
apps/www/src/app/docs/[[...slug]]/page.tsx and replace the current 'username'
and 'repo' strings accordingly.
- Line 37: Update the githubUrl template used for the page link: change the path
segment from "docs/content/docs/${page.path}" to
"apps/www/content/docs/${page.path}" in the githubUrl expression (the template
referenced by githubUrl and page.path). Also replace placeholder gitConfig
values ('username' and 'repo') with the actual repository owner and name in the
gitConfig object so githubUrl resolves correctly.
- Line 14: The file references the PageProps type in the Page component
signature but never imports it; add an import such as `import type { PageProps }
from 'next'` at the top of the file so the Page function signature (export
default async function Page(props: PageProps<'/docs/[[...slug]]'>)) and any
other uses of PageProps compile under strict TypeScript; ensure you use an
`import type` to avoid runtime import side effects.
In `@apps/www/src/app/global.css`:
- Around line 92-94: The selector "&::selection" at the root of the `@layer` base
is invalid because the parent selector (&) can only be used inside another rule;
replace it with a top-level ::selection rule (i.e. change "&::selection { `@apply`
bg-primary text-primary-foreground; }" to "::selection { `@apply` bg-primary
text-primary-foreground; }") so the browser/Tailwind will apply the selection
styles correctly and keep it inside the same `@layer` base block.
In `@apps/www/src/app/og/docs/`[...slug]/route.tsx:
- Around line 16-26: The OG image uses a hardcoded site name "My App" in the
ImageResponse JSX; update the DefaultImage prop site to the real project name
(e.g., "Bedstack") or derive it from your app config/env so branding is correct.
Locate the ImageResponse call that renders <DefaultImage title={page.data.title}
description={page.data.description} site="My App" /> and replace the literal
with the correct constant or config value (or a safe fallback) so
DefaultImage.site reflects the actual project name.
In `@apps/www/src/components/ai/page-actions.tsx`:
- Around line 36-49: The current clipboard-copy flow around
navigator.clipboard.write and ClipboardItem uses fetch(markdownUrl) but doesn't
handle fetch failures or non-OK responses, so errors bubble up and nothing is
cached or surfaced to the user; wrap the fetch logic in a try/catch, check
response.ok and throw a descriptive error for non-200 responses, only call
cache.set(markdownUrl, content) after successful read, and on error set the UI
failure state (e.g., call setLoading(false) and the component's existing
error/notification setter such as setCopyError or a toast) before rethrowing or
returning so users see the failure.
- Around line 85-90: The SSR fallback sets fullMarkdownUrl to the literal string
'loading' inside useMemo (items, fullMarkdownUrl, markdownUrl, q) which yields
an invalid query on server and then changes on hydration; fix by deferring URL
computation to the client: replace the inline typeof window check with a
client-only state (e.g., useState<string | null>) and populate it in useEffect
using new URL(markdownUrl, window.location.origin), then have useMemo build
items only when that state is non-null (or return a safe server placeholder that
matches client until hydrated) so the memoized q and items stay stable between
SSR and client render.
🧹 Nitpick comments (11)
apps/www-legacy/.gitignore (1)
1-3: Standard VitePress ignore patterns.Appropriate ignore rules for VitePress cache and build output.
Minor nit: there's a trailing space after "cache" on line 1.
apps/www/src/lib/layout.shared.tsx (1)
13-26: Consider consolidating responsive logo handling.Both
Imagecomponents use the same source and alt text, with only size differences. The duplicate alt text may cause screen readers to announce "Bedstack" twice.💡 Suggested improvement
Consider using CSS to handle the size difference on a single image, or mark the mobile image as decorative:
<Image src="/logo-mini.png" alt="Bedstack" width={28} height={28} - className="hidden md:block" + className="size-6 md:size-7" /> - <Image - src="/logo-mini.png" - alt="Bedstack" - width={24} - height={24} - className="md:hidden" - />apps/www/src/app/global.css (1)
30-31: Multiple!importantoverrides for fumadocs header height.The
--fd-header-height: 80px !importantis declared in both:root(lines 30-31) and again in the layout selectors (lines 110-111). Consider consolidating to avoid redundancy.Also applies to: 110-111
apps/www/src/app/(home)/page.tsx (1)
1-4: Unused imports and potentially unnecessary client directive.
ArrowUpRightandRocketare imported but never used. Additionally,'use client'may be unnecessary since this component doesn't use any client-side hooks, event handlers, or browser APIs.♻️ Proposed fix
-'use client'; - import { SiGithub as GitHub } from '@icons-pack/react-simple-icons'; -import { ArrowRight, ArrowUpRight, BookOpen, Rocket } from 'lucide-react'; +import { ArrowRight, BookOpen } from 'lucide-react'; import Image from 'next/image'; import Link from 'next/link'; import { Button } from '@/components/ui/button';Verify if
'use client'is needed for any child component or fumadocs integration requirement not visible in this file.apps/www/src/app/layout.tsx (1)
17-28: Consider adding title and description to metadata.The metadata currently only configures icons. Adding
titleanddescriptionwould improve SEO and social sharing.💡 Example enhancement
export const metadata: Metadata = { + title: { + template: '%s | Bedstack', + default: 'Bedstack', + }, + description: 'An opinionated, typesafe backend stack built with Bun, ElysiaJS, and Drizzle ORM.', icons: { icon: [ { url: '/favicon.ico', sizes: 'any' },apps/www/src/lib/source.ts (1)
21-27: Consider adding error handling forgetText.If
page.data.getText('processed')fails or returns undefined/null, the function will produce malformed markdown. This could happen with pages that don't have processed content.💡 Optional: Add defensive handling
export async function getLLMText(page: InferPageType<typeof source>) { - const processed = await page.data.getText('processed'); + const processed = await page.data.getText('processed') ?? ''; return `# ${page.data.title} ${processed}`; }apps/www/src/app/llms-full.txt/route.ts (1)
5-10: Add Content-Type header for consistency.The similar route at
llms.mdx/docs/[[...slug]]/route.tssetsContent-Type: text/markdown. This route should also set an appropriate Content-Type header for proper client handling.💡 Add Content-Type header
export async function GET() { const scan = source.getPages().map(getLLMText); const scanned = await Promise.all(scan); - return new Response(scanned.join('\n\n')); + return new Response(scanned.join('\n\n'), { + headers: { + 'Content-Type': 'text/plain; charset=utf-8', + }, + }); }apps/www/src/app/og/docs/[...slug]/route.tsx (1)
29-34: Thelangproperty may be unused in this route.The route pattern is
/og/docs/[...slug]without a[lang]segment, butgenerateStaticParamsreturns{ lang, slug }. Next.js will ignore thelangproperty since it doesn't match any dynamic segment in the route path. If localization isn't needed for OG images, consider removing the unused property.💡 Remove unused lang property
export function generateStaticParams() { - return source.getPages().map((page) => ({ - lang: page.locale, - slug: getPageImage(page).segments, - })); + return source.getPages().map((page) => ({ + slug: getPageImage(page).segments, + })); }apps/www/package.json (1)
9-12: Redundanttypecheckscript alongsidetypes:check.Both
types:check(line 9) andtypecheck(line 12) runtsc --noEmit, buttypes:checkalso runsfumadocs-mdxandnext typegenfirst. Consider removing the simplertypecheckscript or clarifying when each should be used.Suggested consolidation
"types:check": "fumadocs-mdx && next typegen && tsc --noEmit", "postinstall": "fumadocs-mdx", "clean": "rimraf node_modules", - "typecheck": "tsc --noEmit",apps/www/content/docs/index.mdx (1)
15-17: Consider adding a description to the GitHub card for consistency.The other Card components include descriptions, but the GitHub Repository card doesn't. This is a minor consistency nit.
Suggested addition
<Cards> - <Card title="GitHub Repository" href="https://github.com/yamcodes/bedstack" /> + <Card title="GitHub Repository" href="https://github.com/yamcodes/bedstack" description="View the source code and contribute" /> </Cards>apps/www/src/app/docs/[[...slug]]/page.tsx (1)
36-38: Remove or update the template comment.The comment "update it to match your repo" is leftover from template code. After updating the
gitConfigvalues, this comment should be removed.Proposed fix
<ViewOptions markdownUrl={`${page.url}.mdx`} - // update it to match your repo githubUrl={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/docs/content/docs/${page.path}`} />
| - name: Build with VitePress | ||
| run: | | ||
| bun run docs:build | ||
| touch apps/www/.vitepress/dist/.nojekyll | ||
| touch apps/www-legacy/.vitepress/dist/.nojekyll | ||
| - name: Upload artifact | ||
| uses: actions/upload-pages-artifact@v4 | ||
| with: | ||
| path: apps/www/.vitepress/dist | ||
| path: apps/www-legacy/.vitepress/dist |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check package.json for docs:build script
cat package.json | grep -A5 "docs:build" || echo "Not found in root package.json"Repository: yamcodes/bedstack
Length of output: 332
🏁 Script executed:
# Search for docs:build in all package.json files
fd package.json | xargs grep -l "docs:build" || echo "No matches found"Repository: yamcodes/bedstack
Length of output: 73
🏁 Script executed:
# Search for turbo configuration files
fd -e json -e jsonc | grep -i turboRepository: yamcodes/bedstack
Length of output: 71
🏁 Script executed:
# Search for vitepress build configuration and output directories
rg "vitepress build|\.vitepress/dist" --type json --type yaml -A2 -B2Repository: yamcodes/bedstack
Length of output: 529
🏁 Script executed:
# Check the apps directory structure
fd -type d -name "www*" apps/ 2>/dev/null || echo "Checking alternative structure"Repository: yamcodes/bedstack
Length of output: 91
🏁 Script executed:
# Check if www package exists and its build output
fd -type d -path "*/www/package.json" | head -5Repository: yamcodes/bedstack
Length of output: 231
🏁 Script executed:
# Check apps/www structure if it exists
ls -la apps/ 2>/dev/null | grep -E "www|vitepress"Repository: yamcodes/bedstack
Length of output: 171
🏁 Script executed:
# Check what www package.json contains
cat apps/www/package.json 2>/dev/null | grep -A10 "scripts" || echo "www package not found or no scripts"Repository: yamcodes/bedstack
Length of output: 458
🏁 Script executed:
# Verify the build outputs mentioned in turbo.json context
# Check if www outputs to dist/ or .vitepress/dist/
rg "output|dist" apps/www/turbo.json 2>/dev/null || rg "build.*output" apps/www/ 2>/dev/null || echo "Checking vitepress config..."Repository: yamcodes/bedstack
Length of output: 89
Fix mismatch: docs:build targets www (Next.js), but workflow uploads from www-legacy (VitePress).
The docs:build script runs turbo run build --filter=www, which builds the apps/www package using Next.js. However, the workflow artifact path apps/www-legacy/.vitepress/dist expects output from apps/www-legacy (VitePress). Since Next.js outputs to .next/ not .vitepress/dist/, the artifact directory will be empty and Pages deployment will fail.
Change the workflow to either:
- Build the correct package:
turbo run build --filter=www-legacy, or - Upload from the correct path:
apps/www/.next/(if that's the intended output)
🤖 Prompt for AI Agents
In @.github/workflows/deploy-www.yml around lines 51 - 58, The workflow's
docs:build step runs the npm script that executes "turbo run build --filter=www"
(building Next.js under the www package) but the Upload artifact step points to
"apps/www-legacy/.vitepress/dist" (VitePress) causing an empty artifact; either
change the build invocation to target the legacy site (run turbo run build
--filter=www-legacy / update docs:build to build www-legacy) or change the
upload path to the Next.js output (apps/www/.next) so the artifact matches the
built package; update the .github/workflows/deploy-www.yml steps accordingly,
keeping the names "Build with VitePress"/"Upload artifact" consistent with the
chosen target.
| link: '/what-is-bedstack', | ||
| }, | ||
| { text: 'Getting Started', link: '/getting-started' }, | ||
| { text: 'Getting Started', link: '/realworld' }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if realworld.md exists in the legacy www directory and explore structure
echo "=== Searching for realworld.md ==="
fd -t f "realworld.md" apps/www-legacy/ 2>/dev/null || echo "File not found"
echo -e "\n=== Listing markdown files in apps/www-legacy ==="
fd -t f "\.md$" apps/www-legacy/ | head -20
echo -e "\n=== Checking config.ts content around line 37 ==="
if [ -f "apps/www-legacy/.vitepress/config.ts" ]; then
sed -n '30,45p' "apps/www-legacy/.vitepress/config.ts"
fi
echo -e "\n=== Directory structure of apps/www-legacy ==="
ls -la apps/www-legacy/ 2>/dev/null | head -20Repository: yamcodes/bedstack
Length of output: 1430
Navigation link is broken — realworld.md does not exist.
The link /realworld points to a non-existent page. The markdown files in apps/www-legacy/ are:
getting-started.mdwhat-is-bedstack.mdindex.mdREADME.md
The "Getting Started" navigation item should link to /getting-started (the existing file) or realworld.md must be created.
🤖 Prompt for AI Agents
In `@apps/www-legacy/.vitepress/config.ts` at line 37, The navigation entry with
text 'Getting Started' currently uses the link '/realworld' which points to a
non-existent page; update that navigation object (the { text: 'Getting Started',
link: '/realworld' } entry) to use the existing page path '/getting-started' or
alternatively add a new realworld.md page to the site so the '/realworld' link
resolves.
| "scripts": { | ||
| "dev": "vitepress dev", | ||
| "build": "vitepress build", | ||
| "clean": "rimraf node_modules", | ||
| "typecheck": "tsc --noEmit" |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check rimraf in all package.json files and lock files
echo "=== Checking rimraf in package.json files ==="
find . -name "package.json" -type f | head -20 | xargs rg -l "rimraf" 2>/dev/null
echo -e "\n=== Rimraf in root package.json ==="
cat package.json 2>/dev/null | grep -A 5 -B 5 "rimraf" || echo "Not found in root"
echo -e "\n=== Rimraf in www-legacy package.json ==="
cat apps/www-legacy/package.json 2>/dev/null | grep -A 5 -B 5 "rimraf" || echo "Not found"
echo -e "\n=== Checking lock files for rimraf ==="
if [ -f "bun.lock" ]; then
rg -c "rimraf" bun.lock || echo "Not in bun.lock"
fi
if [ -f "pnpm-lock.yaml" ]; then
rg -c "rimraf" pnpm-lock.yaml || echo "Not in pnpm-lock.yaml"
fi
if [ -f "yarn.lock" ]; then
rg -c "rimraf" yarn.lock || echo "Not in yarn.lock"
fi
if [ -f "package-lock.json" ]; then
rg -c "rimraf" package-lock.json || echo "Not in package-lock.json"
fi
echo -e "\n=== Check www-legacy package.json complete content ==="
cat apps/www-legacy/package.jsonRepository: yamcodes/bedstack
Length of output: 1783
Add rimraf to www-legacy's devDependencies.
The clean script uses rimraf, but it's not declared in this package's dependencies. While rimraf is available at the root workspace level and will be hoisted, the package should explicitly declare its own dependency for clarity and maintainability. Add "rimraf": "^6.1.2" to devDependencies.
🤖 Prompt for AI Agents
In `@apps/www-legacy/package.json` around lines 6 - 10, The package.json declares
a "clean" script that calls rimraf but rimraf is not listed in this package's
devDependencies; add a devDependencies entry for "rimraf" with version "^6.1.2"
in apps/www-legacy's package.json (alongside existing devDependencies) so the
"clean" script's dependency is explicit and versioned.
| ```sh | ||
| gh repo clone yamcodes/bedstack | ||
| cd bedstack | ||
| bun i | ||
| ``` | ||
|
|
||
| 2. **Ensure Docker daemon is running and spin up the Postgres+Bun container** | ||
|
|
||
| ```sh | ||
| bun db | ||
| ``` | ||
|
|
||
| 3. **Migrate the schema to the database** | ||
|
|
||
| ```sh | ||
| bun db:migrate | ||
| ``` | ||
|
|
||
| 4. **Run the app** | ||
|
|
||
| ```sh | ||
| bun dev | ||
| ``` |
There was a problem hiding this comment.
Inconsistent code block indentation may cause rendering issues.
The code block in step 1 (lines 21-25) is indented with 2 spaces, while steps 2-4 have no indentation. In MDX, code blocks within numbered lists typically need consistent indentation (usually 3-4 spaces) to be properly nested under the list item. The current inconsistency could cause the code blocks in steps 2-4 to break out of the list structure.
Proposed fix - align all code blocks with proper list indentation
1. **Clone and install dependencies**
- ```sh
- gh repo clone yamcodes/bedstack
- cd bedstack
- bun i
- ```
+ ```sh
+ gh repo clone yamcodes/bedstack
+ cd bedstack
+ bun i
+ ```
2. **Ensure Docker daemon is running and spin up the Postgres+Bun container**
-```sh
-bun db
-```
+ ```sh
+ bun db
+ ```
3. **Migrate the schema to the database**
-```sh
-bun db:migrate
-```
+ ```sh
+ bun db:migrate
+ ```
4. **Run the app**
-```sh
-bun dev
-```
+ ```sh
+ bun dev
+ ```📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ```sh | |
| gh repo clone yamcodes/bedstack | |
| cd bedstack | |
| bun i | |
| ``` | |
| 2. **Ensure Docker daemon is running and spin up the Postgres+Bun container** | |
| ```sh | |
| bun db | |
| ``` | |
| 3. **Migrate the schema to the database** | |
| ```sh | |
| bun db:migrate | |
| ``` | |
| 4. **Run the app** | |
| ```sh | |
| bun dev | |
| ``` |
🤖 Prompt for AI Agents
In `@apps/www/content/docs/realworld.mdx` around lines 21 - 43, The numbered
list's fenced code blocks are inconsistently indented (step 1 has two leading
spaces while steps 2–4 have none), which can break MDX list nesting; update each
fenced code block under the steps ("1. **Ensure...", "2. **Ensure Docker...",
"3. **Migrate...", "4. **Run the app") so the opening and closing ```sh and
their contents are indented the same amount (use 3 or 4 spaces consistently,
e.g., indent the ```sh, commands, and closing ``` by three spaces) so all code
blocks remain correctly nested within their list items.
| <ViewOptions | ||
| markdownUrl={`${page.url}.mdx`} | ||
| // update it to match your repo | ||
| githubUrl={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/docs/content/docs/${page.path}`} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify the actual path structure for docs content
echo "=== Searching for docs content location ==="
fd -t d "content" | head -20
echo ""
echo "=== Check for MDX files in content directories ==="
fd -e mdx | grep -i content | head -20
echo ""
echo "=== Check directory structure under apps/www ==="
fd -t d --max-depth 3 . apps/www | head -30Repository: yamcodes/bedstack
Length of output: 729
🏁 Script executed:
#!/bin/bash
# Examine the page.tsx file to understand the path construction
echo "=== Reading the page.tsx file ==="
cat -n apps/www/src/app/docs/[[...slug]]/page.tsx | head -50Repository: yamcodes/bedstack
Length of output: 2026
🏁 Script executed:
#!/bin/bash
# Search for how page.path is defined/used
echo "=== Searching for page.path usage ==="
rg "page\.path" --type ts --type tsx -B 2 -A 2 | head -40
echo ""
echo "=== Check gitConfig usage ==="
rg "gitConfig" --type ts --type tsx -B 2 -A 2 | head -40Repository: yamcodes/bedstack
Length of output: 202
🏁 Script executed:
#!/bin/bash
# Search for fumadocs usage and source configuration
echo "=== Looking for source configuration ==="
rg "source\." -A 2 | head -30
echo ""
echo "=== Check for fumadocs config or source setup ==="
fd -e "ts" -e "js" | xargs grep -l "fumadocs" | head -10Repository: yamcodes/bedstack
Length of output: 1940
🏁 Script executed:
#!/bin/bash
# Check the lib/source file to understand page structure
echo "=== Looking for lib/source file ==="
find . -path "*/lib/source*" -type f
echo ""
echo "=== Reading source.ts or similar ==="
cat -n apps/www/src/lib/source.ts 2>/dev/null || cat -n apps/www/src/lib/source.tsx 2>/dev/null || echo "File not found in expected locations"Repository: yamcodes/bedstack
Length of output: 1111
🏁 Script executed:
#!/bin/bash
# Search for any comments or documentation about the GitHub URL path
rg "github.com" -B 3 -A 3 | head -40Repository: yamcodes/bedstack
Length of output: 2971
Update the GitHub URL path to match the actual repository structure.
The path in the GitHub URL should be apps/www/content/docs/${page.path} instead of docs/content/docs/${page.path}. The docs content is located at apps/www/content/docs/, not docs/content/docs/.
Current code (line 37)
githubUrl={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/docs/content/docs/${page.path}`}
Additionally, update the gitConfig values from their placeholder text ('username', 'repo') to match your actual repository.
🤖 Prompt for AI Agents
In `@apps/www/src/app/docs/`[[...slug]]/page.tsx at line 37, Update the githubUrl
template used for the page link: change the path segment from
"docs/content/docs/${page.path}" to "apps/www/content/docs/${page.path}" in the
githubUrl expression (the template referenced by githubUrl and page.path). Also
replace placeholder gitConfig values ('username' and 'repo') with the actual
repository owner and name in the gitConfig object so githubUrl resolves
correctly.
| &::selection { | ||
| @apply bg-primary text-primary-foreground; | ||
| } |
There was a problem hiding this comment.
Invalid nesting selector at root level.
The &::selection selector uses the CSS nesting parent selector (&), but it's at the root level of @layer base, not nested inside another rule. This will likely be ignored or cause unexpected behavior.
🐛 Proposed fix
- &::selection {
+ ::selection {
`@apply` bg-primary text-primary-foreground;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| &::selection { | |
| @apply bg-primary text-primary-foreground; | |
| } | |
| ::selection { | |
| `@apply` bg-primary text-primary-foreground; | |
| } |
🤖 Prompt for AI Agents
In `@apps/www/src/app/global.css` around lines 92 - 94, The selector
"&::selection" at the root of the `@layer` base is invalid because the parent
selector (&) can only be used inside another rule; replace it with a top-level
::selection rule (i.e. change "&::selection { `@apply` bg-primary
text-primary-foreground; }" to "::selection { `@apply` bg-primary
text-primary-foreground; }") so the browser/Tailwind will apply the selection
styles correctly and keep it inside the same `@layer` base block.
| return new ImageResponse( | ||
| <DefaultImage | ||
| title={page.data.title} | ||
| description={page.data.description} | ||
| site="My App" | ||
| />, | ||
| { | ||
| width: 1200, | ||
| height: 630, | ||
| }, | ||
| ); |
There was a problem hiding this comment.
Update placeholder site name.
The site name is hardcoded as "My App" but should reflect the actual project name (e.g., "Bedstack") for proper OG image branding.
💡 Suggested fix
return new ImageResponse(
<DefaultImage
title={page.data.title}
description={page.data.description}
- site="My App"
+ site="Bedstack"
/>,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return new ImageResponse( | |
| <DefaultImage | |
| title={page.data.title} | |
| description={page.data.description} | |
| site="My App" | |
| />, | |
| { | |
| width: 1200, | |
| height: 630, | |
| }, | |
| ); | |
| return new ImageResponse( | |
| <DefaultImage | |
| title={page.data.title} | |
| description={page.data.description} | |
| site="Bedstack" | |
| />, | |
| { | |
| width: 1200, | |
| height: 630, | |
| }, | |
| ); |
🤖 Prompt for AI Agents
In `@apps/www/src/app/og/docs/`[...slug]/route.tsx around lines 16 - 26, The OG
image uses a hardcoded site name "My App" in the ImageResponse JSX; update the
DefaultImage prop site to the real project name (e.g., "Bedstack") or derive it
from your app config/env so branding is correct. Locate the ImageResponse call
that renders <DefaultImage title={page.data.title}
description={page.data.description} site="My App" /> and replace the literal
with the correct constant or config value (or a safe fallback) so
DefaultImage.site reflects the actual project name.
| try { | ||
| await navigator.clipboard.write([ | ||
| new ClipboardItem({ | ||
| 'text/plain': fetch(markdownUrl).then(async (res) => { | ||
| const content = await res.text(); | ||
| cache.set(markdownUrl, content); | ||
|
|
||
| return content; | ||
| }), | ||
| }), | ||
| ]); | ||
| } finally { | ||
| setLoading(false); | ||
| } |
There was a problem hiding this comment.
Missing error handling for failed fetch requests.
If the fetch fails (network error, 404, etc.), the error propagates but the content won't be cached, and there's no user feedback. Consider catching errors and showing a failure state.
Suggested improvement
try {
await navigator.clipboard.write([
new ClipboardItem({
'text/plain': fetch(markdownUrl).then(async (res) => {
+ if (!res.ok) {
+ throw new Error(`Failed to fetch: ${res.status}`);
+ }
const content = await res.text();
cache.set(markdownUrl, content);
return content;
}),
}),
]);
- } finally {
+ } catch (error) {
+ console.error('Failed to copy markdown:', error);
+ // Optionally: show user feedback for failure
+ } finally {
setLoading(false);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| try { | |
| await navigator.clipboard.write([ | |
| new ClipboardItem({ | |
| 'text/plain': fetch(markdownUrl).then(async (res) => { | |
| const content = await res.text(); | |
| cache.set(markdownUrl, content); | |
| return content; | |
| }), | |
| }), | |
| ]); | |
| } finally { | |
| setLoading(false); | |
| } | |
| try { | |
| await navigator.clipboard.write([ | |
| new ClipboardItem({ | |
| 'text/plain': fetch(markdownUrl).then(async (res) => { | |
| if (!res.ok) { | |
| throw new Error(`Failed to fetch: ${res.status}`); | |
| } | |
| const content = await res.text(); | |
| cache.set(markdownUrl, content); | |
| return content; | |
| }), | |
| }), | |
| ]); | |
| } catch (error) { | |
| console.error('Failed to copy markdown:', error); | |
| // Optionally: show user feedback for failure | |
| } finally { | |
| setLoading(false); | |
| } |
🤖 Prompt for AI Agents
In `@apps/www/src/components/ai/page-actions.tsx` around lines 36 - 49, The
current clipboard-copy flow around navigator.clipboard.write and ClipboardItem
uses fetch(markdownUrl) but doesn't handle fetch failures or non-OK responses,
so errors bubble up and nothing is cached or surfaced to the user; wrap the
fetch logic in a try/catch, check response.ok and throw a descriptive error for
non-200 responses, only call cache.set(markdownUrl, content) after successful
read, and on error set the UI failure state (e.g., call setLoading(false) and
the component's existing error/notification setter such as setCopyError or a
toast) before rethrowing or returning so users see the failure.
| const items = useMemo(() => { | ||
| const fullMarkdownUrl = | ||
| typeof window !== 'undefined' | ||
| ? new URL(markdownUrl, window.location.origin) | ||
| : 'loading'; | ||
| const q = `Read ${fullMarkdownUrl}, I want to ask questions about it.`; |
There was a problem hiding this comment.
SSR fallback produces invalid query string that may cause hydration mismatch.
When window is undefined during SSR, fullMarkdownUrl becomes the literal string 'loading', producing URLs like ?q=Read loading, I want to ask questions about it. The memoized items will recompute on client hydration, potentially causing a React hydration mismatch warning.
Consider deferring the URL computation entirely to the client or using a state-based approach:
Suggested fix using useEffect
+import { useEffect, useMemo, useState } from 'react';
export function ViewOptions({
markdownUrl,
githubUrl,
}: {
markdownUrl: string;
githubUrl: string;
}) {
+ const [fullMarkdownUrl, setFullMarkdownUrl] = useState<string | null>(null);
+
+ useEffect(() => {
+ setFullMarkdownUrl(new URL(markdownUrl, window.location.origin).toString());
+ }, [markdownUrl]);
const items = useMemo(() => {
- const fullMarkdownUrl =
- typeof window !== 'undefined'
- ? new URL(markdownUrl, window.location.origin)
- : 'loading';
- const q = `Read ${fullMarkdownUrl}, I want to ask questions about it.`;
+ const q = fullMarkdownUrl
+ ? `Read ${fullMarkdownUrl}, I want to ask questions about it.`
+ : '';
return [
// ... items
];
- }, [githubUrl, markdownUrl]);
+ }, [githubUrl, fullMarkdownUrl]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const items = useMemo(() => { | |
| const fullMarkdownUrl = | |
| typeof window !== 'undefined' | |
| ? new URL(markdownUrl, window.location.origin) | |
| : 'loading'; | |
| const q = `Read ${fullMarkdownUrl}, I want to ask questions about it.`; | |
| import { useEffect, useMemo, useState } from 'react'; | |
| export function ViewOptions({ | |
| markdownUrl, | |
| githubUrl, | |
| }: { | |
| markdownUrl: string; | |
| githubUrl: string; | |
| }) { | |
| const [fullMarkdownUrl, setFullMarkdownUrl] = useState<string | null>(null); | |
| useEffect(() => { | |
| setFullMarkdownUrl(new URL(markdownUrl, window.location.origin).toString()); | |
| }, [markdownUrl]); | |
| const items = useMemo(() => { | |
| const q = fullMarkdownUrl | |
| ? `Read ${fullMarkdownUrl}, I want to ask questions about it.` | |
| : ''; | |
| return [ | |
| // ... items | |
| ]; | |
| }, [githubUrl, fullMarkdownUrl]); |
🤖 Prompt for AI Agents
In `@apps/www/src/components/ai/page-actions.tsx` around lines 85 - 90, The SSR
fallback sets fullMarkdownUrl to the literal string 'loading' inside useMemo
(items, fullMarkdownUrl, markdownUrl, q) which yields an invalid query on server
and then changes on hydration; fix by deferring URL computation to the client:
replace the inline typeof window check with a client-only state (e.g.,
useState<string | null>) and populate it in useEffect using new URL(markdownUrl,
window.location.origin), then have useMemo build items only when that state is
non-null (or return a safe server placeholder that matches client until
hydrated) so the memoized q and items stay stable between SSR and client render.
Description
Closes #212
PR Checklist
bun docsSummary by CodeRabbit
New Features
Documentation
Chores
✏️ Tip: You can customize this high-level summary in your review settings.