learn-code-the-hard-way
/
zedshaw-games
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
Zed A. Shaw 1 month ago
parent 9ed5c05cdf
commit f49608d74c
6 changed files with 63 additions and 37 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 0
      main.go
  2. 8
      public/alpine_test.html
  3. 7
      public/api/stream/1/index.json
  4. 18
      public/api/stream/index.json
  5. 5
      public/js/alpine.js
  6. 62
      public/stream/index.html

0
hello.go → main.go
Unescape View File

8
public/alpine_test.html
Unescape View File

@ -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>

7
public/api/stream/1/index.json
Unescape View File

@ -0,0 +1,7 @@
[
{
"title": "Sample Stream",
"streamed_on": "10/10/2025",
"description": "Some kind of stream."
}
]

18
public/api/stream/index.json
Unescape View File

@ -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/"
}
]

5
public/js/alpine.js
View File

File diff suppressed because one or more lines are too long

62
public/stream/index.html
Unescape View File

@ -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>
<stream class="horizontal">
<shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
<info>
<date>Streamed on 10/10/2025</date>
<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>
<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 x-data="Streams">
<template x-for="item in pastStreams">
<stream class="horizontal">
<shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
<info>
<date x-text="item.date"></date>
<p x-text="item.description"></p>
<a style="text-align: right" x-bind:href="item.url">View This Stream</a>
</info>
</stream>
</template>
</block>
</blockstart>
<footer>

Write Preview
Loading…
Cancel
Save