Add search functionality across documentation pages

- Implemented a search button in the header of each documentation page.
- Added a search modal that allows users to input search queries.
- Integrated a JavaScript search feature that fetches and displays results from a new `pages-data.json` file.
- Each documentation page now includes a search overlay for improved navigation.
- Updated the main JavaScript file to handle search logic, including result highlighting and navigation.
- Created a `pages-data.json` file containing metadata for all documentation pages to facilitate search functionality.
This commit is contained in:
yhirose
2026-03-01 23:37:51 -05:00
parent cda9680cdc
commit 843ad379c7
31 changed files with 1154 additions and 0 deletions

View File

@@ -41,6 +41,9 @@
</nav>
<div class="header-tools">
<button class="search-btn" aria-label="Search (⌘K)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</button>
<button class="theme-toggle" aria-label="Toggle theme"></button>
<div class="lang-selector">
<button class="lang-btn" aria-label="Language">
@@ -308,6 +311,18 @@
&copy; 2026 yhirose. All rights reserved.
</footer>
<!-- Search modal -->
<div class="search-overlay" id="search-overlay">
<div class="search-modal">
<div class="search-input-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" id="search-input" placeholder="Search..." autocomplete="off" spellcheck="false">
<kbd class="search-esc">ESC</kbd>
</div>
<ul class="search-results" id="search-results"></ul>
</div>
</div>
<script src="&#x2F;cpp-httplib/js/main.js"></script>
</body>
</html>