mirror of
https://github.com/yhirose/cpp-httplib.git
synced 2026-04-12 19:58:29 +00:00
Add favicon and update navigation icons across documentation
- Added a favicon link to all tour pages in the Japanese documentation. - Updated navigation links to include SVG icons for Home and GitHub. - Changed language button to include an SVG icon for better visual representation. - Improved theme toggle button to use SVG icons for light and dark modes. - Refactored the documentation build commands in the justfile for clarity and consistency.
This commit is contained in:
yhirose
@@ -3,6 +3,15 @@ title = "My Docs"
|
||||
base_url = "https://example.com"
|
||||
base_path = ""
|
||||
|
||||
# [[nav]]
|
||||
# label = "Guide"
|
||||
# path = "guide/"
|
||||
#
|
||||
# [[nav]]
|
||||
# label = "GitHub"
|
||||
# url = "https://github.com/your/repo"
|
||||
# icon = "github"
|
||||
|
||||
[i18n]
|
||||
default_lang = "en"
|
||||
langs = ["en", "ja"]
|
||||
|
||||
@@ -86,14 +86,22 @@ a:hover {
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--header-nav-link);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.header-nav a svg {
|
||||
flex-shrink: 0;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.header-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.lang-selector {
|
||||
@@ -101,17 +109,21 @@ a:hover {
|
||||
}
|
||||
|
||||
.lang-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: 1px solid var(--text-muted);
|
||||
border: none;
|
||||
color: var(--text);
|
||||
padding: 4px 10px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.lang-btn:hover {
|
||||
border-color: var(--text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lang-popup {
|
||||
@@ -423,16 +435,18 @@ a:hover {
|
||||
|
||||
/* Theme toggle */
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: 1px solid var(--text-muted);
|
||||
border: none;
|
||||
color: var(--text);
|
||||
padding: 4px 8px;
|
||||
padding: 5px 6px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
4
docs-gen/defaults/static/favicon.svg
Normal file
4
docs-gen/defaults/static/favicon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -33,6 +33,10 @@
|
||||
var btn = document.querySelector('.theme-toggle');
|
||||
if (!btn) return;
|
||||
|
||||
// Feather Icons: sun (light mode) and moon (dark mode)
|
||||
var sunSVG = '<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="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
|
||||
var moonSVG = '<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"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
|
||||
|
||||
function getTheme() {
|
||||
var stored = localStorage.getItem('preferred-theme');
|
||||
if (stored) return stored;
|
||||
@@ -45,7 +49,7 @@
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
}
|
||||
btn.textContent = theme === 'light' ? '\u2600\uFE0F' : '\uD83C\uDF19';
|
||||
btn.innerHTML = theme === 'light' ? sunSVG : moonSVG;
|
||||
}
|
||||
|
||||
applyTheme(getTheme());
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<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() {
|
||||
@@ -19,14 +20,31 @@
|
||||
<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 }}/">Home</a>
|
||||
<a href="{{ site.base_path }}/{{ lang }}/tour/">Tour</a>
|
||||
<a href="https://github.com/yhirose/cpp-httplib">GitHub</a>
|
||||
<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="theme-toggle" aria-label="Toggle theme"></button>
|
||||
<div class="lang-selector">
|
||||
<button class="lang-btn" aria-label="Language">{{ lang | upper }}</button>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user