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>
+<h1>Your TODOs</h1>
  <head>
    <script src="/alpine.js"></script>
    <script src="/fsm.js"></script>
    <title>Bandolier2</title>
-<style>
+<ol>
@import "/open-props.min.css";
@import "/normalize.min.css";
 </style>
 <head>
 </head>
  <body>
    <h1>Your TODOs</h1>
    <ol>
  {% for todo in todo_list %}
  <li>{{ todo.task }}</li>
  {% else %}
    <li>No TODO Items</li>
  {% endfor %}
-    </ol>
+</ol>
-  </body>
+
-</html>
+<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" %}