Add docs

md/learn/flow-control/loops.md

@@ -19,7 +19,7 @@ for #(index, number) in numbers.entries()
 ```
 
 ```thp
-val dict = Obj {
+val dict = .{
     apple: 10,
     banana: 7,
     cherries: 3,
@@ -58,7 +58,7 @@ while index < colors.size()
 
 ## Infinite loop
 
-Basically Rust*'s loop.
+Instead of doing `while true {}` use `loop`.
 
 ```thp
 loop
@@ -72,8 +72,22 @@ loop
 }
 ```
 
-* Rust is a trademark of the Rust Foundation. THP is not affiliated,
-endorsed or supported by the Rust Foundation.
+
+## Labelled loops
+
+You can give labels to loops, allowing you to `break` and `continue` in nested loops.
+
+```thp
+:top for i in values_1
+{
+    for j in values_2
+    {
+        // ...
+        break :top
+    }
+}
+```
+
 
 
 

md/learn/index.yaml

@@ -20,6 +20,8 @@ children:
 - name: Flow control
   path: flow-control
   children:
+  - name: Blocks
+    path: blocks
   - name: Conditionals
     path: conditionals
   - name: Loops

static/index.html

@@ -44,7 +44,7 @@
                 <br>
                 <div class="text-center">
                     <a class="inline-block font-display text-lg rounded-full border-2 border-pink-400 py-2 px-8 
-                        transition-colors hover:text-black hover:bg-pink-400" href="/learn">
+                        transition-colors hover:text-black hover:bg-pink-400" href="/learn/">
                         Tutorial
                     </a>
 

static/template.html

@@ -29,10 +29,11 @@
 
     <div class="grid grid-cols-[14rem_auto_12rem] container mx-auto">
         <div class="pt-12 h-screen sticky top-0">
-            <nav class="py-4 pr-2 overflow-x-scroll"
+            <nav id="sidebar" class="py-4 pr-2 overflow-x-scroll"
                 style="height: calc(100vh - 3rem);"
             >
                 {{pages}}
+
             </nav>
         </div>
 
@@ -49,6 +50,31 @@
         </div>
     </div>
 
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            let current_uri = window.location.pathname;
+            if (!current_uri.endsWith("/") && !current_uri.endsWith(".html")) {
+                current_uri += ".html";
+            }
+
+            const sidebar = document.getElementById("sidebar");
+            const links = sidebar.querySelectorAll("a");
+            for (const link of [...links]) {
+                if (link.getAttribute("href") === current_uri) {
+                    console.log(sidebar.offsetTop);
+                    console.log(link.offsetTop);
+
+                    const viewport_middle = window.innerHeight / 2;
+
+                    sidebar.scrollTop = link.offsetTop - sidebar.offsetTop - 250;
+
+                    link.classList.add("bg-pink-200", "dark:bg-pink-950");
+                    // link.scrollIntoView({ behavior: "instant", block: "nearest", inline: "nearest" });
+                    break;
+                }
+            }
+        });
+    </script>
     <script src="/js/highlighter.js"></script>
     <script>
         // Add an editor to all code samples