MUSIC MAAAAN

README.md

@@ -2,3 +2,7 @@
 
 I want to test SvelteKit.
 Might want to rewrite my website in it.
+
+## TODOs
+
+- <https://jochemvogel.medium.com/how-to-cache-dynamic-pages-on-demand-with-a-service-worker-in-sveltekit-4b4a7652583d>

src/components/about/content.svelte

@@ -0,0 +1,28 @@
+<script>
+	let dob = new Date('2000-12-01');
+	// @ts-ignore
+	let age = new Date() - dob;
+	let years = Math.floor(age / 1000 / 60 / 60 / 24 / 365);
+</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.
+	<br />
+	<br />
+	I am a {years} year old person from The Netherlands. I am still a student and I am aspiring to be a
+	Cloud Engineer.
+
+	<br />
+	<br />
+	My favorite programming language is Go. It's just so nice. Unfortunately, browsers don't run Go code
+	(or well, they can with WebAssembly) and that's why I had to make this website in JavaScript. I had
+	done this in Go, but it was just too clunky. The results of that can be seen in the Gitea repository
+	<a
+		class="underline text-[#002896] 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!
+</div>

src/components/about/sidebar.svelte

@@ -0,0 +1,60 @@
+<script>
+</script>
+
+<div class="w-full h-full bg-red-100 rounded-xl">
+	<div class="p-3 rounded-t-xl bg-indigo-200">
+		<h1 class="font-semibold">Profile:</h1>
+	</div>
+	<div class="p-2">
+		<p><span class="font-bold">Name: </span>DutchEllie</p>
+		<p><span class="font-bold">Country: </span>The Netherlands</p>
+		<p><span class="font-bold">Occupation: </span>Student</p>
+		<div>
+			<span class="font-bold">Languages:</span>
+			<ul class="grid grid-cols-10 list-none">
+				<div class="col-start-2 col-span-3">
+					<p>🌍</p>
+					<p>Dutch</p>
+					<p>English</p>
+					<p>Japanese</p>
+					<p>💻</p>
+					<p>Go</p>
+					<p>C/C++</p>
+					<p>JS</p>
+				</div>
+				<div class="col-span-5">
+					<div class="mb-1 h-5 flex-grow rounded-xl">
+						<div class="h-5 w-7/12  rounded-xl" />
+					</div>
+					<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
+						<div class="h-5 w-12/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-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>
+					<div class="mb-1 h-5 flex-grow rounded-xl">
+						<div class="h-5 w-7/12  rounded-xl" />
+					</div>
+					<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
+						<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-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>
+				</div>
+			</ul>
+		</div>
+	</div>
+</div>
+
+<style>
+	.break {
+		width: 0;
+	}
+</style>

src/components/homepage/content.svelte

@@ -1,4 +1,6 @@
-<div class="md:pl-10 px-5 md:px-0 col-span-7 md:col-span-6 lg:col-span-5">
+<script>
+</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"
 	>
@@ -48,15 +50,14 @@
 						</a>
 					</li>
 				</ul>
-				<br>
+				<br />
 				<p>
-					This entire project is open source (GPL-3) and the source code is linked above.
-					In addition, a CI/CD pipeline deploys this website on every push.
+					This entire project is open source (GPL-3) and the source code is linked above. In
+					addition, a CI/CD pipeline deploys this website on every push.
 				</p>
 			</div>
 		</div>
 	</div>
-</div>
 
 <!-- How to do the animation and reverse it: https://stackoverflow.com/a/44742399 -->
 <style>

src/components/homepage/rightbar.svelte

@@ -1,17 +1,18 @@
 <script>
-	let img = '/images/literallyme.jpg'
-	let clicked = false
+	let img = '/images/literallyme.jpg';
+	let clicked = false;
 	function cursify() {
 		if (!clicked) {
-			img = '/images/whydidyoudothis.png'
-			clicked = true
+			img = '/images/whydidyoudothis.png';
+			clicked = true;
 		} else {
-			img = '/images/literallyme.jpg'
-			clicked = false
+			img = '/images/literallyme.jpg';
+			clicked = false;
 		}
 	}
 </script>
-<div class="hidden md:block col-start-7 mt-10 mr-2">
+
+	<div class="mt-10 mr-2">
 			<img
 				class="w-auto "
 				src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-len1.webp"
@@ -19,8 +20,7 @@
 			/>
 			<br />
 			<br />
-	<img class="rounded"
-	src="{img}" alt="literally me wink wink" on:click={cursify}/>
+			<img class="rounded" src={img} alt="literally me wink wink" on:click={cursify} />
 			<p class="text-center mt-2">
 				{#if !clicked}
 					yes, i love japanese stuff, how can you tell?

src/components/homepage/sidebar.svelte

@@ -1,6 +1,14 @@
-<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"
->
+<script lang="ts">
+	import CurrentMusicStore from '../../stores/currentMusic';
+	import Musicplayer from '../misc/musicplayer.svelte';
+
+	let newMusicUrl = '';
+
+	function onSubmit() {
+		$CurrentMusicStore.musicUrl = newMusicUrl;
+	}
+</script>
+
 <div class=" shrink">
 	<h2 class="font-semibold text-left mb-2">Special place</h2>
 	<p class="">
@@ -21,4 +29,7 @@
 		alt="Amane Kanata"
 	/>
 </div>
-</div>
+<form on:submit|preventDefault={onSubmit}>
+	<input type="text" name="musicurl" placeholder="URL" bind:value={newMusicUrl} />
+	<button type="submit">Submit</button>
+</form>

src/components/misc/menu.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Button from '../components/navbutton.svelte';
+	import Button from './navbutton.svelte';
 	export /**
 	 * @type {any}
 	 */

src/components/misc/musicplayer.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import CurrentMusicStore from '../../stores/currentMusic';
+
+	$: musicUrl = $CurrentMusicStore.musicUrl;
+
+</script>
+
+<audio src={musicUrl} bind:paused={$CurrentMusicStore.paused}/>

src/components/misc/musicselectionmodal.svelte

@@ -0,0 +1,52 @@
+<script>
+	import CurrentMusicStore from '../../stores/currentMusic';
+	import musicStore from '../../stores/musicStore';
+
+	export let show = false;
+
+	/**
+	 * @type {{ musicTitle: string; musicUrl: string; musicArtist: string; }[]}
+	 */
+	let musicSelection = $musicStore;
+	const sleep = (/** @type {number | undefined} */ ms) => new Promise((r) => setTimeout(r, ms));
+	/**
+	 * @param {{ musicTitle: string; musicUrl: string; musicArtist: string; }} v
+	 */
+	async function setSong(v) {
+		$CurrentMusicStore.musicArtist = v.musicArtist;
+		$CurrentMusicStore.musicTitle = v.musicTitle;
+		$CurrentMusicStore.musicUrl = v.musicUrl;
+		// THIS IS SUCH A DUMB WORKAROUND!!!!
+		// WITHOUT THIS, THE VALUE OF FALSE IS NEVER REASSIGNED AND THE MUSIC WILL NEVER START PLAYING!!!
+		$CurrentMusicStore.paused = true;
+		await sleep(10);
+		$CurrentMusicStore.paused = false;
+	}
+</script>
+
+{#if show}
+	<div
+		on:click={() => {
+			show = !show;
+		}}
+		class="h-screen w-screen bg-opacity-60 bg-black fixed top-0 left-0 z-10 py-20 "
+	>
+		<div class="h-full w-3/4 bg-red-100 mx-auto rounded-xl overflow-auto pb-3">
+			<div class="w-full bg-indigo-200 rounded-t-xl p-3">
+				<span>Music Selection</span>
+			</div>
+			<div class="grid grid-cols-1 lg:grid-cols-2">
+				{#each musicSelection as v}
+					<ul
+						on:click={() => {
+							setSong(v);
+						}}
+						class="ml-3 mt-3 hover:cursor-pointer underline shadow-lg hover:shadow-xl w-max bg-indigo-100 p-2 rounded-md"
+					>
+						{v.musicArtist} - {v.musicTitle}
+					</ul>
+				{/each}
+			</div>
+		</div>
+	</div>
+{/if}

src/components/misc/navbutton.svelte

@@ -4,7 +4,7 @@
 	export let text = '';
 </script>
 
-<a href="{link}">
+<a href="{link}" class="">
 <button class="{$page.url.pathname == link ? "active-now" : ""} text-murasaki md:text-xl py-2 px-4 font-montserrat font-semibold link-underline">
 	{text}
 </button>
@@ -24,6 +24,7 @@
 	.link-underline {
 		display: inline-block;
 		position: relative;
+		z-index: 0;
 	}
 
 	.link-underline:after {
@@ -37,11 +38,13 @@
 		background-color: #421727;
 		transform-origin: bottom right;
 		transition: transform 0.25s ease-out;
+		z-index: 0;
 	}
 
 	.link-underline:hover:after {
 		transform: scaleX(1);
 		transform-origin: bottom left;
 		background-color: #421727;
+		z-index: 0;
 	}
 </style>

src/routes/__layout.svelte

@@ -1,14 +1,60 @@
 <script>
 	import '../app.css';
-	import Header from '../components/header.svelte';
-	import AlertHeader from '../components/alert-header.svelte';
+	import Header from '../components/misc/header.svelte';
+	import AlertHeader from '../components/misc/alert-header.svelte';
+	import Musicplayer from '../components/misc/musicplayer.svelte';
+	import CurrentMusicStore from '../stores/currentMusic';
+	import Musicselectionmodal from '../components/misc/musicselectionmodal.svelte';
+	import musicStore from '../stores/musicStore';
+
+	$: musicPaused = $CurrentMusicStore.paused;
+	$: musicTitle = $CurrentMusicStore.musicTitle;
+	$: musicArtist = $CurrentMusicStore.musicArtist;
+	$: musicUrl = $CurrentMusicStore.musicUrl;
+
+	function onMusicToggle() {
+		if (musicUrl == '') {
+			$CurrentMusicStore.musicTitle = $musicStore[0].musicTitle;
+			$CurrentMusicStore.musicArtist = $musicStore[0].musicArtist;
+			$CurrentMusicStore.musicUrl = $musicStore[0].musicUrl;
+		}
+
+		$CurrentMusicStore.paused = !$CurrentMusicStore.paused
+		return;
+	}
+
+	// Modal stuff
+	let modalShow = false;
 </script>
 
+<div class="-z-20 absolute">
+	<Musicplayer />
+</div>
 <div
 	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki overflow-auto"
 >
+	<!-- modal -->
+	<Musicselectionmodal bind:show={modalShow} />
 	<!-- Possible alert header -->
 	<!--<AlertHeader text='ALERT'/>-->
+	<div class="bg-slate-100 w-full h-min md:h-10 lg:pl-20">
+		<button on:click={onMusicToggle} class="bg-white border-black border rounded h-min w-20">
+			{#if musicPaused}
+				<span class="font-mono">▶</span>
+				Play
+			{:else}
+				<span class="font-mono ">⏸&#xFE0E;</span>
+				Pause
+			{/if}
+		</button>
+		<button class="bg-white border-black border rounded h-min"
+			on:click={() => {
+				modalShow = !modalShow;
+			}}>Show music selection</button
+		>
+		<br class="block md:hidden">
+		<span>Current song: {musicArtist} - {musicTitle}</span>
+	</div>
 	<!-- Header -->
 	<Header />
 	<!-- Main content -->

src/routes/about.svelte

@@ -1,5 +1,50 @@
+<script>
+	import Maincontent from '../components/misc/maincontent.svelte';
+	import Content from '../components/about/content.svelte';
+	import Sidebar from '../components/about/sidebar.svelte';
+</script>
+
 <svelte:head>
 	<title>About</title>
 </svelte:head>
 
-About page
+<Maincontent>
+	<div
+		class="col-start-1 col-span-7 sm:col-span-5 md:col-span-3 lg:col-span-2 rounded-xl mt-5 sm:flex flex-col justify-start gap-2 p-2"
+	>
+		<Sidebar />
+	</div>
+
+	<div class="px-5 sm:px-0 sm:pr-5 lg:pr-0 sm:mt-10 col-span-7 sm:col-span-2 md:col-span-4 lg:col-span-3 ">
+		<Content />
+	</div>
+
+	<div class="px-2 col-span-7">
+
+	<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 rounded-xl p-3 gap-y-5">
+		<ul class="list-disc ml-4">
+			<p class="font-bold">Music</p>
+			<li>Hatsune Miku</li>
+			<li>Amane Kanata</li>
+			<li>Mothy/Akuno-p</li>
+		</ul>
+		<ul class="list-disc ml-4">
+			<p class="font-bold">TV</p>
+			<li>Game of Thrones</li>
+			<li>Avatar the Last Airbender</li>
+		</ul>
+		<ul class="list-disc ml-4">
+			<p class="font-bold">VTubers</p>
+			<li>Momosuzu Nene</li>
+			<li>Amane Kanata</li>
+			<li>Petra Gurin</li>
+			<li>Ninomae Ina'nis</li>
+		</ul>
+		<ul class="list-disc ml-4">
+			<p class="font-bold">Food</p>
+			<li>Spaghetti</li>
+			<li>Steak!</li>
+		</ul>
+	</div>
+	</div>
+</Maincontent>

src/routes/index.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Content from '../components/homepage/content.svelte';
 	import Sidebar from '../components/homepage/sidebar.svelte';
-	import Maincontent from '../components/maincontent.svelte';
+	import Maincontent from '../components/misc/maincontent.svelte';
 	import Rightbar from '../components/homepage/rightbar.svelte';
 </script>
 
@@ -10,7 +10,18 @@ import Sidebar from '../components/homepage/sidebar.svelte';
 </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>

src/stores/currentMusic.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+
+const CurrentMusicStore = writable({
+	musicUrl: '',
+	musicTitle: '',
+	musicArtist: '',
+	paused: true,
+});
+
+export default CurrentMusicStore;

src/stores/musicStore.js

@@ -0,0 +1,46 @@
+import { readable } from "svelte/store";
+
+const musicStore = readable([
+	{
+		musicTitle: "I'm glad you're evil too (feat. Hatsune Miku)",
+		musicUrl: "/music/im-glad-youre-evil-too.m4a",
+		musicArtist: "PinocchioP",
+	},
+	{
+		musicTitle: "God-ish (神っぽいな) feat. Hatsune Miku",
+		musicArtist: "PinocchioP",
+		musicUrl: "/music/godish.m4a",
+	},
+	{
+		musicTitle: "Servant of Evil (悪ノ召使) feat. Kagamine Len",
+		musicArtist: "Mothy / Akuno-p",
+		musicUrl: "/music/servant-of-evil.m4a"
+	},
+	{
+		musicTitle: "Tokusya-Seizon Wonder-la-der!!",
+		musicArtist: "Amane Kanata",
+		musicUrl: "/music/Tokusya-Seizon Wonder-la-der!!.mp3"
+	},
+	{
+		musicTitle: "Kegarenaki Barajuuji",
+		musicArtist: "Ariabl'eyeS",
+		musicUrl: "/music/kegarenaki-barajuuji.mp3"
+	},
+	{
+		musicTitle: "-ERROR (Cover)",
+		musicArtist: "Tokoyami Towa",
+		musicUrl: "/music/error-towa.mp3"
+	},
+	{
+		musicTitle: "Diamond City Lights",
+		musicArtist: "LazuLight",
+		musicUrl: "/music/diamond-city-lights-lazulight.opus"
+	},
+	{
+		musicTitle: "TSUNAMI",
+		musicArtist: "Finana Ryugu",
+		musicUrl: "/music/tsunami-finana.opus"
+	}
+]);
+
+export default musicStore;

svelte.config.js

@@ -11,8 +11,8 @@ const config = {
 		}),
 	],
 	kit: {
-		adapter: adapter()
-	}
+		adapter: adapter(),
+	},
 };
 
 export default config;