Skip to content

Commit 4340033

Browse files
hannesrudolphhannesrudolph
authored
Fix mobile search bar visibility and suppress search plugin warnings (#272)
1 parent 13a6c53 commit 4340033

File tree

10 files changed

+567
-130
lines changed

10 files changed

+567
-130
lines changed

‎.env.example‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
POSTHOG_API_KEY=your_posthog_api_key
1+
# PostHog Analytics (optional)
2+
# POSTHOG_API_KEY=your_posthog_api_key_here
3+
4+
# Suppress webpack warnings (optional)
5+
# Set this to suppress module resolution warnings during build
6+
# NODE_OPTIONS="--no-warnings"
7+
8+
# Alternative: Suppress specific warning types
9+
# SUPPRESS_SEARCH_WARNINGS=true

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
.cache-loader
1010
*.js
1111
!src/**/*.js
12+
!plugins/**/*.js
1213

1314
# Misc
1415
.DS_Store

‎.roorules‎

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,67 @@ Never Thank cte, hannesrudolph, jr, roomote, dleffel or mrubens in release notes
1515

1616

1717
## Misc
18-
When moving a section, make sure to add the forwarding link in docusaurus.config.ts
18+
When moving a section, make sure to add the forwarding link in docusaurus.config.ts
19+
20+
# CLAUDE.md
21+
22+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
23+
24+
## Common Development Commands
25+
26+
### Build & Development
27+
- `npm start` - Start local development server with hot reload at http://localhost:3000
28+
- `npm run build` - Build static production site to `/build` directory
29+
- `npm run serve` - Serve production build locally
30+
31+
### Code Quality
32+
- `npm run lint` - Lint TypeScript/JavaScript files in `/src`
33+
- `npm run lint:fix` - Auto-fix linting issues
34+
- `npm run typecheck` - Run TypeScript type checking
35+
- `npm run lint:unused` - Check for unused imports
36+
37+
### Documentation Management
38+
- `npm run clear` - Clear Docusaurus cache (useful if seeing stale content)
39+
- `npm run swizzle` - Customize Docusaurus components
40+
41+
## High-Level Architecture
42+
43+
This is a Docusaurus v3 documentation site for Roo Code, an AI-powered VS Code extension. The architecture follows these patterns:
44+
45+
### Content Structure
46+
- **Documentation** lives in `/docs` with a hierarchical folder structure
47+
- **Components** in `/src/components` provide custom React components used throughout the site
48+
- **Theme customizations** in `/src/theme` override default Docusaurus components for custom behavior
49+
- **Static assets** in `/static` (images, downloads, etc.)
50+
51+
### Key Configuration Files
52+
- `docusaurus.config.ts` - Main site configuration including URLs, metadata, plugins, and theme settings
53+
- `sidebars.ts` - Defines the documentation navigation structure
54+
- `src/constants.ts` - Centralized URLs and links used across the site
55+
56+
### Documentation Organization
57+
The `/docs` folder follows this structure:
58+
- `getting-started/` - New user onboarding
59+
- `basic-usage/` - Core features and concepts
60+
- `features/` - Detailed feature documentation
61+
- `advanced-usage/` - Power user features and tools
62+
- `providers/` - API provider configurations
63+
- `community/` - Community contributions and resources
64+
- `update-notes/` - Version release notes
65+
66+
### Custom Components
67+
The site uses custom React components for:
68+
- Social media icons and links
69+
- Tutorial video grids
70+
- Animated backgrounds
71+
- GitHub installation buttons
72+
- Custom navbar and footer implementations
73+
74+
### Search Implementation
75+
Uses `@easyops-cn/docusaurus-search-local` for local search functionality with highlighting and explicit result paths.
76+
77+
### Analytics
78+
Integrates PostHog analytics when `POSTHOG_API_KEY` environment variable is set.
79+
80+
### Redirects
81+
Extensive redirect configuration handles moved documentation pages to maintain backwards compatibility with existing links.

‎CLAUDE.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Common Development Commands
6+
7+
### Build & Development
8+
- `npm start` - Start local development server with hot reload at http://localhost:3000
9+
- `npm run build` - Build static production site to `/build` directory
10+
- `npm run serve` - Serve production build locally
11+
12+
### Code Quality
13+
- `npm run lint` - Lint TypeScript/JavaScript files in `/src`
14+
- `npm run lint:fix` - Auto-fix linting issues
15+
- `npm run typecheck` - Run TypeScript type checking
16+
- `npm run lint:unused` - Check for unused imports
17+
18+
### Documentation Management
19+
- `npm run clear` - Clear Docusaurus cache (useful if seeing stale content)
20+
- `npm run swizzle` - Customize Docusaurus components
21+
22+
## High-Level Architecture
23+
24+
This is a Docusaurus v3 documentation site for Roo Code, an AI-powered VS Code extension. The architecture follows these patterns:
25+
26+
### Content Structure
27+
- **Documentation** lives in `/docs` with a hierarchical folder structure
28+
- **Components** in `/src/components` provide custom React components used throughout the site
29+
- **Theme customizations** in `/src/theme` override default Docusaurus components for custom behavior
30+
- **Static assets** in `/static` (images, downloads, etc.)
31+
32+
### Key Configuration Files
33+
- `docusaurus.config.ts` - Main site configuration including URLs, metadata, plugins, and theme settings
34+
- `sidebars.ts` - Defines the documentation navigation structure
35+
- `src/constants.ts` - Centralized URLs and links used across the site
36+
37+
### Documentation Organization
38+
The `/docs` folder follows this structure:
39+
- `getting-started/` - New user onboarding
40+
- `basic-usage/` - Core features and concepts
41+
- `features/` - Detailed feature documentation
42+
- `advanced-usage/` - Power user features and tools
43+
- `providers/` - API provider configurations
44+
- `community/` - Community contributions and resources
45+
- `update-notes/` - Version release notes
46+
47+
### Custom Components
48+
The site uses custom React components for:
49+
- Social media icons and links
50+
- Tutorial video grids
51+
- Animated backgrounds
52+
- GitHub installation buttons
53+
- Custom navbar and footer implementations
54+
55+
### Search Implementation
56+
Uses `@easyops-cn/docusaurus-search-local` for local search functionality with highlighting and explicit result paths.
57+
58+
### Analytics
59+
Integrates PostHog analytics when `POSTHOG_API_KEY` environment variable is set.
60+
61+
### Redirects
62+
Extensive redirect configuration handles moved documentation pages to maintain backwards compatibility with existing links.

‎docusaurus.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const config: Config = {
7373
{
7474
hashed: true,
7575
language: ["en"],
76-
highlightSearchTermsOnTargetPage: true,
76+
highlightSearchTermsOnTargetPage: false,
7777
explicitSearchResultPath: true,
7878
docsRouteBasePath: "/",
7979
},

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"docusaurus": "docusaurus",
77
"start": "node -r dotenv/config node_modules/.bin/docusaurus start",
88
"build": "node -r dotenv/config node_modules/.bin/docusaurus build",
9+
"build:quiet": "NODE_OPTIONS='--no-warnings' node -r dotenv/config node_modules/.bin/docusaurus build",
910
"swizzle": "docusaurus swizzle",
1011
"deploy": "docusaurus deploy",
1112
"clear": "docusaurus clear",

‎plugins/README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Docusaurus Plugins
2+
3+
This directory contains custom Docusaurus plugins for the Roo Code documentation site.
4+
5+
## Currently Active Plugins
6+
7+
No custom plugins are currently active. The directory is maintained for future plugin development.
8+
9+
## Previous Plugins (Removed)
10+
11+
The following plugins were previously used but have been removed as they interfered with search functionality:
12+
13+
- `suppress-search-warnings.js` - Attempted to suppress webpack warnings but broke search functionality
14+
- `empty-module.js` - Helper module for the warning suppression plugin
15+
- `webpack-warning-filter.js` - Earlier attempt at filtering warnings (deprecated)
16+
17+
## Note on Search Warnings
18+
19+
The `@easyops-cn/docusaurus-search-local` plugin may produce some harmless warnings during build about missing modules like `proxiedGenerated`. These warnings do not affect functionality and can be safely ignored.

‎src/components/SearchKeyboardShortcut/index.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { useEffect } from 'react';
2+
3+
export function useSearchKeyboardShortcut() {
4+
useEffect(() => {
5+
const handleKeyDown = (event) => {
6+
// Check for Cmd+K on Mac or Ctrl+K on Windows/Linux
7+
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
8+
const isShortcut = isMac ? event.metaKey && event.key === 'k' : event.ctrlKey && event.key === 'k';
9+
10+
if (isShortcut) {
11+
event.preventDefault();
12+
13+
// Find the search input - it should have the class 'navbar__search-input'
14+
const searchInput = document.querySelector('.navbar__search-input');
15+
16+
if (searchInput) {
17+
searchInput.focus();
18+
// If the search modal is not visible, we might need to click the search button first
19+
const searchButton = document.querySelector('.navbar__search button');
20+
if (searchButton && !searchInput.offsetParent) {
21+
searchButton.click();
22+
// Wait a bit for the modal to open, then focus the input
23+
setTimeout(() => {
24+
searchInput.focus();
25+
}, 100);
26+
}
27+
}
28+
}
29+
};
30+
31+
// Add event listener
32+
document.addEventListener('keydown', handleKeyDown);
33+
34+
// Cleanup
35+
return () => {
36+
document.removeEventListener('keydown', handleKeyDown);
37+
};
38+
}, []);
39+
}

0 commit comments

Comments
 (0)