@turnipxenon/pineapple 2.4.12 → 2.4.14

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

@@ -0,0 +1,207 @@
+<script lang="ts">
+	// For auto dark/light mode
+	import { AppBar, AppShell, autoModeWatcher, LightSwitch } from "@skeletonlabs/skeleton";
+	import RandomizedBackground from "$pkg/components/RandomizedBackground.svelte";
+
+	// navigation
+	import { page } from "$app/stores";
+	// store
+	import { enableBackground } from "$pkg/store";
+	import type { BreadcrumbData } from "$pkg/types/BreadcrumbData";
+	// assets
+	// import DialogOverlay from "$lib/components/DialogOverlay.svelte";
+	import AresLogo from "$pkg/assets/characters/ares/ares_logo.webp";
+	import FABIcon from "$pkg/assets/placeholder/placeholder_circle.png";
+	import { enableDialogueOverlay } from "$pkg/components/dialog_manager/DialogManagerStore";
+	import Toast from "$pkg/components/pineapple/toast/Toast.svelte";
+	// todo: clean up all these imports!
+
+	let pages: BreadcrumbData[] = [];
+
+	const updateBreadcrumb = (pathname: string) => {
+		pages = [];
+		let basePath = "";
+		pathname.split("/").forEach((value, index) => {
+			if (index === 0) {
+				basePath = "/";
+				pages.push({
+					path: "/",
+					name: "Home"
+				});
+				return;
+			}
+
+			if (value === "") {
+				return;
+			}
+
+			basePath += value + "/";
+			pages.push({
+				path: basePath,
+				name: value
+			});
+		});
+		pages = pages;
+	};
+
+	$: updateBreadcrumb($page.url.pathname); // run every time we navigate
+
+	let enableBackgroundValue = true;
+	enableBackground.subscribe((value) => {
+		enableBackgroundValue = value;
+	});
+
+	let enableDialogueOverlayValue = true;
+	enableDialogueOverlay.subscribe((value) => {
+		enableDialogueOverlayValue = value;
+	});
+</script>
+
+<!-- App Shell -->
+<svelte:head>
+	{@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 -->
+		<AppBar
+			background="app-shell-token"
+			slotDefault="place-content-start"
+			slotTrail="place-content-end">
+			<svelte:fragment slot="lead">
+				<!--TODO: add logo or something for the lead in layout-->
+				<img
+					alt="Ares's head titled towards the left with his tongue out and winking"
+					class="ares-logo"
+					src={AresLogo}
+				/>
+				<span class="mr-2" />
+				<ol class="breadcrumb">
+					{#each pages as crumb, i}
+						{#if i < pages.length - 1}
+							<li class="crumb">
+								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
+							</li>
+							<li class="crumb-separator" aria-hidden="true">&rsaquo;</li>
+						{:else}
+							<li class="crumb">{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
+						{/if}
+					{/each}
+				</ol>
+			</svelte:fragment>
+			<svelte:fragment slot="trail">
+				<LightSwitch bgLight="bg-surface-400" />
+			</svelte:fragment>
+		</AppBar>
+	</svelte:fragment>
+
+	<RandomizedBackground enable={enableBackgroundValue} />
+
+	<Toast></Toast>
+
+	<div class="default-page-container">
+		<slot />
+		<div class="footer-space" />
+	</div>
+	<!--{#if enableDialogueOverlayValue}-->
+	<!--	&lt;!&ndash; Page Route Content &ndash;&gt;-->
+	<!--	<div class="default-page-container">-->
+	<!--		<slot />-->
+	<!--		<div class="footer-space" />-->
+	<!--	</div>-->
+	<!--	<DialogOverlay />-->
+	<!--{:else}-->
+	<!--	<DialogOverlay />-->
+	<!--	<slot />-->
+	<!--{/if}-->
+</AppShell>
+
+<style lang="postcss">
+    :root {
+        --dialog-left-pad: clamp(0em, 5vw, 2em);
+        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-left-pad) - var(--theme-border-base)));
+        --dialog-box-height: clamp(15em, 50vw, 18em);
+
+        /** FAB icon margin/position calculation origin:
+						Criteria:
+						- We want at mobile (360px) our margin to be at 1em (16px)
+						- We want at web (1960px) our margin to be at 2em (32px)
+
+						A useful scaling factor might vw. At 360px, 16px would be around 4.44vw (360/16).
+						At 360px: margin is at 16px or 1em.
+						At 1960px: 4.44vw is at 87px but that will be clamped to 32px or 2em.
+						The calculation implies that the natural point that the margin becomes 2em is clamped on
+						wider screens is at 727px.
+				*/
+        --fab-margin: clamp(1em, 4.44vw, 2em);
+    }
+
+    .default-page-container {
+        @apply flex justify-center items-center;
+        margin-top: 4em;
+        margin-left: clamp(1em, 15vw, 10em);
+        margin-right: 1em;
+        flex-direction: column;
+        z-index: 0;
+    }
+
+    .ares-logo {
+        object-fit: contain;
+        height: 2em;
+        margin-inline-end: 0.5em;
+    }
+
+    /* breadcrumb does not work due to a lot of magic stuff i do
+       the code below is from skeleton's tailwind css:
+       https://github.com/skeletonlabs/skeleton/blob/54f4ecedabf2be6d94a670b56dc8821095ca3fc9/packages/plugin/src/styles/components/breadcrumbs.css
+
+       it likely disappeared due to code gen shenanigans and package magic */
+    .breadcrumb,
+    .breadcrumb-nonresponsive {
+        @apply flex items-center space-x-4 w-full overflow-x-auto;
+        /*@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;*/
+    }
+
+    .crumb {
+        @apply flex justify-center items-center space-x-2;
+    }
+
+    .crumb-separator {
+        @apply flex text-surface-700-200-token opacity-50;
+    }
+
+    /* === Auto-Responsive === */
+
+    .breadcrumb li {
+        @apply hidden md:block;
+    }
+
+    .breadcrumb li:nth-last-child(3),
+    .breadcrumb li:nth-last-child(2),
+    .breadcrumb li:nth-last-child(1) {
+        @apply block;
+    }
+
+    .fab {
+        position: fixed;
+        bottom: var(--fab-margin);
+        width: 4em;
+        border-radius: 50%;
+    }
+
+    .fab:dir(ltr) {
+        right: var(--fab-margin);
+    }
+
+    .fab:dir(rtl) {
+        left: var(--fab-margin);
+    }
+</style>

package/src/lib/components/pineapple/toast/DefaultToastBody.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Props } from "$pkg/components/pineapple/toast/DefaultToastBody";
+	import type { DismissToastCallback } from "$pkg/components/pineapple/toast/Toast";
+	import CloseIcon from "$pkg/assets/icons/close.svg";
+
+	export let props: Props;
+	export let dismissToastCallback: DismissToastCallback | undefined;
+	export let shouldEnableButton = false;
+</script>
+
+<div class="body-container">
+	<!-- todo: support markdown? -->
+	<button class="btn"
+	        disabled={!shouldEnableButton}
+	        on:click={dismissToastCallback}>
+		<img class="img-icon" src={CloseIcon} alt="close button">
+	</button>
+	<div class="text-container">
+		<span>{props.message}</span>
+	</div>
+</div>
+
+<style lang="postcss">
+    .body-container {
+        display: flex;
+        gap: 1em;
+    }
+
+    .text-container {
+        margin-top: 0.25lh;
+        margin-right: 1em;
+    }
+
+    .text-container:dir(rtl) {
+        margin-left: 1em;
+    }
+
+    .btn {
+        @apply bg-surface-100 dark:bg-surface-900;
+        border-radius: 8px;
+		    padding: 0.5em;
+    }
+</style>

package/src/lib/components/pineapple/toast/DefaultToastBody.ts

@@ -0,0 +1,10 @@
+import DefaultToastBody from "./DefaultToastBody.svelte";
+
+export interface Props {
+	message: string;
+}
+
+export interface DefaultToastPair {
+	component: typeof DefaultToastBody;
+	props: Props;
+}

package/src/lib/components/pineapple/toast/Toast.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import {
+		activeToast,
+		type CustomToastPairs,
+		DefaultToastParamsDuration,
+		toastQueue
+	} from "$pkg/components/pineapple/toast/Toast";
+	import { type ComponentType } from "svelte";
+	import Card from "$pkg/components/Card.svelte";
+	import { spring, tweened } from "svelte/motion";
+
+	let localComponent: ComponentType | undefined;
+	let localProps: CustomToastPairs["props"];
+
+	// todo: make hidden value reliant on current vh
+	const HIDDEN_VALUE = -15;
+	const SHOWN_VALUE = 0;
+	const progress = tweened(0, { duration: DefaultToastParamsDuration });
+	const position = spring(HIDDEN_VALUE);
+	position.damping = 0.4;
+	let isDismissed = false;
+	let shouldEnableButton = false;
+
+	const onToastDisappear = () => {
+		// clear the local component to undefined to make the component disappear
+		// also set activeToast to null to indicate to the system that it's ready to take new
+		// Toast requests
+		localComponent = undefined;
+		activeToast.update(() => {
+			if (toastQueue.length === 0) {
+				return undefined;
+			}
+			return toastQueue.shift();
+		});
+	};
+
+	activeToast.subscribe((params) => {
+		if (!params) {
+			return;
+		}
+
+		if (params.componentAndProps?.component === localComponent) {
+			return;
+		}
+
+		localComponent = params.componentAndProps.component;
+		localProps = params.componentAndProps.props;
+
+		// todo: make unnested
+		// set progress to 0 before showing
+		progress.set(0, { duration: 0 }).then(() => {
+			// animate showing the toast
+			position.set(SHOWN_VALUE).then(() => {
+				shouldEnableButton = true;
+
+				// now animate the lifespan of the current toast
+				progress.set(100, { delay: 500, duration: params.duration ?? DefaultToastParamsDuration }).then(() => {
+					// during the lifecycle the button to cause dismissal can only happen when
+					// position is completely set SHOWN_VALUE and when progress has reached to 100
+					shouldEnableButton = false;
+					if (isDismissed) {
+						return;
+					}
+
+					// when the lifespan duration is over, animate hiding the toast by putting its bottom
+					// position out of bounds
+					position.set(HIDDEN_VALUE).then(onToastDisappear);
+				});
+			});
+		});
+	});
+
+	const dismissToast = () => {
+		shouldEnableButton = false;
+		isDismissed = true;
+		position.set(HIDDEN_VALUE).then(onToastDisappear);
+	};
+</script>
+
+{#if (localComponent !== undefined)}
+	<div class="toast-positioner" style={`bottom: ${$position}lh;`}>
+		<!-- todo: adjust shadow to be more dynamic or transparent -->
+		<Card marginBottom="1lh" overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
+			<div slot="content">
+				{#if (localProps !== undefined)}
+					<svelte:component this={localComponent}
+					                  props={localProps}
+					                  dismissToastCallback={dismissToast}
+					                  shouldEnableButton={shouldEnableButton} />
+				{:else }
+					<svelte:component this={localComponent} />
+				{/if}
+				<progress id="toast-progress" value={$progress/100}></progress>
+			</div>
+		</Card>
+	</div>
+{/if}
+
+<style lang="postcss">
+    .toast-positioner {
+        position: fixed;
+        /* 12em = this component's margin (4em) + fab margin + width (8em) */
+        max-width: calc(100vw - 12em);
+    }
+
+    .toast-positioner:dir(ltr) {
+        left: 2em;
+    }
+
+    .toast-positioner:dir(rtl) {
+        right: 2em;
+    }
+</style>

package/src/lib/components/pineapple/toast/Toast.ts

@@ -0,0 +1,57 @@
+import { writable } from "svelte/store";
+import type { DefaultToastPair } from "$pkg/components/pineapple/toast/DefaultToastBody";
+import DefaultToastBody from "$pkg/components/pineapple/toast/DefaultToastBody.svelte";
+import type { TestCustomToastPair } from "$pkg/components/pineapple/toast/custom-toast/TestCustomToast";
+
+/**
+ * Default toast duration is 5 seconds
+ */
+export const DefaultToastParamsDuration = 5000;
+
+export type CustomToastPairs = DefaultToastPair
+	| TestCustomToastPair;
+
+export type DismissToastCallback = () => void;
+
+// todo: note may not be possible
+export interface ToastParams {
+	componentAndProps: CustomToastPairs;
+	/**
+	 * Time in millisecond. If undefined, defaults to DefaultToastParamsDuration
+	 */
+	duration?: number;
+}
+
+/**
+ * todo: do not call directly documentation
+ */
+export const activeToast = writable<ToastParams | undefined>();
+
+export const toastQueue: ToastParams[] = [];
+
+/**
+ *
+ * @param newToast
+ */
+export const showComponentInToast = (newToast: ToastParams) => {
+	// todo: queue component
+	activeToast.update((currentToast) => {
+		if (currentToast !== undefined) {
+			toastQueue.push(newToast);
+			return currentToast;
+		} else {
+			return newToast;
+		}
+	});
+};
+
+export const showTextInToast = (message: string) => {
+	showComponentInToast({
+		componentAndProps: {
+			component: DefaultToastBody,
+			props: {
+				message
+			}
+		}
+	});
+};

package/src/lib/components/pineapple/toast/custom-toast/TestCustomToast.svelte

@@ -0,0 +1 @@
+<h1>Testing bad custom card</h1>

package/src/lib/components/pineapple/toast/custom-toast/TestCustomToast.ts

@@ -0,0 +1,6 @@
+import TestCustomToast from "./TestCustomToast.svelte";
+
+export interface TestCustomToastPair {
+	component: typeof TestCustomToast;
+	props: undefined;
+}

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/index.ts

@@ -1,4 +1,4 @@
-export { default as PineappleLayoutBase } from "./components/layouts/PineappleBaseLayout.svelte";
+export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export { default as SeaweedTemplate } from "./template/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 

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/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/pineapple/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/pineapple/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("pineapple")}><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/(pineapple)/pineapple/+page.svelte

@@ -0,0 +1,44 @@
+<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";
+
+	let testingQueueNumber = 1;
+	const testingRandomPhrases = [
+		"Niko",
+		"Niko the Baikal seal",
+		"Niko the Baikal seal\nfrom Toba Aquarium"
+	];
+</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">
+
+	<button
+		class="btn variant-filled-secondary"
+		on:click={() => {
+			showComponentInToast({componentAndProps: {component: TestCard, props: undefined}});
+		}}><h3>Test custom toast</h3></button>
+	<button
+		class="btn variant-filled-secondary"
+		on:click={() => {
+			showTextInToast(`${testingQueueNumber} ${testingRandomPhrases[testingQueueNumber]}`);
+			testingQueueNumber = (testingQueueNumber + 1) % testingRandomPhrases.length;
+		}}><h3>Handy toast</h3></button>
+</div>
+
+<style lang="postcss">
+    .default-card {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2em;
+    }
+</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: /