@turnipxenon/pineapple 2.4.43 → 2.4.45

package/src/lib/template/{Seaweed → seaweed}/SeaweedTemplate.svelte

@@ -1,52 +1,68 @@
 <script lang="ts">
-	export let letChaos = true;
-	export let name = "Turnip";
-	export let email = "turnipxenon@gmail.com";
-	export let linkedinSlug = "turnip-xenon";
-	export let domain = "http://localhost:5173/portfolio/actual/";
-
+	import EntryOrderConfig from "$pkg/template/seaweed/entry_order_config/EntryOrderConfig.svelte";
+	import { runChaos } from "$pkg/template/seaweed/RunChaos";
 	import SocialSection from "$pkg/components/SocialSection.svelte";
 	import "./seaweed.postcss";
 	import SeaweedBaseLayout from "$pkg/components/layouts/SeaweedBaseLayout.svelte";
 	import { Accordion, AccordionItem, CodeBlock, SlideToggle } from "@skeletonlabs/skeleton";
 	import { page } from "$app/stores";
 	import Card from "$pkg/components/Card.svelte";
-	import { onMount } from "svelte";
+	import { type ComponentType, onMount } from "svelte";
 	import ElementVisbilityDetector from "$pkg/components/ElementVisbilityDetector.svelte";
-	import GameSection from "$pkg/template/Seaweed/GameSection.svelte";
-	import ProjectSection from "$pkg/template/Seaweed/ProjectSection.svelte";
+	import selfContent from "./SeaweedTemplate.svelte?raw";
+	import {
+		type EntryGroup,
+		GetEntryFromGlobal,
+		type SeaweedTemplateData,
+		seaweedTemplateData
+	} from "./SeaweedTemplateData";
+	import type { EntryProps } from "$pkg/template/seaweed/entries/EntryProps";
+	import type { RawGlob } from "$pkg/util/util";
+
+	export let letChaos = true;
+	export let name = "Turnip";
+	export let email = "turnipxenon@gmail.com";
+	export let linkedinSlug = "turnip-xenon";
+	export let domain = "http://localhost:5173/portfolio/actual/";
+	export let serverSideQueryParams = "";
+	export let extraComponent: ComponentType | undefined = undefined;
+
+	// region query params
+	const entryProps: EntryProps = {
+		email
+	};
+
+	const entryList = import.meta.glob("./entries/*.svelte", { query: "?raw", eager: true });
+	const paramQTSet = new Set<string>();
 
 	let isVisible = true;
 	let isAdvanceSettingOn = false;
-	let shouldAddFunNote = false;
-
 	$: isSocialsGone = !isVisible;
 
-	// region query params
-	import gameContent from "./GameSection.svelte?raw";
-	import projectContent from "./ProjectSection.svelte?raw";
-	import selfContent from "./SeaweedTemplate.svelte?raw";
+	let qtfontWeight = "normal";
+	let additionalFontWeight = "";
 
-	let qtMap = new Map<string, boolean>();
-	const paramQTSet = new Set<string>();
+	let chaosDone = false;
+	let mainVisibility = "visible";
+	$: mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
 
 	const syncQT = () => {
-		if (qtMap.size === 0 || paramQTSet.size === 0) {
+		if (seaweedTemplateData.queryTermMap.size === 0 || paramQTSet.size === 0) {
 			return;
 		}
 
-		qtMap.forEach((_, k) => {
-			qtMap.set(k, paramQTSet.has(k));
+		seaweedTemplateData.queryTermMap.forEach((_, k) => {
+			seaweedTemplateData.queryTermMap.set(k, paramQTSet.has(k));
 		});
 
 		// force svelte refresh
-		qtMap = qtMap;
+		seaweedTemplateData.queryTermMap = seaweedTemplateData.queryTermMap;
 	};
 
 	const parseQTTerms = async () => {
 		const qtSet = new Set<string>();
 		const rawTermList: string[] = [];
-		[gameContent, projectContent, selfContent].forEach(body => {
+		[...Object.values(entryList).map(e => (e as RawGlob).default), selfContent].forEach(body => {
 			// parse the qt-* term which exists within elements like:
 			// <span class="qt-*">TERM</span>
 			rawTermList.push(
@@ -72,18 +88,11 @@
 		});
 
 		// activate svelte reactivity
-		qtSet.forEach(t => qtMap.set(t, true));
+		qtSet.forEach(t => seaweedTemplateData.queryTermMap.set(t, true));
 		syncQT();
 	};
 	parseQTTerms();
 
-	// todo: fix fragile relative reference to the root
-	// const fileList = import.meta.glob("./**/+page.svelte", { query: "?raw", eager: true });
-	// const titleToLink = new Map<string, string>();
-
-	let gameSectionFirst = true;
-	let qtfontWeight = "normal";
-	let additionalFontWeight = "";
 	/** qt values and what they mean:
 	 *  undefined: set all qt terms to font-weight: bold
 	 *  todo: implement clear
@@ -94,88 +103,81 @@
 	 *  ONLY CALL INSIDE onMount()
 	 **/
 	const filterSearchParams = (searchParams: URLSearchParams) => {
+		const isFunOn = searchParams.get("fun")?.trim();
+		if (isFunOn === "true") {
+			seaweedTemplateData.shouldAddFunNote = true;
+		}
+
 		const gameSectionFirstParam = searchParams.get("game-section-first")?.trim();
 		if (gameSectionFirstParam === "false") {
-			gameSectionFirst = false;
+			seaweedTemplateData.gameSectionFirst = false;
+		}
+
+		// region Order
+		const orderParam = searchParams.get("order")?.trim();
+		if (orderParam) {
+			seaweedTemplateData.groupedEntries = [];
+
+			orderParam.split(",").forEach(groupDefinition => {
+				const pair = groupDefinition.split(":");
+				console.log(pair);
+				if (pair.length >= 2) {
+					const group: EntryGroup = {
+						name: pair[0],
+						items: [],
+						gridClass: pair[2]
+					};
+
+					pair[1].split("|").forEach(e => {
+						const component = GetEntryFromGlobal(e);
+						if (component) {
+							group.items.push(component);
+						}
+					});
+
+					seaweedTemplateData.groupedEntries.push(group);
+				}
+
+			});
+
+			seaweedTemplateData.groupedEntries = seaweedTemplateData.groupedEntries;
 		}
+		// endregion
 
 		// region Bold terms
 		const qtValue = searchParams.get("qt")?.trim();
-		if (qtValue === undefined) {
+		if (qtValue !== undefined) {
+			qtfontWeight = "normal";
+			const dynamicStyle = qtValue.split(",").map((term) => {
+				// side-effect
+				paramQTSet.add(`qt-${term}`);
+
+				// main effect
+				return `span.qt-${term} { font-weight: bold !important; }`;
+			}).join("\n");
+
+			// https://stackoverflow.com/a/24285947/17836168
+			const style = document.createElement("style");
+			// noinspection JSDeprecatedSymbols
+			style.type = "text/css";
+			style.innerText = dynamicStyle;
+			document.head.appendChild(style);
+			syncQT();
+		} else {
 			qtfontWeight = "bold";
-			return;
 		}
-		qtfontWeight = "normal";
-		const dynamicStyle = qtValue.split(",").map((term) => {
-			// side-effect
-			paramQTSet.add(`qt-${term}`);
-
-			// main effect
-			return `span.qt-${term} { font-weight: bold !important; }`;
-		}).join("\n");
-
-		// https://stackoverflow.com/a/24285947/17836168
-		const style = document.createElement("style");
-		// noinspection JSDeprecatedSymbols
-		style.type = "text/css";
-		style.innerText = dynamicStyle;
-		document.head.appendChild(style);
-		syncQT();
 		// endregion Bold terms
 	};
 	// endregion query params
 
 	/* region chaos scripts */
-	const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
-	let chaosDone = false;
-	const runChaos = (node: Element) => {
-		// change all text content to gibberish
-		for (let child of Array.from(node.children)) {
-			if (child.nodeType === Node.ELEMENT_NODE) {
-				runChaos(child);
-				for (const childOfChild of child.childNodes) {
-					if (childOfChild.nodeType === Node.TEXT_NODE && childOfChild.textContent?.trim()) {
-						const max = childOfChild.textContent.length;
-						childOfChild.textContent = "";
-						while (childOfChild.textContent.length < max) {
-							childOfChild.textContent += (chaoticWordBank[Math.floor(Math.random() * chaoticWordBank.length)] + " ");
-						}
-					}
-				}
-
-				// change all links to crouton
-				if (child.hasAttribute("href")) {
-					child.setAttribute("href", "https://crouton.net/");
-				}
-
-				// change all images to niko if aria != hidden?
-				if (child.hasAttribute("src") && !child.hasAttribute("aria-hidden")) {
-					if (child.hasAttribute("alt")) {
-						child.setAttribute("src", "https://p.potaufeu.asahi.com/a2b9-p/picture/21583312/5c3310aec77068e24844c663aa62b37c.jpg");
-					} else {
-						child.setAttribute("src", "https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4");
-						child.setAttribute("muted", "true");
-					}
-				}
-				if (child.tagName.trim() === "VIDEO") {
-					child.setAttribute("src", "https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4");
-					child.setAttribute("muted", "true");
-				}
+	/* endregion chaos scripts */
 
-				// change all button events
-				if (child.tagName.trim() === "BUTTON") {
-					// remove anon function: https://stackoverflow.com/a/41343451/17836168
-					child.setAttribute("disabled", "true");
-				}
-			}
+	onMount(async () => {
+		if (!letChaos && serverSideQueryParams) {
+			filterSearchParams(new URLSearchParams(serverSideQueryParams));
 		}
-	};
 
-	let mainVisibility = "visible";
-	$: mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
-	/* endregion chaos scripts */
-
-	onMount(() => {
 		if (!letChaos && $page.url.searchParams) {
 			filterSearchParams($page.url.searchParams);
 		}
@@ -187,17 +189,22 @@
 	});
 
 	const toggleTerm = (term: string) => {
-		qtMap.set(term, !qtMap.get(term));
-		qtMap = qtMap;
+		seaweedTemplateData.queryTermMap.set(term, !seaweedTemplateData.queryTermMap.get(term));
+		seaweedTemplateData.queryTermMap = seaweedTemplateData.queryTermMap;
 	};
 
 	// when either gameSectionFirst or the queryTerms are updated, update advancedUrl
+	let orderUrl = "";
 	let advancedUrl = domain;
-	const updateUrl = () => {
+	const updateUrl = (seaweedTemplateData: SeaweedTemplateData) => {
 		const queryParams: string[] = [];
 
+		if (orderUrl) {
+			queryParams.push(orderUrl);
+		}
+
 		const qtList: string[] = [];
-		qtMap.forEach((shouldBold, term) => {
+		seaweedTemplateData.queryTermMap.forEach((shouldBold, term) => {
 			if (shouldBold) {
 				qtList.push(term);
 			}
@@ -205,13 +212,17 @@
 
 		if (qtList.length === 0) {
 			queryParams.push("qt=clear");
-		} else if (qtMap.size !== qtList.length) {
+		} else if (seaweedTemplateData.queryTermMap.size !== qtList.length) {
 			// we'll only add if the lengths are not equal
 			// dont need to add query if all terms in qtMap is true
 			queryParams.push(`qt=${qtList.map(t => t.slice(3, t.length)).join(",")}`);
 		}
 
-		if (!gameSectionFirst) {
+		if (seaweedTemplateData.shouldAddFunNote) {
+			queryParams.push("fun=true");
+		}
+
+		if (!seaweedTemplateData.gameSectionFirst) {
 			queryParams.push("game-section-first=false");
 		}
 
@@ -220,11 +231,9 @@
 		} else {
 			advancedUrl = domain;
 		}
-		// advancedUrl = `${domain}?${q}`;
 	};
-	$: // noinspection CommaExpressionJS
-		gameSectionFirst, qtMap, updateUrl();
-	// $: gameSectionQuery = gameSectionFirst ? "" : "game-section-first=false";
+	$: updateUrl(seaweedTemplateData);
+
 </script>
 
 <SeaweedBaseLayout bind:shouldDisplayLeadingIcons={isSocialsGone}>
@@ -253,7 +262,7 @@
 							I also graduated with BS Computing Science, Specializing in Software Practice, and a
 							certificate in Computer Game Development at University of Alberta.
 						</p>
-						{#if shouldAddFunNote}
+						{#if seaweedTemplateData.shouldAddFunNote}
 							<p>
 								I'm inspired by games like Harvest Moon: Friends of Mineral Town, Rune Factory 4, Theatrhythm,
 								Bravely Default: Flying Fairy, Boku no Natsuyasumi 2, and A Short Hike.
@@ -369,13 +378,21 @@
 
 		</div>
 
-		{#if (gameSectionFirst)}
-			<GameSection email={email}></GameSection>
-			<ProjectSection email={email}></ProjectSection>
-		{:else }
-			<ProjectSection email={email}></ProjectSection>
-			<GameSection email={email}></GameSection>
-		{/if}
+		{#each seaweedTemplateData.groupedEntries as group}
+			{#if group.items.length > 0}
+				<Card>
+					<section class="section-card title-card" slot="content">
+						<h1 class="text-center">{group.name}</h1>
+					</section>
+				</Card>
+
+				<section class={group.gridClass}>
+					{#each group.items as entry}
+						<svelte:component this={entry} props={entryProps}></svelte:component>
+					{/each}
+				</section>
+			{/if}
+		{/each}
 
 		{#if (!letChaos)}
 			<div aria-hidden="true" style="height: 25vh" />
@@ -384,20 +401,22 @@
 				<div slot="content" class="default-card advanced-setting">
 					<h1>Advanced settings</h1>
 					<p>This one is for those curious how I customize this page.</p>
+
 					<SlideToggle name="advanced-setting-slider" bind:checked={isAdvanceSettingOn}>
 						Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
 					</SlideToggle>
+
 					{#if (isAdvanceSettingOn)}
-						<SlideToggle name="game-section-slider" bind:checked={gameSectionFirst}>
-							Should game section appear first over projects: {gameSectionFirst ? "On" : "Off"}
+						<SlideToggle name="game-section-slider" bind:checked={seaweedTemplateData.gameSectionFirst}>
+							Should game section appear first over projects: {seaweedTemplateData.gameSectionFirst ? "On" : "Off"}
 						</SlideToggle>
-						<SlideToggle name="fun-note-slider" bind:checked={shouldAddFunNote}>
-							Should add fun note in description: {shouldAddFunNote ? "On" : "Off"}
+						<SlideToggle name="fun-note-slider" bind:checked={seaweedTemplateData.shouldAddFunNote}>
+							Should add fun note in description: {seaweedTemplateData.shouldAddFunNote ? "On" : "Off"}
 						</SlideToggle>
 
 						<h3>Query terms to bold</h3>
 						<div class="query-term-grid">
-							{#each qtMap.entries() as [term, shouldBold]}
+							{#each seaweedTemplateData.queryTermMap.entries() as [term, shouldBold]}
 								<!--{@const shouldBold = false}-->
 								<button
 									class="chip {shouldBold ? 'variant-filled-tertiary' : 'variant-soft-tertiary'}"
@@ -410,9 +429,15 @@
 							{/each}
 						</div>
 
+						<EntryOrderConfig bind:seaweedEntries={seaweedTemplateData.groupedEntries}
+						                  bind:orderUrl={orderUrl}
+						                  updateUrl={updateUrl}></EntryOrderConfig>
+
 						<br>
 						<p>Copy the url below and open a new page with it</p>
 						<CodeBlock language="url" code={advancedUrl}></CodeBlock>
+
+						<svelte:component this={extraComponent}></svelte:component>
 					{/if}
 				</div>
 			</Card>
@@ -443,4 +468,4 @@
         gap: 0.25em;
         flex-wrap: wrap;
     }
-</style>
+</style>

package/src/lib/template/seaweed/SeaweedTemplateData.ts

@@ -0,0 +1,93 @@
+import type { ComponentType } from "svelte";
+import { DefaultHeader } from "$pkg/template/seaweed/entries/EntryProps";
+import Pengi from "$pkg/template/seaweed/entries/Pengi.svelte";
+import Hepcat from "$pkg/template/seaweed/entries/Hepcat.svelte";
+import ChefWings from "$pkg/template/seaweed/entries/ChefWings.svelte";
+import Soulwork from "$pkg/template/seaweed/entries/Soulwork.svelte";
+import ItchPromo from "$pkg/template/seaweed/entries/ItchPromo.svelte";
+import MigranteAlberta from "$pkg/template/seaweed/entries/MigranteAlberta.svelte";
+import DecentralizedSocialMedia from "$pkg/template/seaweed/entries/DecentralizedSocialMedia.svelte";
+import CustomizedYarnspinner from "$pkg/template/seaweed/entries/CustomizedYarnspinner.svelte";
+import FullStackC from "$pkg/template/seaweed/entries/FullStackC.svelte";
+import Workset from "$pkg/template/seaweed/entries/Workset.svelte";
+import ThisWebpage from "$pkg/template/seaweed/entries/ThisWebpage.svelte";
+import MockUberApp from "$pkg/template/seaweed/entries/MockUberApp.svelte";
+import { removeProxyWrapperOnString } from "$pkg/template/seaweed/entry_order_config/EntryOrderConfig";
+
+export enum GroupGridClass {
+	Games = "games-section",
+	Projects = "projects-section"
+}
+
+export interface EntryGroup {
+	name: string;
+	items: ComponentType[];
+	gridClass: string;
+}
+
+export const GameEntries: Readonly<EntryGroup> = {
+	name: DefaultHeader.Games.toString(),
+	items: [Pengi, Hepcat, ChefWings, Soulwork, ItchPromo],
+	gridClass: GroupGridClass.Games.toString()
+};
+
+export const ProjectEntries: Readonly<EntryGroup> = {
+	name: DefaultHeader.Projects.toString(),
+	items: [MigranteAlberta, DecentralizedSocialMedia, CustomizedYarnspinner, FullStackC, Workset, ThisWebpage, MockUberApp],
+	gridClass: GroupGridClass.Projects.toString()
+};
+
+export const AllGroupedEntries: ReadonlyArray<EntryGroup> = [
+	{
+		name: "Relevant projects",
+		items: [],
+		gridClass: GroupGridClass.Games.toString()
+	},
+	GameEntries,
+	ProjectEntries
+];
+
+const allFlatEntries: Map<string, ComponentType> = new Map<string, ComponentType>();
+
+export const lazyInitializeAllFlatEntries = () => {
+	if (allFlatEntries.size === 0) {
+		[...ProjectEntries.items, ...GameEntries.items].forEach(e => {
+			allFlatEntries.set(removeProxyWrapperOnString(e.name), e);
+		});
+	}
+};
+
+export const GetAllEntryFromGlobal = () => {
+	lazyInitializeAllFlatEntries();
+	return allFlatEntries;
+};
+
+
+export const GetEntryFromGlobal = (name: string) => {
+	lazyInitializeAllFlatEntries();
+	return allFlatEntries.get(name);
+};
+
+export interface SeaweedTemplateData {
+	groupedEntries: EntryGroup[];
+	shouldAddFunNote: boolean;
+	queryTermMap: Map<string, boolean>;
+	gameSectionFirst: boolean;
+}
+
+export const seaweedTemplateData: SeaweedTemplateData = {
+	shouldAddFunNote: false,
+	queryTermMap: new Map<string, boolean>(),
+	// todo: gameSectionFirst currently has no functionality
+	gameSectionFirst: false,
+	// copy the readonly properties into mutable values
+	groupedEntries: AllGroupedEntries.map(g => {
+		return {
+			name: g.name,
+			gridClass: g.gridClass,
+			items: g.items.map(e => e)
+		};
+	})
+};
+
+

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+	export let props: EntryProps;
+
+	import { type EntryProps } from "./EntryProps";
+	import HeaderChefWings from "$pkg/assets/game_dev/footage-chef-wings.gif";
+	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";
+
+	const modalStore = getModalStore();
+	const chefWingsWarning: ModalSettings = {
+		type: "confirm",
+		title: "Warning: please confirm",
+		body: "This will directly link to the game itself, since this game does not have any game page or any " +
+			"publicly viewable source code. The game is only playable on desktop. " +
+			`Are you sure you wish to proceed? If there are any bugs, please report at <a href='mailto:${props.email}' target='_blank'>` +
+			`${props.email}</a>.`,
+		response: (r: boolean) => {
+			if (r) {
+				window.open("https://selk.io/birb-project/trunk/");
+			}
+		}
+	};
+</script>
+
+<Card>
+	<section class="game-card" slot="content">
+		<img src={HeaderChefWings} alt="todo" loading="lazy">
+		<section class="game-card-body">
+
+			<h1>Chef Wings</h1>
+			<p>
+				A “roguelite-lite” where you gather ingredients in a procedurally-generated dungeon and use
+				them to cook for customers and then critics!
+			</p>
+			<p>
+				I built and documented several of the game’s systems including the game state management
+				system that extends <span class="qt-unity">Unity’s</span> existing Monobehavior lifecycle with new events,
+				and the dialogue, event, and level systems that coordinate the game flow using the interactive
+				dialogue tool YarnSpinner
+			</p>
+
+			<section class="game-link-section">
+				<button type="button" class="game-button turnip-button"
+				        title="https://selk.io/birb-project/trunk/"
+				        on:click={()=>modalStore.trigger(chefWingsWarning)}>
+					<img alt="itch.io icon" src={LinkIcon}>
+					<span>selk.io/birb-project/trunk/</span>
+				</button>
+			</section>
+		</section>
+	</section>
+</Card>

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

@@ -0,0 +1,34 @@
+<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 WeaverFootage from "$pkg/assets/others/weaver-footage.gif";
+
+	export let props: EntryProps;
+</script>
+
+
+<Card>
+	<section class="project-card" slot="content">
+		<img alt="Footage of a visual novel-like dynamic dialog interaction happening on the same page we are on"
+		     src={WeaverFootage} />
+
+		<div class="project-card-body">
+			<h2>Customized Yarnspinner interpreter and dialog runner</h2>
+
+			A custom dialog interpreter, written in <span class="qt-ts">Typescript</span>, that tokenizes then
+			transpiles custom Yarnspinner dialog into a <span class="qt-ts">Typescript</span> file. The said files can
+			be used on a corresponding runner or library, also implemented alongside it, allowing the ability to play a
+			custom-flavor of YarnSpinner dialogs on <span class="qt-svelte">Svelte</span>.
+
+			<section class="game-link-section">
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://github.com/TurnipXenon/pineapple/blob/main/docs/PineappleFiberSpec.md"
+				        on:click={() => window.open("https://github.com/TurnipXenon/pineapple/blob/main/docs/PineappleFiberSpec.md")}>
+					<img src={GithubIcon} alt="github icon">
+				</button>
+			</section>
+		</div>
+	</section>
+</Card>

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import Card from "$pkg/components/Card.svelte";
+	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
+
+	export let props: EntryProps;
+</script>
+
+<Card>
+	<section class="project-card" slot="content">
+		<div class="project-card-body">
+
+			<h2>Decentralized social media</h2>
+
+			<p>We made a full stack decentralized social media app made with <span class="qt-react">React</span> +
+				<span class="qt-js">Javascript</span> for the client code, <span class="qt-django">Django</span> + <span
+					class="qt-python">Python</span> for the backend code, and <span class="qt-heroku">Heroku</span> for
+				deployment. This project was made
+				for
+				our Web Applications and Architecture class.</p>
+			<p>The application can connect with three other decentralized social media app in the same class:
+			</p>
+			<ul>
+				<li>
+					<a href="https://github.com/hgshah/cmput404-project/blob/main/docs/testing_other_teams.md#team-14"
+					   target="_blank">Also
+						a social media with the same Django + Python backend server where they act on behalf of
+						our users interacting with theirs</a></li>
+				<li>
+					<a href="https://github.com/hgshah/cmput404-project/blob/main/docs/testing_other_teams.md#team-7"
+					   target="_blank">A
+						social media that uses Fast API + Python for their backend server</a></li>
+				<li>
+					<a href="https://github.com/hgshah/cmput404-project/blob/main/docs/testing_other_teams.md#team-12"
+					   target="_blank">Another
+						social media that has Django + Python for their backend but we have to act on behalf of
+						our
+						users interacting with their users</a>
+				</li>
+			</ul>
+
+			<!-- todo: add tags with Javascript, React, Python, Django, Heroku -->
+
+			<section class="game-link-section">
+				<button type="button" class="game-button turnip-button"
+				        role="link"
+				        title="https://github.com/hgshah/cmput404-project"
+				        on:click={() => window.open("https://github.com/hgshah/cmput404-project")}>
+					<img src={GithubIcon} alt="github icon">
+				</button>
+			</section>
+		</div>
+	</section>
+</Card>

package/src/lib/template/seaweed/entries/EntryProps.ts

@@ -0,0 +1,13 @@
+export enum DefaultHeader {
+	Games = "Games",
+	Projects = "Projects"
+}
+
+export interface EntryProps {
+	email: string;
+}
+
+export interface GroupedEntry {
+	header: string;
+	entryList: EntryProps[];
+}