Enable fumadocs search, dual-theme highlighting, and UX enhancements#99
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
… highlighting, edit on GitHub Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…t usage Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
|
|
|
@copilot fix ci |
|
@copilot 继续 |
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This pull request enables several fumadocs documentation features including static search, TypeScript twoslash hover information, dual-theme code highlighting (github-light/github-dark), package manager syntax conversion, collapsible sidebar navigation, and GitHub edit links for documentation pages.
Changes:
- Added fumadocs-docgen and fumadocs-twoslash dependencies for enhanced documentation features
- Configured dual-theme code highlighting with github-light and github-dark themes
- Enabled static search functionality in the documentation site
- Added "Edit on GitHub" links to documentation pages with custom footer component
- Configured collapsible sidebar with default open level set to 0
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Added dependencies for fumadocs-docgen (^3.0.5) and fumadocs-twoslash (^3.1.12) with all transitive dependencies including oxc-transform and TypeScript VFS |
| apps/site/package.json | Added fumadocs-docgen and fumadocs-twoslash to dependencies |
| apps/site/source.config.ts | Configured remarkInstall plugin, dual-theme code highlighting, and transformerTwoslash for TypeScript hover information |
| apps/site/tailwind.config.ts | Added fumadocs-twoslash to content paths and included @tailwindcss/typography plugin |
| apps/site/app/layout.tsx | Enabled static search in RootProvider configuration |
| apps/site/app/layout.config.tsx | Added transparentMode navigation, external flag for GitHub link, and githubUrl property |
| apps/site/app/global.css | Imported fumadocs-twoslash/twoslash.css stylesheet for twoslash styling |
| apps/site/app/docs/layout.tsx | Configured collapsible sidebar with defaultOpenLevel set to 0 |
| apps/site/app/docs/[[...slug]]/page.tsx | Implemented custom footer with "Edit on GitHub" link using hardcoded branch and file extension |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| export default defineConfig({ | ||
| mdxOptions: { | ||
| remarkPlugins: [remarkInstall], | ||
| rehypeCodeOptions: { | ||
| themes: { | ||
| light: 'github-light', | ||
| dark: 'github-dark', | ||
| }, | ||
| transformers: [ | ||
| ...(rehypeCodeDefaultOptions.transformers ?? []), | ||
| transformerTwoslash(), | ||
| ], | ||
| }, | ||
| }, |
There was a problem hiding this comment.
The MDX configuration introduces new plugins and transformers (remarkInstall, transformerTwoslash) with dual-theme code highlighting, but lacks inline comments or documentation explaining their purpose and behavior. Consider adding brief comments to explain what each plugin does, especially for future maintainers who may not be familiar with fumadocs ecosystem plugins. For example, explain that remarkInstall handles package manager syntax conversion and transformerTwoslash provides TypeScript hover information.
| footer={{ | ||
| children: ( | ||
| <a | ||
| href={`https://github.com/objectstack-ai/objectos/blob/main/${githubPath}`} |
There was a problem hiding this comment.
The GitHub edit URL hardcodes the branch name as 'main'. If the default branch is different (e.g., 'master', 'develop') or if the project uses a different branching strategy, users will be directed to a non-existent page. Consider making the branch name configurable through an environment variable or a constant, or verify that 'main' is indeed the correct default branch for this repository.
| <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | ||
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> | ||
| </svg> |
There was a problem hiding this comment.
The inline SVG for the edit icon lacks an accessible title or aria-label attribute, which may create accessibility issues for users relying on screen readers. Consider adding an aria-label to the anchor element or using a semantic component from lucide-react (which is already a dependency) like the Edit icon for better accessibility and maintainability.
| const githubPath = params.slug | ||
| ? `apps/site/content/docs/${params.slug.join('/')}.mdx` | ||
| : 'apps/site/content/docs/index.mdx'; |
There was a problem hiding this comment.
The GitHub edit link construction assumes all documentation files use the .mdx extension, but this may not always be accurate if some files use .md extension instead. Consider checking the actual file extension from the page metadata or handling both .md and .mdx extensions to avoid potential 404 errors when users click the "Edit this page" link.
| { | ||
| text: 'GitHub', | ||
| url: 'https://github.com/objectstack-ai/objectos', | ||
| external: true, | ||
| }, |
There was a problem hiding this comment.
There is duplication in the GitHub repository URL configuration. The URL 'https://github.com/objectstack-ai/objectos' appears both in the links array (line 32) and as the githubUrl property (line 36). Consider using only the githubUrl property, as fumadocs-ui can automatically generate the GitHub link in the navigation from this property, avoiding potential inconsistencies if the URL needs to be updated in the future.
| { | |
| text: 'GitHub', | |
| url: 'https://github.com/objectstack-ai/objectos', | |
| external: true, | |
| }, |
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.