@turnipxenon/pineapple 2.10.0 → 3.0.0-alpha.1

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { ModalProps } from 'svelte-modals';
+	import { setMode, userPrefersMode } from 'mode-watcher';
+
+	import { m } from '../../../../paraglide/messages';
+	import ModalBase from '../../../components/ModalBase.svelte';
+	import DarkIcon from '../../../../assets/icons/icon-dark-mode.svg';
+	import LightIcon from '../../../../assets/icons/icon-light-mode.svg';
+	import ConstrastIcon from '../../../../assets/icons/icon-contrast.svg';
+	import LanguagePicker from './LanguagePicker.svelte';
+
+	let props: ModalProps = $props();
+
+
+	interface ToggleItem {
+		key: 'light' | 'dark' | 'system'
+		imageSrc: string,
+		label: string,
+	}
+
+	const modes: ToggleItem[] = [
+		{ key: 'light', imageSrc: LightIcon, label: 'Light' },
+		{ key: 'dark', imageSrc: DarkIcon, label: 'Dark' },
+		{ key: 'system', imageSrc: ConstrastIcon, label: 'System' }
+	];
+
+	let selectedItem: ToggleItem = $state(modes[0]);
+
+	// when mode is edited outside, adjust toggle button
+	// do not use runes here because we only want explicit changes outside
+	// our control here!
+	userPrefersMode.subscribe((value) => {
+		const si = modes.find(m => m.key === value);
+		if (selectedItem !== si && si) {
+			selectedItem = si;
+		}
+	});
+
+	// when mode is changed inside the button, adjust the mode
+	$effect(() => {
+		switch (selectedItem?.key) {
+			case 'dark':
+				setMode('dark');
+				break;
+			case 'light':
+				setMode('light');
+				break;
+			case 'system':
+				setMode('system');
+				break;
+			default:
+				break;
+		}
+	});
+</script>
+
+<ModalBase {...props}>
+	<div class="wrapper">
+		<h2>{m.settings()}</h2>
+
+		<fieldset class="btn-group border-primary-500 border-2 flex-col p-2 md:flex-row">
+			<legend class="bg-surface-100-900 pl-4 pr-4">Mode</legend>
+			{#each modes as mode (mode)}
+				<button
+					type="button"
+					title={mode.label}
+					class={`btn pt-3 pb-3 hover:brightness-125
+				${mode.key === selectedItem.key ? 'bg-secondary-400 dark:bg-secondary-800' : 'preset-outlined-primary-300-700'}
+				`}
+					onclick={() => { setMode(mode.key) }}
+				>
+					<img
+						src={mode.imageSrc}
+						aria-hidden="true"
+						alt=""
+						class={`icon
+					${mode.key === selectedItem.key ? 'reverse' : ''}
+					`}
+					>
+					{mode.label}
+				</button>
+			{/each}
+		</fieldset>
+
+		<LanguagePicker />
+
+		<div class="actions">
+			<button class="btn preset-filled-primary-400-600 text-surface-100" onclick={() => props.close()}
+							title="Close modal">
+				Close
+			</button>
+		</div>
+	</div>
+</ModalBase>
+
+<style>
+    .actions {
+        display: flex;
+        flex-direction: row-reverse;
+        margin-top: 1.4lh;
+    }
+
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        text-align: start;
+        gap: 1lh;
+    }
+</style>

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte.d.ts

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

package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Combobox } from '@skeletonlabs/skeleton-svelte';
+	import { getLocale, localizeHref } from '../../../../paraglide/runtime';
+
+	interface ComboxData {
+		label: string;
+		value: 'en' | 'fr' | 'tl';
+	}
+
+	const comboboxData: ComboxData[] = [
+		{ label: 'English', value: 'en' },
+		{ label: 'French', value: 'fr' },
+		{ label: 'Tagalog', value: 'tl' }
+	];
+
+	let selectedCountry = $state([getLocale()]);
+
+	interface ValueDetail {
+		value: string[];
+	}
+
+	const onValueChange = (e: ValueDetail) => {
+		const data = comboboxData.find((d) => d.value === e.value[0]);
+		if (data) {
+			selectedCountry = [data.value];
+			location.href = localizeHref('./', { locale: data.value });
+		}
+	};
+</script>
+
+<Combobox
+	width="w-full"
+	labelText="text-md"
+	inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
+	inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
+	inputGroupButton="size-[3rem]"
+	inputGroupArrow="size-[2rem] m-auto"
+	contentBackground="bg-surface-100-900 border-primary-500 border-2"
+	optionActive="bg-secondary-400-600"
+	optionHover="hover:brightness-75 dark:hover:brightness-125"
+	optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
+	data={comboboxData}
+	defaultValue={selectedCountry}
+	value={selectedCountry}
+	onValueChange={onValueChange}
+	label="Select Language"
+	placeholder="Select Language"
+/>

package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte.d.ts

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

package/dist/{template → ui/modules}/seaweed/ChumBucket.svelte

@@ -1,33 +1,33 @@
-<script>import Card from "../../components/Card.svelte";
-import {} from "../..";
-import { onMount } from "svelte";
-let hasTriedGettingChumBucket = false;
-let pageMetaList = [];
-const loadPageMeta = async () => {
-  fetch("/api/get-latest-blogs").then((resp) => resp.json()).then((json) => {
-    pageMetaList = json;
-    hasTriedGettingChumBucket = true;
-  }).catch((_) => {
-    hasTriedGettingChumBucket = true;
-  });
-};
-onMount(() => {
-  loadPageMeta();
-});
+<script lang="ts">
+	import { type PageMeta } from "../../..";
+	import { onMount } from "svelte";
+	import { PinyaCard } from "../../elements/index";
+
+	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>
 
-<Card>
-	<div slot="content" class="chum-bucket">
-		<h2>More about me...</h2>
+<PinyaCard
+	widthClass='max-w-3xl'>
+	<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>
 
-		{#if pageMetaList.length > 0}
-			<h3><b>My latest blogs (sounds too fancy)</b></h3>
-		{/if}
-
 		<div class="chum-bucket-grid">
 			{#if hasTriedGettingChumBucket}
 				{#each pageMetaList as pageMeta}
@@ -38,7 +38,7 @@ onMount(() => {
 							     alt={pageMeta.imageAlt}>
 						{/if}
 						<div>
-							<h3><a href={`https://turnipxenon.com/${pageMeta.relativeLink}`}>{pageMeta.title}</a></h3>
+							<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}
@@ -50,12 +50,12 @@ onMount(() => {
 				{/each}
 			{:else}
 				{#each { length: 10 } as _}
-					<div class="placeholder" />
+					<div class="placeholder"></div>
 				{/each}
 			{/if}
 		</div>
 	</div>
-</Card>
+</PinyaCard>
 
 <style>
     .chum-bucket-item {
@@ -74,8 +74,8 @@ onMount(() => {
 
 
     .chum-bucket {
-        padding: 1.5lh 2em;
-        max-width: 600px;
+        padding: 1.5lh 0;
+		    width: 100%;
     }
 
     .chum-bucket-grid {

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,45 @@
+<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';
+
+	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" />
+
+{@render children()}
+
+<!--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/confirmation-modal/props.js

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

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

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

package/dist/ui/templates/index.js

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

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

@@ -0,0 +1,113 @@
+<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()
+	}: {
+		children: Snippet
+		appBarLead?: 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>
+<div aria-hidden="true" class="footer-space"></div>
+
+
+<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,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    appBarLead?: 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.10.0",
+  "version": "3.0.0-alpha.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",
@@ -18,43 +18,45 @@
     "to-dev": "git checkout main && git pull origin main && git branch -d turnip/dev && git checkout -b turnip/dev"
   },
   "devDependencies": {
+    "@inlang/paraglide-js": "2.0.0-beta.30",
     "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.2",
-    "@sveltejs/package": "^2.2.1",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/package": "^2.3.7",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
-    "autoprefixer": "^10.4.14",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "8.4.35",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
+    "prettier-plugin-svelte": "^3.2.6",
     "prisma": "^5.12.1",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.6",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "svelte2tsx": "^0.6.20",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^4.0.14",
     "tslib": "^2.4.1",
-    "typescript": "^5.1.6",
-    "vite": "^5.1.5"
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
   },
   "dependencies": {
     "@prisma/client": "^5.12.1",
-    "@skeletonlabs/skeleton": "^2.9.0",
-    "@skeletonlabs/tw-plugin": "^0.3.1",
-    "@sveltejs/kit": "^2.5.2",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@skeletonlabs/skeleton": "^3.1.0",
+    "@skeletonlabs/skeleton-svelte": "^1.0.0",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.14",
     "@types/htmlparser2": "^3.10.7",
     "@types/node": "^20.11.25",
     "highlight.js": "^11.8.0",
     "htmlparser2": "^9.1.0",
+    "mode-watcher": "^0.5.1",
     "node-html-parser": "^6.1.5",
     "publint": "^0.2.7",
     "string-width": "^7.1.0",
-    "svelte": "^4.2.12",
+    "svelte": "^5.0.0",
+    "svelte-modals": "^2.0.1",
     "ts-node": "^10.9.1"
   },
   "exports": {
@@ -62,13 +64,29 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./components": {
+      "types": "./dist/ui/components/index.d.ts",
+      "svelte": "./dist/ui/components/index.js"
+    },
+    "./elements": {
+      "types": "./dist/ui/elements/index.d.ts",
+      "svelte": "./dist/ui/elements/index.js"
+    },
+    "./modules": {
+      "types": "./dist/ui/modules/index.d.ts",
+      "svelte": "./dist/ui/modules/index.js"
+    },
+    "./templates": {
+      "types": "./dist/ui/templates/index.d.ts",
+      "svelte": "./dist/ui/templates/index.js"
+    },
     "./app.postcss": "./src/lib/app.postcss",
     "./theme.postcss": "./src/lib/theme.postcss"
   },
   "files": [
     "dist",
-    "./src/lib/app.postcss",
-    "./src/lib/theme.postcss"
+    "src/lib/styles/app.css",
+    "src/lib/theme.css"
   ],
   "repository": "https://github.com/TurnipXenon/pineapple",
   "author": "turnipxenon <turnipxenon@gmail.com>",