FriendChise Docs
Documentation Site
How the /doc route turns markdown into the navigable, searchable docs site
The docs section (/doc/*) is its own small system: a markdown content tree, a nav-tree builder, and a set of client components for search, navigation, and reading aids.
Content layer
- Content lives as markdown files under
docs/at the repo root, one folder per top-level section (overview/,getting-started/,mobile-app/,backend-api/,authentication/,features/,task-system/,deployment/,environment-variables/,app-store-review/,roadmap/,contributing/,troubleshooting/). lib/docs/index.tsreads every.mdfile, parses YAML frontmatter (title,description,order), derives a route slug from the file path, and extracts a search string (title + description + body).folder/index.mdbecomes that folder's section landing page and gives the folder its nav title/description/order; other files in the folder become child pages.ordercontrols sibling sort order (folders and pages alike) — see Using the Docs for the frontmatter contract contributors should follow when adding pages.
Route
app/doc/[...slug]/page.tsxresolves the slug to a doc viagetDocBySlug/getDocMarkdown, renders it withreact-markdown+remark-gfm, and builds the right-hand table of contents from##/###headings.app/doc/page.tsxandapp/docs/page.tsxboth redirect to/doc/overview.
Components
DocLayoutfetches the navTree and passes it toDocNavbar, andDocNavbarrenders the docs header, the mobile nav drawer trigger, and the search trigger.DocSidebarTree— the left navigation tree (desktop sidebar and inside the mobile drawer). Expands/collapses folders, auto-opens the path to the active page, and includes an inline search box.DocSearchDialog— a⌘K/Ctrl+K(or/) command-palette style dialog for searching from anywhere on the docs site, built on the sharedDialogprimitive.DocRightToc— the "on this page" heading list, driven byextractDocHeadings.DocSidebarScrollFrame— a thin scroll-container wrapper for the desktop sidebar.DocCodeBlock— wraps fenced code blocks with a hover copy-to-clipboard button.
Search
lib/docs/search.tsholds the ranked, partial-match search logic (searchDocs,scoreResult,flattenSearchResults) shared by both the sidebar's inline search and theDocSearchDialogcommand palette — this is intentional so scoring behavior can't drift between the two entry points.- Matching is substring-based across title, description, breadcrumbs, and full page body text, ranked so exact title matches outrank title-prefix matches, which outrank body-text matches.
Navigation and responsiveness
- Desktop (
lgand up): sidebar, article, and (onxland up) a right-hand TOC render as a three-column grid. - Mobile/tablet: the sidebar is hidden and replaced by the drawer opened from the navbar's menu button, so navigation never crowds the article content.
- The active page is tracked via
activeSlug, which highlights the current entry in both the sidebar tree and the search results list, and keeps the sidebar auto-scrolled to the active item.
Adding a page
- Add a
.mdfile under the right section folder indocs/(or a newindex.mdfor a new section). - Set
title,description, andorderin frontmatter. - Link to it from the section's
index.md"Pages" list and from any other page that should cross-reference it. - If it's a brand-new top-level section, give its
index.mdanorderthat reflects where it should sit in the top nav.
