Refine website

Author: thechnet

index.css

@@ -37,6 +37,10 @@ body {
 	color: var(--color);
 }
 
+main {
+	opacity: 0;
+}
+
 .markdown {
 	box-sizing: border-box;
 	min-width: 200px;
@@ -59,6 +63,7 @@ body {
 	border-bottom: 2px solid var(--separator-color);
 	padding-bottom: 1rem;
 	margin-bottom: 2.5rem;
+	cursor: pointer;
 }
 
 #header img {
@@ -70,10 +75,29 @@ body {
 	display: none;
 	background-color: var(--changes-background-color);
 	font-size: medium;
-	padding: .1rem 1.5rem .5rem 1.5rem;
+	padding: .05rem 1.5rem .5rem 1.5rem;
 	border-radius: .5rem;
 }
 
+#changes-header {
+	height: 3.25rem;
+	display: flex;
+	justify-content: space-between;
+}
+
+#changes-dismiss {
+	font-size: 2rem;
+	font-weight: 200;
+	color: var(--button-background-color);
+	transition: color .1s ease-in-out;
+	padding: .6rem 0 0 0;
+	cursor: pointer;
+}
+
+#changes-dismiss:hover {
+	color: var(--button-background-color-hover);
+}
+
 #abstract {
 	padding-top: 1rem;
 	font-size: 1.5rem;
@@ -142,8 +166,8 @@ footer {
 	text-align: center;
 	font-size: 1rem;
 	opacity: .25;
-	padding-top: 3rem;
-	padding-bottom: 3rem;
+	padding-top: 5.8rem;
+	padding-bottom: .2rem;
 }
 
 footer a {

index.html

@@ -16,17 +16,19 @@
 	<noscript>
 		This website requires JavaScript.
 	</noscript>
-	<main class="markdown">
+	<main id="main" class="markdown">
 
-		<div id="header">
+		<div id="header" onclick="window.location.href = location.pathname;">
 			<img src="extension/img/icon128.png">
 			<span>ADAMatic</span>
 		</div>
 
 		<div id="changes">
-			<h2>Changes in <span id="changes-version"></span></h2>
+			<div id="changes-header">
+				<h2 id="changes-title"></h2>
+				<span id="changes-dismiss" onclick="document.getElementById('changes').style.display = 'none';">&times;</span>
+			</div>
 			<div id="changelog"></div>
-			<a class="secondary" href="https://thechnet.github.io/adamatic">Dismiss</a>
 		</div>
 
 		<div id="abstract"></div>
@@ -38,10 +40,11 @@ <h2>Changes in <span id="changes-version"></span></h2>
 		</div>
 
 		<div id="highlights"></div>
+
+		<footer>
+			&copy; <a href="http://chnet.bplaced.net/">chnet</a>
+		</footer>
 	</main>
-	<footer>
-		&copy; <a href="http://chnet.bplaced.net/">chnet</a>
-	</footer>
 </body>
 
 </html>

index.js

@@ -30,7 +30,10 @@ function parseReadme(text) {
 
 function parseChangelog(text) {
 	let versions = {
-		latest: undefined
+		latest: undefined,
+		unreleased: {
+			lines: []
+		}
 	};
 
 	let lines = text.split('\n');
@@ -41,16 +44,22 @@ function parseChangelog(text) {
 			continue;
 		}
 
+		let unreleasedDeclaration = lines[i].match(/^## \[Unreleased\]/i);
+		if (unreleasedDeclaration) {
+			currentVersion = 'unreleased';
+			continue;
+		}
+
 		let versionDeclaration = lines[i].match(/^## \[(\d+\.\d+\.\d+)\] - (\d{4}-\d{2}-\d{2})$/);
 		if (versionDeclaration) {
-			if (!currentVersion) {
-				versions.latest = versionDeclaration[1];
-			}
 			currentVersion = versionDeclaration[1];
 			versions[currentVersion] = {
 				date: versionDeclaration[2],
 				lines: []
 			};
+			if (!versions.latest) {
+				versions.latest = currentVersion;
+			}
 			continue;
 		}
 
@@ -81,18 +90,26 @@ function renderChanges(text, requestedVersion) {
 		console.error('Requested version not in parsed versions.');
 		return;
 	}
-
-	document.getElementById('changes-version').innerText = requestedVersion;
-
-	document.getElementById('changelog').innerHTML = marked.parse(versions[requestedVersion].lines.join('\n'));
-	document.getElementById('changes').style.display = 'block';
+	
+	if (versions[requestedVersion].lines.length) {
+		document.getElementById('changes-title').textContent = requestedVersion === 'unreleased' ? 'Upcoming Changes' : 'What\'s New in ' + requestedVersion;
+		document.getElementById('changelog').innerHTML = marked.parse(versions[requestedVersion].lines.join('\n'));
+		
+		document.getElementById('changes').style.display = 'block';
+	}
 }
 
 let requestedVersion = new URLSearchParams(window.location.search).get('changes');
 
 async function main() {
 	renderReadme(await (await fetch(FETCH_README)).text());
-	renderChanges(await (await fetch(FETCH_CHANGELOG)).text(), requestedVersion);
+	if (requestedVersion) {
+		renderChanges(await (await fetch(FETCH_CHANGELOG)).text(), requestedVersion);
+	}
+
+	Promise.all(Array.from(document.images).filter(img => !img.complete).map(img => new Promise(resolve => { img.onload = img.onerror = resolve; }))).then(() => {
+		document.getElementById('main').style.opacity = 1;
+	});
 }
 
 main();