@turnipxenon/pineapple 1.1.2 → 2.2.1

package/src/lib/components/{PineappleBaseLayout.svelte → layouts/PineappleBaseLayout.svelte}

@@ -1,64 +1,64 @@
 <script lang="ts">
-	// The ordering of these imports is critical to your app working properly
-	import "../theme.postcss";
-	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
-	import "@skeletonlabs/skeleton/styles/all.css";
-	// Most of your app wide CSS should be put in this file
-	import "../app.postcss";
-	// 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 { 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;
-	});
+    // The ordering of these imports is critical to your app working properly
+    import "$lib/theme.postcss";
+    // If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
+    // import "@skeletonlabs/skeleton/styles/all.css";
+    // Most of your app wide CSS should be put in this file
+    import "$lib/app.postcss";
+    // 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 {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 -->
@@ -73,11 +73,11 @@
 			<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}
+						alt="Ares's head titled towards the left with his tongue out and winking"
+						class="ares-logo"
+						src={AresLogo}
 				/>
-				<span class="mr-2" />
+				<span class="mr-2"/>
 				<ol class="breadcrumb">
 					{#each pages as crumb, i}
 						{#if i < pages.length - 1}
@@ -92,23 +92,23 @@
 				</ol>
 			</svelte:fragment>
 			<svelte:fragment slot="trail">
-				<LightSwitch bgLight="bg-surface-400" />
+				<LightSwitch bgLight="bg-surface-400"/>
 			</svelte:fragment>
 		</AppBar>
 	</svelte:fragment>
 
-	<RandomizedBackground enable={enableBackgroundValue} />
+	<RandomizedBackground enable={enableBackgroundValue}/>
 
 	{#if enableDialogueOverlayValue}
 		<!-- Page Route Content -->
 		<div class="default-page-container">
-			<slot />
-			<div class="footer-space" />
+			<slot/>
+			<div class="footer-space"/>
 		</div>
-		<DialogOverlay />
+		<DialogOverlay/>
 	{:else}
-		<DialogOverlay />
-		<slot />
+		<DialogOverlay/>
+		<slot/>
 	{/if}
 </AppShell>
 
@@ -148,6 +148,7 @@
     .crumb {
         @apply flex justify-center items-center space-x-2;
     }
+
     .crumb-separator {
         @apply flex text-surface-700-200-token opacity-50;
     }
@@ -157,6 +158,7 @@
     .breadcrumb li {
         @apply hidden md:block;
     }
+
     .breadcrumb li:nth-last-child(3),
     .breadcrumb li:nth-last-child(2),
     .breadcrumb li:nth-last-child(1) {

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+	// The ordering of these imports is critical to your app working properly
+	import "../../theme.postcss";
+	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
+	// import "@skeletonlabs/skeleton/styles/all.css";
+	// Most of your app wide CSS should be put in this file
+	import "$lib/app.postcss";
+	// For auto dark/light mode
+	import { AppBar, AppShell, autoModeWatcher, LightSwitch } from "@skeletonlabs/skeleton";
+	import RandomizedBackground from "$lib/components/RandomizedBackground.svelte";
+
+	// store
+	import { enableBackground } from "$lib/store";
+	// assets
+	import { enableDialogueOverlay } from "$lib/components/dialog_manager/DialogManagerStore";
+	import { writable } from "svelte/store";
+	import { fly } from "svelte/transition";
+	// todo: clean up all these imports!
+
+	export let shouldDisplayLeadingIcons = false;
+
+	let enableBackgroundValue = true;
+	enableBackground.subscribe((value) => {
+		enableBackgroundValue = value;
+	});
+
+	enableDialogueOverlay.set(false); // false by default until we unlock the fab for public
+
+	let shouldDisplaySocialIcons = writable(false);
+</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"
+		        background="app-shell-token">
+			<svelte:fragment slot="lead">
+				<span class="lead-slot-placeholder"></span>
+
+				{#if $$slots.extraLeadingIcons && shouldDisplayLeadingIcons}
+					<div transition:fly={{x:-10}}>
+						<slot name="extraLeadingIcons" />
+					</div>
+				{:else if $$slots.extraLeadingIcons}
+					<div hidden>
+						<slot name="extraLeadingIcons" />
+					</div>
+				{/if}
+			</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 shouldDisplaySocialIcons={shouldDisplaySocialIcons} />
+		<div class="footer-space" />
+	</div>
+	<!-- todo: eventually re-add	-->
+	<!--	<DialogOverlay />-->
+</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 {
+        max-width: 2100px;
+        margin: 4em auto;
+        flex-direction: column;
+        z-index: 0;
+    }
+
+    .lead-slot-placeholder {
+        height: 3em;
+        margin-inline-end: 0.5em;
+    }
+
+    /*todo: consider left handedness or customizability*/
+    /*.fab {*/
+    /*    @apply btn-icon variant-filled-surface;*/
+    /*    position: fixed;*/
+    /*    height: 5em;*/
+    /*    width: 5em;*/
+    /*    bottom: 3em;*/
+    /*    right: 2em;*/
+    /*    box-shadow: 0.5em 0.5em 0.5em gray;*/
+    /*}*/
+</style>

package/src/lib/consts.ts

@@ -0,0 +1,2 @@
+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,5 @@
-export { default as PineappleLayoutBase } from "./components/PineappleBaseLayout.svelte";
+export { default as PineappleLayoutBase } from "./components/layouts/PineappleBaseLayout.svelte";
+export { default as SeaweedTemplate } from "./template/SeaweedTemplate";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 
 export * from "./components/dialog_manager/DialogManagerStore";

package/src/lib/styles/global.css

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