Initial cockpit commit

src/components/head.html

@@ -13,6 +13,7 @@
   <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
   <stack name="head"></stack>
   <script type="module" src="index.js"></script>
+  <script type="module" src="thecockpit.js"></script>
   <meta name="htmx-config" content='{"responseHandling": [{"code":"204", "swap": false},{"code":"...", "swap": true}]}'>
 </head>
 

src/components/tab/content.html

@@ -7,7 +7,8 @@
   <x-tab.button page="projects.html" selected="{{ selected-- }}">Our Projects</x-tab.button>
   <x-tab.button page="who_we_are.html" selected="{{ selected-- }}">Who we are</x-tab.button>
   <x-tab.button page="interests.html" selected="{{ selected-- }}">Our Interests</x-tab.button>
-  <x-tab.button page="page_four.html" selected="{{ selected-- }}">Page Four</x-tab.button>
+  <x-tab.button page="thecockpit.html" selected="{{ selected-- }}">The Cockpit</x-tab.button>
+  <x-tab.button page="page_five.html" selected="{{ selected-- }}">Page Five</x-tab.button>
 </nav>
 <hr id="tab-break">
 <div id="tab-content" role="tabpanel" class="tab-content">

src/page_five.html

@@ -0,0 +1,3 @@
+<x-head>
+  <include src="src/partials/page_five.html"></include>
+</x-head>

src/page_four.html

@@ -1,3 +0,0 @@
-<x-head>
-  <include src="src/partials/page_four.html"></include>
-</x-head>

src/partials/page_five.html

@@ -1,5 +1,5 @@
-<x-tab.content selected="3">
-  <x-section-head header="Page four">
+<x-tab.content selected="4">
+  <x-section-head header="Page five">
     <x-blockquote cite="Josh Arbon (CEO of Tysontoucherinator)">
       Who is this guy?
     </x-blockquote>
@@ -20,7 +20,7 @@
         ```=html
         <form hx-post="/api/page-idea" hx-target="#page-idea-result" hx-indicator="#page-idea-indicator">
           <label for="page-idea">
-            What should we put on page 4 of The SANDWICH?
+            What should we put on page 5 of The SANDWICH?
           </label><br>
           <textarea name="page-idea" id="page-idea"></textarea>
           <input type="submit" value="Submit Idea!">

src/partials/thecockpit.html

@@ -0,0 +1,18 @@
+<x-tab.content selected="3">
+  <x-section-head header="The Cockpit">
+    <djot>
+      ## Fact:
+
+      In Myrtle Beach South Carolina, Richard and Isaac counted 100 Chrysler Pacificas in the span of a week.
+    </djot>
+  </x-section-head>
+  <div id="cockpit-canvas" style="height: 80vh;  margin: 8px"></div>
+</x-tab.content>
+<script>
+  var interval = setInterval(function () {
+    if (typeof window.run_cockpit === 'function') {
+      clearInterval(interval);
+      window.run_cockpit();
+    }
+  }, 100);
+</script>

src/style.css

@@ -26,6 +26,16 @@ html {
 
   justify-content: space-between;
 
+
+  section {
+    padding: 32px;
+    text-align: center;
+
+    p {
+      text-align: center;
+    }
+  }
+
   h1 {
     font-size: 48pt;
   }

src/thecockpit.html

@@ -0,0 +1,3 @@
+<x-head>
+  <include src="src/partials/thecockpit.html"></include>
+</x-head>

src/thecockpit.js

@@ -0,0 +1,5 @@
+import { default as init, run } from 'thecockpit'
+window.run_cockpit = async () => {
+  await init();
+  run("cockpit-canvas");
+};