Prototype the FSM feature I want to teach and test out nunjucks ability to import.

9 months ago · 0378b2dca3
parent c8d47a4be2
commit 0378b2dca3
3 changed files with 46 additions and 23 deletions
--- a/templates/footer.html
+++ b/templates/footer.html
@ -0,0 +1,3 @@
+  </body>
+<!-- not much here yet -->
+</html>
--- a/templates/header.html
+++ b/templates/header.html
@ -0,0 +1,16 @@
+<!doctype html>
+
+<html>
+  <head>
+    <script src="/alpine.js"></script>
+    <script src="/fsm.js"></script>
+    <title>Bandolier2</title>
+
+<style>
+@import "/open-props.min.css";
+@import "/normalize.min.css";
+</style>
+
+<head>
+</head>
+  <body>
--- a/templates/todo.html
+++ b/templates/todo.html
@ -1,28 +1,32 @@
-<!doctype html>
+{% include "./header.html" %}

-<html>
-  <head>
-    <script src="/alpine.js"></script>
-    <script src="/fsm.js"></script>
-    <title>Bandolier2</title>
+<h1>Your TODOs</h1>

-<style>
-@import "/open-props.min.css";
-@import "/normalize.min.css";
-</style>
-
-<head>
-</head>
-
-  <body>
-    <h1>Your TODOs</h1>
-
-    <ol>
+<ol>
  {% for todo in todo_list %}
  <li>{{ todo.task }}</li>
  {% else %}
    <li>No TODO Items</li>
  {% endfor %}
-    </ol>
-  </body>
-</html>
+</ol>
+
+<style>
+  .disabled {
+    display: none;
+  }
+
+  .enabled {
+    display: none;
+  }
+</style>
+
+<div x-state="state-1" class="disabled">
+  <h1>State 1</h1>
+</div>
+
+<div x-state="state-2">
+  <h1>State 2</h1>
+</div>
+
+
+{% include "./footer.html" %}