index.html
HTML document, ASCII text
1<!DOCTYPE html> 2<html lang="en-US"> 3 4<head> 5<title>Roundabout Theme Index</title> 6<link rel="stylesheet" href="style.css" /> 7<meta charset="UTF-8"> 8<meta name="viewport" content="width=device-width, initial-scale=1.0"> 9<meta http-equiv="X-UA-Compatible" content="ie=edge"> 10<link rel="icon" href="Favicon.png" /> 11</head> 12 13<body> 14<hgroup role="group"> 15<h1>Roundabout Theme Index</h1> 16<p class="subtitle">The hub for Roundabout Themes</p> 17</hgroup> 18 19<details class="resources"> 20<summary>Help and Resources</summary> 21<ul> 22<li>Don't know how to install a theme? See <a href="install.html">install.html</a></li> 23<li>Want your own theme here? See <a href="submit.html">submit.html</a></li> 24<li>Source code available at <a href="https://roundabout-host.com/steve0greatness/ThemeIndex">roundabout-host.com/steve0greatness/ThemeIndex</a></li> 25</ul> 26</details> 27 28<hr /> 29 30<h2 id="theme-list">Theme List</h2> 31 32<ul id="ThemeList"></ul> 33<noscript> 34<p>Unable to load ThemeList. Please consider enabling JavaScript, or upgrading your browser if it cannot support JavaScript.</p> 35<p>If you are unable or unwilling to do these things, you can view the plain-text list at <a href="themes.xml">themes.xml</a></p> 36</noscript> 37 38<template id="ThemeListElement"> 39<li> 40<table class="table-root"> 41<tr> 42<th class="theme-name" colspan="2"> 43 44</th> 45</tr> 46<tr> 47<th> 48Author 49</th> 50<td> 51<a 52class="author-url" 53></a> 54</td> 55</tr> 56<tr> 57<td colspan="2"> 58<a 59class="download" 60>Theme CSS</a> 61</td> 62</tr> 63</table> 64</li> 65</template> 66 67<script type="module"> 68const ThemeList = await fetch("themes.xml") 69.then(res => res.text()) 70.then(txt => { 71const parser = new DOMParser(); 72const doc = parser.parseFromString(txt, "text/xml"); 73return doc; 74}); 75 76const ThemeListElementTemplate = document.querySelector("#ThemeListElement"); 77const HTMLThemeList = document.querySelector("#ThemeList"); 78 79const themes = ThemeList.querySelectorAll("theme"); 80for (let index = 0; index < themes.length; index++) { 81const theme = themes[index]; 82 83const title = theme.querySelector("title").textContent; 84const author = theme.querySelector("author"); 85const path = theme.querySelector("uri").textContent; 86 87const ListEl = ThemeListElementTemplate.content.cloneNode(true); 88ListEl.querySelector(".theme-name").textContent = title; 89ListEl.querySelector(".download").href = "themes/" + path; 90 91const Author = ListEl.querySelector(".author-url"); 92Author.href = author.getAttribute("uri"); 93Author.textContent = author.textContent; 94 95HTMLThemeList.appendChild(ListEl); 96} 97</script> 98</body> 99 100</html> 101