anchors

Author: Igor Alexey

index.php

@@ -231,9 +231,6 @@ function formatFileSize($bytes) {
                 </p>
             </footer>
         </div>
-        <!-- Right column -->
-        <div>
-        </div>
         <?php
             echo $additionalBody;
         ?>

js/cms.js

@@ -9,7 +9,7 @@ const contentDiv = document.getElementsByClassName('content')[0];
 const headings = contentDiv.querySelectorAll('h1, h2, h3, h4, h5, h6');
 let tocHTML = '';
 let currentLevel = 0;
-headings.forEach((heading) => {
+headings.forEach(heading => {
   const level = parseInt(heading.tagName[1], 10);
   // Adjust indentation levels based on the heading hierarchy
   if (level > currentLevel) {
@@ -24,4 +24,29 @@ headings.forEach((heading) => {
 });
 tocHTML += '</li>'.repeat(currentLevel);
 const firstDiv = document.getElementById('toc-content');
-firstDiv.insertAdjacentHTML('beforeend', tocHTML);
+firstDiv.insertAdjacentHTML('beforeend', tocHTML);
+
+// Function to scroll to the heading anchor
+function scrollToHeadingAnchor() {
+  const hash = window.location.hash;
+  console.log('Hash:', hash);
+  if (hash) {
+    const headings = contentDiv.querySelectorAll('h1, h2, h3, h4, h5, h6');
+    headings.forEach(heading => {
+      if (toSnakeCase(heading.innerText) === hash.substring(1)) {
+        const yOffset = -50; // Adjust this value if you want to offset the scroll position
+        const y = heading.getBoundingClientRect().top + window.pageYOffset + yOffset;
+        console.log('Scrolling to Y:', y);
+        window.scrollTo({ top: y, behavior: 'smooth' });
+      }
+    });
+  } else {
+    console.log('No hash found in the URL.');
+  }
+}
+
+// Call the function on page load
+scrollToHeadingAnchor();
+
+// Add an event listener to scroll to the heading when the URL hash changes
+window.addEventListener('hashchange', scrollToHeadingAnchor);

styles/main.css

@@ -2,6 +2,7 @@
 
 body {
   display: flex;
+  margin: 0.5em;
 }
 
 :root {
@@ -14,14 +15,14 @@ body > div:nth-child(2) {
 }
 
 /* Left and right columns */
-body > div:nth-child(1), body > div:nth-child(3) {
-  width: 25%;
+body > div:nth-child(1) {
+  width: 10em;
+  margin-right: 0.5em;
 }
 
 /* Content styles to fill the columns */
 body > div {
   box-sizing: border-box;
-  padding: 10px;
 }
 
 /* Responsive styles */

styles/themes/Legacy.css

@@ -31,16 +31,23 @@ a:hover {
   display: flow-root;
 }
 
-.content, #toc  {
-  background-color: #fff;
+.content {
   padding-left: 1em;
   padding-right: 1em;
+}
+
+.content, #toc  {
+  background-color: #fff;
   border-width: 1px;
   border-style: solid;
   border-color: var(--border-color);
   border-radius: 2px;
 }
 
+#toc {
+  float: right;
+}
+
 #toc h2 {
   display: inline-block;
   width: 100%;
@@ -53,8 +60,9 @@ a:hover {
 }
 
 ul {
-  padding-left: 10px;
+  padding-left: 0.5em;
   margin: 0;
+  list-style: none;
 }
 
 .navigation .right {
@@ -99,9 +107,10 @@ ul {
   #eee 12px,
   transparent 12px,
   transparent 20px);
-  padding: 1.22em;
+  padding: 0.5em;
   margin-bottom: 0.5em;
   border: 1px solid var(--border-color);
+  height: 19px;
 }
 
 /* Page Content */