mirror of
https://github.com/yhirose/cpp-httplib.git
synced 2026-04-12 11:48:30 +00:00
843ad379c7
- 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.
89 lines
4.1 KiB
HTML
89 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ lang }}" data-base-path="{{ site.base_path }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ page.title }} - {{ site.title }}</title>
|
|
<link rel="icon" type="image/svg+xml" href="{{ site.base_path }}/favicon.svg">
|
|
<link rel="stylesheet" href="{{ site.base_path }}/css/main.css">
|
|
<script>
|
|
(function() {
|
|
var t = localStorage.getItem('preferred-theme');
|
|
if (!t) t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
|
if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="header-inner">
|
|
<a href="{{ site.base_path }}/{{ lang }}/" class="header-title">{{ site.title }}{% if site.version %} <span style="font-size:0.75em;font-weight:normal;margin-left:4px">v{{ site.version }}</span>{% endif %}</a>
|
|
<div class="header-spacer"></div>
|
|
<nav class="header-nav">
|
|
<a href="{{ site.base_path }}/{{ lang }}/">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
Home
|
|
</a>
|
|
{% for link in site.nav %}
|
|
{% if link.url %}
|
|
<a href="{{ link.url }}"{% if link.icon_svg %} aria-label="{{ link.label }}"{% endif %}>
|
|
{% if link.icon_svg %}{{ link.icon_svg | safe }}{% endif %}
|
|
{{ link.label }}
|
|
</a>
|
|
{% elif link.path %}
|
|
<a href="{{ site.base_path }}/{{ lang }}/{{ link.path }}">
|
|
{% if link.icon_svg %}{{ link.icon_svg | safe }}{% endif %}
|
|
{{ link.label }}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</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">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
|
{{ lang | upper }}
|
|
</button>
|
|
<ul class="lang-popup">
|
|
{% for l in site.langs %}
|
|
<li><a href="#" data-lang="{{ l }}">{{ l | upper }}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% block sidebar_toggle %}{% endblock %}
|
|
</div>
|
|
</header>
|
|
|
|
{% if page.status == "draft" %}
|
|
<div class="draft-banner">DRAFT</div>
|
|
{% endif %}
|
|
|
|
<div class="layout {% block layout_class %}{% endblock %}">
|
|
{% block body %}{% endblock %}
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
© 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="{{ site.base_path }}/js/main.js"></script>
|
|
</body>
|
|
</html>
|