jesus/mdbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #2808 from ehuss/mdbook-id

Browse source 
Change all HTML IDs to have a prefix
This commit is contained in:
Eric Huss 2025-08-20 02:45:29 +00:00 • committed by GitHub
commit 0722d81295
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 170 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
crates/mdbook-html/front-end/css/chrome.css
View file

@ -3,7 +3,7 @@
html { html {
scrollbar-color: var(--scrollbar) var(--bg); scrollbar-color: var(--scrollbar) var(--bg);
} }
#searchresults a, #mdbook-searchresults a,
.content a:link, .content a:link,
a:visited, a:visited,
a > .hljs { a > .hljs {
@ -11,10 +11,10 @@ a > .hljs {
} }
/* /*
body-container is necessary because mobile browsers don't seem to like mdbook-body-container is necessary because mobile browsers don't seem to like
overflow-x on the body tag when there is a <meta name="viewport"> tag. overflow-x on the body tag when there is a <meta name="viewport"> tag.
*/ */
#body-container { #mdbook-body-container {
/* /*
This is used when the sidebar pushes the body content off the side of This is used when the sidebar pushes the body content off the side of
the screen on small screens. Without it, dragging on mobile Safari the screen on small screens. Without it, dragging on mobile Safari
@ -25,12 +25,12 @@ a > .hljs {
/* Menu Bar */ /* Menu Bar */
#menu-bar, #mdbook-menu-bar,
#menu-bar-hover-placeholder { #mdbook-menu-bar-hover-placeholder {
z-index: 101; z-index: 101;
margin: auto calc(0px - var(--page-padding)); margin: auto calc(0px - var(--page-padding));
} }
#menu-bar { #mdbook-menu-bar {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -39,24 +39,24 @@ a > .hljs {
border-block-end-width: 1px; border-block-end-width: 1px;
border-block-end-style: solid; border-block-end-style: solid;
} }
#menu-bar.sticky, #mdbook-menu-bar.sticky,
#menu-bar-hover-placeholder:hover + #menu-bar, #mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
#menu-bar:hover, #mdbook-menu-bar:hover,
html.sidebar-visible #menu-bar { html.sidebar-visible #mdbook-menu-bar {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 0 !important; top: 0 !important;
} }
#menu-bar-hover-placeholder { #mdbook-menu-bar-hover-placeholder {
position: sticky; position: sticky;
position: -webkit-sticky; position: -webkit-sticky;
top: 0; top: 0;
height: var(--menu-bar-height); height: var(--menu-bar-height);
} }
#menu-bar.bordered { #mdbook-menu-bar.bordered {
border-block-end-color: var(--table-border-color); border-block-end-color: var(--table-border-color);
} }
#menu-bar .fa-svg, #menu-bar .icon-button { #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
position: relative; position: relative;
padding: 0 8px; padding: 0 8px;
z-index: 10; z-index: 10;
@ -65,7 +65,7 @@ html.sidebar-visible #menu-bar {
transition: color 0.5s; transition: color 0.5s;
} }
@media only screen and (max-width: 420px) { @media only screen and (max-width: 420px) {
#menu-bar .fa-svg, #menu-bar .icon-button { #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
padding: 0 5px; padding: 0 5px;
} }
} }
@ -193,8 +193,8 @@ html:not(.js) .left-buttons button {
/* sidebar-visible */ /* sidebar-visible */
@media only screen and (max-width: 1380px) { @media only screen and (max-width: 1380px) {
#sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; } #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
#sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; } #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
} }
/* Inline code */ /* Inline code */
@ -307,7 +307,7 @@ pre > .result {
/* Search */ /* Search */
#searchresults a { #mdbook-searchresults a {
text-decoration: none; text-decoration: none;
} }
@ -337,13 +337,13 @@ mark.fade-out {
max-width: var(--content-max-width); max-width: var(--content-max-width);
} }
#searchbar-outer.searching #searchbar { #mdbook-searchbar-outer.searching #mdbook-searchbar {
padding-right: 30px; padding-right: 30px;
} }
#searchbar-outer .spinner-wrapper { #mdbook-searchbar-outer .spinner-wrapper {
display: none; display: none;
} }
#searchbar-outer.searching .spinner-wrapper { #mdbook-searchbar-outer.searching .spinner-wrapper {
display: block; display: block;
} }
@ -376,7 +376,7 @@ mark.fade-out {
} }
} }
#searchbar { #mdbook-searchbar {
width: 100%; width: 100%;
margin-block-start: var(--searchbar-margin-block-start); margin-block-start: var(--searchbar-margin-block-start);
margin-block-end: 0; margin-block-end: 0;
@ -389,8 +389,8 @@ mark.fade-out {
background-color: var(--searchbar-bg); background-color: var(--searchbar-bg);
color: var(--searchbar-fg); color: var(--searchbar-fg);
} }
#searchbar:focus, #mdbook-searchbar:focus,
#searchbar.active { #mdbook-searchbar.active {
box-shadow: 0 0 3px var(--searchbar-shadow-color); box-shadow: 0 0 3px var(--searchbar-shadow-color);
} }
@ -411,19 +411,19 @@ mark.fade-out {
border-block-end: 1px dashed var(--searchresults-border-color); border-block-end: 1px dashed var(--searchresults-border-color);
} }
ul#searchresults { ul#mdbook-searchresults {
list-style: none; list-style: none;
padding-inline-start: 20px; padding-inline-start: 20px;
} }
ul#searchresults li { ul#mdbook-searchresults li {
margin: 10px 0px; margin: 10px 0px;
padding: 2px; padding: 2px;
border-radius: 2px; border-radius: 2px;
} }
ul#searchresults li.focus { ul#mdbook-searchresults li.focus {
background-color: var(--searchresults-li-bg); background-color: var(--searchresults-li-bg);
} }
ul#searchresults span.teaser { ul#mdbook-searchresults span.teaser {
display: block; display: block;
clear: both; clear: both;
margin-block-start: 5px; margin-block-start: 5px;
@ -432,7 +432,7 @@ ul#searchresults span.teaser {
margin-inline-end: 0; margin-inline-end: 0;
font-size: 0.8em; font-size: 0.8em;
} }
ul#searchresults span.teaser em { ul#mdbook-searchresults span.teaser em {
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@ -535,10 +535,10 @@ html:not(.sidebar-resizing) .sidebar {
width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space)); width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
} }
/* sidebar-hidden */ /* sidebar-hidden */
#sidebar-toggle-anchor:not(:checked) ~ .sidebar { #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
} }
[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar { [dir=rtl] #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
} }
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
@ -549,18 +549,18 @@ html:not(.sidebar-resizing) .sidebar {
} }
/* sidebar-visible */ /* sidebar-visible */
#sidebar-toggle-anchor:checked ~ .page-wrapper { #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
} }
[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper { [dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
} }
@media only screen and (min-width: 620px) { @media only screen and (min-width: 620px) {
#sidebar-toggle-anchor:checked ~ .page-wrapper { #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: none; transform: none;
margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)); margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
} }
[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper { [dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: none; transform: none;
} }
} }

2
crates/mdbook-html/front-end/css/general.css
View file

@ -80,7 +80,7 @@ h6:target::before {
.page { .page {
outline: 0; outline: 0;
padding: 0 var(--page-padding); padding: 0 var(--page-padding);
margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */ margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #mdbook-menu-bar-hover-placeholder */
} }
.page-wrapper { .page-wrapper {
box-sizing: border-box; box-sizing: border-box;

8
crates/mdbook-html/front-end/css/print.css
View file

@ -1,18 +1,18 @@
#sidebar, #mdbook-sidebar,
#menu-bar, #mdbook-menu-bar,
.nav-chapters, .nav-chapters,
.mobile-nav-chapters { .mobile-nav-chapters {
display: none; display: none;
} }
#page-wrapper.page-wrapper { #mdbook-page-wrapper.page-wrapper {
transform: none !important; transform: none !important;
margin-inline-start: 0px; margin-inline-start: 0px;
overflow-y: initial; overflow-y: initial;
} }
#content { #mdbook-content {
max-width: none; max-width: none;
margin: 0; margin: 0;
padding: 0; padding: 0;

32
crates/mdbook-html/front-end/js/book.js
View file

@ -309,23 +309,23 @@ aria-label="Show hidden lines"></button>';
(function themes() { (function themes() {
const html = document.querySelector('html'); const html = document.querySelector('html');
const themeToggleButton = document.getElementById('theme-toggle'); const themeToggleButton = document.getElementById('mdbook-theme-toggle');
const themePopup = document.getElementById('theme-list'); const themePopup = document.getElementById('mdbook-theme-list');
const themeColorMetaTag = document.querySelector('meta[name="theme-color"]'); const themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
const themeIds = []; const themeIds = [];
themePopup.querySelectorAll('button.theme').forEach(function(el) { themePopup.querySelectorAll('button.theme').forEach(function(el) {
themeIds.push(el.id); themeIds.push(el.id);
}); });
const stylesheets = { const stylesheets = {
ayuHighlight: document.querySelector('#ayu-highlight-css'), ayuHighlight: document.querySelector('#mdbook-ayu-highlight-css'),
tomorrowNight: document.querySelector('#tomorrow-night-css'), tomorrowNight: document.querySelector('#mdbook-tomorrow-night-css'),
highlight: document.querySelector('#highlight-css'), highlight: document.querySelector('#mdbook-highlight-css'),
}; };
function showThemes() { function showThemes() {
themePopup.style.display = 'block'; themePopup.style.display = 'block';
themeToggleButton.setAttribute('aria-expanded', true); themeToggleButton.setAttribute('aria-expanded', true);
themePopup.querySelector('button#' + get_theme()).focus(); themePopup.querySelector('button#mdbook-theme-' + get_theme()).focus();
} }
function updateThemeSelected() { function updateThemeSelected() {
@ -333,10 +333,10 @@ aria-label="Show hidden lines"></button>';
el.classList.remove('theme-selected'); el.classList.remove('theme-selected');
}); });
const selected = get_saved_theme() ?? 'default_theme'; const selected = get_saved_theme() ?? 'default_theme';
let element = themePopup.querySelector('button#' + selected); let element = themePopup.querySelector('button#mdbook-theme-' + selected);
if (element === null) { if (element === null) {
// Fall back in case there is no "Default" item. // Fall back in case there is no "Default" item.
element = themePopup.querySelector('button#' + get_theme()); element = themePopup.querySelector('button#mdbook-theme-' + get_theme());
} }
element.classList.add('theme-selected'); element.classList.add('theme-selected');
} }
@ -363,7 +363,7 @@ aria-label="Show hidden lines"></button>';
function get_theme() { function get_theme() {
const theme = get_saved_theme(); const theme = get_saved_theme();
if (theme === null || theme === undefined || !themeIds.includes(theme)) { if (theme === null || theme === undefined || !themeIds.includes('mdbook-theme-' + theme)) {
if (typeof default_dark_theme === 'undefined') { if (typeof default_dark_theme === 'undefined') {
// A customized index.hbs might not define this, so fall back to // A customized index.hbs might not define this, so fall back to
// old behavior of determining the default on page load. // old behavior of determining the default on page load.
@ -448,6 +448,8 @@ aria-label="Show hidden lines"></button>';
} else { } else {
return; return;
} }
theme = theme.replace(/^mdbook-theme-/, '');
if (theme === 'default_theme' || theme === null) { if (theme === 'default_theme' || theme === null) {
delete_saved_theme(); delete_saved_theme();
set_theme(get_theme(), false); set_theme(get_theme(), false);
@ -518,11 +520,11 @@ aria-label="Show hidden lines"></button>';
})(); })();
(function sidebar() { (function sidebar() {
const sidebar = document.getElementById('sidebar'); const sidebar = document.getElementById('mdbook-sidebar');
const sidebarLinks = document.querySelectorAll('#sidebar a'); const sidebarLinks = document.querySelectorAll('#mdbook-sidebar a');
const sidebarToggleButton = document.getElementById('sidebar-toggle'); const sidebarToggleButton = document.getElementById('mdbook-sidebar-toggle');
const sidebarResizeHandle = document.getElementById('sidebar-resize-handle'); const sidebarResizeHandle = document.getElementById('mdbook-sidebar-resize-handle');
const sidebarCheckbox = document.getElementById('sidebar-toggle-anchor'); const sidebarCheckbox = document.getElementById('mdbook-sidebar-toggle-anchor');
let firstContact = null; let firstContact = null;
@ -783,7 +785,7 @@ aria-label="Show hidden lines"></button>';
})(); })();
(function controllMenu() { (function controllMenu() {
const menu = document.getElementById('menu-bar'); const menu = document.getElementById('mdbook-menu-bar');
(function controllPosition() { (function controllPosition() {
let scrollTop = document.scrollingElement.scrollTop; let scrollTop = document.scrollingElement.scrollTop;

23
crates/mdbook-html/front-end/searcher/searcher.js
View file

@ -21,14 +21,14 @@ window.search = window.search || {};
}; };
} }
const search_wrap = document.getElementById('search-wrapper'), const search_wrap = document.getElementById('mdbook-search-wrapper'),
searchbar_outer = document.getElementById('searchbar-outer'), searchbar_outer = document.getElementById('mdbook-searchbar-outer'),
searchbar = document.getElementById('searchbar'), searchbar = document.getElementById('mdbook-searchbar'),
searchresults = document.getElementById('searchresults'), searchresults = document.getElementById('mdbook-searchresults'),
searchresults_outer = document.getElementById('searchresults-outer'), searchresults_outer = document.getElementById('mdbook-searchresults-outer'),
searchresults_header = document.getElementById('searchresults-header'), searchresults_header = document.getElementById('mdbook-searchresults-header'),
searchicon = document.getElementById('search-toggle'), searchicon = document.getElementById('mdbook-search-toggle'),
content = document.getElementById('content'), content = document.getElementById('mdbook-content'),
// SVG text elements don't render if inside a <mark> tag. // SVG text elements don't render if inside a <mark> tag.
mark_exclude = ['text'], mark_exclude = ['text'],
@ -154,8 +154,9 @@ window.search = window.search || {};
const encoded_search = encodeURIComponent(searchterms.join(' ')).replace(/'/g, '%27'); const encoded_search = encodeURIComponent(searchterms.join(' ')).replace(/'/g, '%27');
return '<a href="' + path_to_root + url[0] + '?' + URL_MARK_PARAM + '=' + encoded_search return '<a href="' + path_to_root + url[0] + '?' + URL_MARK_PARAM + '=' + encoded_search
+ '#' + url[1] + '" aria-details="teaser_' + teaser_count + '">' + '#' + url[1] + '" aria-details="mdbook-teaser_' + teaser_count + '">'
+ result.doc.breadcrumbs + '</a>' + '<span class="teaser" id="teaser_' + teaser_count + result.doc.breadcrumbs + '</a>'
+ '<span class="teaser" id="mdbook-teaser_' + teaser_count
+ '" aria-label="Search Result Teaser">' + teaser + '</span>'; + '" aria-label="Search Result Teaser">' + teaser + '</span>';
} }
@ -437,7 +438,7 @@ window.search = window.search || {};
loadSearchScript( loadSearchScript(
window.path_to_searchindex_js || window.path_to_searchindex_js ||
path_to_root + '{{ resource "searchindex.js" }}', path_to_root + '{{ resource "searchindex.js" }}',
'search-index'); 'mdbook-search-index');
search_wrap.classList.remove('hidden'); search_wrap.classList.remove('hidden');
searchicon.setAttribute('aria-expanded', 'true'); searchicon.setAttribute('aria-expanded', 'true');
} else { } else {

62
crates/mdbook-html/front-end/templates/index.hbs
View file

@ -36,9 +36,9 @@
<link rel="stylesheet" href="{{ resource "fonts/fonts.css" }}"> <link rel="stylesheet" href="{{ resource "fonts/fonts.css" }}">
<!-- Highlight.js Stylesheets --> <!-- Highlight.js Stylesheets -->
<link rel="stylesheet" id="highlight-css" href="{{ resource "highlight.css" }}"> <link rel="stylesheet" id="mdbook-highlight-css" href="{{ resource "highlight.css" }}">
<link rel="stylesheet" id="tomorrow-night-css" href="{{ resource "tomorrow-night.css" }}"> <link rel="stylesheet" id="mdbook-tomorrow-night-css" href="{{ resource "tomorrow-night.css" }}">
<link rel="stylesheet" id="ayu-highlight-css" href="{{ resource "ayu-highlight.css" }}"> <link rel="stylesheet" id="mdbook-ayu-highlight-css" href="{{ resource "ayu-highlight.css" }}">
<!-- Custom theme stylesheets --> <!-- Custom theme stylesheets -->
{{#each additional_css}} {{#each additional_css}}
@ -76,7 +76,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="body-container"> <div id="mdbook-body-container">
<!-- Work around some values being stored in localStorage wrapped in quotes --> <!-- Work around some values being stored in localStorage wrapped in quotes -->
<script> <script>
try { try {
@ -105,12 +105,12 @@
html.classList.add("js"); html.classList.add("js");
</script> </script>
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden"> <input type="checkbox" id="mdbook-sidebar-toggle-anchor" class="hidden">
<!-- Hide / unhide sidebar before it is displayed --> <!-- Hide / unhide sidebar before it is displayed -->
<script> <script>
let sidebar = null; let sidebar = null;
const sidebar_toggle = document.getElementById("sidebar-toggle-anchor"); const sidebar_toggle = document.getElementById("mdbook-sidebar-toggle-anchor");
if (document.body.clientWidth >= 1080) { if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { } try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible'; sidebar = sidebar || 'visible';
@ -125,40 +125,40 @@
} }
</script> </script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents"> <nav id="mdbook-sidebar" class="sidebar" aria-label="Table of contents">
<!-- populated by js --> <!-- populated by js -->
<mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox> <mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
<noscript> <noscript>
<iframe class="sidebar-iframe-outer" src="{{ path_to_root }}toc.html"></iframe> <iframe class="sidebar-iframe-outer" src="{{ path_to_root }}toc.html"></iframe>
</noscript> </noscript>
<div id="sidebar-resize-handle" class="sidebar-resize-handle"> <div id="mdbook-sidebar-resize-handle" class="sidebar-resize-handle">
<div class="sidebar-resize-indicator"></div> <div class="sidebar-resize-indicator"></div>
</div> </div>
</nav> </nav>
<div id="page-wrapper" class="page-wrapper"> <div id="mdbook-page-wrapper" class="page-wrapper">
<div class="page"> <div class="page">
{{> header}} {{> header}}
<div id="menu-bar-hover-placeholder"></div> <div id="mdbook-menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky"> <div id="mdbook-menu-bar" class="menu-bar sticky">
<div class="left-buttons"> <div class="left-buttons">
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar"> <label id="mdbook-sidebar-toggle" class="icon-button" for="mdbook-sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="mdbook-sidebar">
{{fa "solid" "bars"}} {{fa "solid" "bars"}}
</label> </label>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list"> <button id="mdbook-theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="mdbook-theme-list">
{{fa "solid" "paintbrush"}} {{fa "solid" "paintbrush"}}
</button> </button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu"> <ul id="mdbook-theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="default_theme">Auto</button></li> <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-default_theme">Auto</button></li>
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li> <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-light">Light</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li> <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li> <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li> <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li> <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-ayu">Ayu</button></li>
</ul> </ul>
{{#if search_enabled}} {{#if search_enabled}}
<button id="search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="searchbar"> <button id="mdbook-search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="mdbook-searchbar">
{{fa "solid" "magnifying-glass"}} {{fa "solid" "magnifying-glass"}}
</button> </button>
{{/if}} {{/if}}
@ -187,18 +187,18 @@
</div> </div>
{{#if search_enabled}} {{#if search_enabled}}
<div id="search-wrapper" class="hidden"> <div id="mdbook-search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer"> <form id="mdbook-searchbar-outer" class="searchbar-outer">
<div class="search-wrapper"> <div class="search-wrapper">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header"> <input type="search" id="mdbook-searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="mdbook-searchresults-outer" aria-describedby="searchresults-header">
<div class="spinner-wrapper"> <div class="spinner-wrapper">
{{fa "solid" "spinner" "fa-spin"}} {{fa "solid" "spinner" "fa-spin"}}
</div> </div>
</div> </div>
</form> </form>
<div id="searchresults-outer" class="searchresults-outer hidden"> <div id="mdbook-searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div> <div id="mdbook-searchresults-header" class="searchresults-header"></div>
<ul id="searchresults"> <ul id="mdbook-searchresults">
</ul> </ul>
</div> </div>
</div> </div>
@ -206,14 +206,14 @@
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM --> <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script> <script>
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible'); document.getElementById('mdbook-sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible'); document.getElementById('mdbook-sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) { Array.from(document.querySelectorAll('#mdbook-sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1); link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
}); });
</script> </script>
<div id="content" class="content"> <div id="mdbook-content" class="content">
<main> <main>
{{{ content }}} {{{ content }}}
</main> </main>

4
crates/mdbook-html/front-end/templates/toc.js.hbs
View file

@ -52,13 +52,13 @@ class MDBookSidebarScrollbox extends HTMLElement {
this.scrollTop = sidebarScrollTop; this.scrollTop = sidebarScrollTop;
} else { } else {
// scroll sidebar to current active section when navigating via "next/previous chapter" buttons // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
var activeSection = document.querySelector('#sidebar .active'); var activeSection = document.querySelector('#mdbook-sidebar .active');
if (activeSection) { if (activeSection) {
activeSection.scrollIntoView({ block: 'center' }); activeSection.scrollIntoView({ block: 'center' });
} }
} }
// Toggle buttons // Toggle buttons
var sidebarAnchorToggles = document.querySelectorAll('#sidebar a.toggle'); var sidebarAnchorToggles = document.querySelectorAll('#mdbook-sidebar a.toggle');
function toggleSection(ev) { function toggleSection(ev) {
ev.currentTarget.parentElement.classList.toggle('expanded'); ev.currentTarget.parentElement.classList.toggle('expanded');
} }

46
tests/gui/search.goml
View file

@ -7,70 +7,70 @@ define-function: (
"open-search", "open-search",
[], [],
block { block {
assert-css: ("#search-wrapper", {"display": "none"}) assert-css: ("#mdbook-search-wrapper", {"display": "none"})
press-key: 's' press-key: 's'
wait-for-css-false: ("#search-wrapper", {"display": "none"}) wait-for-css-false: ("#mdbook-search-wrapper", {"display": "none"})
} }
) )
call-function: ("open-search", {}) call-function: ("open-search", {})
assert-text: ("#searchresults-header", "") assert-text: ("#mdbook-searchresults-header", "")
write: "strikethrough" write: "strikethrough"
wait-for-text: ("#searchresults-header", "2 search results for 'strikethrough':") wait-for-text: ("#mdbook-searchresults-header", "2 search results for 'strikethrough':")
// Close the search display // Close the search display
press-key: 'Escape' press-key: 'Escape'
wait-for-css: ("#search-wrapper", {"display": "none"}) wait-for-css: ("#mdbook-search-wrapper", {"display": "none"})
// Reopening the search should show the last value // Reopening the search should show the last value
call-function: ("open-search", {}) call-function: ("open-search", {})
assert-text: ("#searchresults-header", "2 search results for 'strikethrough':") assert-text: ("#mdbook-searchresults-header", "2 search results for 'strikethrough':")
// Navigate to a sub-chapter // Navigate to a sub-chapter
go-to: "./individual/strikethrough.html" go-to: "./individual/strikethrough.html"
assert-text: ("#searchresults-header", "") assert-text: ("#mdbook-searchresults-header", "")
call-function: ("open-search", {}) call-function: ("open-search", {})
write: "strikethrough" write: "strikethrough"
wait-for-text: ("#searchresults-header", "2 search results for 'strikethrough':") wait-for-text: ("#mdbook-searchresults-header", "2 search results for 'strikethrough':")
// Now we test search shortcuts and more page changes. // Now we test search shortcuts and more page changes.
go-to: |DOC_PATH| + "index.html" go-to: |DOC_PATH| + "index.html"
// This check is to ensure that the search bar is inside the search wrapper. // This check is to ensure that the search bar is inside the search wrapper.
assert: "#search-wrapper #searchbar" assert: "#mdbook-search-wrapper #mdbook-searchbar"
assert-css: ("#search-wrapper", {"display": "none"}) assert-css: ("#mdbook-search-wrapper", {"display": "none"})
// Now we make sure the search input appear with the `S` shortcut. // Now we make sure the search input appear with the `S` shortcut.
press-key: 's' press-key: 's'
wait-for-css-false: ("#search-wrapper", {"display": "none"}) wait-for-css-false: ("#mdbook-search-wrapper", {"display": "none"})
// We ensure the search bar has the focus. // We ensure the search bar has the focus.
assert: "#searchbar:focus" assert: "#mdbook-searchbar:focus"
// Pressing a key will therefore update the search input. // Pressing a key will therefore update the search input.
press-key: 't' press-key: 't'
assert-text: ("#searchbar", "t") assert-text: ("#mdbook-searchbar", "t")
// Now we press `Escape` to ensure that the search input disappears again. // Now we press `Escape` to ensure that the search input disappears again.
press-key: 'Escape' press-key: 'Escape'
wait-for-css: ("#search-wrapper", {"display": "none"}) wait-for-css: ("#mdbook-search-wrapper", {"display": "none"})
// Making it appear by clicking on the search button. // Making it appear by clicking on the search button.
click: "#search-toggle" click: "#mdbook-search-toggle"
wait-for-css: ("#search-wrapper", {"display": "block"}) wait-for-css: ("#mdbook-search-wrapper", {"display": "block"})
// We ensure the search bar has the focus. // We ensure the search bar has the focus.
assert: "#searchbar:focus" assert: "#mdbook-searchbar:focus"
// We input "test". // We input "test".
write: "test" write: "test"
// The results should now appear. // The results should now appear.
wait-for-text: ("#searchresults-header", "search results for 'test':", ENDS_WITH) wait-for-text: ("#mdbook-searchresults-header", "search results for 'test':", ENDS_WITH)
assert: "#searchresults" assert: "#mdbook-searchresults"
// Ensure that the URL was updated as well. // Ensure that the URL was updated as well.
assert-document-property: ({"URL": "?search=test"}, ENDS_WITH) assert-document-property: ({"URL": "?search=test"}, ENDS_WITH)
// Now we ensure that when we land on the page with a "search in progress", the search results are // Now we ensure that when we land on the page with a "search in progress", the search results are
// loaded and that the search input has focus. // loaded and that the search input has focus.
go-to: |DOC_PATH| + "index.html?search=test" go-to: |DOC_PATH| + "index.html?search=test"
wait-for-text: ("#searchresults-header", "search results for 'test':", ENDS_WITH) wait-for-text: ("#mdbook-searchresults-header", "search results for 'test':", ENDS_WITH)
assert: "#searchbar:focus" assert: "#mdbook-searchbar:focus"
assert: "#searchresults" assert: "#mdbook-searchresults"
// And now we press `Escape` to close everything. // And now we press `Escape` to close everything.
press-key: 'Escape' press-key: 'Escape'
wait-for-css: ("#search-wrapper", {"display": "none"}) wait-for-css: ("#mdbook-search-wrapper", {"display": "none"})

22
tests/gui/sidebar.goml
View file

@ -15,11 +15,11 @@ define-function: (
"hide-sidebar", "hide-sidebar",
[], [],
block { block {
assert-position: ("#page-wrapper", {"x": |content_indent|}) assert-position: ("#mdbook-page-wrapper", {"x": |content_indent|})
// We now hide the sidebar. // We now hide the sidebar.
click: "#sidebar-toggle" click: "#mdbook-sidebar-toggle"
wait-for-css: ("#sidebar", {"display": "none"}) wait-for-css: ("#mdbook-sidebar", {"display": "none"})
assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_hidden_value|} assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_hidden_value|}
}, },
) )
@ -28,17 +28,17 @@ define-function: (
"show-sidebar", "show-sidebar",
[], [],
block { block {
assert-css: ("#sidebar", {"display": "none"}) assert-css: ("#mdbook-sidebar", {"display": "none"})
assert-position: ("#page-wrapper", {"x": 0}) assert-position: ("#mdbook-page-wrapper", {"x": 0})
// We expand the sidebar. // We expand the sidebar.
click: "#sidebar-toggle" click: "#mdbook-sidebar-toggle"
wait-for-css-false: ("#sidebar", {"display": "none"}) wait-for-css-false: ("#mdbook-sidebar", {"display": "none"})
// `transform` is 0.3s so we need to wait a bit (0.5s) to ensure the animation is done. // `transform` is 0.3s so we need to wait a bit (0.5s) to ensure the animation is done.
wait-for: 5000 wait-for: 5000
assert-css-false: ("#sidebar", {"transform": "matrix(1, 0, 0, 1, -308, 0)"}) assert-css-false: ("#mdbook-sidebar", {"transform": "matrix(1, 0, 0, 1, -308, 0)"})
// The page content should be moved to the right. // The page content should be moved to the right.
assert-position: ("#page-wrapper", {"x": |content_indent|}) assert-position: ("#mdbook-page-wrapper", {"x": |content_indent|})
assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_displayed_value|} assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_displayed_value|}
}, },
) )
@ -65,5 +65,5 @@ reload:
// The stored value shouldn't have changed. // The stored value shouldn't have changed.
assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_displayed_value|} assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_displayed_value|}
// But the sidebar should be hidden anyway. // But the sidebar should be hidden anyway.
assert-css: ("#sidebar", {"display": "none"}) assert-css: ("#mdbook-sidebar", {"display": "none"})
assert-position: ("#page-wrapper", {"x": 0}) assert-position: ("#mdbook-page-wrapper", {"x": 0})

35
tests/gui/theme.goml Normal file
View file

@ -0,0 +1,35 @@
// Basic theme switcher test.
debug: true
go-to: |DOC_PATH| + "index.html"
// TODO: Dark mode is automatic, how to check that here?
assert-css: ("#mdbook-theme-list", {"display": "none"})
click: "#mdbook-theme-toggle"
assert-css: ("#mdbook-theme-list", {"display": "block"})
click: "#mdbook-theme-rust"
assert-attribute: ("html", {"class": "js rust"})
// Clicking a theme doesn't dismiss the popup.
assert-css: ("#mdbook-theme-list", {"display": "block"})
assert-local-storage: {"mdbook-theme": "rust"}
// Dismiss via toggle.
click: "#mdbook-theme-toggle"
assert-css: ("#mdbook-theme-list", {"display": "none"})
// Check for dismissal for click outside.
click: "#mdbook-theme-toggle"
assert-css: ("#mdbook-theme-list", {"display": "block"})
click: "main"
assert-css: ("#mdbook-theme-list", {"display": "none"})
// Check for escape.
click: "#mdbook-theme-toggle"
assert-css: ("#mdbook-theme-list", {"display": "block"})
press-key: 'Escape'
assert-css: ("#mdbook-theme-list", {"display": "none"})
// Check for navigation retains theme.
go-to: "./rust/rust_codeblock.html"
assert-attribute: ("html", {"class": "rust js"})