@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha.1

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/{src/lib/template → dist/ui/modules}/seaweed/ChumBucket.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import Card from "$pkg/components/Card.svelte";
-	import { type PageMeta } from "$pkg";
+	import { type PageMeta } from "../../..";
 	import { onMount } from "svelte";
+	import { PinyaCard } from "../../elements/index";
 
-	let hasTriedGettingChumBucket = false;
-	let pageMetaList: PageMeta[] = [];
+	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[];
@@ -19,18 +19,15 @@
 	});
 </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}
@@ -41,7 +38,7 @@
 							     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}
@@ -53,14 +50,14 @@
 				{/each}
 			{:else}
 				{#each { length: 10 } as _}
-					<div class="placeholder" />
+					<div class="placeholder"></div>
 				{/each}
 			{/if}
 		</div>
 	</div>
-</Card>
+</PinyaCard>
 
-<style lang="postcss">
+<style>
     .chum-bucket-item {
         width: 100%;
         display: flex;
@@ -77,8 +74,8 @@
 
 
     .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/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.9.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,15 +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",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*",
-    "./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>",

package/src/lib/styles/app.css

@@ -0,0 +1,53 @@
+@import 'tailwindcss';
+@import "@skeletonlabs/skeleton";
+@import "@skeletonlabs/skeleton/optional/presets";
+@import "@skeletonlabs/skeleton/themes/crimson";
+@import "./turnip-theme.css";
+
+@source "../node_modules/@skeletonlabs/skeleton-svelte/dist";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@custom-variant turnip (&:where([data-theme=turnip], [data-theme=turnip] *));
+
+.footer-space {
+    width: 100%;
+    height: calc(var(--dialog-box-height) + 4em);
+}
+
+a.dialog-choice {
+    cursor: url("$pkg/assets/icons/chat-cursor.svg"), auto;
+}
+
+a.external-link {
+    cursor: url("$pkg/assets/icons/external-link.svg"), auto;
+}
+
+#toast-progress {
+    position: relative;
+    top: 5px;
+    left: 6px;
+    width: calc(100% - 12px);
+    border-radius: 8px;
+    background: transparent;
+    height: 10px;
+}
+
+#toast-progress::-moz-progress-bar {
+    background: rgba(var(--color-secondary-500));
+}
+
+.dialog-box {
+    background-color: rgb(var(--color-surface-500) / 0.9);
+    position: fixed;
+    bottom: 0;
+    width: var(--dialog-box-width); /*75em + 4em padding*/
+    height: var(--dialog-box-height);
+    max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
+}
+
+.dark .dialog-box {
+    background-color: rgb(var(--color-surface-900) / 0.95);
+    --tw-ring-color: rgb(var(--color-text-400));
+    /*background-color: red;*/
+}

package/{.svelte-kit/__package__/theme.postcss → src/lib/theme.css}

@@ -1,5 +1,6 @@
 @tailwind variants;
 
+/*todo: delete after all downstream works #migration*/
 :root {
     /* =~= Theme Properties =~= */
     --theme-font-family-base: system-ui;
@@ -111,7 +112,3 @@
     --color-text-800: 38 29 28; /* ⬅ #261d1c */
     --color-text-900: 31 24 23; /* ⬅ #1f1817 */
 }
-
-.app-shell-token {
-    @apply bg-surface-600 dark:bg-surface-900;
-}

package/.eslintignore

@@ -1,16 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
-
-# Don't format markdowns lol
-*.md

package/.eslintrc.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-	root: true,
-	parser: "@typescript-eslint/parser",
-	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
-	plugins: ["svelte3", "@typescript-eslint"],
-	ignorePatterns: ["*.cjs"],
-	overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
-	settings: {
-		"svelte3/typescript": () => require("typescript")
-	},
-	parserOptions: {
-		sourceType: "module",
-		ecmaVersion: 2020
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	}
-};

package/.gitignore

@@ -1,24 +0,0 @@
-.DS_Store
-node_modules
-/build
-build/
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
-.vscode
-.idea
-.idea/
-dist
-/.vercel/
-
-# Prisma for debugging; need to migrate some Prisma function to Seaweed
-prisma
-
-#/prisma/migrations/20240408050417_init/migration.sql
-#/prisma/migrations/migration_lock.toml
-#/src/lib/server-temp/prisma.ts
-#/prisma/schema.prisma