Merge pull request 'staging' (#7) from staging into main

Reviewed-on: #7

src/components/galaxies/content.svelte

@@ -0,0 +1,77 @@
+<script>
+	import Galaxy from './galaxy.svelte';
+</script>
+
+<h1
+	class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold h1-shadow"
+>
+	Galaxies
+</h1>
+<p class="mt-4">
+	Hi again, thanks for visiting another one of my pages! This one has all sorts of links to other
+	people their websites. Some of these people are my friends, other websites I have no idea who
+	maintains them. In both cases, I think they are worth sharing, so here we are!
+</p>
+<h2 class="font-semibold mt-5">My friends</h2>
+<Galaxy link="https://forestofunix.xyz">
+	<span slot="title">Forest of Unix</span>
+	<span slot="text"
+		>A website made by Sebastiaan. A massive Linux fanboy, runs Gentoo on his ThinkPad. Absolutely
+		based. His website is written in Lisp, that's why it's often offline. That was the inspiration
+		for the online/offline status text.</span
+	>
+</Galaxy>
+<Galaxy link="https://nymphali.neocities.org/">
+	<span slot="title">Nymphali</span>
+	<span slot="text">
+		The website made by ■■■■■■, whoops Nymphali. They have an awesome minimalist website that's just
+		lovely.
+	</span>
+</Galaxy>
+<Galaxy link="https://kristypixel.neocities.org/">
+	<span slot="title">Kristypixel</span>
+	<span slot="text">
+		Website made by Kristy. Very cute website, I love it! Keep up the awesome work!
+	</span>
+</Galaxy>
+<Galaxy link="https://leftonred.neocities.org/">
+	<span slot="title">Left on Red</span>
+	<span slot="text">
+		Kyu made this website, he's a friend of mine as well! Still very new, but their dark mode design
+		is very cool!
+	</span>
+</Galaxy>
+
+<h2 class="font-semibold mt-5">Other cool websites</h2>
+<p>
+	These websites are not necessarily made by people I know. They are just random websites I have
+	found on the internet or websites from organisations I support.
+</p>
+
+<Galaxy link="https://evillious.ylimegirl.com/">
+	<span slot="title">Evillious Chronicles fan guide</span>
+	<span slot="text">
+		A VERY cool website made by Ylimegirl! They wrote a whole website dedicated to Evillious
+		Chronicles, which is a super good Japanese light novel and vocaloid series!! Definitely look it
+		up!
+	</span>
+</Galaxy>
+<Galaxy link="https://www.gnu.org/">
+	<span slot="title">The GNU Project</span>
+	<span slot="text">
+		The official website of the GNU project. They advocate for free/libre software. This is not to
+		be confused with 'open source' software. I highly recommend you read about them and their
+		efforts.
+	</span>
+</Galaxy>
+
+<style>
+	.h1-shadow {
+		text-shadow: 2px 2px gray;
+		transition: text-shadow 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+	}
+	.h1-shadow:hover {
+		text-shadow: 5px 5px gray;
+		transition: text-shadow 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+	}
+</style>

src/components/galaxies/galaxy.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { ApiURL } from '../misc/guestbook.svelte';
+	export let link = '';
+
+	async function isOnline(link: string) {
+		const res = await fetch(ApiURL + '/checkonline', {
+			method: 'POST',
+			body: JSON.stringify({
+				url: link
+			})
+		})
+			.then((res) => res.json())
+			.then((data) => {
+				return data;
+			});
+
+		if (res.status) {
+			return true;
+		}
+		return false;
+	}
+</script>
+
+<div class="rounded bg-red-100 dark:bg-slate-800 dark:ring-2 dark:ring-slate-400 mt-2 break-words">
+	<div class="rounded-t bg-slate-400 flex dark:bg-slate-700 min-h-fit px-3 py-1">
+		<div class="grow">
+			<a href={link} class="underline underline-offset-1 hover:underline-offset-4"><slot name="title" /></a>
+		</div>
+		<div class="w-fit">
+			{#await isOnline(link)}
+				<span class="text-yellow-300">Waiting</span>
+			{:then status}
+				{#if status}
+					<span class="text-green-400">Online</span>
+				{:else}
+					<span class="text-red-500">Offline</span>
+				{/if}
+			{:catch error}
+				<span class="text-red-500">Error</span>
+			{/await}
+		</div>
+	</div>
+	<div class="px-3 py-2">
+		<p class=""><slot name="text" /></p>
+	</div>
+</div>

src/components/misc/guestbook.svelte

@@ -8,6 +8,7 @@
 		time: string;
 		uuid: string;
 	};
+	export const ApiURL = mode == 'production' ? 'https://api.quenten.nl/api' : 'https://api.quenten.nl/api/testing';
 </script>
 
 <script lang="ts">
@@ -19,7 +20,6 @@
 	
 	//const ApiURL = dev ? 'https://api.quenten.nl/api/testing' : 'https://api.quenten.nl/api';
 	//const ApiURL = import.meta.env.APIURL;
-	const ApiURL = mode == 'production' ? 'https://api.quenten.nl/api' : 'https://api.quenten.nl/api/testing';
 	let showError = false;
 	let errorTitle = 'Error';
 	let errorMessage = 'Error message';

src/components/misc/guestbook/guestbook-entry.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
 	import type { Comment } from '../guestbook.svelte';
 	export let comment: Comment;
+
+	function toLink(s: string) {
+		if (s.startsWith("http")) {
+			return s;
+		} 
+		return "https://" + s;
+	}
 </script>
 
 <div class="rounded bg-red-100 dark:bg-slate-800 dark:ring-2 dark:ring-slate-400 mt-2 break-words">
@@ -15,7 +22,7 @@
 			{/if}
 		</p>
 		{#if comment.website != null}
-			<p class="text-xs col-span-2">Site: {comment.website}</p>
+			<p class="text-xs col-span-2">Site: <a href="{toLink(comment.website)}">{comment.website}</a></p>
 		{/if}
 	</div>
 	<div class="px-3 py-2">

src/components/misc/header.svelte

@@ -20,10 +20,11 @@
 			<p class="text-xs">Surviving the rewriting</p>
 		</div>
 	</div>
-	<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6">
-		<nav class="h-full flex items-end md:col-start-4 md:col-span-2 col-span-7 gap-2 text-md">
+	<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:block ">
+		<nav class="h-full flex items-end w-fit gap-2 md:mx-auto text-md">
 			<Button link="/" text="Home" />
 			<Button link="/about" text="About" />
+			<Button link="/galaxies" text="Galaxies" />
 		</nav>
 	</div>
 	<!-->

src/components/misc/menu.svelte

@@ -20,5 +20,6 @@
 	>
 		<Button link="/" text="Home" />
 		<Button link="/about" text="About" />
+		<Button link="/galaxies" text="Galaxies" />
 	</div>
 {/if}

src/routes/__layout.svelte

@@ -28,10 +28,9 @@
 
 	// Footer stuff
 	/**
-* @type {number}
-*/
+	 * @type {number}
+	 */
 	let footerHeight;
-
 </script>
 
 <div class="-z-20 absolute">
@@ -53,9 +52,15 @@
 	</div>
 	<!-- Footer -->
 	<!-- To make this stick to the bottom, actually make it absolute, instead of fixed -->
-	<div bind:clientHeight={footerHeight} class="bg-slate-100 dark:bg-purple-900 dark:text-pink-50 w-full h-min md:h-10 lg:pl-20 fixed bottom-0">
+	<div
+		bind:clientHeight={footerHeight}
+		class="bg-slate-100 dark:bg-purple-900 dark:text-pink-50 w-full h-min md:h-10 lg:pl-20 fixed bottom-0"
+	>
 		<div class="h-full">
-			<button on:click={onMusicToggle} class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min w-20 mt-1">
+			<button
+				on:click={onMusicToggle}
+				class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min w-20 mt-1"
+			>
 				{#if musicPaused}
 					<span class="font-mono">▶</span>
 					Play

src/routes/galaxies.svelte

@@ -0,0 +1,24 @@
+<script>
+	import Content from '../components/galaxies/content.svelte';
+	import Maincontent from '../components/misc/maincontent.svelte';
+</script>
+
+<svelte:head>
+	<title>Galaxies</title>
+</svelte:head>
+
+<Maincontent>
+	<div
+		class="hidden col-start-1 col-span-1 rounded-xl ml-2 mt-10 lg:flex flex-col justify-start gap-2 p-2"
+	>
+<!-- 		<Sidebar /> -->
+	</div>
+
+	<div class="px-5 md:px-0 md:pl-5 lg:pl-0 col-span-7 md:col-span-6 lg:col-span-5">
+		<Content />
+	</div>
+
+ 	<div class="hidden md:block col-start-7 mt-10 mr-2">
+<!-- 		<Rightbar /> -->
+	</div>
+</Maincontent>