@turnipxenon/pineapple 2.4.43 → 2.4.45

package/src/lib/template/seaweed/entries/FullStackC.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import Card from "$pkg/components/Card.svelte";
+	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
+
+	// noinspection JSUnusedGlobalSymbols
+	export let props: EntryProps;
+</script>
+
+<Card>
+	<section class="project-card" slot="content">
+		<div class="project-card-body">
+			<h2>Full-stack <span class="qt-c">C</span> app</h2>
+
+			<p>
+				A terminal-based app consisting of a server observing several terminal apps all concurrently
+				sending updates to the server, which then broadcasts these information concurrently to all the
+				other terminal apps connected.
+			</p>
+			<p>
+				The project involves <span class="qt-foundation">multiprocessing</span> programming featuring pthreads and
+				mutexes, and <span class="qt-foundation">networking</span> via sockets.
+			</p>
+
+			<section class="game-link-section">
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment02/DESIGN.md"
+				        on:click={() => window.open("https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment02/DESIGN.md")}>
+					<img src={GithubIcon} class="long-btn-image" alt="github icon">
+				</button>
+			</section>
+		</div>
+	</section>
+</Card>
+

package/src/lib/template/seaweed/entries/Hepcat.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { EntryProps } from "./EntryProps";
+	import HeaderHepCat from "$pkg/assets/temp/header-hep-cat.mp4";
+	import BitbucketIcon from "$pkg/assets/icons/bitbucket-icon.svg";
+	import { ItchLogoHotLink } from "$pkg/consts";
+	import Card from "$pkg/components/Card.svelte";
+
+	export let props: EntryProps;
+</script>
+
+<Card>
+	<section class="game-card" slot="content">
+		<!-- todo: move the image crop a bit lower -->
+		<video playsinline autoplay muted loop preload="none" id="hepcat-video">
+			<source src={HeaderHepCat} type="video/mp4">
+		</video>
+
+		<section class="game-card-body">
+
+			<h1>Hepcat</h1>
+
+			<blockquote>
+				"Cats, Jazz, and a little bit of Death. What more could anyone ask for?"
+			</blockquote>
+
+
+			<p>This is a course project made by a team of six for <a
+				href="https://sites.google.com/ualberta.ca/cmput250/">CMPUT 250</a>, and it won <a
+				href="https://webdocs.cs.ualberta.ca/~nathanst/certificate/">Game of the year.</a>
+			</p>
+
+			<p>
+				Hep Cat is a rhythm game made in <a
+				href="https://www.rpgmakerweb.com/products/programs/rpg-maker-mv" target="_blank" class="qt-rpgmaker">
+				RPG Maker MV</a> with the help of additional custom-made <span class="qt-js">Javascript</span> plugins. I
+				wrote the rhythm game plugin's framework. For this plugin to work, I
+				had to write a <span class="qt-python">Python</span> script that parses osu! files into readable JSON
+				files.
+			</p>
+
+
+			<section class="game-link-section">
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://bitbucket.org/egginchicken/hep-cat/src/master/"
+				        on:click={()=> window.open("https://bitbucket.org/egginchicken/hep-cat/src/master/")}>
+					<img alt="bitbucket icon" src={BitbucketIcon}>
+				</button>
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://just-a-phantom.itch.io/hep-cat"
+				        on:click={()=> window.open("https://just-a-phantom.itch.io/hep-cat")}>
+					<img alt="itch.io icon" src={ItchLogoHotLink}>
+				</button>
+			</section>
+		</section>
+	</section>
+</Card>

package/src/lib/template/seaweed/entries/ItchPromo.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import { ItchLogoHotLink } from "$pkg/consts";
+	import Card from "$pkg/components/Card.svelte";
+
+	export let props: EntryProps;
+</script>
+<Card overrideStyle="align-self: flex-start;">
+	<section class="game-card itch-promo" slot="content">
+		<h1 class="mb-12 text-center">Check out my itch.io page for more games</h1>
+
+		<section class="game-link-section">
+			<button type="button" class="btn variant-filled-primary turnip-button"
+			        role="link"
+			        title="https://turnipxenon.itch.io/"
+			        on:click={() => window.open("https://turnipxenon.itch.io/")}>
+				<img src={ItchLogoHotLink} class="long-btn-image" alt="itch icon">
+				<span>TurnipXenon</span>
+			</button>
+		</section>
+
+	</section>
+</Card>

package/src/lib/template/seaweed/entries/MigranteAlberta.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import Chip from "$pkg/components/Chip.svelte";
+	import { type EntryProps } from "./EntryProps";
+	import LinkIcon from "$pkg/assets/icons/link-icon.svg";
+	import Card from "$pkg/components/Card.svelte";
+	import type { ModalSettings } from "@skeletonlabs/skeleton";
+	import { getModalStore } from "@skeletonlabs/skeleton";
+
+	export let props: EntryProps;
+
+	const modalStore = getModalStore();
+	const cmput401Info: ModalSettings = {
+		type: "confirm",
+		title: "Information",
+		body: "As a full disclosure, this link will lead you to <a href='https://cmput401.ca/projects/e5b13586-09c7-4ddd-baf6-fdb078d23398' target='_blank'>" +
+			"https://cmput401.ca/projects/e5b13586-09c7-4ddd-baf6-fdb078d23398</a>. " +
+			"We currently don't have any tests yet ensuring that the link is correct. " +
+			`Click confirm to go to the site. Please report any bugs at <a href='mailto:${props.email}' target='_blank'>` +
+			`${props.email}</a>.`,
+		response: (r: boolean) => {
+			if (r) {
+				window.open("https://cmput401.ca/projects/e5b13586-09c7-4ddd-baf6-fdb078d23398");
+			}
+		}
+	};
+</script>
+<Card>
+	<section class="project-card" slot="content">
+		<iframe id="migrante-alberta"
+		        width="560" height="315" src="https://www.youtube.com/embed/ZemWwf8jh8E?si=RZwSfYHI-0Ael-RE"
+		        title="YouTube video player" style="border: none"
+		        allowfullscreen></iframe>
+		<div class="project-card-body">
+			<!-- todo: add regression to see if page is gone: https://cmput401.ca/api/projects/e5b13586-09c7-4ddd-baf6-fdb078d23398 -->
+
+			<h2>Migrante Alberta</h2>
+			<p>We developed a mobile-first cross-platform application to be used by the Canadian-based
+				Filipino non-profit advocacy group, Migrante Alberta, to help new immigrants navigate
+				through local services and events
+			</p>
+			<p>
+				<Chip>Flutter</Chip>
+				<Chip>Dart</Chip>
+				<Chip>Python</Chip>
+				<Chip>Django</Chip>
+				<Chip>Heroku</Chip>
+				<Chip>Android</Chip>
+				<Chip>Postgresql</Chip>
+			</p>
+
+			<section class="game-link-section">
+				<button type="button" class="btn variant-filled-primary turnip-button"
+				        title="https://selk.io/birb-project/trunk/"
+				        on:click={() => modalStore.trigger(cmput401Info)}>
+					<img src={LinkIcon} class="long-btn-image" alt="itch icon">
+					<span>cmput401.ca</span>
+				</button>
+			</section>
+
+		</div>
+	</section>
+</Card>

package/src/lib/template/seaweed/entries/MockUberApp.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import Card from "$pkg/components/Card.svelte";
+	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
+	import WindowSetGraph from "$pkg/assets/others/window-set.png";
+	import ThisWebsiteFootage from "$pkg/assets/others/seaweed-showcase.mp4";
+	import Chip from "$pkg/components/Chip.svelte";
+
+	// noinspection JSUnusedGlobalSymbols
+	export let props: EntryProps;
+</script>
+
+<Card>
+	<section class="project-card" slot="content">
+		<div class="project-card-body">
+			<h2>Mock Uber App</h2>
+
+			<p>A course project app meant to emulate how Uber works by playing with <span
+				class="qt-google">Google Maps API</span>.
+			</p>
+			<p>
+				I implemented all interfaces related to the NoSQL cloud database <span
+				class="qt-firebase qt-google qt-infra">Firebase</span>, making writing code easier for other programmers
+				(<span
+				class="qt-android">Android</span> / <span class="qt-java">Java</span>). I also wrote documentation to said
+				code and added instrumented tests that are tested by the continuous integration tool <span
+				class="qt-infra">Travis CI</span>, ensuring that our code is tested
+			</p>
+
+			<section class="game-link-section">
+				<!-- todo: mock uber app find link -->
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://github.com/CMPUT301W20T10/UberApp"
+				        on:click={() => window.open("https://github.com/CMPUT301W20T10/UberApp")}>
+					<img src={GithubIcon} class="long-btn-image" alt="github icon">
+				</button>
+			</section>
+		</div>
+	</section>
+</Card>

package/src/lib/template/seaweed/entries/Pengi.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import HeaderPengi from "$pkg/assets/temp/header-pengi.mp4";
+	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
+	import { ItchLogoHotLink } from "$pkg/consts";
+	import Card from "$pkg/components/Card.svelte";
+
+	export let props: EntryProps;
+</script>
+
+<Card>
+	<section class="game-card" slot="content">
+		<video playsinline autoplay muted loop preload="none">
+			video unavailable. original video contains pengi gameplay showing the dynamic dialog
+			layout and character animation.
+			<source src={HeaderPengi} type="video/mp4">
+		</video>
+
+		<section class="game-card-body">
+
+			<h1>Pengi</h1>
+
+			<blockquote>
+				Well well, quite the dreamer, aren’t you? Might be hard to get in... costs a lot of
+				money...
+			</blockquote>
+
+			<p>
+				Pengi is a text-based adventure made in <span class="qt-unity">Unity</span>. I acted as the sole
+				programmer for the team. Most of the work revolves around UI and creating <a
+				href="https://yarnspinner.dev/" target="_blank">YarnSpinner</a> commands for writers
+				to use to create expressive stage directions in the script.
+			</p>
+
+			<section class="game-link-section">
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://github.com/GreenTea-M/ProjectPengi"
+				        on:click={()=> window.open("https://github.com/GreenTea-M/ProjectPengi")}>
+					<img alt="github icon" src={GithubIcon}>
+				</button>
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://turnipxenon.itch.io/pengi"
+				        on:click={()=> window.open("https://turnipxenon.itch.io/pengi")}>
+					<img alt="itch.io icon" src={ItchLogoHotLink}>
+				</button>
+			</section>
+		</section>
+	</section>
+</Card>

package/src/lib/template/seaweed/entries/Soulwork.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import HeaderSoulwork from "$pkg/assets/temp/header-soulwork.mp4";
+	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
+	import { ItchLogoHotLink } from "$pkg/consts";
+	import Card from "$pkg/components/Card.svelte";
+
+	export let props: EntryProps;
+</script>
+
+<Card>
+	<section class="game-card" slot="content">
+		<video playsinline autoplay muted loop preload="none">
+			<source src={HeaderSoulwork} type="video/mp4">
+		</video>
+		<section class="game-card-body">
+
+			<h1>Soulwork</h1>
+
+			<p>
+				Soulwork is a 2D platforming game that uses unique physics to solve puzzle-based levels.
+				This project is a Time to Game Jam entry, restricting game development to be under 48
+				hours.
+			</p>
+			<p>
+				I helped make the level designing tools used by the designers to drag-and-drop objects
+				on the stage. I also helped program the unique physics-based gameplay mechanic. This was
+				was made in <span class="qt-unity">Unity</span> written using <span class="qt-cs">C#</span>.
+			</p>
+
+
+			<section class="game-link-section">
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://github.com/Zeyu-Li/Clockwork"
+				        on:click={()=> window.open("https://github.com/Zeyu-Li/Clockwork")}>
+					<img alt="github icon" src={GithubIcon}>
+				</button>
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331"
+				        on:click={()=> window.open("https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331")}>
+					<img alt="itch.io icon" src={ItchLogoHotLink}>
+				</button>
+			</section>
+		</section>
+	</section>
+</Card>

package/src/lib/template/seaweed/entries/ThisWebpage.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import Card from "$pkg/components/Card.svelte";
+	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
+	import WindowSetGraph from "$pkg/assets/others/window-set.png";
+	import ThisWebsiteFootage from "$pkg/assets/others/seaweed-showcase.mp4";
+	import Chip from "$pkg/components/Chip.svelte";
+
+	// noinspection JSUnusedGlobalSymbols
+	export let props: EntryProps;
+</script>
+
+<Card>
+	<section class="project-card" slot="content">
+
+		<video playsinline autoplay muted loop preload="none">
+			<source src={ThisWebsiteFootage} type="video/mp4">
+			video unavailable. original video contains clips of this website being resized and light-dark mode being
+			toggled.
+		</video>
+		<div class="project-card-body">
+			<h2>This webpage!</h2>
+
+			<p>
+				The webpage is made of two parts. The webpage that has the content for everything here, I've
+				lovingly called Seaweed. I kept seaweed as a private package. On the other hand, the base package which I
+				want to use for all spin offs of my websites is called Pineapple and have kept that codebase public.
+			</p>
+
+			<p>
+				<Chip>Svelte</Chip>
+				<Chip>Skeleton (Svelte UI library)</Chip>
+				<Chip>Typescript</Chip>
+				<Chip>Vercel</Chip>
+				<Chip>YarnSpinner</Chip>
+			</p>
+
+			<section class="game-link-section">
+				<button type="button" class="btn variant-filled-primary turnip-button"
+				        role="link"
+				        title="https://github.com/TurnipXenon/pineapple"
+				        on:click={() => window.open("https://github.com/TurnipXenon/pineapple")}>
+					<img src={GithubIcon} class="long-btn-image" alt="github icon">
+				</button>
+			</section>
+		</div>
+	</section>
+</Card>

package/src/lib/template/seaweed/entries/Workset.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import Card from "$pkg/components/Card.svelte";
+	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
+	import WindowSetGraph from "$pkg/assets/others/window-set.png";
+
+	// noinspection JSUnusedGlobalSymbols
+	export let props: EntryProps;
+</script>
+
+<Card>
+	<section class="project-card" slot="content">
+		<img
+			alt="A graph that visualizes the number of memory pages made by Quicksort cached within the window set as
+						time goes by. The trend appears to look like a damping harmonic motion that does not go below the zero line. More
+						details include the data size being 200000 entries, each data point skips 1060174 data points, with a
+						page size of 4096 bytes, and window size of 100000 bytes."
+			src={WindowSetGraph} />
+		<div class="project-card-body">
+			<h2>Working set simulation</h2>
+
+			<p>
+				A <span class="qt-c">C</span> program that simulates the working set model based on the output of memory
+				addresses
+				<span class="qt-valgrind">valgrind</span> detects as being accessed by a program being ran. It's
+				implemented using a nested hashmap <span class="qt-foundation">data structure</span> implemented from
+				scratch. The working set is the collection of memory pages referenced by a program within a certain time
+				frame. It comes with a report analyzing and benchmarking how memory allocation, between sorting <span
+				class="qt-foundation">algorithms</span> heapsort, quicksort, and radixsort, is affected by the window set
+				size, page size, and their input size.
+			</p>
+
+			<section class="game-link-section">
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/REPORT.pdf"
+				        on:click={() => window.open("https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/REPORT.pdf")}>
+					<img src={GithubIcon} class="long-btn-image" alt="github icon">
+					<span>Benchmark report</span>
+				</button>
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/DESIGN.md"
+				        on:click={() => window.open("https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/DESIGN.md")}>
+					<img src={GithubIcon} class="long-btn-image" alt="github icon">
+					<span>Design</span>
+				</button>
+			</section>
+		</div>
+	</section>
+</Card>

package/src/lib/template/seaweed/entry_order_config/EntryOrderConfig.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import {
+		type EntryGroup,
+		GetAllEntryFromGlobal,
+		GetEntryFromGlobal,
+		type SeaweedTemplateData,
+		seaweedTemplateData
+	} from "$pkg/template/seaweed/SeaweedTemplateData";
+	import type { ComponentType } from "svelte";
+	import { removeProxyWrapperOnString } from "./EntryOrderConfig";
+	import ComboBoxWithButton from "$pkg/components/combo_box/ComboBoxWithButton.svelte";
+
+	export let seaweedEntries: EntryGroup[];
+	export let orderUrl: string;
+	export let updateUrl: (data: SeaweedTemplateData) => void;
+
+	const updateOrderQuery = () => {
+		orderUrl = "order=" + seaweedEntries.map(g => {
+			const groupUrl = g.items.map(
+				e => removeProxyWrapperOnString(e.name)
+			).join("|");
+			return `${g.name}:${groupUrl}:${g.gridClass}`;
+		}).join(",");
+		updateUrl(seaweedTemplateData);
+	};
+
+	const addEntry = (group: EntryGroup): ((selected: string) => void) => {
+		return (selected: string) => {
+			const c = GetEntryFromGlobal(selected);
+			console.log(selected, c);
+			if (c) {
+				group.items.push(c);
+				seaweedEntries = seaweedEntries;
+				updateOrderQuery();
+			}
+		};
+	};
+	const swapEntry = (index: number, group: EntryGroup, shouldDecrement: boolean): (() => void) => {
+		return () => {
+			let newIndex = index;
+			if (shouldDecrement && index >= 1) {
+				newIndex--;
+			} else if (!shouldDecrement && index <= group.items.length - 2) {
+				newIndex++;
+			} else {
+				return;
+			}
+			console.log(index, newIndex);
+
+			const tempVar = group.items[newIndex];
+			group.items[newIndex] = group.items[index];
+			group.items[index] = tempVar;
+			seaweedEntries = seaweedEntries;
+			updateOrderQuery();
+		};
+	};
+	const swapGroups = (index: number, shouldDecrement: boolean): (() => void) => {
+		return () => {
+			let newIndex = index;
+			if (shouldDecrement && index >= 1) {
+				newIndex--;
+			} else if (!shouldDecrement && index <= seaweedEntries.length - 2) {
+				newIndex++;
+			} else {
+				return;
+			}
+
+			const tempVar = seaweedEntries[newIndex];
+			seaweedEntries[newIndex] = seaweedEntries[index];
+			seaweedEntries[index] = tempVar;
+			seaweedEntries = seaweedEntries;
+			updateOrderQuery();
+		};
+	};
+
+	// todo: add group; we might not need it now
+	// const addGroup = (group: EntryGroup): (() => void) => {
+	// 	return () => {
+	// 		seaweedEntries.push({
+	// 			name: "",
+	// 			items: [],
+	// 			gridClass: GroupGridClass.Projects.toString()
+	// 		});
+	// 		updateOrderQuery();
+	// 	};
+	// };
+
+	const removeGroup = (group: EntryGroup): (() => void) => {
+		return () => {
+			const index = seaweedEntries.indexOf(group);
+			if (index === -1) {
+				return;
+			}
+
+			seaweedEntries.splice(index, 1);
+			seaweedEntries = seaweedEntries;
+			updateOrderQuery();
+		};
+	};
+	const removeEntry = (entry: ComponentType, group: EntryGroup): (() => void) => {
+		return () => {
+			console.log("Clicked!");
+			for (let i = group.items.length - 1; i >= 0; i--) {
+				if (group.items[i].name === entry.name) {
+					console.log("Reduce");
+					group.items.splice(i, 1);
+					seaweedEntries = seaweedEntries;
+					updateOrderQuery();
+					break;
+				}
+			}
+		};
+	};
+
+	const allDefaultEntries = Array.from(GetAllEntryFromGlobal().keys());
+	console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
+</script>
+
+<h3>Site ordering</h3>
+<blockquote>Sorry! This part of the website is still WIP, but here it is anyway. As long as it functions</blockquote>
+
+<!-- formatting: group1:entry1|entry2,group2:entry3
+ : <= separates the group header, the entries, and the class
+ | <= separates each entries
+ , <= separates each group
+ -->
+<div class="advanced-setting-list">
+	<!-- todo: we might have to extract this into it's own component -->
+	<!-- todo: NOW!!! -->
+	{#each seaweedEntries as group, groupIndex}
+		<div>
+			<div>
+				<button class="editable-button" on:click={removeGroup(group)}>X</button>
+				<!-- todo: move group up or down -->
+				<button class="editable-button" on:click={swapGroups(groupIndex, true)}>^</button>
+				<button class="editable-button" on:click={swapGroups(groupIndex, false)}>v</button>
+				{group.name}
+			</div>
+			<div class="advanced-setting-list card">
+				{#each group.items as entry, entryIndex}
+					<div class="editable-entry">
+						<button on:click={removeEntry(entry, group)}>-</button>
+						<button on:click={swapEntry(entryIndex, group, true)}>^</button>
+						<button on:click={swapEntry(entryIndex, group, false)}>v</button>
+						{entry.name}
+					</div>
+				{/each}
+			</div>
+
+			<ComboBoxWithButton stringItems={allDefaultEntries}
+			                    onClick={addEntry(group)}></ComboBoxWithButton>
+
+		</div>
+	{/each}
+</div>
+
+<style lang="postcss">
+    .advanced-setting-list {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .editable-entry > button, .editable-button {
+        @apply btn variant-filled-primary;
+    }
+</style>

package/src/lib/template/seaweed/entry_order_config/EntryOrderConfig.ts

@@ -0,0 +1,3 @@
+export const removeProxyWrapperOnString = (wrapped: string): string => {
+	return wrapped.slice("Proxy<".length, wrapped.length - 1);
+};

package/src/routes/(seaweed)/portfolio/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-	import SeaweedTemplate from "$pkg/template/Seaweed/SeaweedTemplate.svelte";
+	import SeaweedTemplate from "$pkg/template/seaweed/SeaweedTemplate.svelte";
 </script>
 
 <!--todo: maybe add check that this is always false? -->
-<SeaweedTemplate letChaos={false}></SeaweedTemplate>
+<SeaweedTemplate letChaos={true}></SeaweedTemplate>

package/src/routes/(seaweed)/portfolio/actual/+page.svelte

@@ -1,10 +1,13 @@
 <script>
 	import SeaweedTemplate from "$pkg/template/seaweed/SeaweedTemplate.svelte";
+	import RandomComponent from "./RandomComponent.svelte";
 </script>
 
 <SeaweedTemplate letChaos={false}
                  name="Allan Manuba"
                  email="allanmanuba@gmail.com"
-                 linkedinSlug="allan-manuba">
+                 linkedinSlug="allan-manuba"
+                 serverSideQueryParams="order=Games:Hepcat|ChefWings|Soulwork|ItchPromo:games-section,Projects:MigranteAlberta|DecentralizedSocialMedia|CustomizedYarnspinner|FullStackC|Workset|ThisWebpage|MockUberApp:projects-section,Relevant projects:MigranteAlberta:games-section&game-section-first=false"
+                 extraComponent={RandomComponent}>
 
 </SeaweedTemplate>

package/src/routes/(seaweed)/portfolio/actual/RandomComponent.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { Card } from "$pkg";
+</script>
+
+<Card>
+	<h1 slot="content">Hello</h1>
+</Card>

package/svelte.config.js

@@ -1,7 +1,7 @@
 // warning: you might to change away from adapter-vercel if you plan to use anything outside of vercel
 // there's an auto-adapter which can replace the import below
 // import adapter from "@sveltejs/adapter-auto";
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 import path from "path";