@turnipxenon/pineapple 2.8.0 → 2.10.0

package/src/lib/components/CarouselElement.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-    export let activeGameIndex: number;
-    export let selfIndex: number;
-
-    import {fly, slide, scale} from "svelte/transition";
-
-</script>
-
-{#if (activeGameIndex === selfIndex)}
-	<!--todo: make section consistent size for all-->
-	<section class="game-showcase"
-	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
-		<slot/>
-	</section>
-{/if}
-
-<style>
-    .game-showcase {
-        @apply snap-center rounded-container-token;
-        margin: auto;
-        width: 100%;
-    }
-</style>

package/src/lib/components/ElementVisbilityDetector.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-    import {onMount} from "svelte";
-
-    export let isVisible = true;
-
-    let stickyElem: HTMLElement;
-
-    let observer: undefined | IntersectionObserver;
-    onMount(() => {
-        observer = new IntersectionObserver(
-            ([e]) => {
-                isVisible = e.intersectionRatio >= 1;
-            },
-            {threshold: [1]}
-        );
-        observer.observe(stickyElem);
-    });
-</script>
-
-<span bind:this={stickyElem}>
-	<slot/>
-</span>

package/src/lib/components/LazyAsset.svelte

@@ -1,114 +0,0 @@
-<script lang="ts">
-    import {LazyAssetStatus, LazyAssetType} from "$lib/components/LazyAssetType";
-    import BgTiledAres from "$lib/assets/bg_tiled/bg_tiled_ares.png";
-    import {onMount} from "svelte";
-
-    export let src: string;
-	export let alt: string;
-
-	// in pixels
-	export let width: string;
-	export let height: string;
-
-	// playsinline autoplay muted loop
-	// whatever your heart's content
-	export let props = {};
-	// todo: add size and alt text
-
-	props = {
-		...props,
-		alt,
-		width,
-		height
-	};
-
-	// auto detect asset type
-	let extension = "";
-	const getAssetType = (): LazyAssetType => {
-		const srcArray = src.split(".");
-		extension = srcArray[srcArray.length - 1];
-		switch (extension) {
-			case "png":
-			case "webp":
-			case "gif":
-			case "jpg":
-				return LazyAssetType.Image;
-			case "ogg":
-			case "webm":
-			case "mp4":
-				return LazyAssetType.Video;
-			default:
-				console.log(`Unknown asset type for: ${src}`);
-				return LazyAssetType.Unknown;
-		}
-	};
-	const assetType: LazyAssetType = getAssetType();
-
-	let actualSrc = "";
-	let status: LazyAssetStatus = LazyAssetStatus.Loading;
-
-	onMount(async () => {
-		const path = src.includes("https://") ? src : `${window.location.origin}${src}`;
-
-        switch(assetType) {
-            case LazyAssetType.Image: {
-                const img = new Image();
-                img.onload = () => {
-                    actualSrc = path;
-                    status = LazyAssetStatus.Loaded;
-                }
-                img.src = path;
-                break;
-            }
-            case LazyAssetType.Video: {
-                fetch(path)
-                    .then(resp => resp.blob())
-                    .then(blob => {
-                        actualSrc = URL.createObjectURL(blob);
-                        status = LazyAssetStatus.Loaded;
-                    })
-                    .catch(error => {
-                        console.warn(error);
-                        status = LazyAssetStatus.Error;
-                    });
-                break;
-            }
-            case LazyAssetType.Unknown: {
-                console.warn("Unknown asset: ", path)
-                status = LazyAssetStatus.Error;
-                break;
-            }
-
-        }
-	});
-</script>
-
-{#if status === LazyAssetStatus.Loaded}
-	{#if assetType === LazyAssetType.Image}
-		<img src={actualSrc} alt="Placeholder image" {...props} />
-	{:else if assetType === LazyAssetType.Video}
-		<video playsinline autoplay muted loop {...props} poster={BgTiledAres} style="object-fit: scale-down">
-			<source src={actualSrc} type={`video/${extension}`} />
-			Your browser does not support the video tag.
-		</video>
-	{:else}
-		<img src={actualSrc} alt="Placeholder image" />
-	{/if}
-{:else}
-	<img class="rotate" src={BgTiledAres} {...props} style="object-fit: scale-down" />
-{/if}
-
-<style lang="postcss">
-    .rotate {
-        animation: rotation 4s infinite linear;
-    }
-
-    @keyframes rotation {
-        from {
-            transform: rotate(0deg);
-        }
-        to {
-            transform: rotate(359deg);
-        }
-    }
-</style>

package/src/lib/components/LazyAssetType.ts

@@ -1,11 +0,0 @@
-export enum LazyAssetType {
-	Image,
-	Video,
-	Unknown
-}
-
-export enum LazyAssetStatus {
-	Loading,
-	Loaded,
-	Error
-}

package/src/lib/components/OnElementVisbilityChanged.ts

@@ -1 +0,0 @@
-export type OnElementVisibilityChanged = (isVisible: boolean) => void;

package/src/lib/components/PineappleSlideToggle.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	export let checked = false;
-	export let name: string;
-	export let onChange: undefined | (() => void) = undefined;
-
-	import { SlideToggle } from "@skeletonlabs/skeleton";
-</script>
-
-<SlideToggle name={name}
-             background="bg-surface-700 dark:bg-surface-700"
-             bind:checked={checked}
-             on:change={onChange}>
-	<slot />
-</SlideToggle>

package/src/lib/components/RandomizedBackground.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-	import BgTiledAres from "$lib/assets/bg_tiled/bg_tiled_ares.png";
-	import BgTiledCorn from "$lib/assets/bg_tiled/bg_tiled_corn.png";
-	import BgTiledPineapple from "$lib/assets/bg_tiled/bg_tiled_pineapple.png";
-	import BgTiledReinhard from "$lib/assets/bg_tiled/bg_tiled_reinhard.png";
-	import BgTiledTomato from "$lib/assets/bg_tiled/bg_tiled_tomato.png";
-	import BgTiledTurnip from "$lib/assets/bg_tiled/bg_tiled_turnip.png";
-	import RandomizedImage from "$lib/components/RandomizedImage.svelte";
-	import { generatedDailySeed, mulberry32Generator } from "$pkg/util/util";
-
-	export let enable;
-
-	const imageList = [BgTiledAres, BgTiledCorn, BgTiledPineapple, BgTiledReinhard, BgTiledTomato, BgTiledTurnip];
-
-	const seed = generatedDailySeed();
-	const rng = mulberry32Generator(seed);
-
-	const shuffle = (array: any[]): any[] => {
-		// from: community wiki @ https://stackoverflow.com/a/2450976/17836168
-		let currentIndex = array.length,
-			randomIndex;
-
-		// While there remain elements to shuffle.
-		while (currentIndex != 0) {
-			// Pick a remaining element.
-			randomIndex = Math.floor(rng() * currentIndex);
-			currentIndex--;
-
-			// And swap it with the current element.
-			[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
-		}
-
-		return array;
-	};
-
-	let generatedImageList: string[] = [];
-
-	for (let i = 0; i < 20; i++) {
-		shuffle(imageList);
-		generatedImageList = generatedImageList.concat(imageList);
-	}
-</script>
-
-<svelte:head>
-	<!-- from: https://dev.to/khromov/preloading-images-in-svelte-465h	-->
-	{#each imageList as image}
-		<link rel="preload" as="image" href={image} />
-	{/each}
-	<link
-		as="video"
-		href="https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4"
-		rel="preload"
-	/>
-</svelte:head>
-
-<!--todo: add a letterbox beyond 1960px + 16 rem-->
-{#if enable}
-	<div class="default-background" aria-hidden="true">
-		{#each generatedImageList as imageItem}
-			<svelte:component this={RandomizedImage} src={imageItem} {rng} />
-		{/each}
-	</div>
-{/if}
-
-<style lang="postcss">
-    .default-background {
-        position: fixed;
-        display: flex;
-        top: -8rem;
-        left: 50%;
-        transform: translate(-50%, 0);
-        width: calc(100vw + 16rem);
-        max-width: 1960px;
-        height: calc(100vh + 16rem);
-        flex-wrap: wrap;
-        overflow: hidden;
-        z-index: -10;
-    }
-</style>

package/src/lib/components/RandomizedImage.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { modeCurrent } from "@skeletonlabs/skeleton";
-
-	export let src: string;
-	export let rng: () => number;
-	let rotateRandom = rng() * 90 - 45;
-
-	const paddingLeft = 1 + rng() * 5;
-	const paddingRight = 1 + rng() * 5;
-	const paddingTop = 1 + rng() * 7;
-</script>
-
-<div
-	style="--paddingTop: {paddingTop}rem;
-        --paddingLeft: {paddingLeft}rem;
-        --paddingRight: {paddingRight}rem;">
-	<img {src} class="randomized-image-style"
-	     aria-hidden="true"
-	     style="--rotateRandom:{rotateRandom}deg;"
-	     alt=""
-	     class:darkMode={modeCurrent} />
-</div>
-
-<style>
-    div {
-        padding-top: var(--paddingTop);
-        padding-left: var(--paddingLeft);
-        padding-right: var(--paddingRight);
-    }
-
-    img {
-        width: 8rem;
-        height: 8rem;
-        transform: rotate(var(--rotateRandom));
-    }
-
-    .darkMode {
-        filter: brightness(50%);
-    }
-</style>

package/src/lib/components/SocialSection.svelte

@@ -1,99 +0,0 @@
-<script>
-	export let isSmallVersion = false;
-	export let email = "turnipxenon@gmail.com";
-	export let linkedinSlug = "turnip-xenon";
-	export let isSlot = false;
-	export let allowLinkedIn = true;
-
-	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>
-	{#if allowLinkedIn}
-		<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="linkedin icon">
-			{#if (!isSmallVersion)}
-				<span>{linkedinSlug}</span>
-			{/if}
-		</button>
-	{/if}
-	<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 +0,0 @@
-<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 +0,0 @@
-<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 +0,0 @@
-export enum ToggleableContentType {
-	Default,
-	Gibberish,
-}

package/src/lib/components/blog_template/BlogTemplate.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-	import { Card, enableDialogueOverlay, type SimplePageMeta } from "$pkg";
-	import "./blog-template.css";
-	import { enableBackground } from "$pkg/store";
-	import { onDestroy, onMount } from "svelte";
-	import BlogTemplateInner from "$pkg/components/blog_template/BlogTemplateInner.svelte";
-
-	// grab page meta from the adjacent meta.json
-	export let pageMeta: SimplePageMeta;
-	export let shouldFillWholePage = false;
-	export let shouldEnableDialogOverlay = false;
-	export let includeDataNoSnippet = false;
-
-	enableBackground.set(!shouldFillWholePage);
-	let initialDialogState = false;
-
-	onMount(() => {
-		initialDialogState = $enableDialogueOverlay;
-		enableDialogueOverlay.set(shouldEnableDialogOverlay);
-	});
-
-	onDestroy(() => {
-		enableBackground.set(true);
-		enableDialogueOverlay.set(initialDialogState);
-	});
-
-</script>
-
-{#if shouldFillWholePage}
-	<div class="whole-page">
-		<BlogTemplateInner pageMeta={pageMeta}>
-			<slot />
-		</BlogTemplateInner>
-	</div>
-{:else}
-	<Card includeDataNoSnippet={includeDataNoSnippet}>
-		<div slot="content" class="default-card">
-			<BlogTemplateInner pageMeta={pageMeta}>
-				<slot />
-			</BlogTemplateInner>
-		</div>
-	</Card>
-{/if}
-
-<style>
-    .whole-page {
-        height: 100%;
-        width: 100%;
-        max-width: var(--default-card-max-width);
-    }
-</style>

package/src/lib/components/blog_template/BlogTemplateInner.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import type { SimplePageMeta } from "$pkg";
-
-	export let pageMeta: SimplePageMeta;
-</script>
-
-<article>
-	<hgroup>
-		{#if pageMeta.title}
-			<h1>{pageMeta.title}</h1>
-		{/if}
-		{#if pageMeta.datePublished}
-			<p>Published: {pageMeta.datePublished}</p>
-		{/if}
-		{#if pageMeta.lastUpdated}
-			<p>Last updated: {pageMeta.lastUpdated}</p>
-		{/if}
-		{#if pageMeta.tags.length > 0}
-			<section id="article-tags">
-				Tags:
-				{#each pageMeta.tags as tag}
-					<span class="badge variant-filled">{tag}</span>
-				{/each}
-			</section>
-		{/if}
-	</hgroup>
-
-	<div class="article-content">
-		<slot />
-	</div>
-</article>
-
-<style>
-    hgroup {
-        margin-bottom: 1lh;
-    }
-
-    .badge {
-        margin-inline-end: 0.5em;
-    }
-</style>

package/src/lib/components/blog_template/blog-template.css

@@ -1,7 +0,0 @@
-.article-content p {
-    text-indent: 2em;
-}
-
-.article-content > * {
-    margin-bottom: 0.5lh;
-}