feat: use fumadocs for website #1654
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
* Added home and about pages * docs: Examples, footer, and remaining pages (#1784) * Added examples card grid and fixed demo styling * Added footer + remaining pages, cleaned up files * Removed unused Logo component * - Fixed home page contributors GH/Discord icons - Fixed CSS file imports - Removed codeblock/tabs from generated example MDX files (now handled by the `Example` component) - Fixed component imports in MDX - Refactored `Example` component - Various styling fixes - Added `meta.json` generation * Fixed pro examples + minor changes/fixes * Small fix * Small fix * Removed `console.log` * Added missing examples pages to meta * Small fix * Fixed build * Updated package lock * Updated lockfile * Fixed example path in playground * Implemented PR feedback * Updated page headings
There was a problem hiding this comment.
Nice! Not really a lot of questions about the code - so focused on testing the design / different pages.
Generic:
font is off (I don't think inter is used on current site)examples github link doesn't workgetting errors on pages like http://localhost:3002/docs/ui-components/formatting-toolbar
AI:
Do we need to merge in changes from main?
AI button doesn't show in headerAI preview banner has been removed (maybe need to merge in updates from main)
Navbar:
examples / docs aren't highlighted in navigation when that page is activecan we make the navigation more consistent between docs and main pages?remove light / dark toggle from nav (keep in footer like existing site)
Other:
Let's walk through the pages together and manually compare them (maybe on a call), with specific attention to dark + light, responsive, etc. We can then see together what we do / do not want to fix. Some things I already noticed (outside of the above):
dark mode sign in / sign up page looks a lot different
fumadocs/app/api/og/route.tsx
Outdated
|
|
||
| export const runtime = "edge"; | ||
|
|
||
| export async function GET(request: Request) { |
There was a problem hiding this comment.
TODO: make sure we test this when deployed
fumadocs/app/(home)/page.tsx
Outdated
| import { Hero } from "./hero/Hero"; | ||
| import { Letter } from "./letter/Letter"; | ||
|
|
||
| export default function Home() { |
There was a problem hiding this comment.
why is this directory named (home)? Is this a route group? https://nextjs.org/docs/app/api-reference/file-conventions/route-groups ? Should it be? (as it's a single page, right?)
There was a problem hiding this comment.
I agree it's a little odd, but seems like it's the recommended setup for fumadocs since that's what they use for their site (https://github.com/fuma-nama/fumadocs/tree/dev/apps/docs/app/(home)). Either way, I'm pretty sure it's because you don't wanna render a HomeLayout in your root route layout (i.e. /app/layout.tsx) since that'll get inherited by all other routes. So while it's weird that it's in a route group, this seems to be the correct approach for fumadocs.
fumadocs/app/pages/layout.tsx
Outdated
| import { baseOptions } from "@/app/layout.config"; | ||
| import { Footer } from "@/components/Footer"; | ||
|
|
||
| export default function Layout({ children }: { children: ReactNode }) { |
There was a problem hiding this comment.
trying to understand the setup, for which pages is this layout file used?
There was a problem hiding this comment.
The app/docs, app/examples, and app/pages routes correspond to the content/docs, content/examples, and content/pages directories. So the layout for app/pages is used for the about, thanks, and legal pages that we define in MDX in content/pages.
This PR implements a new docs site, based on fumadocs.
I purposefully did not just update the existing docs site, so that we can compare the changes, and remove any cruft that may be left over.
So far, I've done the following:
What's left: