site/zedshaw.games
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Zed A. Shaw 2025-05-28 00:26:43 -04:00
parent 9ed5c05cdf
commit f49608d74c
6 changed files with 63 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

0
hello.go → main.go
View file

8
public/alpine_test.html Normal file
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 Normal file
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 Normal file
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 Normal file
View file

File diff suppressed because one or more lines are too long

62
public/stream/index.html
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>