toc links

Igor Alexey · Igor Alexey · commit af56dc495279 · 2023-07-28T22:41:36.000-03:00
diff --git a/README.md b/README.md
@@ -39,4 +39,7 @@ In order to configure TinyDocs you will need to upload the files to your web ser
 5. Add your Markdown files to the pages/ directory, organizing them into folders if you wish to create categories.
 
 ## Dependencies
-* [PHP](https://secure.php.net/) >= 5.3.0 
+* [PHP](https://secure.php.net/) >= 5.3.0 
+
+## Contributions
+Any contributions are welcome!, if you have any questions or suggestions, open an issue.
diff --git a/index.php b/index.php
@@ -47,7 +47,7 @@ function create_page_contents()
     if ($GLOBALS['searchQuery']) {
         $startTime = microtime(true);
 
-        echo "<h1>Search results for " . $GLOBALS['searchQuery'] . "</h1>";
+        echo "<h1>Search results for \"" . $GLOBALS['searchQuery'] . "\"</h1>";
 
         // Get all the files and subdirectories in the content directory
         $files = new RecursiveIteratorIterator(
@@ -155,6 +155,7 @@ function formatFileSize($bytes) {
     <link rel="icon" type="image/x-icon" href="<?php echo $favicon; ?>">
     <link rel="stylesheet" href="styles/main.css">
     <link rel="stylesheet" href="styles/themes/<?php echo $defaultTheme; ?>">
+    <script src="js/cms.js" defer></script>
     <meta name="keywords" content="<?php echo $description; ?>">
     <?php
     echo $additionalHead;
@@ -168,8 +169,19 @@ function formatFileSize($bytes) {
 <body>
     <!-- Left column -->
     <div>
-        <h1><?php echo $title ?></h1>
-
+        <div class="navigation">
+            <div class="blank">
+            </div>
+        </div>
+        <table id="toc" style="<?php echo $GLOBALS['searchQuery'] ? "display:none" : ""  ?>">
+            <tbody>
+                <tr>
+                    <td id="toc-content">
+                        <h2>Contents</h2>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </div>
     <!-- Middle column -->
     <div>
diff --git a/js/cms.js b/js/cms.js
@@ -0,0 +1,27 @@
+const toSnakeCase = str =>
+  str &&
+  str
+    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    .map(x => x.toLowerCase())
+    .join('_');
+
+const contentDiv = document.getElementsByClassName('content')[0];
+const headings = contentDiv.querySelectorAll('h1, h2, h3, h4, h5, h6');
+let tocHTML = '';
+let currentLevel = 0;
+headings.forEach((heading) => {
+  const level = parseInt(heading.tagName[1], 10);
+  // Adjust indentation levels based on the heading hierarchy
+  if (level > currentLevel) {
+    tocHTML += '<ul>';
+  } else if (level < currentLevel) {
+    tocHTML += '</ul>'.repeat(currentLevel - level) + '</li>';
+  } else {
+    tocHTML += '</li>';
+  }
+  tocHTML += `<li><a href="#${toSnakeCase(heading.innerText)}">${heading.innerText}</a>`;
+  currentLevel = level;
+});
+tocHTML += '</li>'.repeat(currentLevel);
+const firstDiv = document.getElementById('toc-content');
+firstDiv.insertAdjacentHTML('beforeend', tocHTML);
diff --git a/styles/themes/Legacy.css b/styles/themes/Legacy.css
@@ -23,11 +23,15 @@ a:hover {
   text-decoration: underline;
 }
 
+.breadcrumbs {
+  margin-bottom: 0;
+}
+
 .content, .navigation {
   display: flow-root;
 }
 
-.content {
+.content, #toc  {
   background-color: #fff;
   padding-left: 1em;
   padding-right: 1em;
@@ -37,6 +41,22 @@ a:hover {
   border-radius: 2px;
 }
 
+#toc h2 {
+  display: inline-block;
+  width: 100%;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  font-weight: bold;
+  text-align: center;
+}
+
+ul {
+  padding-left: 10px;
+  margin: 0;
+}
+
 .navigation .right {
   float:right;
   margin-bottom: 0.5em;
@@ -73,6 +93,17 @@ a:hover {
   background-color: #ccc;
 }
 
+.navigation .blank {
+  background-image: repeating-linear-gradient(45deg, 
+  #eee 10px,
+  #eee 12px,
+  transparent 12px,
+  transparent 20px);
+  padding: 1.22em;
+  margin-bottom: 0.5em;
+  border: 1px solid var(--border-color);
+}
+
 /* Page Content */
 
 blockquote {
