@turnipxenon/pineapple 2.4.24 → 2.4.26

package/src/lib/template/Seaweed/SeaweedTemplate.svelte

@@ -3,11 +3,12 @@
 	export let name = "Turnip";
 	export let email = "turnipxenon@gmail.com";
 	export let linkedinSlug = "turnip-xenon";
+	export let domain = "http://localhost:5173/portfolio/actual/";
 
 	import SocialSection from "$pkg/components/SocialSection.svelte";
 	import "./seaweed.postcss";
 	import SeaweedBaseLayout from "$pkg/components/layouts/SeaweedBaseLayout.svelte";
-	import { Accordion, AccordionItem, SlideToggle } from "@skeletonlabs/skeleton";
+	import { Accordion, AccordionItem, CodeBlock, SlideToggle } from "@skeletonlabs/skeleton";
 	import { page } from "$app/stores";
 	import Card from "$pkg/components/Card.svelte";
 	import { onMount } from "svelte";
@@ -20,11 +21,71 @@
 
 	$: isSocialsGone = !isVisible;
 
+	// region query params
+	import gameContent from "./GameSection.svelte?raw";
+	import projectContent from "./ProjectSection.svelte?raw";
+	import selfContent from "./SeaweedTemplate.svelte?raw";
 
+	let qtMap = new Map<string, boolean>();
+	const paramQTSet = new Set<string>();
+
+	const syncQT = () => {
+		if (qtMap.size === 0 || paramQTSet.size === 0) {
+			return;
+		}
+
+		qtMap.forEach((_, k) => {
+			qtMap.set(k, paramQTSet.has(k));
+		});
+
+		// force svelte refresh
+		qtMap = qtMap;
+	};
+
+	const parseQTTerms = async () => {
+		const qtSet = new Set<string>();
+		const rawTermList: string[] = [];
+		[gameContent, projectContent, selfContent].forEach(body => {
+			// parse the qt-* term which exists within elements like:
+			// <span class="qt-*">TERM</span>
+			rawTermList.push(
+				...body // step 3: destructure the array
+					.split("\"") // step 1: split the text as double quotations (") as the delimiter
+					.filter(s => s.startsWith("qt-")) // step 2: filter out texts that does not begin with "qt-"
+			);
+		});
+
+		// step 4: some spans contain multiple classes, split them up
+		// then add them to qtTerms
+		// e.g. <span class="qt-1 qt-2">TERM</span>
+		rawTermList.forEach(t => {
+			t.split(" ").forEach(nt => {
+				// filter out some of this meta terms
+				if (["qt-1", "qt-2", "qt-*", "qt-"].includes(nt)) {
+					return;
+				}
+
+				// adding to set ensures the entry is unique
+				qtSet.add(nt);
+			});
+		});
+
+		// activate svelte reactivity
+		qtSet.forEach(t => qtMap.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
 	 *  clear: unset all terms to font-weight: normal
 	 *  <term>: only set qt-<term> to bold
 	 *  <term1>,<term2>: only set qt-<term1> and qt-<term2> to bold,
@@ -32,6 +93,12 @@
 	 *  ONLY CALL INSIDE onMount()
 	 **/
 	const filterSearchParams = (searchParams: URLSearchParams) => {
+		const gameSectionFirstParam = searchParams.get("game-section-first")?.trim();
+		if (gameSectionFirstParam === "false") {
+			gameSectionFirst = false;
+		}
+
+		// region Bold terms
 		const qtValue = searchParams.get("qt")?.trim();
 		if (qtValue === undefined) {
 			qtfontWeight = "bold";
@@ -39,6 +106,10 @@
 		}
 		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");
 
@@ -48,7 +119,10 @@
 		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"];
@@ -96,6 +170,10 @@
 		}
 	};
 
+	let mainVisibility = "visible";
+	$: mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
+	/* endregion chaos scripts */
+
 	onMount(() => {
 		if (!letChaos && $page.url.searchParams) {
 			filterSearchParams($page.url.searchParams);
@@ -107,9 +185,45 @@
 		}
 	});
 
-	let mainVisibility = "visible";
-	$: mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
-	/* endregion chaos scripts */
+	const toggleTerm = (term: string) => {
+		qtMap.set(term, !qtMap.get(term));
+		qtMap = qtMap;
+	};
+
+	// when either gameSectionFirst or the queryTerms are updated, update advancedUrl
+	let advancedUrl = domain;
+	const updateUrl = () => {
+		const queryParams: string[] = [];
+
+		const qtList: string[] = [];
+		qtMap.forEach((shouldBold, term) => {
+			if (shouldBold) {
+				qtList.push(term);
+			}
+		});
+
+		if (qtList.length === 0) {
+			queryParams.push("qt=clear");
+		} else if (qtMap.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) {
+			queryParams.push("game-section-first=false");
+		}
+
+		if (queryParams.length > 0) {
+			advancedUrl = `${domain}?${queryParams.join("&")}`;
+		} else {
+			advancedUrl = domain;
+		}
+		// advancedUrl = `${domain}?${q}`;
+	};
+	$: // noinspection CommaExpressionJS
+		gameSectionFirst, qtMap, updateUrl();
+	// $: gameSectionQuery = gameSectionFirst ? "" : "game-section-first=false";
 </script>
 
 <SeaweedBaseLayout bind:shouldDisplayLeadingIcons={isSocialsGone}>
@@ -246,25 +360,51 @@
 
 		</div>
 
-		<GameSection email={email}></GameSection>
-
-		<ProjectSection email={email}></ProjectSection>
-
-		<div aria-hidden="true" style="height: 25vh" />
+		{#if (gameSectionFirst)}
+			<GameSection email={email}></GameSection>
+			<ProjectSection email={email}></ProjectSection>
+		{:else }
+			<ProjectSection email={email}></ProjectSection>
+			<GameSection email={email}></GameSection>
+		{/if}
 
-		<Card>
-			<div slot="content" class="default-card">
-				<h1>Advanced settings</h1>
-				<p>This one is for those curious how I customize this page.</p>
-				<SlideToggle name="slider-label" bind:checked={isAdvanceSettingOn}>
-					Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
-				</SlideToggle>
-				{#if (isAdvanceSettingOn)}
-					<br>
-				{/if}
-			</div>
-		</Card>
+		{#if (!letChaos)}
+			<div aria-hidden="true" style="height: 25vh" />
 
+			<Card>
+				<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>
+
+						<h3>Query terms to bold</h3>
+						<div class="query-term-grid">
+							{#each qtMap.entries() as [term, shouldBold]}
+								<!--{@const shouldBold = false}-->
+								<button
+									class="chip {shouldBold ? 'variant-filled-tertiary' : 'variant-soft-tertiary'}"
+									on:click={() => {toggleTerm(term)}}
+								>
+									<!-- todo: change shouldBold -->
+									{#if (shouldBold)}&check;{/if}
+									{term}
+								</button>
+							{/each}
+						</div>
+
+						<br>
+						<p>Copy the url below and open a new page with it</p>
+						<CodeBlock language="url" code={advancedUrl}></CodeBlock>
+					{/if}
+				</div>
+			</Card>
+		{/if}
 	</main>
 
 	<SocialSection slot="extraLeadingIcons"
@@ -273,3 +413,22 @@
 	               linkedinSlug={linkedinSlug}
 	               isSmallVersion={true}></SocialSection>
 </SeaweedBaseLayout>
+
+<style lang="postcss">
+    .advanced-setting {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5lh;
+    }
+
+    h3 {
+        font-size: 1.5em;
+        line-height: 1.5lh;
+    }
+
+    .query-term-grid {
+        display: flex;
+        gap: 0.25em;
+        flex-wrap: wrap;
+    }
+</style>

package/src/lib/template/Seaweed/seaweed.postcss

@@ -1,133 +1,133 @@
-main {
-    width: 100%;
-    overflow: visible;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-h1 {
-    font-size: 2em;
-}
-
-h2 {
-    font-size: 1.5em;
-}
-
-.section-card {
-    padding: 3em;
-    max-width: 800px;
-}
-
-.game-card, .project-card {
-    width: 100vw;
-    max-width: 36em;
-    margin-bottom: 3em;
-}
-
-.game-card > video {
-    border-top-left-radius: 1em;
-    border-top-right-radius: 1em;
-    max-height: 24em;
-    width: 100%;
-    object-fit: cover;
-}
-
-#migrante-alberta, .game-card > img, .project-card > img {
-    border-top-left-radius: 1em;
-    border-top-right-radius: 1em;
-}
-
-#migrante-alberta {
-    width: 100%;
-    object-fit: cover;
-}
-
-.game-button {
-    @apply btn variant-filled-primary;
-}
-
-.game-button > img {
-    max-height: 1lh;
-    /* todo: consider night mode day mode */
-}
-
-.two-column-separated {
-    display: flex;
-    justify-content: space-between;
-}
-
-.more-section {
-    padding: 1em;
-}
-
-.greater-about-div {
-    display: flex;
-    flex-direction: column;
-    max-width: 36em;
-}
-
-.experience-and-about-div {
-    display: flex;
-    gap: 2em;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: flex-start;
-}
-
-.game-card-body, .project-card-body {
-    padding: 1em;
-}
-
-.game-card-body > blockquote {
-    margin-bottom: 0.7lh;
-}
-
-.game-card-body > h1, .project-card-body > h2 {
-    text-align: center;
-}
-
-.game-link-section {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 1em;
-    margin-top: 1em;
-}
-
-.games-section, .projects-section {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2em;
-    justify-content: center;
-}
-
-.projects-section {
-    align-items: flex-start;
-    /*justify-content: flex-start;*/
-}
-
-.long-btn-image {
-    max-height: 1lh;
-}
-
-.itch-promo {
-    padding: 4em;
-}
-
-#hepcat-video {
-    object-position: 0 0;
-}
-
-.title-card {
-    width: clamp(360px, 80vw, 800px);
-}
-
-[class*='qt-'] {
-    font-weight: var(--qt-font-weight);
-}
-
-.accordion-header {
-    margin-top: 0.25em;
-}
+main {
+    width: 100%;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
+.section-card {
+    padding: 3em;
+    max-width: 800px;
+}
+
+.game-card, .project-card {
+    width: 100vw;
+    max-width: 36em;
+    margin-bottom: 3em;
+}
+
+.game-card > video {
+    border-top-left-radius: 1em;
+    border-top-right-radius: 1em;
+    max-height: 24em;
+    width: 100%;
+    object-fit: cover;
+}
+
+#migrante-alberta, .game-card > img, .project-card > img {
+    border-top-left-radius: 1em;
+    border-top-right-radius: 1em;
+}
+
+#migrante-alberta {
+    width: 100%;
+    object-fit: cover;
+}
+
+.game-button {
+    @apply btn variant-filled-primary;
+}
+
+.game-button > img {
+    max-height: 1lh;
+    /* todo: consider night mode day mode */
+}
+
+.two-column-separated {
+    display: flex;
+    justify-content: space-between;
+}
+
+.more-section {
+    padding: 1em;
+}
+
+.greater-about-div {
+    display: flex;
+    flex-direction: column;
+    max-width: 36em;
+}
+
+.experience-and-about-div {
+    display: flex;
+    gap: 2em;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.game-card-body, .project-card-body {
+    padding: 1em;
+}
+
+.game-card-body > blockquote {
+    margin-bottom: 0.7lh;
+}
+
+.game-card-body > h1, .project-card-body > h2 {
+    text-align: center;
+}
+
+.game-link-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 1em;
+    margin-top: 1em;
+}
+
+.games-section, .projects-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2em;
+    justify-content: center;
+}
+
+.projects-section {
+    align-items: flex-start;
+    /*justify-content: flex-start;*/
+}
+
+.long-btn-image {
+    max-height: 1lh;
+}
+
+.itch-promo {
+    padding: 4em;
+}
+
+#hepcat-video {
+    object-position: 0 0;
+}
+
+.title-card {
+    width: clamp(360px, 80vw, 800px);
+}
+
+[class*='qt-'] {
+    font-weight: var(--qt-font-weight);
+}
+
+.accordion-header {
+    margin-top: 0.25em;
+}

package/src/lib/util/util.ts

@@ -1,34 +1,38 @@
-export const generatedDailySeed = (): number => {
-	const date = new Date();
-	const time = date.getTime() + 86400000;
-	return time - (time % 86400000);
-};
-
-// psuedo misc with seed
-// from https://stackoverflow.com/a/47593316
-export const mulberry32Generator = (a: number): (() => number) => {
-	return function() {
-		var t = (a += 0x6d2b79f5);
-		t = Math.imul(t ^ (t >>> 15), t | 1);
-		t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-	};
-};
-
-export const createGoToFunction = (path: string): (() => void) => {
-	return (() => {
-		location.href = path;
-	});
-};
-
-export interface ExternalLinkWarningArgs {
-	href: string;
-}
-
-export const createExternalLinkWarningFunction = (args: ExternalLinkWarningArgs): (() => void) => {
-	return (() => {
-		// todo: https://github.com/TurnipXenon/pineapple/issues/99
-		//  add the warning here for future functions
-		location.href = args.href;
-	});
-};
+export const generatedDailySeed = (): number => {
+	const date = new Date();
+	const time = date.getTime() + 86400000;
+	return time - (time % 86400000);
+};
+
+// psuedo misc with seed
+// from https://stackoverflow.com/a/47593316
+export const mulberry32Generator = (a: number): (() => number) => {
+	return function() {
+		var t = (a += 0x6d2b79f5);
+		t = Math.imul(t ^ (t >>> 15), t | 1);
+		t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+	};
+};
+
+export const createGoToFunction = (path: string): (() => void) => {
+	return (() => {
+		location.href = path;
+	});
+};
+
+export interface ExternalLinkWarningArgs {
+	href: string;
+}
+
+export const createExternalLinkWarningFunction = (args: ExternalLinkWarningArgs): (() => void) => {
+	return (() => {
+		// todo: https://github.com/TurnipXenon/pineapple/issues/99
+		//  add the warning here for future functions
+		location.href = args.href;
+	});
+};
+
+export interface RawGlob {
+	default: string;
+}

package/src/routes/(pineapple)/+layout.svelte

@@ -1,22 +1,7 @@
 <script lang="ts">
 	import PinyaBaseLayout from "$pkg/components/pineapple/PineappleBaseLayout.svelte";
-	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
 </script>
 
-<svelte:head>
-	<title>{PUBLIC_CRINGE_USERNAME}</title>
-	<meta content="summary" name="Turnip time!" />
-	<meta content="@{PUBLIC_CRINGE_USERNAME}" name="twitter:site" />
-	<meta content="@{PUBLIC_CRINGE_USERNAME}" name="twitter:creator" />
-	<meta content="https://www.{PUBLIC_CRINGE_USERNAME}.com/" name="og:url" />
-	<meta content="{PUBLIC_CRINGE_USERNAME} | Home" name="og:title" />
-	<meta
-		content="I have no idea! Anyway... Hi! I don't know what I'm doing! Also check out my games!"
-		name="og:description"
-	/>
-	<meta content="https://www.{PUBLIC_CRINGE_USERNAME}.com/default-card.png" property="og:image" />
-</svelte:head>
-
 <PinyaBaseLayout>
 	<slot />
 </PinyaBaseLayout>

package/src/routes/(pineapple)/+page.svelte

@@ -1,20 +1,8 @@
 <script>
-	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
-
-
 	import { createGoToFunction } from "$pkg/util/util";
 	import { Card } from "$pkg";
 </script>
 
-<svelte:head>
-	<title>Welcome to {PUBLIC_CRINGE_USERNAME}'s Home</title>
-	<meta content="Welcome to {PUBLIC_CRINGE_USERNAME}'s Home" name="og:title" />
-	<meta
-		content="Welcome to {PUBLIC_CRINGE_USERNAME}'s home! It's a neat place to be at if you're feeling lost. Come hang around!"
-		name="og:description"
-	/>
-</svelte:head>
-
 <Card>
 	<div slot="content" class="content">
 		<h1 class="mb-8" style="font-weight: bolder">Directory</h1>

package/src/routes/(pineapple)/pineapple/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
 	import { showComponentInToast, showTextInToast } from "$pkg/components/pineapple/toast/Toast";
 	import TestCard from "$pkg/components/pineapple/toast/custom-toast/TestCustomToast.svelte";
 	import TestDialogYarn from "./TestDialog.yarn?raw";
@@ -27,15 +26,6 @@
 	};
 </script>
 
-<svelte:head>
-	<title>Welcome to {PUBLIC_CRINGE_USERNAME}'s Home</title>
-	<meta content="Welcome to {PUBLIC_CRINGE_USERNAME}'s Home" name="og:title" />
-	<meta
-		content="Welcome to {PUBLIC_CRINGE_USERNAME}'s home! It's a neat place to be at if you're feeling lost. Come hang around!"
-		name="og:description"
-	/>
-</svelte:head>
-
 <Card>
 	<div slot="content" class="default-card">
 		<button

package/src/routes/(pineapple)/pineapple/+page.ts

@@ -0,0 +1,8 @@
+import type { OverridableMetaProps } from "$pkg/components/overrideable_meta/OverridableMetaProps";
+
+export const load = async (): Promise<OverridableMetaProps> => {
+	return {
+		title: "Pineapple",
+		ogTitle: "Pineapple"
+	};
+};