Skip to content

Commit 402d114

Browse files
ehussehuss
committed
Change all HTML IDs to have a prefix
This changes all HTML IDs so that they have the `mdbook-` prefix. This should help avoid ID conflicts between internal IDs and IDs from user content such as section headers. This is a relatively disruptive change and has a high risk of breaking something. However, I think I have covered everything, and if anything is missed, hopefully it will get detected. I did not change class names since the chance of a collision is much smaller than with IDs. However, that is something that could be considered in the future. Closes #880
1 parent 988ed9b commit 402d114

File tree

10 files changed

+170
-132
lines changed

10 files changed

+170
-132
lines changed

‎crates/mdbook-html/front-end/css/chrome.css‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@
33
html {
44
scrollbar-color: var(--scrollbar) var(--bg);
55
}
6-
#searchresults a,
6+
#mdbook-searchresults a,
77
.content a:link,
88
a:visited,
99
a > .hljs {
1010
color: var(--links);
1111
}
1212

1313
/*
14-
body-container is necessary because mobile browsers don't seem to like
14+
mdbook-body-container is necessary because mobile browsers don't seem to like
1515
overflow-x on the body tag when there is a <meta name="viewport"> tag.
1616
*/
17-
#body-container {
17+
#mdbook-body-container {
1818
/*
1919
This is used when the sidebar pushes the body content off the side of
2020
the screen on small screens. Without it, dragging on mobile Safari
@@ -25,12 +25,12 @@ a > .hljs {
2525

2626
/* Menu Bar */
2727

28-
#menu-bar,
29-
#menu-bar-hover-placeholder {
28+
#mdbook-menu-bar,
29+
#mdbook-menu-bar-hover-placeholder {
3030
z-index: 101;
3131
margin: auto calc(0px - var(--page-padding));
3232
}
33-
#menu-bar {
33+
#mdbook-menu-bar {
3434
position: relative;
3535
display: flex;
3636
flex-wrap: wrap;
@@ -39,24 +39,24 @@ a > .hljs {
3939
border-block-end-width: 1px;
4040
border-block-end-style: solid;
4141
}
42-
#menu-bar.sticky,
43-
#menu-bar-hover-placeholder:hover + #menu-bar,
44-
#menu-bar:hover,
45-
html.sidebar-visible #menu-bar {
42+
#mdbook-menu-bar.sticky,
43+
#mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
44+
#mdbook-menu-bar:hover,
45+
html.sidebar-visible #mdbook-menu-bar {
4646
position: -webkit-sticky;
4747
position: sticky;
4848
top: 0 !important;
4949
}
50-
#menu-bar-hover-placeholder {
50+
#mdbook-menu-bar-hover-placeholder {
5151
position: sticky;
5252
position: -webkit-sticky;
5353
top: 0;
5454
height: var(--menu-bar-height);
5555
}
56-
#menu-bar.bordered {
56+
#mdbook-menu-bar.bordered {
5757
border-block-end-color: var(--table-border-color);
5858
}
59-
#menu-bar .fa-svg, #menu-bar .icon-button {
59+
#mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
6060
position: relative;
6161
padding: 0 8px;
6262
z-index: 10;
@@ -65,7 +65,7 @@ html.sidebar-visible #menu-bar {
6565
transition: color 0.5s;
6666
}
6767
@media only screen and (max-width: 420px) {
68-
#menu-bar .fa-svg, #menu-bar .icon-button {
68+
#mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
6969
padding: 0 5px;
7070
}
7171
}
@@ -193,8 +193,8 @@ html:not(.js) .left-buttons button {
193193

194194
/* sidebar-visible */
195195
@media only screen and (max-width: 1380px) {
196-
#sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
197-
#sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
196+
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
197+
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
198198
}
199199

200200
/* Inline code */
@@ -307,7 +307,7 @@ pre > .result {
307307

308308
/* Search */
309309

310-
#searchresults a {
310+
#mdbook-searchresults a {
311311
text-decoration: none;
312312
}
313313

@@ -337,13 +337,13 @@ mark.fade-out {
337337
max-width: var(--content-max-width);
338338
}
339339

340-
#searchbar-outer.searching #searchbar {
340+
#mdbook-searchbar-outer.searching #mdbook-searchbar {
341341
padding-right: 30px;
342342
}
343-
#searchbar-outer .spinner-wrapper {
343+
#mdbook-searchbar-outer .spinner-wrapper {
344344
display: none;
345345
}
346-
#searchbar-outer.searching .spinner-wrapper {
346+
#mdbook-searchbar-outer.searching .spinner-wrapper {
347347
display: block;
348348
}
349349

@@ -376,7 +376,7 @@ mark.fade-out {
376376
}
377377
}
378378

379-
#searchbar {
379+
#mdbook-searchbar {
380380
width: 100%;
381381
margin-block-start: var(--searchbar-margin-block-start);
382382
margin-block-end: 0;
@@ -389,8 +389,8 @@ mark.fade-out {
389389
background-color: var(--searchbar-bg);
390390
color: var(--searchbar-fg);
391391
}
392-
#searchbar:focus,
393-
#searchbar.active {
392+
#mdbook-searchbar:focus,
393+
#mdbook-searchbar.active {
394394
box-shadow: 0 0 3px var(--searchbar-shadow-color);
395395
}
396396

@@ -411,19 +411,19 @@ mark.fade-out {
411411
border-block-end: 1px dashed var(--searchresults-border-color);
412412
}
413413

414-
ul#searchresults {
414+
ul#mdbook-searchresults {
415415
list-style: none;
416416
padding-inline-start: 20px;
417417
}
418-
ul#searchresults li {
418+
ul#mdbook-searchresults li {
419419
margin: 10px 0px;
420420
padding: 2px;
421421
border-radius: 2px;
422422
}
423-
ul#searchresults li.focus {
423+
ul#mdbook-searchresults li.focus {
424424
background-color: var(--searchresults-li-bg);
425425
}
426-
ul#searchresults span.teaser {
426+
ul#mdbook-searchresults span.teaser {
427427
display: block;
428428
clear: both;
429429
margin-block-start: 5px;
@@ -432,7 +432,7 @@ ul#searchresults span.teaser {
432432
margin-inline-end: 0;
433433
font-size: 0.8em;
434434
}
435-
ul#searchresults span.teaser em {
435+
ul#mdbook-searchresults span.teaser em {
436436
font-weight: bold;
437437
font-style: normal;
438438
}
@@ -535,10 +535,10 @@ html:not(.sidebar-resizing) .sidebar {
535535
width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
536536
}
537537
/* sidebar-hidden */
538-
#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
538+
#mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
539539
transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
540540
}
541-
[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
541+
[dir=rtl] #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
542542
transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
543543
}
544544
.sidebar::-webkit-scrollbar {
@@ -549,18 +549,18 @@ html:not(.sidebar-resizing) .sidebar {
549549
}
550550

551551
/* sidebar-visible */
552-
#sidebar-toggle-anchor:checked ~ .page-wrapper {
552+
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
553553
transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
554554
}
555-
[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
555+
[dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
556556
transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
557557
}
558558
@media only screen and (min-width: 620px) {
559-
#sidebar-toggle-anchor:checked ~ .page-wrapper {
559+
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
560560
transform: none;
561561
margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
562562
}
563-
[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
563+
[dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
564564
transform: none;
565565
}
566566
}

‎crates/mdbook-html/front-end/css/general.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ h6:target::before {
8080
.page {
8181
outline: 0;
8282
padding: 0 var(--page-padding);
83-
margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
83+
margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #mdbook-menu-bar-hover-placeholder */
8484
}
8585
.page-wrapper {
8686
box-sizing: border-box;

‎crates/mdbook-html/front-end/css/print.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11

2-
#sidebar,
3-
#menu-bar,
2+
#mdbook-sidebar,
3+
#mdbook-menu-bar,
44
.nav-chapters,
55
.mobile-nav-chapters {
66
display: none;
77
}
88

9-
#page-wrapper.page-wrapper {
9+
#mdbook-page-wrapper.page-wrapper {
1010
transform: none !important;
1111
margin-inline-start: 0px;
1212
overflow-y: initial;
1313
}
1414

15-
#content {
15+
#mdbook-content {
1616
max-width: none;
1717
margin: 0;
1818
padding: 0;

‎crates/mdbook-html/front-end/js/book.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -309,34 +309,34 @@ aria-label="Show hidden lines"></button>';
309309

310310
(function themes() {
311311
const html = document.querySelector('html');
312-
const themeToggleButton = document.getElementById('theme-toggle');
313-
const themePopup = document.getElementById('theme-list');
312+
const themeToggleButton = document.getElementById('mdbook-theme-toggle');
313+
const themePopup = document.getElementById('mdbook-theme-list');
314314
const themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
315315
const themeIds = [];
316316
themePopup.querySelectorAll('button.theme').forEach(function(el) {
317317
themeIds.push(el.id);
318318
});
319319
const stylesheets = {
320-
ayuHighlight: document.querySelector('#ayu-highlight-css'),
321-
tomorrowNight: document.querySelector('#tomorrow-night-css'),
322-
highlight: document.querySelector('#highlight-css'),
320+
ayuHighlight: document.querySelector('#mdbook-ayu-highlight-css'),
321+
tomorrowNight: document.querySelector('#mdbook-tomorrow-night-css'),
322+
highlight: document.querySelector('#mdbook-highlight-css'),
323323
};
324324

325325
function showThemes() {
326326
themePopup.style.display = 'block';
327327
themeToggleButton.setAttribute('aria-expanded', true);
328-
themePopup.querySelector('button#' + get_theme()).focus();
328+
themePopup.querySelector('button#mdbook-theme-' + get_theme()).focus();
329329
}
330330

331331
function updateThemeSelected() {
332332
themePopup.querySelectorAll('.theme-selected').forEach(function(el) {
333333
el.classList.remove('theme-selected');
334334
});
335335
const selected = get_saved_theme() ?? 'default_theme';
336-
let element = themePopup.querySelector('button#' + selected);
336+
let element = themePopup.querySelector('button#mdbook-theme-' + selected);
337337
if (element === null) {
338338
// Fall back in case there is no "Default" item.
339-
element = themePopup.querySelector('button#' + get_theme());
339+
element = themePopup.querySelector('button#mdbook-theme-' + get_theme());
340340
}
341341
element.classList.add('theme-selected');
342342
}
@@ -363,7 +363,7 @@ aria-label="Show hidden lines"></button>';
363363

364364
function get_theme() {
365365
const theme = get_saved_theme();
366-
if (theme === null || theme === undefined || !themeIds.includes(theme)) {
366+
if (theme === null || theme === undefined || !themeIds.includes('mdbook-theme-' + theme)) {
367367
if (typeof default_dark_theme === 'undefined') {
368368
// A customized index.hbs might not define this, so fall back to
369369
// old behavior of determining the default on page load.
@@ -448,6 +448,8 @@ aria-label="Show hidden lines"></button>';
448448
} else {
449449
return;
450450
}
451+
theme = theme.replace(/^mdbook-theme-/, '');
452+
451453
if (theme === 'default_theme' || theme === null) {
452454
delete_saved_theme();
453455
set_theme(get_theme(), false);
@@ -518,11 +520,11 @@ aria-label="Show hidden lines"></button>';
518520
})();
519521

520522
(function sidebar() {
521-
const sidebar = document.getElementById('sidebar');
522-
const sidebarLinks = document.querySelectorAll('#sidebar a');
523-
const sidebarToggleButton = document.getElementById('sidebar-toggle');
524-
const sidebarResizeHandle = document.getElementById('sidebar-resize-handle');
525-
const sidebarCheckbox = document.getElementById('sidebar-toggle-anchor');
523+
const sidebar = document.getElementById('mdbook-sidebar');
524+
const sidebarLinks = document.querySelectorAll('#mdbook-sidebar a');
525+
const sidebarToggleButton = document.getElementById('mdbook-sidebar-toggle');
526+
const sidebarResizeHandle = document.getElementById('mdbook-sidebar-resize-handle');
527+
const sidebarCheckbox = document.getElementById('mdbook-sidebar-toggle-anchor');
526528
let firstContact = null;
527529

528530

@@ -783,7 +785,7 @@ aria-label="Show hidden lines"></button>';
783785
})();
784786

785787
(function controllMenu() {
786-
const menu = document.getElementById('menu-bar');
788+
const menu = document.getElementById('mdbook-menu-bar');
787789

788790
(function controllPosition() {
789791
let scrollTop = document.scrollingElement.scrollTop;

‎crates/mdbook-html/front-end/searcher/searcher.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@ window.search = window.search || {};
2121
};
2222
}
2323

24-
const search_wrap = document.getElementById('search-wrapper'),
25-
searchbar_outer = document.getElementById('searchbar-outer'),
26-
searchbar = document.getElementById('searchbar'),
27-
searchresults = document.getElementById('searchresults'),
28-
searchresults_outer = document.getElementById('searchresults-outer'),
29-
searchresults_header = document.getElementById('searchresults-header'),
30-
searchicon = document.getElementById('search-toggle'),
31-
content = document.getElementById('content'),
24+
const search_wrap = document.getElementById('mdbook-search-wrapper'),
25+
searchbar_outer = document.getElementById('mdbook-searchbar-outer'),
26+
searchbar = document.getElementById('mdbook-searchbar'),
27+
searchresults = document.getElementById('mdbook-searchresults'),
28+
searchresults_outer = document.getElementById('mdbook-searchresults-outer'),
29+
searchresults_header = document.getElementById('mdbook-searchresults-header'),
30+
searchicon = document.getElementById('mdbook-search-toggle'),
31+
content = document.getElementById('mdbook-content'),
3232

3333
// SVG text elements don't render if inside a <mark> tag.
3434
mark_exclude = ['text'],
@@ -154,8 +154,9 @@ window.search = window.search || {};
154154
const encoded_search = encodeURIComponent(searchterms.join(' ')).replace(/'/g, '%27');
155155

156156
return '<a href="' + path_to_root + url[0] + '?' + URL_MARK_PARAM + '=' + encoded_search
157-
+ '#' + url[1] + '" aria-details="teaser_' + teaser_count + '">'
158-
+ result.doc.breadcrumbs + '</a>' + '<span class="teaser" id="teaser_' + teaser_count
157+
+ '#' + url[1] + '" aria-details="mdbook-teaser_' + teaser_count + '">'
158+
+ result.doc.breadcrumbs + '</a>'
159+
+ '<span class="teaser" id="mdbook-teaser_' + teaser_count
159160
+ '" aria-label="Search Result Teaser">' + teaser + '</span>';
160161
}
161162

@@ -437,7 +438,7 @@ window.search = window.search || {};
437438
loadSearchScript(
438439
window.path_to_searchindex_js ||
439440
path_to_root + '{{ resource "searchindex.js" }}',
440-
'search-index');
441+
'mdbook-search-index');
441442
search_wrap.classList.remove('hidden');
442443
searchicon.setAttribute('aria-expanded', 'true');
443444
} else {

0 commit comments

Comments
 (0)