@turnipxenon/pineapple 2.4.12 → 2.4.14

package/src/lib/components/SocialSection.svelte

@@ -1,93 +1,96 @@
-<script>
-	import MailIcon from "$pkg/assets/icons/mail.svg";
-	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
-	import { ItchLogoHotLink } from "$pkg/consts";
-	import LinkedinIcon from "$pkg/assets/icons/linkedin.svg";
-	import { onMount } from "svelte";
-
-	export let isSmallVersion = false;
-	export let email = "turnipxenon@gmail.com";
-	export let linkedinSlug = "turnip-xenon";
-	export let isSlot = false;
-
-	let shouldShowExtra = false;
-	const style = `
-		--preferred-justify-content: ${isSlot ? "flex-start" : "center"};
-		--preferred-overall-margin-bottom: ${isSlot ? "0" : "0.75lh"};
-	`;
-
-	onMount(() => {
-		shouldShowExtra = window.screen.availWidth >= 440;
-	});
-</script>
-
-<div class="socials" class:isSmall={isSmallVersion} style={style} data-nosnippet>
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title="https://github.com/TurnipXenon"
-	        on:click={() => window.open("https://github.com/TurnipXenon")}>
-		<img src={GithubIcon} alt="github icon">
-		{#if (!isSmallVersion)}
-			<span>TurnipXenon</span>
-		{/if}
-	</button>
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title={`https://www.linkedin.com/in/${linkedinSlug}/`}
-	        on:click={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
-		<img src={LinkedinIcon} alt="linkedikn icon">
-		{#if (!isSmallVersion)}
-			<span>{linkedinSlug}</span>
-		{/if}
-	</button>
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title={`mailto:${email}`}
-	        on:click={() => window.open(`mailto:${email}`)}>
-		<img src={MailIcon} alt="mail icon" />
-		{#if (!isSmallVersion)}
-			<span>{email}</span>
-		{/if}
-	</button>
-	{#if (shouldShowExtra)}
-		<button type="button" class="social-button turnip-button"
-		        role="link"
-		        title="https://turnipxenon.itch.io/"
-		        on:click={() => window.open("https://turnipxenon.itch.io/")}>
-			<img src={ItchLogoHotLink} alt="itch icon">
-			{#if (!isSmallVersion)}
-				<span>TurnipXenon</span>
-			{/if}
-		</button>
-	{/if}
-</div>
-
-<style lang="postcss">
-    .social-button {
-        @apply btn variant-filled-primary;
-    }
-
-    button > img {
-        max-height: 1lh;
-    }
-
-    button {
-        min-width: 0;
-        min-height: 0;
-    }
-
-    .socials {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: var(--preferred-justify-content);
-    }
-
-    .socials > button {
-        margin: 0 0.5em var(--preferred-overall-margin-bottom);
-    }
-
-    .socials.isSmall > button {
-        margin-left: 0.25em;
-        margin-right: 0.25em;
-    }
+<script>
+	export let isSmallVersion = false;
+	export let email = "turnipxenon@gmail.com";
+	export let linkedinSlug = "turnip-xenon";
+	export let isSlot = false;
+
+	import { ItchLogoHotLink } from "$pkg/consts";
+	import { onMount } from "svelte";
+	import { scale } from "svelte/transition";
+
+	import MailIcon from "$pkg/assets/icons/mail.svg";
+	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
+	import LinkedinIcon from "$pkg/assets/icons/linkedin.svg";
+
+	let shouldShowExtra = false;
+	const style = `
+		--preferred-justify-content: ${isSlot ? "flex-start" : "center"};
+		--preferred-overall-margin-bottom: ${isSlot ? "0" : "0.75lh"};
+	`;
+
+	onMount(() => {
+		shouldShowExtra = window.screen.availWidth >= 440;
+	});
+</script>
+
+<div class="socials" class:isSmall={isSmallVersion} style={style} data-nosnippet>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title="https://github.com/TurnipXenon"
+	        on:click={() => window.open("https://github.com/TurnipXenon")}>
+		<img src={GithubIcon} alt="github icon">
+		{#if (!isSmallVersion)}
+			<span>TurnipXenon</span>
+		{/if}
+	</button>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title={`https://www.linkedin.com/in/${linkedinSlug}/`}
+	        on:click={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
+		<img src={LinkedinIcon} alt="linkedikn icon">
+		{#if (!isSmallVersion)}
+			<span>{linkedinSlug}</span>
+		{/if}
+	</button>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title={`mailto:${email}`}
+	        on:click={() => window.open(`mailto:${email}`)}>
+		<img src={MailIcon} alt="mail icon" />
+		{#if (!isSmallVersion)}
+			<span>{email}</span>
+		{/if}
+	</button>
+	{#if (shouldShowExtra)}
+		<button type="button" class="social-button turnip-button"
+		        role="link"
+		        title="https://turnipxenon.itch.io/"
+		        transition:scale
+		        on:click={() => window.open("https://turnipxenon.itch.io/")}>
+			<img src={ItchLogoHotLink} alt="itch icon">
+			{#if (!isSmallVersion)}
+				<span>TurnipXenon</span>
+			{/if}
+		</button>
+	{/if}
+</div>
+
+<style lang="postcss">
+    .social-button {
+        @apply btn variant-filled-primary;
+    }
+
+    button > img {
+        max-height: 1lh;
+    }
+
+    button {
+        min-width: 0;
+        min-height: 0;
+    }
+
+    .socials {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: var(--preferred-justify-content);
+    }
+
+    .socials > button {
+        margin: 0 0.5em var(--preferred-overall-margin-bottom);
+    }
+
+    .socials.isSmall > button {
+        margin-left: 0.25em;
+        margin-right: 0.25em;
+    }
 </style>

package/src/lib/components/StickyElement.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-    import {onMount} from "svelte";
-    import {fly} from "svelte/transition";
-
-    export let isFirst = false;
-
-    let stickyElem: HTMLElement;
-    let isSticky = false;
-
-    let observer: undefined | IntersectionObserver;
-    onMount(() => {
-        observer = new IntersectionObserver(
-            ([e]) => {
-                isSticky = e.intersectionRatio < 1;
-            },
-            {threshold: [1]}
-        );
-        observer.observe(stickyElem);
-    });
-</script>
-
-<span transition:fly={{y: -100}}>
-{#if (isFirst && !isSticky)}
-	<!-- intentionally empty -->
-{:else if (isSticky)}
-	{" | "}
-{:else }
-	<br>
-{/if}
-	<span class="sticky-div" bind:this={stickyElem}>
-		<slot/>
-	</span>
-</span>
-
-<style>
-    .sticky-div {
-        position: sticky;
-        top: -1px;
-    }
+<script lang="ts">
+    import {onMount} from "svelte";
+    import {fly} from "svelte/transition";
+
+    export let isFirst = false;
+
+    let stickyElem: HTMLElement;
+    let isSticky = false;
+
+    let observer: undefined | IntersectionObserver;
+    onMount(() => {
+        observer = new IntersectionObserver(
+            ([e]) => {
+                isSticky = e.intersectionRatio < 1;
+            },
+            {threshold: [1]}
+        );
+        observer.observe(stickyElem);
+    });
+</script>
+
+<span transition:fly={{y: -100}}>
+{#if (isFirst && !isSticky)}
+	<!-- intentionally empty -->
+{:else if (isSticky)}
+	{" | "}
+{:else }
+	<br>
+{/if}
+	<span class="sticky-div" bind:this={stickyElem}>
+		<slot/>
+	</span>
+</span>
+
+<style>
+    .sticky-div {
+        position: sticky;
+        top: -1px;
+    }
 </style>

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/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>