Basic API kind of worked out and solved a bunch of things with alpine.js
This commit is contained in:
		
							parent
							
								
									f49608d74c
								
							
						
					
					
						commit
						07fa59c8e7
					
				
					 12 changed files with 149 additions and 61 deletions
				
			
		|  | @ -6,10 +6,14 @@ | |||
|     <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 src="/js/code.js"></script> | ||||
|     <script> | ||||
|       let req = new GetJson("/api/stream/1/index.json"); | ||||
|     </script> | ||||
|   </head> | ||||
| 
 | ||||
| 
 | ||||
|   <body> | ||||
|   <body x-init="Stream = await req.theData()" x-data="{Stream: {}}"> | ||||
|     <header> | ||||
|       <a href="/">🏡</a> <span>Zed's Game Dev Website Yay</span> | ||||
|     </header> | ||||
|  | @ -17,10 +21,10 @@ | |||
|     <blockstart> | ||||
| 
 | ||||
|     <block style="--value: 7"> | ||||
|     <h1>Stream #34: C++ Game Dev|Retro Raycaster|No Brainrot Stream</h1> | ||||
|     <h1 x-text="Stream.title"></h1> | ||||
| 
 | ||||
|       <div> | ||||
|         <p>Summary Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror.</p> | ||||
|         <p x-text="Stream.description"></p> | ||||
|       </div> | ||||
|     </block> | ||||
| 
 | ||||
|  | @ -31,20 +35,11 @@ | |||
|     <block> | ||||
|       <h2>Links Posted</h2> | ||||
| 
 | ||||
|       <dl> | ||||
|         <dt><a href="#">https://somelink.com</a></dt> | ||||
|         <dd>A funky website</dd> | ||||
|         <dt><a href="#">https://somelink.com</a></dt> | ||||
|         <dd>A funky website</dd> | ||||
|         <dt><a href="#">https://somelink.com</a></dt> | ||||
|         <dd>A funky website</dd> | ||||
|         <dt><a href="#">https://somelink.com</a></dt> | ||||
|         <dd>A funky website</dd> | ||||
|         <dt><a href="#">https://somelink.com</a></dt> | ||||
|         <dd>A funky website</dd> | ||||
|         <dt><a href="#">https://somelink.com</a></dt> | ||||
|         <dd>A funky website</dd> | ||||
|       </dl> | ||||
|       <ul> | ||||
|         <template x-for="item in Stream.links"> | ||||
|           <li><a x-text="item.description" x-bind:href="item.url"></a></li> | ||||
|         </template> | ||||
|       </ul> | ||||
|     </block> | ||||
| 
 | ||||
| 
 | ||||
|  |  | |||
|  | @ -7,17 +7,9 @@ | |||
|     <link rel="stylesheet" href="/blockstart.css"> | ||||
|     <title>ZedShaw's Game Thing</title> | ||||
|     <script defer src="/js/alpine.js"></script> | ||||
| 
 | ||||
|     <script src="/js/code.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(); | ||||
|         } | ||||
|       }; | ||||
|       let Streams = new GetJson("/api/stream/index.json"); | ||||
|     </script> | ||||
|   </head> | ||||
| 
 | ||||
|  | @ -34,7 +26,7 @@ | |||
|       </block> | ||||
| 
 | ||||
|       <block x-data="Streams"> | ||||
|         <template x-for="item in pastStreams"> | ||||
|         <template x-for="item in theData"> | ||||
|           <stream class="horizontal"> | ||||
|             <shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape> | ||||
|             <info> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Zed A. Shaw
						Zed A. Shaw