@turnipxenon/pineapple 2.4.11 → 2.4.13

package/src/lib/components/ToggleableContent.svelte

@@ -1,86 +1,86 @@
-<script lang="ts">
-	import { ToggleableContentType } from "$pkg/components/ToggleableContentType";
-	import { afterUpdate, onMount } from "svelte";
-
-	export let toggle: ToggleableContentType = ToggleableContentType.Default;
-
-	enum GibberishState {
-		NonExistent,
-		CreatingParent,
-		Binded
-	}
-
-	let defaultSlot: HTMLDivElement | undefined = undefined;
-	let gibberishState: GibberishState = GibberishState.NonExistent;
-	let gibberishParent: HTMLDivElement | undefined;
-	let gibberishSlot: Node | undefined;
-
-	const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
-	const turnToGibberish = (node: Node) => {
-		for (const childNodes of node.childNodes) {
-			turnToGibberish(childNodes);
-		}
-
-		if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
-			const max = node.textContent.length;
-			node.textContent = "";
-			while (node.textContent.length < max) {
-				node.textContent += (chaoticWordBank[Math.floor(Math.random() * chaoticWordBank.length)]) + " ";
-			}
-		}
-	};
-
-	const processDefaultSlot = (slot: HTMLDivElement | undefined) => {
-		if (!slot || toggle == ToggleableContentType.Default) {
-			return;
-		}
-
-		turnToGibberish(slot);
-	};
-
-	const attachGibberish = (parent: HTMLDivElement | undefined) => {
-		console.log("Help");
-		if (gibberishState !== GibberishState.CreatingParent && parent !== undefined) {
-			return;
-		}
-
-		console.log("Help1");
-		if (gibberishSlot === undefined) {
-			console.warn("Gibberish slot was not created");
-			return;
-		}
-
-		console.log("Help2");
-		if (gibberishParent === undefined) {
-			console.warn("Gibberish parent was not created");
-			return;
-		}
-
-		console.log("Help3");
-		gibberishParent.appendChild(gibberishSlot);
-		console.log(gibberishParent);
-		gibberishState = GibberishState.Binded;
-	};
-
-	onMount(() => {
-		processDefaultSlot(defaultSlot);
-	});
-
-	// afterUpdate(() => {
-	// 	console.log("after update:", gibberishState);
-	// 	console.log("after update:", gibberishParent);
-	// 	if (gibberishParent !== undefined && gibberishState === GibberishState.CreatingParent) {
-	// 		gibberishState = GibberishState.ParentCreated;
-	// 	}
-	// });
-
-	$: attachGibberish(gibberishParent);
-</script>
-
-{#if toggle === ToggleableContentType.Default}
-	<slot />
-{:else if (ToggleableContentType.Gibberish === toggle)}
-	<div bind:this={defaultSlot} style={`visibility: ${gibberishState === GibberishState.Binded}`}>
-		<slot />
-	</div>
+<script lang="ts">
+	import { ToggleableContentType } from "$pkg/components/ToggleableContentType";
+	import { afterUpdate, onMount } from "svelte";
+
+	export let toggle: ToggleableContentType = ToggleableContentType.Default;
+
+	enum GibberishState {
+		NonExistent,
+		CreatingParent,
+		Binded
+	}
+
+	let defaultSlot: HTMLDivElement | undefined = undefined;
+	let gibberishState: GibberishState = GibberishState.NonExistent;
+	let gibberishParent: HTMLDivElement | undefined;
+	let gibberishSlot: Node | undefined;
+
+	const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
+	const turnToGibberish = (node: Node) => {
+		for (const childNodes of node.childNodes) {
+			turnToGibberish(childNodes);
+		}
+
+		if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+			const max = node.textContent.length;
+			node.textContent = "";
+			while (node.textContent.length < max) {
+				node.textContent += (chaoticWordBank[Math.floor(Math.random() * chaoticWordBank.length)]) + " ";
+			}
+		}
+	};
+
+	const processDefaultSlot = (slot: HTMLDivElement | undefined) => {
+		if (!slot || toggle == ToggleableContentType.Default) {
+			return;
+		}
+
+		turnToGibberish(slot);
+	};
+
+	const attachGibberish = (parent: HTMLDivElement | undefined) => {
+		console.log("Help");
+		if (gibberishState !== GibberishState.CreatingParent && parent !== undefined) {
+			return;
+		}
+
+		console.log("Help1");
+		if (gibberishSlot === undefined) {
+			console.warn("Gibberish slot was not created");
+			return;
+		}
+
+		console.log("Help2");
+		if (gibberishParent === undefined) {
+			console.warn("Gibberish parent was not created");
+			return;
+		}
+
+		console.log("Help3");
+		gibberishParent.appendChild(gibberishSlot);
+		console.log(gibberishParent);
+		gibberishState = GibberishState.Binded;
+	};
+
+	onMount(() => {
+		processDefaultSlot(defaultSlot);
+	});
+
+	// afterUpdate(() => {
+	// 	console.log("after update:", gibberishState);
+	// 	console.log("after update:", gibberishParent);
+	// 	if (gibberishParent !== undefined && gibberishState === GibberishState.CreatingParent) {
+	// 		gibberishState = GibberishState.ParentCreated;
+	// 	}
+	// });
+
+	$: attachGibberish(gibberishParent);
+</script>
+
+{#if toggle === ToggleableContentType.Default}
+	<slot />
+{:else if (ToggleableContentType.Gibberish === toggle)}
+	<div bind:this={defaultSlot} style={`visibility: ${gibberishState === GibberishState.Binded}`}>
+		<slot />
+	</div>
 {/if}

package/src/lib/components/ToggleableContentType.ts

@@ -1,4 +1,4 @@
-export enum ToggleableContentType {
-	Default,
-	Gibberish,
-}
+export enum ToggleableContentType {
+	Default,
+	Gibberish,
+}

package/src/lib/components/layouts/LayoutConstants.ts

@@ -1 +1 @@
-export const AppShellBackground = "app-shell-token";
+export const AppShellBackground = "app-shell-token";

package/src/lib/components/layouts/PineappleBaseLayout.svelte

@@ -11,6 +11,7 @@
     // assets
     import DialogOverlay from "$lib/components/DialogOverlay.svelte";
     import AresLogo from "$lib/assets/characters/ares/ares_logo.webp";
+    import FABIcon from "$lib/assets/placeholder/placeholder_circle.png";
     import {enableDialogueOverlay} from "$lib/components/dialog_manager/DialogManagerStore";
     // todo: clean up all these imports!
 
@@ -60,6 +61,13 @@
 	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
 </svelte:head>
 
+<!--todo: turn off hidden when it's time-->
+<button type="button" class="fab" on:click={()=>{
+    enableDialogueOverlay.set(!enableDialogueOverlayValue);
+}}>
+	<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+</button>
+
 <AppShell>
 	<svelte:fragment slot="header">
 		<!-- App Bar -->
@@ -158,4 +166,17 @@
     .breadcrumb li:nth-last-child(1) {
         @apply block;
     }
+
+    .fab {
+		    position: fixed;
+		    bottom: 2em;
+    }
+
+    .fab:dir(ltr) {
+		    right: 2em;
+    }
+
+    .fab:dir(rtl) {
+		    left: 2em;
+    }
 </style>

package/src/lib/components/layouts/SeaweedBaseLayout.svelte

@@ -28,13 +28,6 @@
 	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
 </svelte:head>
 
-<!--todo: turn off hidden when it's time-->
-<!--<button type="button" class="fab" on:click={()=>{-->
-<!--    enableDialogueOverlay.set(!enableDialogueOverlayValue);-->
-<!--}}>-->
-<!--	<img src={FABIcon} alt="interactive floating action button represented as a turnip">-->
-<!--</button>-->
-
 <AppShell>
 	<svelte:fragment slot="header">
 		<!-- App Bar -->
@@ -49,7 +42,7 @@
 					</div>
 				{:else if $$slots.extraLeadingIcons}
 					<div hidden>
-						<slot name="extraLeadingIcons" />
+						<slot name="s" />
 					</div>
 				{/if}
 			</svelte:fragment>

package/src/lib/consts.ts

@@ -1,2 +1,2 @@
-export const ItchBadgeHotLink = "https://static.itch.io/images/badge.svg";
-export const ItchLogoHotLink = "https://static.itch.io/images/itchio-textless-black.svg";
+export const ItchBadgeHotLink = "https://static.itch.io/images/badge.svg";
+export const ItchLogoHotLink = "https://static.itch.io/images/itchio-textless-black.svg";

package/src/lib/postcss.d.ts

@@ -1,3 +1,3 @@
-// from https://stackoverflow.com/a/63885623/17836168
-declare module "./app.postcss";
-declare module "./theme.postcss";
+// from https://stackoverflow.com/a/63885623/17836168
+declare module "./app.postcss";
+declare module "./theme.postcss";

package/src/lib/styles/global.css

@@ -1 +1 @@
-/* todo: delete if unneeded */
+/* todo: delete if unneeded */

package/src/lib/template/SeaweedTemplate.svelte

@@ -55,7 +55,7 @@
 			`${email}</a>.`,
 		response: (r: boolean) => {
 			if (r) {
-				window.open("https://selk.io/birb-project/trunk/");
+				window.open("https://cmput401.ca/projects/e5b13586-09c7-4ddd-baf6-fdb078d23398");
 			}
 		}
 	};

package/src/lib/theme.postcss

@@ -5,7 +5,7 @@
     --theme-font-family-base: system-ui;
     --theme-font-family-heading: system-ui;
     --theme-font-color-base: var(--color-primary-900);
-    --theme-font-color-dark: var(--color-primary-100);
+    --theme-font-color-dark: var(--color-primary-50);
     --theme-rounded-base: 24px;
     --theme-rounded-container: 16px;
     --theme-border-base: 2px;
@@ -99,6 +99,7 @@
     --color-surface-800: 153 148 136; /* ⬅ #999488 */
     --color-surface-900: 125 121 111; /* ⬅ #7d796f */
     /* text color | #3f312f */
+    --color-text-25: 237 234 234; /* ⬅ #e2e0e0 */
     --color-text-50: 226 224 224; /* ⬅ #e2e0e0 */
     --color-text-100: 217 214 213; /* ⬅ #d9d6d5 */
     --color-text-200: 207 204 203; /* ⬅ #cfcccb */

package/src/lib/util/create_go_to_function.ts

@@ -1,5 +1,5 @@
-export const createGoToFunction = (path: string): (() => void) => {
-    return (() => {
-        location.href = path;
-    });
-};
+export const createGoToFunction = (path: string): (() => void) => {
+    return (() => {
+        location.href = path;
+    });
+};

package/src/routes/{personal → (pineapple)}/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import PinyaBaseLayout from "$lib/components/layouts/PineappleBaseLayout.svelte";
+	import PinyaBaseLayout from "$pkg/components/layouts/PineappleBaseLayout.svelte";
 	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
 </script>
 

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

@@ -0,0 +1,36 @@
+<script>
+	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
+
+	import { createGoToFunction } from "$pkg/util/create_go_to_function";
+	import PineappleBaseLayout from "$pkg/components/layouts/PineappleBaseLayout.svelte";
+</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>
+
+<div class="card default-card">
+	<h1 class="mb-8">Directory</h1>
+
+	<div class="btn-group-vertical variant-filled-secondary">
+		<button on:click={createGoToFunction("personal")}><h2>Personal</h2></button>
+		<button on:click={createGoToFunction("portfolio")}><h2>Portfolio</h2></button>
+	</div>
+</div>
+
+<style lang="postcss">
+    .btn-group-vertical button {
+        padding: 2em;
+    }
+
+    .default-card {
+        text-align: center;
+        padding-inline-end: 0;
+        @apply p-16;
+    }
+</style>

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { initializeStores } from "@skeletonlabs/skeleton";
+	import { Modal } from "@skeletonlabs/skeleton";
+
+	initializeStores();
+</script>
+
+<Modal />
+
+<slot />

package/src/routes/{portfolio → (seaweed)/portfolio}/+page.server.ts

@@ -1,4 +1,4 @@
-import type {PageLoad} from './$types';
+import type {PageLoad} from '../../../../.svelte-kit/types/src/routes';
 import * as htmlparser2 from "htmlparser2";
 import {DomUtils} from "htmlparser2";
 

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

@@ -1,5 +1,5 @@
 <script>
-	import SeaweedTemplate from "$lib/template/SeaweedTemplate.svelte";
+	import SeaweedTemplate from "$pkg/template/SeaweedTemplate.svelte";
 	import WebThumbnailImage from "$pkg/assets/placeholder/placeholder_circle.png";
 
 	export let metaWebsite = "https://www.crouton.com/test/portfolio-base-layout";
@@ -17,4 +17,4 @@
 </svelte:head>
 
 <!--todo: maybe add check that this is always false? -->
-<SeaweedTemplate letChaos={false}></SeaweedTemplate>
+<SeaweedTemplate letChaos={true}></SeaweedTemplate>

package/src/routes/{portfolio → (seaweed)/portfolio}/.gitignore

@@ -1 +1 @@
-actual/
+actual/

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

@@ -1,5 +1,5 @@
 <script>
-	import SeaweedTemplate from "$lib/template/SeaweedTemplate.svelte";
+	import SeaweedTemplate from "$pkg/template/SeaweedTemplate.svelte";
 </script>
 
 <SeaweedTemplate name="Allan Manuba"

package/src/routes/+layout.svelte

@@ -6,14 +6,7 @@
 	// Most of your app wide CSS should be put in this file
 	import "$lib/app.postcss";
 
-
-	import { initializeStores } from "@skeletonlabs/skeleton";
-	import { Modal } from "@skeletonlabs/skeleton";
 	import "$lib/styles/global.css";
-
-	initializeStores();
 </script>
 
-<Modal />
-
 <slot />

package/static/robots.txt

@@ -1,5 +1,5 @@
-User-agent: Twitterbot
-Disallow:
-
-User-agent: *
-Disallow: /
+User-agent: Twitterbot
+Disallow:
+
+User-agent: *
+Disallow: /

package/src/routes/+page.svelte

@@ -1,38 +0,0 @@
-<script>
-    import {PUBLIC_CRINGE_USERNAME} from "$env/static/public";
-
-    import {createGoToFunction} from "$lib/util/create_go_to_function";
-    import PineappleBaseLayout from "$lib/components/layouts/PineappleBaseLayout.svelte";
-</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>
-
-<PineappleBaseLayout>
-	<div class="card default-card">
-		<h1 class="mb-8">Directory</h1>
-
-		<div class="btn-group-vertical variant-filled-secondary">
-			<button on:click={createGoToFunction("personal")}><h2>Personal</h2></button>
-			<button on:click={createGoToFunction("portfolio")}><h2>Portfolio</h2></button>
-		</div>
-	</div>
-</PineappleBaseLayout>
-
-<style lang="postcss">
-    .btn-group-vertical button {
-        padding: 2em;
-    }
-
-    .default-card {
-        text-align: center;
-        padding-inline-end: 0;
-        @apply p-16;
-    }
-</style>