@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha-3

package/dist/ui/modules/projects/Soulwork.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ProjectComponentProps } from "../../templates/index";
+declare const key = "Soulwork";
+export { component, key };
+declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Soulwork: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Soulwork = InstanceType<typeof Soulwork>;
+export default Soulwork;

package/dist/ui/modules/projects/ThisWebpage.svelte

@@ -0,0 +1,62 @@
+<script module lang="ts">
+	import GithubIcon from '../../../assets/icons/github-mark.svg';
+	import ThisWebsiteFootage from '../../../assets/others/seaweed-showcase.mp4';
+	import type { ProjectComponentProps } from '../../templates/seaweed-layout/ProjectComponentProps';
+
+	const key = 'This Webpage';
+	export { component, key };
+</script>
+<script>
+	import { FourPartCard } from "../../components/index";
+	import { ButtonVariant, ImageIcon, PinyaButton, TextChip } from "../../elements/index.js";
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+
+		{#snippet headerCover()}
+			<video
+				playsinline autoplay muted loop preload="none"
+				class="game-video-cover"
+			>
+				<source src={ThisWebsiteFootage} type="video/mp4">
+				video unavailable. original video contains clips of this website being resized and light-dark mode being
+				toggled.
+			</video>
+		{/snippet}
+
+		{#snippet header()}
+			<h2>This webpage!</h2>
+		{/snippet}
+
+		<p>
+			The webpage is made with two parts. The webpage that has the content for everything here, I've lovingly called
+			Seaweed. I kept seaweed as a private package. On the other hand, the base package which I want to use for all
+			spin offs of my websites is called Pineapple and have kept that codebase public.
+		</p>
+		<p>The webpage can dynamically emphasize terms, rearrange the layout, use different terms, and save all these
+			configurations as a shortened link. Additionally fetches the latest blog entries from turnipxenon.com via REST
+			calls.</p>
+
+		<div class="text-chip-container">
+			<TextChip queryClass="qt-svelte">Svelte 5</TextChip>
+			<TextChip queryClass="qt-tailwind">Tailwind 4</TextChip>
+			<TextChip queryClass="qt-skeleton">Skeleton (Svelte UI library)</TextChip>
+			<TextChip queryClass="qt-ts">Typescript</TextChip>
+			<TextChip queryClass="qt-vercel qt-cicd">Vercel</TextChip>
+			<TextChip queryClass="qt-gamedev">YarnSpinner</TextChip>
+			<TextChip queryClass="qt-postgres qt-db">Postgres (SQL database)</TextChip>
+			<TextChip queryClass="qt-prisma qt-db">Prisma ORM</TextChip>
+			<TextChip queryClass="qt-rest">RESTful API</TextChip>
+		</div>
+
+		<section class="game-link-section">
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				title="https://github.com/TurnipXenon/pineapple"
+				onclick={() => window.open("https://github.com/TurnipXenon/pineapple")}>
+				<ImageIcon src={GithubIcon} class="long-btn-image" alt="github icon" />
+			</PinyaButton>
+		</section>
+	</FourPartCard>
+{/snippet}

package/dist/ui/modules/projects/ThisWebpage.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ProjectComponentProps } from '../../templates/seaweed-layout/ProjectComponentProps';
+declare const key = "This Webpage";
+export { component, key };
+declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ThisWebpage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThisWebpage = InstanceType<typeof ThisWebpage>;
+export default ThisWebpage;

package/dist/ui/modules/projects/index.d.ts

@@ -0,0 +1,4 @@
+export * as Hepcat from "./Hepcat.svelte";
+export * as Pengi from "./Pengi.svelte";
+export * as Soulwork from "./Soulwork.svelte";
+export * as ThisWebpage from "./ThisWebpage.svelte";

package/dist/ui/modules/projects/index.js

@@ -0,0 +1,4 @@
+export * as Hepcat from "./Hepcat.svelte";
+export * as Pengi from "./Pengi.svelte";
+export * as Soulwork from "./Soulwork.svelte";
+export * as ThisWebpage from "./ThisWebpage.svelte";

package/dist/ui/modules/seaweed/ChumBucket.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { type PageMeta } from "../../..";
+	import { onMount } from "svelte";
+
+	let hasTriedGettingChumBucket = $state(false);
+	let pageMetaList: PageMeta[] = $state([]);
+	const loadPageMeta = async () => {
+		fetch("/api/get-latest-blogs").then(resp => resp.json()).then(json => {
+			pageMetaList = json as PageMeta[];
+			hasTriedGettingChumBucket = true;
+		}).catch(_ => {
+			hasTriedGettingChumBucket = true;
+		});
+	};
+
+	onMount(() => {
+		loadPageMeta();
+	});
+</script>
+
+<div class="chum-bucket">
+	<h2 class="text-start">More about me...</h2>
+	<p>Check out the latest things I've been rambling about at
+		<a href="https://turnipxenon.com" target="_blank">turnipxenon.com</a> or at
+		<a href="https://turnipxenon.com/blogs/coding-chagrin" target="_blank">turnipxenon.com/blogs/coding-chagrin.</a>
+	</p>
+
+	<div class="chum-bucket-grid">
+		{#if hasTriedGettingChumBucket}
+			{#each pageMetaList as pageMeta}
+				<div class="chum-bucket-item">
+					{#if pageMeta.imageUrl}
+						<img src={`https://turnipxenon.com${pageMeta.imageUrl}`}
+						     class="chum-bucket-image"
+						     alt={pageMeta.imageAlt}>
+					{/if}
+					<div>
+						<h3 class="text-start">
+							<a href={`https://turnipxenon.com/${pageMeta.relativeLink}`}>{pageMeta.title}</a>
+						</h3>
+						<p>Published: {pageMeta.datePublished}
+							{#if pageMeta.lastUpdated}
+								| Last updated: {pageMeta.lastUpdated}
+							{/if}
+						</p>
+						<p>{pageMeta.description}</p>
+					</div>
+				</div>
+			{/each}
+		{:else}
+			{#each { length: 10 } as _}
+				<div class="placeholder"></div>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style>
+    .chum-bucket-item {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    .chum-bucket-image {
+        max-width: 10em;
+        height: auto;
+        margin-top: 0.5em;
+        margin-inline-end: 1em;
+    }
+
+    .chum-bucket {
+		    margin-top: 2lh;
+        padding: 1.5lh 0;
+        width: 100%;
+        max-width: var(--container-3xl);
+    }
+
+    .chum-bucket-grid {
+        display: flex;
+        flex-direction: column;
+        margin-top: 0.5lh;
+        gap: 0.5lh;
+    }
+</style>

package/dist/ui/modules/seaweed/ChumBucket.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ChumBucket: import("svelte").Component<Record<string, never>, {}, "">;
+type ChumBucket = ReturnType<typeof ChumBucket>;
+export default ChumBucket;

package/dist/ui/modules/seaweed/index.d.ts

@@ -0,0 +1,3 @@
+export declare const Seaweed: {
+    ChumBucket: import("svelte").Component<Record<string, never>, {}, "">;
+};

package/dist/ui/modules/seaweed/index.js

@@ -0,0 +1,4 @@
+import { default as ChumBucket } from "./ChumBucket.svelte";
+export const Seaweed = {
+    ChumBucket
+};

package/dist/ui/templates/PinyaBase.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { ModeWatcher } from "mode-watcher";
+	import { Modals } from "svelte-modals";
+	import { page } from "$app/state";
+	import { locales, localizeHref } from "../../paraglide/runtime";
+	import "../../styles/global.css";
+
+	import "../../styles/app.css";
+	import { ToastProvider } from "@skeletonlabs/skeleton-svelte";
+
+	let { children } = $props();
+</script>
+
+<Modals>
+	<!-- shown when any modal is opened -->
+	{#snippet backdrop({ close })}
+		<div
+			aria-hidden="true"
+			class="backdrop"
+			onclick={() => close()}
+		></div>
+	{/snippet}
+</Modals>
+<ModeWatcher defaultTheme="turnip" />
+
+<ToastProvider>
+	{@render children()}
+</ToastProvider>
+
+<!--invisible ink-->
+<div style="display:none">
+	{#each locales as locale (locale)}
+		<a href={localizeHref(page.url.pathname, { locale })}>{locale}</a>
+	{/each}
+</div>
+
+<style>
+    .backdrop {
+        position: fixed;
+        z-index: 19;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.50);
+        backdrop-filter: blur(4px);
+    }
+</style>

package/dist/ui/templates/PinyaBase.svelte.d.ts

@@ -0,0 +1,7 @@
+import "../../styles/global.css";
+import "../../styles/app.css";
+declare const PinyaBase: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type PinyaBase = ReturnType<typeof PinyaBase>;
+export default PinyaBase;

package/dist/ui/templates/confirmation-modal/component.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { ConfirmationModalProps } from './props';
+	import { ModalBase } from '../../components';
+	import { ColorScheme, PinyaButton } from '../../elements';
+
+	let {
+		children,
+		confirm,
+		...props
+	}: ConfirmationModalProps = $props();
+</script>
+
+<ModalBase {...props}>
+	<div class="prose-h2:mt-4 max-w-xl">
+
+		{@render children()}
+
+		<div class="actions">
+			<PinyaButton
+				onclick={() => {
+					confirm.onclick();
+					props.close();
+				}}
+				title={confirm.hoverOver ?? 'Ok'}
+				colorScheme={ColorScheme.Warning}
+			>
+				{confirm.text ?? 'Ok'}
+			</PinyaButton>
+			<PinyaButton
+				onclick={() => props.close()}
+				title="Close modal"
+				colorScheme={ColorScheme.Surface}
+			>
+				Close
+			</PinyaButton>
+		</div>
+	</div>
+</ModalBase>
+
+<style>
+    .actions {
+        display: flex;
+        flex-direction: row-reverse;
+        margin-top: 1.4lh;
+        gap: 1rem;
+    }
+</style>

package/dist/ui/templates/confirmation-modal/component.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ConfirmationModalProps } from './props';
+declare const Component: import("svelte").Component<ConfirmationModalProps, {}, "">;
+type Component = ReturnType<typeof Component>;
+export default Component;

package/dist/ui/templates/confirmation-modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ConfirmationModal } from "./component.svelte";
+export * from "./props";

package/dist/ui/templates/confirmation-modal/index.js

@@ -0,0 +1,2 @@
+export { default as ConfirmationModal } from "./component.svelte";
+export * from "./props";

package/dist/ui/templates/confirmation-modal/props.d.ts

@@ -0,0 +1,10 @@
+import type { ModalProps } from 'svelte-modals';
+import type { Snippet } from 'svelte';
+export interface ConfirmationModalProps extends ModalProps {
+    children: Snippet;
+    confirm: {
+        onclick: () => void;
+        hoverOver?: string;
+        text?: string;
+    };
+}

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

@@ -0,0 +1,4 @@
+export { default as PinyaBase } from "./PinyaBase.svelte";
+export * from "./pinya-page-layout";
+export * from "./seaweed-layout";
+export * from "./confirmation-modal";

package/dist/ui/templates/index.js

@@ -0,0 +1,4 @@
+export { default as PinyaBase } from "./PinyaBase.svelte";
+export * from "./pinya-page-layout";
+export * from "./seaweed-layout";
+export * from "./confirmation-modal";

package/dist/ui/templates/pinya-page-layout/component.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { m } from "../../../paraglide/messages";
+
+	import AresLogo from "../../../assets/characters/ares/ares_logo.webp";
+	import SettingsLogo from "../../../assets/icons/icon-settings.svg";
+	import RandomizedBackground from "../../components/randomized-background/RandomizedBackground.svelte";
+	import { modals } from "svelte-modals";
+	import GeneralSettingsModal from "../../modules/modals/general-settings/GeneralSettingsModal.svelte";
+	import { localizeHref } from "../../../paraglide/runtime";
+	import { appState } from "..";
+
+	let {
+		children,
+		appBarLead = $bindable(),
+		footer
+	}: {
+		children: Snippet
+		appBarLead?: Snippet
+		footer?: Snippet
+	} = $props();
+
+
+	const onSettingsClick = () => {
+		modals.open(GeneralSettingsModal);
+	};
+</script>
+
+{#snippet header(extraClass: string)}
+	<header class={`bg-surface-100-900 shadow-md ${extraClass}`}>
+
+		{#if appState.lead}
+			<div class="title-space">
+				{@render appState.lead()}
+			</div>
+		{:else if appBarLead}
+			<div class="title-space">
+				{@render appBarLead()}
+			</div>
+		{:else }
+			<button onclick={() => { location.href = localizeHref('/'); }} title="Home">
+				<img
+					aria-hidden="true"
+					alt=""
+					class="ares-logo"
+					src={AresLogo}
+				/>
+			</button>
+			<div class="title-space text-primary-900-100 font-bold">
+				{#if appState.title}
+					<span class="fake-h3">{appState.title}</span>
+				{/if}
+			</div>
+		{/if}
+
+
+		<button
+			title={m.settings()}
+			aria-label={m.settings()}
+			class="btn-icon preset-outlined-primary-500 hover:brightness-125"
+			onclick={onSettingsClick}
+		>
+			<img class="icon" src={SettingsLogo} aria-hidden="true" alt="">
+		</button>
+	</header>
+{/snippet}
+
+{@render header('hidden shadow-none w-full')}
+{@render header('fixed z-15 w-[105vw]')}
+
+<RandomizedBackground enabled={true} />
+
+<div class="default-page-container">
+	{@render children?.()}
+</div>
+
+{#if footer}
+	{@render footer()}
+{:else }
+	<div aria-hidden="true" class="footer-space"></div>
+{/if}
+
+
+<style>
+    header {
+        top: 0;
+        display: flex;
+        padding: 1rem 1rem 1rem calc(1rem + 5vw);
+        align-items: center;
+        transform: translateX(-5vw);
+    }
+
+    .default-page-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 4rem 1rem 0 1rem;
+        flex-direction: column;
+    }
+
+    .ares-logo {
+        object-fit: contain;
+        height: 2rem;
+        margin: 0 1rem 0 0;
+        filter: var(--filter-ares-logo);
+    }
+
+    .title-space {
+        flex-grow: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-inline: 1em;
+    }
+
+    .footer-space {
+        width: 100%;
+        height: calc(var(--dialog-box-height) + 3.5lh);
+    }
+</style>

package/dist/ui/templates/pinya-page-layout/component.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    appBarLead?: Snippet;
+    footer?: Snippet;
+};
+declare const Component: import("svelte").Component<$$ComponentProps, {}, "appBarLead">;
+type Component = ReturnType<typeof Component>;
+export default Component;

package/dist/ui/templates/pinya-page-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaPageLayout } from "./component.svelte";
+export * from "./runes.svelte";

package/dist/ui/templates/pinya-page-layout/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaPageLayout } from "./component.svelte";
+export * from "./runes.svelte";

package/dist/ui/templates/pinya-page-layout/runes.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface AppStore {
+    title: string;
+    lead?: Snippet;
+}
+export declare const appState: AppStore;
+export {};

package/dist/ui/templates/pinya-page-layout/runes.svelte.js

@@ -0,0 +1,3 @@
+export const appState = $state({
+    title: ''
+});

package/dist/ui/templates/seaweed-layout/EntryGroup.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { ProjectGroup, SnippetMeta } from "../index";
+	import { PinyaCard } from "../../elements/index";
+
+	let {
+		title,
+		entryList
+	}: ProjectGroup = $props();
+
+	const isSpecial = entryList.length % 3 === 1;
+
+	let normalUiList: SnippetMeta[] = isSpecial
+		? [...entryList.slice(0, -4)]
+		: [...entryList];
+	let overflowUiList: SnippetMeta[] = isSpecial
+		? [...entryList.slice(-4)]
+		: [];
+
+
+	// <!--todo: implement in seaweedlayout #migration-->
+	let inputValue = $state("");
+	let styleStr = $state("");
+	$effect(() => {
+		const termList = inputValue.split(",");
+
+		const chipList: string[] = [];
+		termList.forEach((_, idx) => {
+			termList[idx] = `.qt-${termList[idx]}`;
+			chipList.push(`.text-chip${termList[idx]}`);
+		});
+		styleStr = `<style>
+			${termList.join(", ")} {
+				font-weight: bold
+			}
+
+			${chipList.join(", ")} {
+				background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
+				color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
+			}
+			</style>`;
+	});
+</script>
+
+<div class="mt-8 flex flex-col items-center">
+	<PinyaCard widthClass="w-full" className="mb-8">
+		<h2>{title}</h2>
+	</PinyaCard>
+	<div class="normal-project-container">
+		{#each normalUiList as ui (ui.key)}
+			{@render ui.component({})}
+		{/each}
+	</div>
+	<div class="overflow-project-container">
+		{#each overflowUiList as ui (ui.key)}
+			{@render ui.component({})}
+		{/each}
+	</div>
+</div>
+
+<!--todo: implement in seaweedlayout #migration-->
+<!--{@html styleStr}-->
+
+<!-- Force tailwind to pickup some classes -->
+<div class="hidden rounded-2xl hover:brightness-110"></div>
+
+<style>
+    .normal-project-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        margin: auto;
+        /* 3 containers + 2 gaps + extra rem */
+        max-width: calc((28rem * 3) + 5rem);
+        justify-content: center;
+        margin-bottom: 2rem;
+        align-items: start;
+    }
+
+    .overflow-project-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        margin: auto;
+        /* 2 containers + 1 gap + extra rem */
+        max-width: calc((28rem * 2) + 3rem);
+        justify-content: center;
+        align-items: start;
+    }
+</style>

package/dist/ui/templates/seaweed-layout/EntryGroup.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ProjectGroup } from "../index";
+declare const EntryGroup: import("svelte").Component<ProjectGroup, {}, "">;
+type EntryGroup = ReturnType<typeof EntryGroup>;
+export default EntryGroup;

package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { ProjectGroup, SnippetMeta } from "../index";
+	import ProjectGroupConfig from "./ProjectGroupConfig.svelte";
+
+	interface Props {
+		layout: ProjectGroup[];
+		orderUrl: string;
+		allEntries: SnippetMeta[];
+	}
+
+	let {
+		layout = $bindable(),
+		orderUrl = $bindable(),
+		allEntries
+	}: Props = $props();
+</script>
+
+<br>
+<h3>Site ordering</h3>
+<blockquote>Sorry! This part of the website is still WIP, but here it is anyway. As long as it functions</blockquote>
+
+<!-- formatting: group1:entry1|entry2,group2:entry3
+ : <= separates the group header, the entries, and the class
+ | <= separates each entries
+ , <= separates each group
+ -->
+<div class="advanced-setting-list">
+	{#each layout as group, groupIndex (group.key)}
+		<ProjectGroupConfig
+			bind:layout={layout}
+			bind:orderUrl={orderUrl}
+			{allEntries}
+			{group}
+			{groupIndex}
+		/>
+	{/each}
+</div>
+
+<style>
+    .advanced-setting-list {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+</style>

package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ProjectGroup, SnippetMeta } from "../index";
+interface Props {
+    layout: ProjectGroup[];
+    orderUrl: string;
+    allEntries: SnippetMeta[];
+}
+declare const EntryOrderConfig2: import("svelte").Component<Props, {}, "orderUrl" | "layout">;
+type EntryOrderConfig2 = ReturnType<typeof EntryOrderConfig2>;
+export default EntryOrderConfig2;