doc updates, port update to support dot notation

Author: DmitriyLeybel

docs/_quarto.yml

@@ -10,11 +10,14 @@ website:
   navbar:
     logo: /assets/logo/pyllments_logo_128.png
     left:
-      - href: getting_started.qmd
+      - href: /getting_started
         text: Getting Started
-      - How-To
-      - Elements
-      - API Reference
+      - href: /how_to
+        text: How-To
+      - href: /elements
+        text: Elements
+      - href: /api_reference
+        text: API Reference
     right:
       - icon: github
         href: https://github.com/prudent-patterns/pyllments
@@ -26,9 +29,9 @@ website:
       - text: "🔧 Installation"
         href: installation.qmd
       - text: "🎓 Getting Started Tutorial"
-        href: getting_started.qmd
+        href: getting_started
       - section: "📋 How To"
-        contents: how_to/*
+        contents: how_to/*.qmd
       - section: "🧩 Elements"
         contents: elements/*
       - section: "💡 Explanation"
@@ -47,28 +50,27 @@ format:
     toc: true
     highlight-style: github
     freeze: auto
-    include-in-header:
-      - text: |
-          <script src="https://unpkg.com/powerglitch@latest/dist/powerglitch.min.js"></script>
-          <script>
-          document.addEventListener("DOMContentLoaded", function() {
-            // Immediately trigger the glitch effect on menu text when the DOM is ready
-            PowerGlitch.glitch('span.menu-text', { playMode: 'click' });
-
-            // Wait 300ms before checking for the sidebar toggle element to ensure it exists
-            setTimeout(function() {
-              var toggleElement = document.querySelector('.quarto-sidebar-toggle');
-              if (toggleElement) {
-                toggleElement.addEventListener('click', function() {
-                  // After the toggle is clicked, wait 500ms for any UI updates then trigger the glitch effect again
-                  setTimeout(function() {
-                    PowerGlitch.glitch('span.menu-text', { playMode: 'click' });
-                  }, 500);
-                });
-              }
-            }, 300);
-          });
-          </script>
+    # include-in-header:
+    #   - text: |
+    #       <script src="https://unpkg.com/powerglitch@latest/dist/powerglitch.min.js"></script>
+    #       <script>
+    #       document.addEventListener("DOMContentLoaded", function() {
+    #         // Immediately trigger the glitch effect on menu text when the DOM is ready
+    #         PowerGlitch.glitch('span.menu-text', { playMode: 'click' });
+    #         // Wait 300ms before checking for the sidebar toggle element to ensure it exists
+    #         setTimeout(function() {
+    #           var toggleElement = document.querySelector('.quarto-sidebar-toggle');
+    #           if (toggleElement) {
+    #             toggleElement.addEventListener('click', function() {
+    #               // After the toggle is clicked, wait 500ms for any UI updates then trigger the glitch effect again
+    #               setTimeout(function() {
+    #                 PowerGlitch.glitch('span.menu-text', { playMode: 'click' });
+    #               }, 500);
+    #             });
+    #           }
+    #         }, 300);
+    #       });
+    #       </script>