Skip to content

Commit 8d19b0c

Browse files
dr460nf1r3dr460nf1r3
committed
docs: update index.hbs to fix sometimes invalid links from sidebar
1 parent 0c5d47c commit 8d19b0c

File tree

1 file changed

+96
-75
lines changed

1 file changed

+96
-75
lines changed

‎docs/theme/index.hbs‎

Lines changed: 96 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE HTML>
2-
<html lang="{{ language }}" class="{{ default_theme }}" dir="{{ text_direction }}">
2+
<html lang="{{ language }}" class="{{ default_theme }} sidebar-visible" dir="{{ text_direction }}">
33
<head>
44
<!-- Book generated using mdBook -->
55
<meta charset="UTF-8">
@@ -20,52 +20,71 @@
2020
<meta name="theme-color" content="#ffffff">
2121

2222
{{#if favicon_svg}}
23-
<link rel="icon" href="{{ path_to_root }}favicon.svg">
23+
<link rel="icon" href="{{ resource "favicon.svg" }}">
2424
{{/if}}
2525
{{#if favicon_png}}
26-
<link rel="shortcut icon" href="{{ path_to_root }}favicon.png">
26+
<link rel="shortcut icon" href="{{ resource "favicon.png" }}">
2727
{{/if}}
28-
<link rel="stylesheet" href="{{ path_to_root }}css/variables.css">
29-
<link rel="stylesheet" href="{{ path_to_root }}css/general.css">
30-
<link rel="stylesheet" href="{{ path_to_root }}css/chrome.css">
28+
<link rel="stylesheet" href="{{ resource "css/variables.css" }}">
29+
<link rel="stylesheet" href="{{ resource "css/general.css" }}">
30+
<link rel="stylesheet" href="{{ resource "css/chrome.css" }}">
3131
{{#if print_enable}}
32-
<link rel="stylesheet" href="{{ path_to_root }}css/print.css" media="print">
32+
<link rel="stylesheet" href="{{ resource "css/print.css" }}" media="print">
3333
{{/if}}
3434

3535
<!-- Fonts -->
36-
<link rel="stylesheet" href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
36+
<link rel="stylesheet" href="{{ resource "FontAwesome/css/font-awesome.css" }}">
3737
{{#if copy_fonts}}
38-
<link rel="stylesheet" href="{{ path_to_root }}fonts/fonts.css">
38+
<link rel="stylesheet" href="{{ resource "fonts/fonts.css" }}">
3939
{{/if}}
4040

4141
<!-- Highlight.js Stylesheets -->
42-
<link rel="stylesheet" href="{{ path_to_root }}highlight.css">
43-
<link rel="stylesheet" href="{{ path_to_root }}tomorrow-night.css">
44-
<link rel="stylesheet" href="{{ path_to_root }}ayu-highlight.css">
42+
<link rel="stylesheet" id="highlight-css" href="{{ resource "highlight.css" }}">
43+
<link rel="stylesheet" id="tomorrow-night-css" href="{{ resource "tomorrow-night.css" }}">
44+
<link rel="stylesheet" id="ayu-highlight-css" href="{{ resource "ayu-highlight.css" }}">
4545

4646
<!-- Custom theme stylesheets -->
4747
{{#each additional_css}}
48-
<link rel="stylesheet" href="{{ ../path_to_root }}{{ this }}">
48+
<link rel="stylesheet" href="{{ resource this }}">
4949
{{/each}}
5050

5151
{{#if mathjax_support}}
5252
<!-- MathJax -->
5353
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
5454
{{/if}}
55-
</head>
56-
<body class="sidebar-visible no-js">
57-
<div id="body-container">
58-
<!-- Provide site root to javascript -->
55+
56+
<!-- Provide site root and default themes to javascript -->
5957
<script>
60-
var path_to_root = "{{ path_to_root }}";
61-
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
58+
const path_to_root = "{{ path_to_root }}";
59+
const default_light_theme = "{{ default_theme }}";
60+
const default_dark_theme = "{{ preferred_dark_theme }}";
61+
{{#if search_js}}
62+
window.path_to_searchindex_js = "{{ resource "searchindex.js" }}";
63+
{{/if}}
6264
</script>
63-
65+
<!-- Start loading toc.js asap -->
66+
<script src="{{ resource "toc.js" }}"></script>
67+
</head>
68+
<body>
69+
<div id="mdbook-help-container">
70+
<div id="mdbook-help-popup">
71+
<h2 class="mdbook-help-title">Keyboard shortcuts</h2>
72+
<div>
73+
<p>Press <kbd>←</kbd> or <kbd>→</kbd> to navigate between chapters</p>
74+
{{#if search_enabled}}
75+
<p>Press <kbd>S</kbd> or <kbd>/</kbd> to search in the book</p>
76+
{{/if}}
77+
<p>Press <kbd>?</kbd> to show this help</p>
78+
<p>Press <kbd>Esc</kbd> to hide this help</p>
79+
</div>
80+
</div>
81+
</div>
82+
<div id="body-container">
6483
<!-- Work around some values being stored in localStorage wrapped in quotes -->
6584
<script>
6685
try {
67-
var theme = localStorage.getItem('mdbook-theme');
68-
var sidebar = localStorage.getItem('mdbook-sidebar');
86+
let theme = localStorage.getItem('mdbook-theme');
87+
let sidebar = localStorage.getItem('mdbook-sidebar');
6988
7089
if (theme.startsWith('"') && theme.endsWith('"')) {
7190
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
@@ -79,66 +98,47 @@
7998

8099
<!-- Set the theme before any content is loaded, prevents flash -->
81100
<script>
82-
var theme;
101+
const default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? default_dark_theme : default_light_theme;
102+
let theme;
83103
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
84104
if (theme === null || theme === undefined) { theme = default_theme; }
85-
var html = document.querySelector('html');
105+
const html = document.documentElement;
86106
html.classList.remove('{{ default_theme }}')
87107
html.classList.add(theme);
88-
var body = document.querySelector('body');
89-
body.classList.remove('no-js')
90-
body.classList.add('js');
108+
html.classList.add("js");
91109
</script>
92110

93111
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
94112

95113
<!-- Hide / unhide sidebar before it is displayed -->
96114
<script>
97-
var body = document.querySelector('body');
98-
var sidebar = null;
99-
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
115+
let sidebar = null;
116+
const sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
100117
if (document.body.clientWidth >= 1080) {
101118
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
102119
sidebar = sidebar || 'visible';
103120
} else {
104121
sidebar = 'hidden';
122+
sidebar_toggle.checked = false;
123+
}
124+
if (sidebar === 'visible') {
125+
sidebar_toggle.checked = true;
126+
} else {
127+
html.classList.remove('sidebar-visible');
105128
}
106-
sidebar_toggle.checked = sidebar === 'visible';
107-
body.classList.remove('sidebar-visible');
108-
body.classList.add("sidebar-" + sidebar);
109129
</script>
110130

111131
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
112-
<div class="sidebar-scrollbox">
113-
{{#toc}}{{/toc}}
114-
</div>
132+
<!-- populated by js -->
133+
<mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
134+
<noscript>
135+
<iframe class="sidebar-iframe-outer" src="{{ path_to_root }}toc.html"></iframe>
136+
</noscript>
115137
<div id="sidebar-resize-handle" class="sidebar-resize-handle">
116138
<div class="sidebar-resize-indicator"></div>
117139
</div>
118140
</nav>
119141

120-
<!-- Track and set sidebar scroll position -->
121-
<script>
122-
var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
123-
sidebarScrollbox.addEventListener('click', function(e) {
124-
if (e.target.tagName === 'A') {
125-
sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
126-
}
127-
}, { passive: true });
128-
var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
129-
sessionStorage.removeItem('sidebar-scroll');
130-
if (sidebarScrollTop) {
131-
// preserve sidebar scroll position when navigating via links within sidebar
132-
sidebarScrollbox.scrollTop = sidebarScrollTop;
133-
} else {
134-
// scroll sidebar to current active section when navigating via "next/previous chapter" buttons
135-
var activeSection = document.querySelector('#sidebar .active');
136-
if (activeSection) {
137-
activeSection.scrollIntoView({ block: 'center' });
138-
}
139-
}
140-
</script>
141-
142142
<div id="page-wrapper" class="page-wrapper">
143143

144144
<div class="page">
@@ -153,6 +153,7 @@
153153
<i class="fa fa-paint-brush"></i>
154154
</button>
155155
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
156+
<li role="none"><button role="menuitem" class="theme" id="default_theme">Auto</button></li>
156157
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
157158
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
158159
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
@@ -164,7 +165,7 @@
164165
<li role="none"><button role="menuitem" class="theme" id="mocha">Mocha</button></li>
165166
</ul>
166167
{{#if search_enabled}}
167-
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
168+
<button id="search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="searchbar">
168169
<i class="fa fa-search"></i>
169170
</button>
170171
{{/if}}
@@ -184,7 +185,7 @@
184185
</a>
185186
{{/if}}
186187
{{#if git_repository_edit_url}}
187-
<a href="{{git_repository_edit_url}}" title="Suggest an edit" aria-label="Suggest an edit">
188+
<a href="{{git_repository_edit_url}}" title="Suggest an edit" aria-label="Suggest an edit" rel="edit">
188189
<i id="git-edit-button" class="fa fa-edit"></i>
189190
</a>
190191
{{/if}}
@@ -195,7 +196,12 @@
195196
{{#if search_enabled}}
196197
<div id="search-wrapper" class="hidden">
197198
<form id="searchbar-outer" class="searchbar-outer">
198-
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
199+
<div class="search-wrapper">
200+
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
201+
<div class="spinner-wrapper">
202+
<i class="fa fa-spinner fa-spin"></i>
203+
</div>
204+
</div>
199205
</form>
200206
<div id="searchresults-outer" class="searchresults-outer hidden">
201207
<div id="searchresults-header" class="searchresults-header"></div>
@@ -276,7 +282,7 @@
276282
{{#if google_analytics}}
277283
<!-- Google Analytics Tag -->
278284
<script>
279-
var localAddrs = ["localhost", "127.0.0.1", ""];
285+
const localAddrs = ["localhost", "127.0.0.1", ""];
280286
281287
// make sure we don't activate google analytics if the developer is
282288
// inspecting the book locally...
@@ -305,26 +311,26 @@
305311
{{/if}}
306312

307313
{{#if playground_js}}
308-
<script src="{{ path_to_root }}ace.js"></script>
309-
<script src="{{ path_to_root }}editor.js"></script>
310-
<script src="{{ path_to_root }}mode-rust.js"></script>
311-
<script src="{{ path_to_root }}theme-dawn.js"></script>
312-
<script src="{{ path_to_root }}theme-tomorrow_night.js"></script>
314+
<script src="{{ resource "ace.js" }}"></script>
315+
<script src="{{ resource "mode-rust.js" }}"></script>
316+
<script src="{{ resource "editor.js" }}"></script>
317+
<script src="{{ resource "theme-dawn.js" }}"></script>
318+
<script src="{{ resource "theme-tomorrow_night.js" }}"></script>
313319
{{/if}}
314320

315321
{{#if search_js}}
316-
<script src="{{ path_to_root }}elasticlunr.min.js"></script>
317-
<script src="{{ path_to_root }}mark.min.js"></script>
318-
<script src="{{ path_to_root }}searcher.js"></script>
322+
<script src="{{ resource "elasticlunr.min.js" }}"></script>
323+
<script src="{{ resource "mark.min.js" }}"></script>
324+
<script src="{{ resource "searcher.js" }}"></script>
319325
{{/if}}
320326

321-
<script src="{{ path_to_root }}clipboard.min.js"></script>
322-
<script src="{{ path_to_root }}highlight.js"></script>
323-
<script src="{{ path_to_root }}book.js"></script>
327+
<script src="{{ resource "clipboard.min.js" }}"></script>
328+
<script src="{{ resource "highlight.js" }}"></script>
329+
<script src="{{ resource "book.js" }}"></script>
324330

325331
<!-- Custom JS scripts -->
326332
{{#each additional_js}}
327-
<script src="{{ ../path_to_root }}{{this}}"></script>
333+
<script src="{{ resource this}}"></script>
328334
{{/each}}
329335

330336
{{#if is_print}}
@@ -345,6 +351,21 @@
345351
{{/if}}
346352
{{/if}}
347353

354+
{{#if fragment_map}}
355+
<script>
356+
document.addEventListener('DOMContentLoaded', function() {
357+
const fragmentMap =
358+
{{{fragment_map}}}
359+
;
360+
const target = fragmentMap[window.location.hash];
361+
if (target) {
362+
let url = new URL(target, window.location.href);
363+
window.location.replace(url.href);
364+
}
365+
});
366+
</script>
367+
{{/if}}
368+
348369
</div>
349370
</body>
350-
</html>
371+
</html>

0 commit comments

Comments
 (0)