.drone.yml

@@ -58,66 +58,6 @@ volumes:
 
 ---
 
-kind: pipeline
-type: kubernetes
-name: deploy-staging
-
-trigger:
-  event:
-    - push
-  branch:
-    - 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_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
@@ -128,7 +68,6 @@ trigger:
   branch:
     exclude:
       - main
-      - staging
 
 steps:
 - name: build-publish-image
@@ -144,7 +83,7 @@ steps:
       from_secret: org_docker_username
     password:
       from_secret: org_docker_password
-    dockerfile: staging.Dockerfile
+    dockerfile: Dockerfile
     repo: dutchellie/${DRONE_REPO_NAME}
     tags:
       - ${DRONE_BRANCH}-${DRONE_COMMIT_SHA:0:8}

.drone/helm/staging-val.yaml

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

.gitignore

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

package-lock.json

@@ -725,6 +725,11 @@
 			"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",
@@ -4292,6 +4297,11 @@
 			"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,7 +4,6 @@
 	"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 Quenten (aka, DutchEllie). I am the creator of this website. Thanks for checking it out! I
+	Hi, I am DutchEllie. I am the creator of this website. Thanks for checking it out! I made this
-	made this website partly to have some project to express myself with and to learn some new skills.
+	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,16 +22,7 @@
 		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>
-	<br />
+	<br>
-	You can contact me if you want at
+	As for other things, here is a list!
-	<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-3/12 bg-indigo-300 rounded-xl" />
+						<div class="h-5 w-2/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-5/12 bg-indigo-300 rounded-xl" />
+						<div class="h-5 w-4/12 bg-indigo-300 rounded-xl" />
 					</div>
 				</div>
 			</ul>

src/components/galaxies/content.svelte

@@ -1,77 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-<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,7 +8,6 @@
 		time: string;
 		uuid: string;
 	};
-	export const ApiURL = mode == 'production' ? 'https://api.quenten.nl/api' : 'https://api.quenten.nl/api/testing';
 </script>
 
 <script lang="ts">
@@ -16,10 +15,9 @@
 	import { onMount } from 'svelte';
 	import { sha256 } from 'js-sha256';
 	import GuestbookEntry from './guestbook/guestbook-entry.svelte';
-	import { mode } from '$app/env';
+	import { page } from '$app/stores';
+import { comment } from 'postcss';
 
-	//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';
@@ -32,11 +30,6 @@
 	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 === '') {
@@ -65,7 +58,7 @@
 		};
 
 		const jsonData = JSON.stringify(data);
-		const res = await fetch(ApiURL + '/comment', {
+		const res = await fetch('https://api.quenten.nl/api/testing/comment', {
 			method: 'POST',
 			body: jsonData
 		});
@@ -91,20 +84,20 @@
 		// 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(ApiURL + '/commenthash')
+		let newHash = await fetch('https://api.quenten.nl/api/testing/commenthash')
 			.then((res) => res.text())
 			.then((t) => {
 				return t;
 			});
 		let oldHash = localStorage.getItem('commenthash');
-		if (oldHash?.trim() !== newHash.trim()) {
+		if (oldHash != newHash) {
 			DisplayComments = await updateComments();
 			return;
 		}
@@ -114,7 +107,7 @@
 
 	async function fetchComments() {
 		let comments: Comment[];
-		comments = await fetch(ApiURL + '/comment')
+		comments = await fetch('https://api.quenten.nl/api/testing/comment')
 			.then((res) => res.json())
 			.then((data) => {
 				return data;
@@ -168,15 +161,15 @@
 			bind:value={message}
 		/>
 		<button
-			class="bg-blue-100 dark:bg-slate-700 border-slate-400 border-2 rounded-full py-2 w-fit px-10"
+			class="bg-blue-100 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 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 rounded-xl" 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>
+				<button class="px-5 py-2 bg-slate-400 rounded-xl" 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,19 +1,12 @@
 <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">
+<div class="rounded bg-red-100 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">
+	<div class="rounded-t bg-slate-400 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 text-right">
+		<p class="text-xs">
 			Time:
 			{#if comment.time != null}
 				{new Date(comment.time).toLocaleString('en-US', {dateStyle: 'long', timeStyle: 'short'})}
@@ -22,10 +15,10 @@
 			{/if}
 		</p>
 		{#if comment.website != null}
-			<p class="text-xs col-span-2">Site: <a href="{toLink(comment.website)}">{comment.website}</a></p>
+			<p class="text-xs col-span-2">Site: {comment.website}</p>
 		{/if}
 	</div>
-	<div class="px-3 py-2">
+	<div class="px-3 ">
 		<p class="">{comment.message}</p>
 	</div>
 </div>

src/components/misc/header.svelte

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

src/components/misc/menu.svelte

@@ -2,12 +2,10 @@
 	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}
@@ -22,6 +20,5 @@
 	>
 		<Button link="/" text="Home" />
 		<Button link="/about" text="About" />
-		<Button link="/galaxies" text="Galaxies" />
 	</div>
 {/if}

src/routes/__layout.svelte

@@ -28,9 +28,10 @@
 
 	// Footer stuff
 	/**
-	 * @type {number}
+* @type {number}
-	 */
+*/
 	let footerHeight;
+
 </script>
 
 <div class="-z-20 absolute">
@@ -52,15 +53,9 @@
 	</div>
 	<!-- Footer -->
 	<!-- To make this stick to the bottom, actually make it absolute, instead of fixed -->
-	<div
+	<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">
-		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
+			<button on:click={onMusicToggle} class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min w-20 mt-1">
-				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

@@ -1,24 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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;