Merge pull request #2808 from ehuss/mdbook-id

Change all HTML IDs to have a prefix

Author: ehuss

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

@@ -3,18 +3,18 @@
 html {
     scrollbar-color: var(--scrollbar) var(--bg);
 }
-#searchresults a,
+#mdbook-searchresults a,
 .content a:link,
 a:visited,
 a > .hljs {
     color: var(--links);
 }
 
 /*
-    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.
 */
-#body-container {
+#mdbook-body-container {
     /*
         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
@@ -25,12 +25,12 @@ a > .hljs {
 
 /* Menu Bar */
 
-#menu-bar,
-#menu-bar-hover-placeholder {
+#mdbook-menu-bar,
+#mdbook-menu-bar-hover-placeholder {
     z-index: 101;
     margin: auto calc(0px - var(--page-padding));
 }
-#menu-bar {
+#mdbook-menu-bar {
     position: relative;
     display: flex;
     flex-wrap: wrap;
@@ -39,24 +39,24 @@ a > .hljs {
     border-block-end-width: 1px;
     border-block-end-style: solid;
 }
-#menu-bar.sticky,
-#menu-bar-hover-placeholder:hover + #menu-bar,
-#menu-bar:hover,
-html.sidebar-visible #menu-bar {
+#mdbook-menu-bar.sticky,
+#mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
+#mdbook-menu-bar:hover,
+html.sidebar-visible #mdbook-menu-bar {
     position: -webkit-sticky;
     position: sticky;
     top: 0 !important;
 }
-#menu-bar-hover-placeholder {
+#mdbook-menu-bar-hover-placeholder {
     position: sticky;
     position: -webkit-sticky;
     top: 0;
     height: var(--menu-bar-height);
 }
-#menu-bar.bordered {
+#mdbook-menu-bar.bordered {
     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;
     padding: 0 8px;
     z-index: 10;
@@ -65,7 +65,7 @@ html.sidebar-visible #menu-bar {
     transition: color 0.5s;
 }
 @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;
     }
 }
@@ -193,8 +193,8 @@ html:not(.js) .left-buttons button {
 
 /* sidebar-visible */
 @media only screen and (max-width: 1380px) {
-    #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-wide-wrapper { display: none; }
+    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
 }
 
 /* Inline code */
@@ -307,7 +307,7 @@ pre > .result {
 
 /* Search */
 
-#searchresults a {
+#mdbook-searchresults a {
     text-decoration: none;
 }
 
@@ -337,13 +337,13 @@ mark.fade-out {
     max-width: var(--content-max-width);
 }
 
-#searchbar-outer.searching #searchbar {
+#mdbook-searchbar-outer.searching #mdbook-searchbar {
     padding-right: 30px;
 }
-#searchbar-outer .spinner-wrapper {
+#mdbook-searchbar-outer .spinner-wrapper {
     display: none;
 }
-#searchbar-outer.searching .spinner-wrapper {
+#mdbook-searchbar-outer.searching .spinner-wrapper {
     display: block;
 }
 
@@ -376,7 +376,7 @@ mark.fade-out {
     }
 }
 
-#searchbar {
+#mdbook-searchbar {
     width: 100%;
     margin-block-start: var(--searchbar-margin-block-start);
     margin-block-end: 0;
@@ -389,8 +389,8 @@ mark.fade-out {
     background-color: var(--searchbar-bg);
     color: var(--searchbar-fg);
 }
-#searchbar:focus,
-#searchbar.active {
+#mdbook-searchbar:focus,
+#mdbook-searchbar.active {
     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);
 }
 
-ul#searchresults {
+ul#mdbook-searchresults {
     list-style: none;
     padding-inline-start: 20px;
 }
-ul#searchresults li {
+ul#mdbook-searchresults li {
     margin: 10px 0px;
     padding: 2px;
     border-radius: 2px;
 }
-ul#searchresults li.focus {
+ul#mdbook-searchresults li.focus {
     background-color: var(--searchresults-li-bg);
 }
-ul#searchresults span.teaser {
+ul#mdbook-searchresults span.teaser {
     display: block;
     clear: both;
     margin-block-start: 5px;
@@ -432,7 +432,7 @@ ul#searchresults span.teaser {
     margin-inline-end: 0;
     font-size: 0.8em;
 }
-ul#searchresults span.teaser em {
+ul#mdbook-searchresults span.teaser em {
     font-weight: bold;
     font-style: normal;
 }
@@ -535,10 +535,10 @@ html:not(.sidebar-resizing) .sidebar {
     width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
 }
 /* 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)));
 }
-[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)));
 }
 .sidebar::-webkit-scrollbar {
@@ -549,18 +549,18 @@ html:not(.sidebar-resizing) .sidebar {
 }
 
 /* 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)));
 }
-[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)));
 }
 @media only screen and (min-width: 620px) {
-    #sidebar-toggle-anchor:checked ~ .page-wrapper {
+    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
         transform: none;
         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;
     }
 }

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

@@ -80,7 +80,7 @@ h6:target::before {
 .page {
     outline: 0;
     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 {
     box-sizing: border-box;

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

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

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

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

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

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