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

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>