Element ID name revision

Author: deimonn

compile-markdown.js

@@ -156,7 +156,7 @@ let mainHtml = await marked.parse(readFile(input), {
             // Add copy button to code block.
             token.text = /* HTML */ `
                 <div class="copy-code">
-                    <sl-copy-button from="dei-codeblock${counter}.innerText">
+                    <sl-copy-button from="codeblock-no${counter}.innerText">
                         <sl-icon
                             slot="copy-icon"
                             name="clipboard-fill"
@@ -175,7 +175,7 @@ let mainHtml = await marked.parse(readFile(input), {
             `;
 
             token.text = token.text.replace(/<code>/, /* HTML */ `
-                <code id="dei-codeblock${counter}">
+                <code id="codeblock-no${counter}">
             `.trim());
 
             counter++;
@@ -260,7 +260,7 @@ for (const [_, category] of Object.entries(categories)) {
         // Current file, highlighted in bold.
         if (input === file.path) {
             navHtml += /* HTML */ `
-                <li id="dei-currentpage">
+                <li id="current-page">
                   <b>${removeHtml(file.title)}</b>
                   <br>
                 </li>

src/main.html

@@ -35,17 +35,17 @@
     <!-- Toolbar -->
     <div class="toolbar">
       <!-- Back to top button -->
-      <sl-button id="dei-backtotop" style="display: none" pill>
+      <sl-button id="back-to-top" style="display: none" pill>
         <sl-icon name="arrow-up"></sl-icon>
       </sl-button>
 
       <!-- Theme selection -->
       <sl-dropdown>
         <sl-button slot="trigger" pill caret>
-          <sl-icon id="dei-themeicon" name="moon-fill"></sl-icon>
+          <sl-icon id="theme-icon" name="moon-fill"></sl-icon>
         </sl-button>
 
-        <sl-menu id="dei-thememenu">
+        <sl-menu id="theme-menu">
           <sl-menu-item value="system">
             <sl-icon slot="prefix" name="circle-half"></sl-icon> System theme
           </sl-menu-item>

src/main.js

@@ -13,7 +13,7 @@
 // Sets and applies a theme site-wide.
 function setTheme(theme) {
     const html = document.documentElement;
-    const themeIcon = document.getElementById("dei-themeicon");
+    const themeIcon = document.getElementById("theme-icon");
 
     // Save theme setting.
     localStorage.setItem("theme", theme);
@@ -38,7 +38,7 @@ function setTheme(theme) {
 
 // Open sidebar button.
 (function() {
-    const sidebarButton = document.getElementById("dei-openaside");
+    const sidebarButton = document.getElementById("open-aside");
     if (!sidebarButton) {
         return;
     }
@@ -64,7 +64,7 @@ function setTheme(theme) {
 
 // Back-to-top button.
 (function() {
-    const backToTop = document.getElementById("dei-backtotop");
+    const backToTop = document.getElementById("back-to-top");
 
     // On scroll, display/hide the button.
     document.addEventListener("scroll", () => {
@@ -84,7 +84,7 @@ function setTheme(theme) {
 
 // Theme selection menu.
 (function() {
-    const themeMenu = document.getElementById("dei-thememenu");
+    const themeMenu = document.getElementById("theme-menu");
 
     // On theme selected, update theme.
     themeMenu.addEventListener("sl-select", (event) => {
@@ -110,9 +110,9 @@ function setTheme(theme) {
 // Search functionality.
 (function() {
     // Fetch elements.
-    const searchInput = document.getElementById("dei-searchinput");
-    const navMain = document.getElementById("dei-navmain");
-    const navSearch = document.getElementById("dei-navsearch");
+    const searchInput = document.getElementById("search-input");
+    const navMain = document.getElementById("nav-main");
+    const navSearch = document.getElementById("nav-search");
 
     if (!searchInput | !navMain || !navSearch) {
         return;
@@ -394,7 +394,7 @@ function setTheme(theme) {
 // Scroll to current page in navigation when present.
 window.addEventListener("load", () => {
     // Fetch current page in navigation; do nothing if there's none.
-    const currentPage = document.getElementById("dei-currentpage");
+    const currentPage = document.getElementById("current-page");
     if (!currentPage) {
         return;
     }

src/templates/docs.html

@@ -24,18 +24,18 @@
     </div>
 
     <!-- Search -->
-    <sl-input id="dei-searchinput" placeholder="Press '/' to search" data-repo="${DOCS_REPO}" clearable pill>
+    <sl-input id="search-input" placeholder="Press '/' to search" data-repo="${DOCS_REPO}" clearable pill>
       <sl-icon name="search" slot="prefix"></sl-icon>
     </sl-input>
 
     <!-- Navigation -->
-    <ul id="dei-navmain" class="navigation">
+    <ul id="nav-main" class="navigation">
       ${DOCS_NAVHTML}
     </ul>
-    <ul id="dei-navsearch" class="navigation" style="display: none"></ul>
+    <ul id="nav-search" class="navigation" style="display: none"></ul>
   </aside>
 
-  <sl-button id="dei-openaside" class="open-aside" pill>
+  <sl-button id="open-aside" class="open-aside" pill>
       <sl-icon name="list"></sl-icon>
   </sl-button>