🔥 remove index.html files from examples (#456)

* 🔥 remove index.html files from examples

* 💄 set titles for examples

* 🐛 fix examples that did interesting things in the index.html file.

Author: yoshi-monster

examples/01-basics/01-hello-world/gleam.toml

@@ -5,3 +5,6 @@ dev-dependencies = { lustre_dev_tools = ">= 2.0.0 and < 3.0.0" }
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
 lustre = { path = "../../../" }
+
+[tools.lustre.html]
+title = "01-basics/01-hello-world"

examples/01-basics/01-hello-world/index.html

@@ -5,3 +5,6 @@ dev-dependencies = { lustre_dev_tools = ">= 2.0.0 and < 3.0.0" }
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
 lustre = { path = "../../../" }
+
+[tools.lustre.html]
+title = "01-basics/02-attributes"

examples/01-basics/02-attributes/gleam.toml

@@ -5,3 +5,6 @@ dev-dependencies = { lustre_dev_tools = ">= 2.0.0 and < 3.0.0" }
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
 lustre = { path = "../../../" }
+
+[tools.lustre.html]
+title = "01-basics/03-view-functions"

examples/01-basics/02-attributes/index.html

@@ -5,3 +5,53 @@ dev-dependencies = { lustre_dev_tools = ">= 2.0.0 and < 3.0.0" }
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
 lustre = { path = "../../../" }
+
+[tools.lustre.html]
+title = "01-basics/04-keyed-elements"
+
+[[tools.lustre.html.stylesheets]]
+content = """
+    @keyframes flash {
+        0% {
+            outline: 6px solid orangered;
+        }
+        100% {
+            outline: 6px solid transparent;
+        }
+    }
+
+    .flash {
+        animation: flash 0.5s ease-out;
+    }
+"""
+
+[[tools.lustre.html.scripts]]
+content = """
+    // This script is used to flash elements when they are modified or
+    // added to the DOM.
+
+    document.addEventListener("DOMContentLoaded", () => {
+        function flash(node) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                node.classList.add("flash");
+                setTimeout(() => node.classList.remove("flash"), 500);
+            }
+        }
+
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === "attributes") {
+                    flash(mutation.target);
+                } else if (mutation.type === "childList") {
+                    mutation.addedNodes.forEach(flash);
+                }
+            }
+        });
+
+        observer.observe(document.getElementById("app"), {
+            attributeFilter: ["src"],
+            childList: true,
+            subtree: true,
+        });
+    });
+"""

examples/01-basics/03-view-functions/gleam.toml

@@ -5,3 +5,6 @@ dev-dependencies = { lustre_dev_tools = ">= 2.0.0 and < 3.0.0" }
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
 lustre = { path = "../../../" }
+
+[tools.lustre.html]
+title = "01-basics/05-fragments"