Add changelog to homepage (#68)

* Implement changelog

* Add top margin to first changelog date

* Address reviews
Improve loading failed message and reload button

assets/scss/home.scss

@@ -128,3 +128,54 @@
 	margin-bottom: $spacer;
 	flex-direction: row-reverse;
 }
+
+.version-date {
+	border-bottom: solid 2px;
+	margin-bottom: 0.7em;
+	margin-top: 0.4rem;
+	:not(:first-child)
+	{
+		margin-top: 0.7em;
+	}
+}
+
+.change-author {
+	margin-bottom: 2px;
+}
+
+.changelog-version > * {
+	margin-left: 2rem;
+}
+
+.version-change {
+	padding-inline-start: 1ch;
+	margin-bottom: 12px;
+	color: darken(white, 20);
+
+	&[data-type="Add"] {
+		list-style-type: "🆕";
+	}
+
+	&[data-type="Fix"] {
+		list-style-type: "🐛";
+	}
+
+	&[data-type="Tweak"] {
+		list-style-type: "⚒️";
+	}
+
+	&[data-type="Remove"] {
+		list-style-type: "❌";
+	}
+}
+
+.version-change::marker {
+	font-size: 24px;
+}
+
+#changelog-output {
+	max-height: 800px;
+	overflow-y: auto;
+	background-color: #16161a;
+	--angle-rect-clip-size: 8px;
+}

assets/ts/changelog.ts

@@ -0,0 +1,82 @@
+// noinspection CssInvalidHtmlTagReference
+
+const changelogUrl = 'https://moon.spacestation14.com/changelog.xml';
+
+export async function fetchChangelog()
+{
+	const response = await fetch(changelogUrl);
+	if (!response.ok)
+	{
+		document.getElementById('changelog-reload-button').hidden = false;
+		return;
+	}
+
+	const parser = new DOMParser();
+	const changelog: XMLDocument = parser.parseFromString(await response.text(), 'text/xml');
+	const versions = changelog.querySelectorAll('item');
+
+
+	let outputHtml = "";
+
+	for (const version of versions)
+	{
+		const date = new Date(Date.parse(version.querySelector('pubDate').innerHTML));
+		const entries = Array.from(version.querySelectorAll('entry'))
+			.map(entry => new ChangelogEntry(entry));
+
+		const versionHtml = versionTemplate(date, entries)
+		outputHtml = outputHtml.concat(versionHtml);
+	}
+	document.getElementById('changelog-output').innerHTML = outputHtml;
+}
+
+// Funny identity tag function for webstorm syntax highlighting in string templates
+const html = (strings: any, ...values: any[]) => String.raw({ raw: strings }, ...values);
+
+const versionTemplate = (date: Date, changes: ChangelogEntry[]) => html`
+        <article class="changelog-version">
+            <h3 class="version-date">${date.toLocaleDateString('en-EN', {})}</h3>
+            ${changes.map(value => changelogTemplate(value)).join('')}
+        </article>
+    `;
+
+const changelogTemplate = (change: ChangelogEntry) => html`
+        <h4 class="change-author">${change.author}</h4>
+        <ul class="version-changes">
+        ${change.changes.map(entry => `<li class="version-change" data-type="${entry.type}">${entry.text}</li>`).join('')}
+        </ul>`;
+
+class ChangelogEntry
+{
+	private _changes = [];
+	private readonly _author: string;
+
+	/**
+	 *
+	 * @param entry
+	 */
+	constructor(entry: Element)
+	{
+		this._author = entry.querySelector('author').innerHTML;
+		const xmlChanges = entry.querySelectorAll('change')
+
+		for (const change of xmlChanges)
+		{
+			this._changes.push({
+				type: change.getAttribute('ss14:type'),
+				text: change.innerHTML
+			});
+		}
+	}
+
+	get author(): string
+	{
+		return this._author;
+	}
+
+	get changes(): any[]
+	{
+		return this._changes;
+	}
+
+}

assets/ts/home.ts

@@ -2,6 +2,7 @@
 import { createApp, reactive } from "./vue/petite-vue.es.js"
 import { whenReady } from "./util.js";
 import { getServerList, ServerStatusData, ServerStatusEntry } from "./hub_api.js";
+import { fetchChangelog } from "./changelog.js";
 
 // Code for the home page.
 
@@ -126,6 +127,7 @@ function setupServerList() {
 whenReady(() => {
 	setupGallery();
 	setupServerList();
+	fetchChangelog();
 });
 
 export {}

layouts/home.html

@@ -105,6 +105,27 @@ <h2>News</h2>
 	</div>
 </div>
 
+<div class="section-shadow">
+	<div class="container section-bg mb-4 py-3 angle-rect optional">
+		<div class="row">
+			<div class="row">
+				<div id="home-posts" class="col-md-12">
+					<div class="mx-3">
+						<h2>Changelogs</h2>
+						<div id="changelog-output" class="angle-rect">
+							<span class="p-3">Loading changelogs</span>
+							<div id="changelog-reload-button" class="d-flex p-3 gap-3">
+								<p>Failed to load changelogs</p>
+								<a class="fancybutton" onclick="fetchChangelog()">Reload</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
 <div class="section-shadow">
 	<div class="container section-bg mb-4 py-3 angle-rect optional">
 		<div class="row">