@turnipxenon/pineapple 2.4.13 → 2.4.14

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/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/routes/(pineapple)/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import PinyaBaseLayout from "$pkg/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

@@ -2,7 +2,7 @@
 	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";
+	import PineappleBaseLayout from "$pkg/components/pineapple/PineappleBaseLayout.svelte";
 </script>
 
 <svelte:head>
@@ -18,7 +18,7 @@
 	<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("pineapple")}><h2>Personal</h2></button>
 		<button on:click={createGoToFunction("portfolio")}><h2>Portfolio</h2></button>
 	</div>
 </div>

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/lib/components/layouts/PineappleBaseLayout.svelte

@@ -1,182 +0,0 @@
-<script lang="ts">
-    // For auto dark/light mode
-    import {AppBar, AppShell, autoModeWatcher, LightSwitch} from "@skeletonlabs/skeleton";
-    import RandomizedBackground from "$lib/components/RandomizedBackground.svelte";
-
-    // navigation
-    import {page} from "$app/stores";
-    // store
-    import {enableBackground} from "$lib/store";
-    import type {BreadcrumbData} from "$lib/types/BreadcrumbData";
-    // 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!
-
-    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 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}/>
-
-	{#if enableDialogueOverlayValue}
-		<!-- Page Route Content -->
-		<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);
-    }
-
-    .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: 2em;
-    }
-
-    .fab:dir(ltr) {
-		    right: 2em;
-    }
-
-    .fab:dir(rtl) {
-		    left: 2em;
-    }
-</style>

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

@@ -1,37 +0,0 @@
-<script>
-    import {PUBLIC_CRINGE_USERNAME} from "$env/static/public";
-</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 onclick="location.href='/about'"><h2>About</h2></button>
-			<button onclick="location.href='/socials'"><h2>Socials</h2></button>
-			<button onclick="location.href='/game-dev'"><h2>Game development</h2></button>
-			<button onclick="location.href='/blogs'"><h2>Blogs</h2></button>
-			<button onclick="location.href='/misc'"><h2>Miscellaneous</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>