Merge pull request 'Add email and fix menu scroll bug' (#8) from staging into main

Reviewed-on: #8

.drone.yml

@@ -60,14 +60,13 @@ volumes:
 
 kind: pipeline
 type: kubernetes
-name: deploy
+name: deploy-staging
 
 trigger:
   event:
     - push
   branch:
-    exclude:
-      - main
+    - staging
 
 steps:
 - name: build-publish-image
@@ -83,7 +82,69 @@ steps:
       from_secret: org_docker_username
     password:
       from_secret: org_docker_password
-    dockerfile: Dockerfile
+    dockerfile: staging.Dockerfile
+    repo: dutchellie/${DRONE_REPO_NAME}
+    tags:
+      - ${DRONE_BRANCH}-${DRONE_COMMIT_SHA:0:8}
+      - ${DRONE_BRANCH}-latest
+- name: deploy
+  image: pelotech/drone-helm3
+  settings:
+    mode: upgrade
+    chart: .drone/helm/chart
+    namespace: drone-staging
+    release: ${DRONE_REPO_NAME}-${DRONE_BRANCH}
+    skip_tls_verify: true
+    values_files:
+      - .drone/helm/prod-val.yaml
+    values:
+      - "image=dutchellie/${DRONE_REPO_NAME}:${DRONE_BRANCH}-${DRONE_COMMIT_SHA:0:8}"
+      - "baseURL=staging.quenten.nl"
+      - "name=${DRONE_REPO_NAME}-${DRONE_BRANCH}"
+    kube_api_server:
+      from_secret: org_api_server
+    kube_token:
+      from_secret: org_kube_token
+    kube_certificate:
+      from_secret: org_kube_certificate
+    kube_service_account: drone-deploy
+    dry_run: false
+  depends_on:
+    - build-publish-image
+
+volumes:
+  - name: build
+    temp: {}
+
+---
+
+kind: pipeline
+type: kubernetes
+name: deploy
+
+trigger:
+  event:
+    - push
+  branch:
+    exclude:
+      - main
+      - staging
+
+steps:
+- name: build-publish-image
+  image: plugins/docker
+  privileged: true
+  volumes:
+    - name: build
+      path: /drone/src/build
+  settings:
+    cache_from:
+      "dutchellie/${DRONE_REPO_NAME}:${DRONE_BRANCH}-latest"
+    username:
+      from_secret: org_docker_username
+    password:
+      from_secret: org_docker_password
+    dockerfile: staging.Dockerfile
     repo: dutchellie/${DRONE_REPO_NAME}
     tags:
       - ${DRONE_BRANCH}-${DRONE_COMMIT_SHA:0:8}

.drone/helm/staging-val.yaml

@@ -1,6 +1,5 @@
 baseURL: changemestaging.dutchellie.nl
 name: changeme-staging
-replicas: 2
 containerEnv:
 # - name: APIURL
 #   value: https://api.quenten.nl/api/testing

.gitignore

@@ -6,3 +6,4 @@ node_modules
 .env
 .env.*
 !.env.example
+*.sqlite3

package-lock.json

@@ -725,11 +725,6 @@
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
 		},
-		"node_modules/Base64": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/Base64/-/Base64-1.1.0.tgz",
-			"integrity": "sha512-qeacf8dvGpf+XAT27ESHMh7z84uRzj/ua2pQdJg483m3bEXv/kVFtDnMgvf70BQGqzbZhR9t6BmASzKvqfJf3Q=="
-		},
 		"node_modules/binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -4297,11 +4292,6 @@
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
 		},
-		"Base64": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/Base64/-/Base64-1.1.0.tgz",
-			"integrity": "sha512-qeacf8dvGpf+XAT27ESHMh7z84uRzj/ua2pQdJg483m3bEXv/kVFtDnMgvf70BQGqzbZhR9t6BmASzKvqfJf3Q=="
-		},
 		"binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",

package.json

@@ -4,6 +4,7 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"staging": "vite build --mode staging",
 		"package": "svelte-kit package",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync",

src/components/about/content.svelte

@@ -6,8 +6,8 @@
 </script>
 
 <div>
-	Hi, I am DutchEllie. I am the creator of this website. Thanks for checking it out! I made this
-	website partly to have some project to express myself with and to learn some new skills.
+	Hi, I am Quenten (aka, DutchEllie). I am the creator of this website. Thanks for checking it out! I
+	made this website partly to have some project to express myself with and to learn some new skills.
 	<br />
 	<br />
 	I am a {years} year old person from The Netherlands. I am still a student and I am aspiring to be a
@@ -22,7 +22,16 @@
 		class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500"
 		href="https://dutchellie.nl/DutchEllie/proper-website-2">DutchEllie/proper-website-2</a
 	>.
-	<br>
-	<br>
-	As for other things, here is a list!
+	<br />
+	<br />
+	You can contact me if you want at
+	<a
+		class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500 "
+		href="mailto:contact@quenten.nl">contact@quenten.nl</a
+	>. 
+
+	<br />
+	<br />
+
+	As for other things I like, here is a list!
 </div>

src/components/about/sidebar.svelte

@@ -33,7 +33,7 @@
 						<div class="h-5 w-11/12 bg-indigo-300 rounded-xl" />
 					</div>
 					<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
-						<div class="h-5 w-2/12 bg-indigo-300 rounded-xl" />
+						<div class="h-5 w-3/12 bg-indigo-300 rounded-xl" />
 					</div>
 					<div class="mb-1 h-5 flex-grow rounded-xl">
 						<div class="h-5 w-7/12  rounded-xl" />
@@ -45,7 +45,7 @@
 						<div class="h-5 w-8/12 bg-indigo-300 rounded-xl" />
 					</div>
 					<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
-						<div class="h-5 w-4/12 bg-indigo-300 rounded-xl" />
+						<div class="h-5 w-5/12 bg-indigo-300 rounded-xl" />
 					</div>
 				</div>
 			</ul>

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">
@@ -15,9 +16,10 @@
 	import { onMount } from 'svelte';
 	import { sha256 } from 'js-sha256';
 	import GuestbookEntry from './guestbook/guestbook-entry.svelte';
-	import { page } from '$app/stores';
-import { comment } from 'postcss';
+	import { mode } from '$app/env';
 	
+	//const ApiURL = dev ? 'https://api.quenten.nl/api/testing' : 'https://api.quenten.nl/api';
+	//const ApiURL = import.meta.env.APIURL;
 	let showError = false;
 	let errorTitle = 'Error';
 	let errorMessage = 'Error message';
@@ -30,6 +32,11 @@ import { comment } from 'postcss';
 	let DisplayComments: Comment[];
 	let commentPage = 0;
 	let pageSize = 10;
+
+	const escapeHtml = (unsafe) => {
+		return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+	}
+
 	async function onSubmit(event: SubmitEvent) {
 		// Validation
 		if (name === '' || message === '') {
@@ -58,7 +65,7 @@ import { comment } from 'postcss';
 		};
 
 		const jsonData = JSON.stringify(data);
-		const res = await fetch('https://api.quenten.nl/api/testing/comment', {
+		const res = await fetch(ApiURL + '/comment', {
 			method: 'POST',
 			body: jsonData
 		});
@@ -84,20 +91,20 @@ import { comment } from 'postcss';
 		// Check if in localstorage already
 		let commentLS = localStorage.getItem('comments');
 		let comments: Comment[];
-		if (commentLS === null) {
+		if (commentLS == null) {
 			// Not yet in storage
 			comments = await updateComments();
 			DisplayComments = comments;
 			return;
 		}
 
-		let newHash = await fetch('https://api.quenten.nl/api/testing/commenthash')
+		let newHash = await fetch(ApiURL + '/commenthash')
 			.then((res) => res.text())
 			.then((t) => {
 				return t;
 			});
 		let oldHash = localStorage.getItem('commenthash');
-		if (oldHash != newHash) {
+		if (oldHash?.trim() !== newHash.trim()) {
 			DisplayComments = await updateComments();
 			return;
 		}
@@ -107,7 +114,7 @@ import { comment } from 'postcss';
 
 	async function fetchComments() {
 		let comments: Comment[];
-		comments = await fetch('https://api.quenten.nl/api/testing/comment')
+		comments = await fetch(ApiURL + '/comment')
 			.then((res) => res.json())
 			.then((data) => {
 				return data;
@@ -161,15 +168,15 @@ import { comment } from 'postcss';
 			bind:value={message}
 		/>
 		<button
-			class="bg-blue-100 border-slate-400 border-2 rounded-full py-2 w-fit px-10"
+			class="bg-blue-100 dark:bg-slate-700 border-slate-400 border-2 rounded-full py-2 w-fit px-10"
 			type="submit">Submit</button
 		>
 	</form>
 	<div>
 		{#if DisplayComments != null}
 			<div class="mt-4">
-				<button class="px-5 py-2 bg-slate-400 rounded-xl" on:click={() => {if (commentPage > 0) commentPage -= 1}}>Previous</button>
-				<button class="px-5 py-2 bg-slate-400 rounded-xl" on:click={() => commentPage += 1}>Next Page</button>
+				<button class="px-5 py-2 bg-slate-400 dark:bg-slate-800 dark:ring-slate-400 dark:ring-2 rounded-xl mx-1" on:click={() => {if (commentPage > 0) commentPage -= 1}}>Previous</button>
+				<button class="px-5 py-2 bg-slate-400 dark:bg-slate-800 dark:ring-slate-400 dark:ring-2 rounded-xl mx-1" on:click={() => commentPage += 1}>Next Page</button>
 				<p class="ml-2 mt-1 w-full md:w-max">Current page: {commentPage + 1}</p>
 			</div>
 			{#each DisplayComments.slice(commentPage * pageSize, commentPage * pageSize + pageSize) as c}

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

@@ -1,12 +1,19 @@
 <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 mt-2 break-words">
-	<div class="rounded-t bg-slate-400 grid grid-cols-2 gap-1 min-h-fit  px-3 py-1">
+<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 dark:bg-slate-700 grid grid-cols-2 gap-1 min-h-fit  px-3 py-1">
 		<p class="text-xs">Author: {comment.name}</p>
-		<p class="text-xs">
+		<p class="text-xs text-right">
 			Time:
 			{#if comment.time != null}
 				{new Date(comment.time).toLocaleString('en-US', {dateStyle: 'long', timeStyle: 'short'})}
@@ -15,10 +22,10 @@
 			{/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 ">
+	<div class="px-3 py-2">
 		<p class="">{comment.message}</p>
 	</div>
 </div>

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

@@ -2,10 +2,12 @@
 	import {fly} from "svelte/transition";
 	import {swipe} from "svelte-gestures";
 	import Button from './navbutton.svelte';
+	import { browser } from '$app/env';
 	export /**
 	 * @type {any}
 	 */
 	let open;
+	$: if (browser) document.body.classList[open ? 'add' : 'remove']('overflow-hidden');
 </script>
 
 {#if open}
@@ -20,5 +22,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>

staging.Dockerfile

@@ -0,0 +1,18 @@
+FROM node:18.2.0-alpine
+
+WORKDIR /app
+COPY . .
+RUN npm ci
+RUN npm audit fix
+RUN npm run staging
+
+FROM node:18.2.0-alpine
+
+WORKDIR /app
+COPY --from=0 /app/package*.json ./
+RUN npm ci --ignore-scripts
+RUN npm audit fix
+COPY --from=0 /app/build ./
+
+EXPOSE 3000
+CMD ["node", "./index.js"]

vite.config.js

@@ -2,7 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
 };
 
 export default config;