Now have a basic alpine.js page going and it's talking to the server to get json in a fake API.

2 weeks ago · f49608d74c
parent 9ed5c05cdf
commit f49608d74c
6 changed files with 63 additions and 37 deletions
--- a/hello.go
+++ b/hello.go
--- a/public/alpine_test.html
+++ b/public/alpine_test.html
@ -0,0 +1,8 @@
 <html>
 <head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 </head>
 <body>
    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
 </body>
 </html>
--- a/public/api/stream/1/index.json
+++ b/public/api/stream/1/index.json
@ -0,0 +1,7 @@
 [
  {
    "title": "Sample Stream",
    "streamed_on": "10/10/2025",
    "description": "Some kind of stream."
  }
 ]
--- a/public/api/stream/index.json
+++ b/public/api/stream/index.json
@ -0,0 +1,18 @@
 [
  { "date": "12/10/2025",
    "description": "A great stream.",
    "url": "/stream/1/"
  },
  { "date": "12/10/2025",
    "description": "A great stream.",
    "url": "/stream/1/"
  },
  { "date": "12/10/2025",
    "description": "A great stream.",
    "url": "/stream/1/"
  },
  { "date": "12/10/2025",
    "description": "A great stream.",
    "url": "/stream/1/"
  }
 ]
--- a/public/js/alpine.js
+++ b/public/js/alpine.js
--- a/public/stream/index.html
+++ b/public/stream/index.html
@ -6,6 +6,19 @@
    <link rel="stylesheet" href="/color.css">
    <link rel="stylesheet" href="/blockstart.css">
    <title>ZedShaw's Game Thing</title>
    <script defer src="/js/alpine.js"></script>
    <script>
      let Streams = {
        items: [],
        pastStreams: async () => {
          const resp = await fetch("/api/stream/index.json");
          console.assert(resp.status == 200, "failed to get it");
          return await resp.json();
        }
      };
    </script>
  </head>
@ -20,44 +33,19 @@
        <p>This is where you can checkout information we dropped in a past stream. Did I post a link and you need to remember it? Did someone in chat mention something?  Here's where you find it.</p>
      </block>
-      <block>
+      <block x-data="Streams">
-        <stream class="horizontal">
+        <template x-for="item in pastStreams">
-          <shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
+          <stream class="horizontal">
-          <info>
+            <shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
-            <date>Streamed on 10/10/2025</date>
+            <info>
-            <p> Stream description here.</p>
+              <date x-text="item.date"></date>
-            <a style="text-align: right" href="/stream/1/">View This Stream</a>
+              <p x-text="item.description"></p>
-          </info>
+              <a style="text-align: right" x-bind:href="item.url">View This Stream</a>
-        </stream>
+            </info>
-        <stream class="horizontal">
+          </stream>
-          <shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
+        </template>
          <info>
            <p>Stream description here.</p>
            <a style="text-align: right" href="/stream/1/">View This Stream</a>
          </info>
        </stream>
        <stream class="horizontal">
          <shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
          <info>
            <p><b>Streamed on 10/10/2025</b> Stream description here.</p>
            <a style="text-align: right" href="/stream/1/">View This Stream</a>
          </info>
        </stream>
        <stream class="horizontal">
          <shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
          <info>
            <p>Stream description here.</p>
            <a style="text-align: right" href="/stream/1/">View This Stream</a>
          </info>
        </stream>
        <stream class="horizontal">
          <shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
          <info>
            <p>Stream description here.</p>
            <a style="text-align: right" href="/stream/1/">View This Stream</a>
          </info>
        </stream>
      </block>
    </blockstart>
    <footer>