Skip to content

Add documentation search and improve mobile docs layout#913

Open
ndoschek wants to merge 4 commits intomasterfrom
nd/add-doc-search
Open

Add documentation search and improve mobile docs layout#913
ndoschek wants to merge 4 commits intomasterfrom
nd/add-doc-search

Conversation

@ndoschek
Copy link
Member

@ndoschek ndoschek commented Feb 10, 2026

What it does

  • Add full-text search to documentation pages
    • Integrate gatsby-plugin-local-search with FlexSearch for indexing all markdown docs
    • Add DocSearch component with dropdown results, keyboard navigation (Ctrl+K), and match highlighting
    • Add dedicated /docs/search/ page for full search results with URL query parameter support
    • Include search widget in both desktop sidebar (DocSideBar) and mobile topic chooser (DocTopicChooser)
    • Add showArrows prop to DocsLayout to allow hiding arrow navigators on the search page
    • Increase mobile padding in docs layout to accommodate the search bar
  • Fix navigation stacking on docs pages
    • Add z-index: 1000 to the sticky nav container so it renders above other positioned elements
    • Fix lint warning regarding noopener
  • Show logo on mobile and introduce isMobile hook
    • Add useIsMobile hook using window.matchMedia to detect viewport width
    • Render DocTopicChooser on mobile and DocSideBar on desktop instead of showing both
    • Pass shouldRenderLogo to Nav so the Theia logo appears in the docs layout on mobile
    • Remove display:none media query from DocTopicChooser since visibility is now controlled by the hook

How to test

  1. Docs Search (15f0ef7)
  • Type in the search box in the sidebar and dropdown results appear with highlighted matches
  • Click a result: navigates to the correct doc page and section
  • Press Enter without selecting a result: navigates to new /docs/search/ full results page
  • Ctrl+K (or Cmd+K on Mac) focuses the search input on documentation pages
  • Arrow keys / Tab navigate through dropdown results, enter to accept selection
  • Escape closes the dropdown
  • /docs/search/?q=something loads with pre-filled query and results
  • Search box also works in the mobile version
  1. Nav z-index (5e1c631)
  • On mobile: Go to documentation and then open the menu via the hamburger menu. Verify the sticky nav stays on top of all content (no elements overlapping it like previously documentation headings)
  1. Mobile layout (1b145a6)
  • For mobile layout testing: switch device via the chrome devtools or resizing the browser switches between the two layouts
  • On mobile: only the topic chooser (with search) is shown, not the sidebar
  • On mobile: the Theia logo appears in the nav bar
  • On desktop: in docs only the sidebar (with search) is shown, not the topic chooser (same as before)
  • On desktop: no logo in the docs nav bar (same as before)

@github-actions
Copy link

@ndoschek ndoschek marked this pull request as ready for review February 11, 2026 11:13
@JonasHelming
Copy link
Contributor

Changes look great, thank you. However, the navigate to section is behaving a bit weirdly for terms that appear in the TOC or in general whe there are several occurences in a doc. Search for example for "slash commands". In both hits, you will get to the TOC only.

@ndoschek
Copy link
Member Author

Ah thanks for catching this! 👍
I'll take another look at TOC entry examples and investigate the navigation behavior.

- Integrate gatsby-plugin-local-search with FlexSearch for indexing all markdown docs
- Add DocSearch component with dropdown results, keyboard navigation (Ctrl+K), and match highlighting
- Add dedicated /docs/search/ page for full search results with URL query parameter support
- Include search widget in both desktop sidebar (DocSideBar) and mobile topic chooser (DocTopicChooser)
- Add showArrows prop to DocsLayout to allow hiding arrow navigators on the search page
- Increase mobile padding in docs layout to accommodate the search bar
- Add z-index: 1000 to the sticky nav container so it renders above other positioned elements
- Fix lint warning regarding noopener
- Add useIsMobile hook using window.matchMedia to detect viewport width
- Render DocTopicChooser on mobile and DocSideBar on desktop instead of showing both
- Pass shouldRenderLogo to Nav so the Theia logo appears in the docs layout on mobile
- Remove display:none media query from DocTopicChooser since visibility is now controlled by the hook
- Extract findMatchAnchor, headingToAnchor, and stripTocSection into shared search-utils module
- Strip Table of Contents sections from markdown before matching to avoid false snippet hits
- Prioritize direct heading matches over body matches in findMatchAnchor
- Use full page load for anchor links to fix scroll positioning on image-heavy pages
- Add onInitialClientRender scroll handler to correct anchor positions after images load
- Use Gatsby navigate() instead of window.history.pushState for search form submission
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants