@turnipxenon/pineapple 2.10.0 → 3.0.0-alpha-3

package/dist/ui/components/ModalBase.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { scale } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
+
+	import type { ModalProps } from 'svelte-modals';
+
+	import { onMount, type Snippet } from 'svelte';
+	import { PinyaCard } from '../elements';
+
+	// https://svelte-modals.mattjennin.gs/modal-components/props/#typescript
+	interface ModalBaseProps extends ModalProps {
+		children: Snippet,
+	}
+
+	let {
+		children,
+		isOpen,
+		close
+	}: ModalBaseProps = $props();
+
+	let container: HTMLDivElement;
+	onMount(() => {
+		const focusableElement = container.querySelector('input, select, textarea, button, object, a, area[href], [tabindex]');
+		if (focusableElement) {
+			(focusableElement as HTMLElement).focus();
+		}
+
+		document.addEventListener('keydown', (e) => {
+			if (e.code === 'Escape') {
+				close();
+			}
+		});
+	});
+</script>
+
+{#if isOpen}
+	<dialog aria-modal="true" in:scale|global={{
+		start: 0.95,
+		duration: 750,
+		easing: elasticOut,
+		opacity: 0.9
+	}}>
+		<div class="interactable" bind:this={container}>
+			<PinyaCard
+				widthClass="max-w-xl2"
+				paddingClass="pl-8 pr-8 pt-4 pb-8"
+			>
+				{@render children?.()}
+			</PinyaCard>
+		</div>
+	</dialog>
+{/if}
+
+<style>
+    dialog {
+        padding: 0;
+        background-color: transparent;
+        border-color: transparent;
+        z-index: 20;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        /* allow click-through to backdrop */
+        pointer-events: none;
+    }
+
+    .interactable {
+        pointer-events: auto;
+    }
+</style>

package/dist/ui/components/ModalBase.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ModalProps } from 'svelte-modals';
+import { type Snippet } from 'svelte';
+interface ModalBaseProps extends ModalProps {
+    children: Snippet;
+}
+declare const ModalBase: import("svelte").Component<ModalBaseProps, {}, "">;
+type ModalBase = ReturnType<typeof ModalBase>;
+export default ModalBase;

package/dist/ui/components/SocialSection.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { scale } from "svelte/transition";
+
+	import MailIcon from "../../assets/icons/mail.svg";
+	import GithubIcon from "../../assets/icons/github-mark.svg";
+	import LinkedinIcon from "../../assets/icons/linkedin.svg";
+	import { ButtonVariant, ImageIcon, PinyaButton } from "../elements/index";
+	import { ItchLogoHotLink } from "../../consts";
+
+	/** @type {{isSmallVersion?: boolean, email?: string, linkedinSlug?: string, isSlot?: boolean, allowLinkedIn?: boolean}} */
+	let {
+		isSmallVersion = false,
+		email = "turnipxenon@gmail.com",
+		linkedinSlug = "turnip-xenon",
+		isSlot = false,
+		allowLinkedIn = true
+	} = $props();
+
+	let shouldShowExtra = $state(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>
+	<PinyaButton
+		buttonVariant={ButtonVariant.SmallIcon}
+		title="https://github.com/TurnipXenon"
+		onclick={() => window.open("https://github.com/TurnipXenon")}>
+		<ImageIcon src={GithubIcon} alt="github icon" />
+		{#if (!isSmallVersion)}
+			<span>TurnipXenon</span>
+		{/if}
+	</PinyaButton>
+	{#if allowLinkedIn}
+		<PinyaButton
+			buttonVariant={ButtonVariant.SmallIcon}
+			title={`https://www.linkedin.com/in/${linkedinSlug}/`}
+			onclick={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
+			<ImageIcon src={LinkedinIcon} alt="linkedin icon" />
+			{#if (!isSmallVersion)}
+				<span>{linkedinSlug}</span>
+			{/if}
+		</PinyaButton>
+	{/if}
+	<PinyaButton
+		buttonVariant={ButtonVariant.SmallIcon}
+		title={`mailto:${email}`}
+		onclick={() => window.open(`mailto:${email}`)}>
+		<ImageIcon src={MailIcon} alt="mail icon" />
+		{#if (!isSmallVersion)}
+			<span>{email}</span>
+		{/if}
+	</PinyaButton>
+	{#if (shouldShowExtra)}
+		<div transition:scale>
+			<PinyaButton
+				buttonVariant={ButtonVariant.SmallIcon}
+				title="https://turnipxenon.itch.io/"
+				onclick={() => window.open("https://turnipxenon.itch.io/")}>
+				<ImageIcon src={ItchLogoHotLink} alt="itch icon" />
+				{#if (!isSmallVersion)}
+					<span>TurnipXenon</span>
+				{/if}
+			</PinyaButton>
+		</div>
+	{/if}
+</div>
+
+<style>
+    span {
+        font-size: 0.8em;
+    }
+
+    .socials {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: var(--preferred-justify-content);
+        gap: 0.7rem;
+    }
+</style>

package/dist/ui/components/SocialSection.svelte.d.ts

@@ -0,0 +1,9 @@
+declare const SocialSection: import("svelte").Component<{
+    isSmallVersion?: boolean;
+    email?: string;
+    linkedinSlug?: string;
+    isSlot?: boolean;
+    allowLinkedIn?: boolean;
+}, {}, "">;
+type SocialSection = ReturnType<typeof SocialSection>;
+export default SocialSection;

package/dist/ui/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ModalBase } from "./ModalBase.svelte";
+export { default as FourPartCard } from "./FourPartCard.svelte";
+export { default as SocialSection } from "./SocialSection.svelte";

package/dist/ui/components/index.js

@@ -0,0 +1,3 @@
+export { default as ModalBase } from "./ModalBase.svelte";
+export { default as FourPartCard } from "./FourPartCard.svelte";
+export { default as SocialSection } from "./SocialSection.svelte";

package/dist/ui/components/randomized-background/RandomizedBackground.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	import BgTiledAres from '../../../assets/bg_tiled/bg_tiled_ares.png';
+	import BgTiledCorn from '../../../assets/bg_tiled/bg_tiled_corn.png';
+	import BgTiledPineapple from '../../../assets/bg_tiled/bg_tiled_pineapple.png';
+	import BgTiledReinhard from '../../../assets/bg_tiled/bg_tiled_reinhard.png';
+	import BgTiledTomato from '../../../assets/bg_tiled/bg_tiled_tomato.png';
+	import BgTiledTurnip from '../../../assets/bg_tiled/bg_tiled_turnip.png';
+	import RandomizedImage from './RandomizedImage.svelte';
+	import { generatedDailySeed, mulberry32Generator } from '../../../util/util';
+
+	let { enabled }: {
+		enabled: boolean
+	} = $props();
+
+	const imageList = [BgTiledAres, BgTiledCorn, BgTiledPineapple, BgTiledReinhard, BgTiledTomato, BgTiledTurnip];
+
+	const seed = generatedDailySeed();
+	const rng = mulberry32Generator(seed);
+
+	const shuffle = <T>(array: T[]): T[] => {
+		// 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[] = $state([]);
+
+	$effect(() => {
+		let gi: string[] = [];
+		for (let i = 0; i < 20; i++) {
+			shuffle(imageList);
+			gi = gi.concat(imageList);
+		}
+		generatedImageList = gi;
+	});
+</script>
+
+<svelte:head>
+	<!-- from: https://dev.to/khromov/preloading-images-in-svelte-465h	-->
+	{#each imageList as image, idx (idx)}
+		<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 enabled && generatedImageList.length > 0}
+	<div class="default-background" aria-hidden="true" transition:fade>
+		{#each generatedImageList as imageItem, idx (idx)}
+			<RandomizedImage src={imageItem} {rng} />
+		{/each}
+	</div>
+{/if}
+
+<style>
+    .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/dist/ui/components/randomized-background/RandomizedBackground.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    enabled: boolean;
+};
+declare const RandomizedBackground: import("svelte").Component<$$ComponentProps, {}, "">;
+type RandomizedBackground = ReturnType<typeof RandomizedBackground>;
+export default RandomizedBackground;

package/dist/ui/components/randomized-background/RandomizedImage.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	let {
+		src,
+		rng
+	}: {
+		src: string,
+		rng: () => number
+	} = $props();
+	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"
+	     aria-hidden="true"
+	     style="--rotateRandom:{rotateRandom}deg;"
+	     alt="" />
+</div>
+
+<style>
+    div {
+        padding-top: var(--paddingTop);
+        padding-left: var(--paddingLeft);
+        padding-right: var(--paddingRight);
+    }
+
+    img {
+        width: 8rem;
+        height: 8rem;
+        transform: rotate(var(--rotateRandom));
+    }
+
+    .randomized-image {
+        filter: var(--filter-randomized-image);
+    }
+</style>

package/dist/ui/components/randomized-background/RandomizedImage.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    src: string;
+    rng: () => number;
+};
+declare const RandomizedImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type RandomizedImage = ReturnType<typeof RandomizedImage>;
+export default RandomizedImage;

package/dist/ui/elements/CodeBlock/CodeBlock.svelte

@@ -0,0 +1,65 @@
+<!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
+
+<script module>
+	import { addCopyButton } from "shiki-transformer-copy-button";
+	import { createHighlighterCoreSync } from "shiki/core";
+	import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+	// Themes
+	// https://shiki.style/themes
+	import themeLight from "shiki/themes/catppuccin-latte.mjs";
+	import themeDark from "shiki/themes/catppuccin-frappe.mjs";
+	// Languages
+	// https://shiki.style/languages
+	import console from "shiki/langs/console.mjs";
+	import html from "shiki/langs/html.mjs";
+	import css from "shiki/langs/css.mjs";
+	import js from "shiki/langs/javascript.mjs";
+	import ts from "shiki/langs/typescript.mjs";
+	import markdown from "shiki/langs/markdown.mjs";
+
+	// https://shiki.style/guide/sync-usage
+	const shiki = createHighlighterCoreSync({
+		engine: createJavaScriptRegexEngine(),
+		// Implement your import theme.
+		themes: [themeLight, themeDark],
+		// Implement your imported and supported languages.
+		langs: [console, html, css, js, ts, markdown]
+	});
+</script>
+
+<script lang="ts">
+	import type { CodeBlockProps } from "./CodeBlockProps";
+
+	let {
+		code = "",
+		lang = "console",
+		// Base Style Props
+		base = " overflow-hidden",
+		rounded = "rounded-container",
+		shadow = "",
+		classes = "",
+		// Pre Style Props
+		preBase = "",
+		prePadding = "[&>pre]:p-4",
+		preClasses = ""
+	}: CodeBlockProps = $props();
+
+	// Shiki convert to HTML
+	const generatedHtml = $derived(shiki.codeToHtml(code, {
+		lang,
+		themes: {
+			light: "catppuccin-latte",
+			dark: "catppuccin-frappe"
+		},
+		transformers: [
+			addCopyButton({ toggle: 2000 })
+		]
+	}));
+</script>
+
+<div
+	class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
+>
+	<!-- Output Shiki's Generated HTML -->
+	{@html generatedHtml}
+</div>

package/dist/ui/elements/CodeBlock/CodeBlock.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { CodeBlockProps } from "./CodeBlockProps";
+/** Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ */
+declare const CodeBlock: import("svelte").Component<CodeBlockProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/ui/elements/CodeBlock/CodeBlockProps.d.ts

@@ -0,0 +1,11 @@
+export interface CodeBlockProps {
+    code?: string;
+    lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown';
+    base?: string;
+    rounded?: string;
+    shadow?: string;
+    classes?: string;
+    preBase?: string;
+    prePadding?: string;
+    preClasses?: string;
+}

package/dist/ui/elements/CodeBlock/CodeBlockProps.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/elements/CodeBlock/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CodeBlock } from "./CodeBlock.svelte";
+export * from "./CodeBlockProps";

package/dist/ui/elements/CodeBlock/index.js

@@ -0,0 +1,2 @@
+export { default as CodeBlock } from "./CodeBlock.svelte";
+export * from "./CodeBlockProps";

package/dist/ui/elements/ColorScheme.d.ts

@@ -0,0 +1,10 @@
+export declare enum ColorScheme {
+    Primary = 0,
+    Secondary = 1,
+    Tertiary = 2,
+    Success = 3,
+    Warning = 4,
+    Error = 5,
+    Surface = 6,
+    Custom = 7
+}

package/dist/ui/elements/ColorScheme.js

@@ -0,0 +1,11 @@
+export var ColorScheme;
+(function (ColorScheme) {
+    ColorScheme[ColorScheme["Primary"] = 0] = "Primary";
+    ColorScheme[ColorScheme["Secondary"] = 1] = "Secondary";
+    ColorScheme[ColorScheme["Tertiary"] = 2] = "Tertiary";
+    ColorScheme[ColorScheme["Success"] = 3] = "Success";
+    ColorScheme[ColorScheme["Warning"] = 4] = "Warning";
+    ColorScheme[ColorScheme["Error"] = 5] = "Error";
+    ColorScheme[ColorScheme["Surface"] = 6] = "Surface";
+    ColorScheme[ColorScheme["Custom"] = 7] = "Custom";
+})(ColorScheme || (ColorScheme = {}));

package/dist/ui/elements/GeneralUIProps.d.ts

@@ -0,0 +1,12 @@
+import type { ColorScheme } from './ColorScheme';
+import type { OnBackground } from './OnBackground';
+export interface GeneralUIProps {
+    /**
+     * Color scheme of the UI
+     */
+    colorScheme?: ColorScheme;
+    /**
+     * Color scheme of the background the UI is on
+     */
+    onBackground?: OnBackground;
+}

package/dist/ui/elements/GeneralUIProps.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/elements/ImageIcon.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import type { GeneralUIProps } from './GeneralUIProps';
+	import { ColorScheme } from './ColorScheme';
+
+	type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
+
+	const {
+		colorScheme = ColorScheme.Primary,
+		...props
+	}: PinyaButtonProps = $props();
+
+	const chooseTailwindClass = () => {
+		switch (colorScheme) {
+			case ColorScheme.Warning:
+				return 'btn preset-filled-warning-600-400 text-surface-100 hover:brightness-110';
+			case ColorScheme.Surface:
+				return 'btn preset-filled-surface-800-200 text-surface-100-900 hover:brightness-110';
+			default:
+				console.error('Unimplemented color scheme');
+			// eslint-disable-next-line no-fallthrough
+			case ColorScheme.Primary:
+				return 'icon-filter-on-primary-button';
+		}
+	};
+
+	const tailwindClass = chooseTailwindClass();
+</script>
+
+<img
+	{...props}
+	class={`image-icon ${tailwindClass}`}>
+
+<style>
+		:global(.image-icon) {
+        height: calc(var(--spacing) * 8);
+		}
+
+		:global(.small-icon-button .image-icon) {
+        height: calc(var(--spacing) * 6);
+		}
+
+    :global(.icon-filter-on-primary-button) {
+				/* based on secondary-950 */
+        filter: brightness(0) saturate(100%) invert(18%) sepia(10%) saturate(4620%) hue-rotate(331deg) brightness(90%) contrast(88%);
+    }
+
+    @media (prefers-color-scheme: dark) {
+        :global(.icon-filter-on-primary-button) {
+						/* based on surface-0 */
+            filter: brightness(0) saturate(100%) invert(85%) sepia(3%) saturate(993%) hue-rotate(326deg) brightness(113%) contrast(105%);
+        }
+    }
+</style>

package/dist/ui/elements/ImageIcon.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+import type { GeneralUIProps } from './GeneralUIProps';
+type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
+declare const ImageIcon: import("svelte").Component<PinyaButtonProps, {}, "">;
+type ImageIcon = ReturnType<typeof ImageIcon>;
+export default ImageIcon;

package/dist/ui/elements/OnBackground.d.ts

@@ -0,0 +1,3 @@
+export declare enum OnBackground {
+    SurfaceCard = 0
+}

package/dist/ui/elements/OnBackground.js

@@ -0,0 +1,4 @@
+export var OnBackground;
+(function (OnBackground) {
+    OnBackground[OnBackground["SurfaceCard"] = 0] = "SurfaceCard";
+})(OnBackground || (OnBackground = {}));

package/dist/ui/elements/PineappleSwitch.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Switch } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		checked?: boolean;
+		name: string;
+		onChange?: (() => void);
+		children?: Snippet;
+	}
+
+	let {
+		checked = $bindable(false),
+		name,
+		onChange = undefined,
+		children = undefined
+	}: Props = $props();
+</script>
+
+<Switch name={name}
+        controlActive="bg-secondary-400 dark:bg-secondary-500"
+        controlInactive="bg-surface-700 dark:bg-surface-800"
+        checked={checked}
+        onCheckedChange={(e) => {
+					checked = e.checked;
+					onChange?.();
+        }}>
+	{@render children?.()}
+</Switch>

package/dist/ui/elements/PineappleSwitch.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    checked?: boolean;
+    name: string;
+    onChange?: (() => void);
+    children?: Snippet;
+}
+declare const PineappleSwitch: import("svelte").Component<Props, {}, "checked">;
+type PineappleSwitch = ReturnType<typeof PineappleSwitch>;
+export default PineappleSwitch;

package/dist/ui/elements/TextLink.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	let {
+		children,
+		href
+	}: { href: string, children: Snippet } = $props();
+</script>
+
+<a
+	{href}
+	class="visited:text-surface-950 dark:visited:text-surface-400">
+	{@render children?.()}
+</a>
+
+<style>
+</style>

package/dist/ui/elements/TextLink.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    href: string;
+    children: Snippet;
+};
+declare const TextLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextLink = ReturnType<typeof TextLink>;
+export default TextLink;

package/dist/ui/elements/WrapperProps.d.ts

@@ -0,0 +1,4 @@
+import type { Snippet } from 'svelte';
+export type WrapperProps = {
+    children: Snippet;
+};

package/dist/ui/elements/WrapperProps.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/elements/index.d.ts

@@ -0,0 +1,10 @@
+export { default as ImageIcon } from "./ImageIcon.svelte";
+export { default as TextLink } from "./TextLink.svelte";
+export * from "./ColorScheme";
+export * from "./GeneralUIProps";
+export * from "./OnBackground";
+export * from "./pinya-card/index";
+export * from "./WrapperProps";
+export * from "./pinya-button/index";
+export * from "./text-chip";
+export * from "./CodeBlock";

package/dist/ui/elements/index.js

@@ -0,0 +1,10 @@
+export { default as ImageIcon } from "./ImageIcon.svelte";
+export { default as TextLink } from "./TextLink.svelte";
+export * from "./ColorScheme";
+export * from "./GeneralUIProps";
+export * from "./OnBackground";
+export * from "./pinya-card/index";
+export * from "./WrapperProps";
+export * from "./pinya-button/index";
+export * from "./text-chip";
+export * from "./CodeBlock";