@turnipxenon/pineapple 3.0.0 → 3.1.0-alpha.2

package/dist/{components/navigation_component → ui/modules/NavigationMenu}/NavigationControl.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { page } from "$app/state";
-
-	import { Card } from "../index";
 	import { goto } from "$app/navigation";
+	import { PinyaButton, PinyaCard } from "../../elements/index";
 
 	interface Props {
 		currentIndex?: number;
@@ -11,7 +10,11 @@
 		pageSize: number;
 	}
 
-	let { currentIndex = $bindable(0), contentLength, pageSize = $bindable() }: Props = $props();
+	let {
+		currentIndex = $bindable(0),
+		contentLength,
+		pageSize = $bindable()
+	}: Props = $props();
 
 	const queryIndex = page.url.searchParams.get("index");
 	if (queryIndex) {
@@ -43,28 +46,29 @@
 </script>
 
 <div class="navigation-control-container">
-	<button class="navigation-control-button"
-	        disabled={currentIndex <= 0}
-	        onclick={() => {movePage(false)}}>{"<"}</button>
-	<Card marginBottom="0">
-		{#snippet content()}
-			<p style="margin: 1em">Page {currentIndex + 1}</p>
-		{/snippet}
-	</Card>
-	<button class="navigation-control-button"
-	        disabled={(currentIndex + 1) * pageSize >= contentLength}
-	        onclick={() => {movePage(true)}}>{">"}</button>
+	<PinyaButton
+		classes="w-12 h-12"
+		disabled={currentIndex <= 0}
+		onclick={() => {movePage(false)}}
+	>&lt;
+	</PinyaButton>
+	<div>
+		<PinyaCard widthClass="" paddingClass="pt-2 pb-2 pl-8 pr-8">
+			<span class="fake-h2">Page {currentIndex + 1}</span>
+		</PinyaCard>
+	</div>
+	<PinyaButton
+		classes="w-12 h-12"
+		disabled={(currentIndex + 1) * pageSize >= contentLength}
+		onclick={() => {movePage(true)}}
+	>&gt;
+	</PinyaButton>
 </div>
 
 <style>
     .navigation-control-container {
         display: flex;
         justify-content: space-between;
-        margin: 1lh 0;
-    }
-
-    .navigation-control-button {
-		    /* todo: migration */
-        /*@apply btn preset-filled-secondary-500;*/
+        align-items: center;
     }
 </style>

package/dist/{components/navigation_component/NavigationComponent.svelte → ui/modules/NavigationMenu/NavigationMenu.svelte}

@@ -1,20 +1,19 @@
 <script lang="ts">
 	import NavigationControl from "./NavigationControl.svelte";
 	import { parsePageMeta, type ParsePageMetaCompareFn } from "./PageMeta";
-	import { Card } from "../index";
-	import { createGoToFunction } from "../../util/util";
+	import { Card } from "../../../components/index";
+	import { PinyaCard } from "../../elements/index";
+	import { localizeHref } from "../../../paraglide/runtime.js";
 
-
-	
 	interface Props {
 		fileList: Record<string, unknown>;
 		jsonList: Record<string, unknown>;
 		title?: string | undefined;
-		imageMap?: any;
+		imageMap?: Map<string, string>;
 		shouldAllowControl?: boolean;
 		/**
-	 * Should include a slash before and after the path
-	 */
+		 * Should include a slash before and after the path
+		 */
 		parentSubpath: string;
 		allowUpperControl?: boolean;
 		compareFn?: undefined | ParsePageMetaCompareFn;
@@ -42,60 +41,65 @@
 
 <div class="navigation-wrapper">
 	{#if (title)}
-		<Card>
-			{#snippet content()}
-						<h1  class="default-card navigation-title">
+		<div>
+			<PinyaCard widthClass="">
+				<h1 class="navigation-title">
 					{title}
 				</h1>
-					{/snippet}
-		</Card>
+			</PinyaCard>
+		</div>
 	{/if}
 
 	{#if allowUpperControl && shouldAllowControl}
-		<NavigationControl bind:currentIndex={currentIndex}
-		                   bind:contentLength={pageFlatList.length}
-		                   bind:pageSize={pageSize}></NavigationControl>
+		<NavigationControl
+			bind:currentIndex={currentIndex}
+			contentLength={pageFlatList.length}
+			bind:pageSize={pageSize}></NavigationControl
+		>
 	{/if}
 
 	<div class="navigation-component">
 		<!-- all the misc routes-->
-		{#each visiblePages as pageMeta}
+		{#each visiblePages as pageMeta (pageMeta.title)}
 			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
-			<button class="navigation-element"
-			        title={fullPath}
-			        onclick={createGoToFunction(fullPath)}>
-				{#if pageMeta.imageUrl}
-					<img src={pageMeta.imageUrl}
-					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
-				{/if}
-				<section class="blurb-text">
-					<h2>{pageMeta.title}</h2>
-					<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
-					<p>{pageMeta.description ?? ""}</p>
-					Tags:
-					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
-						{#each pageMeta.tags as tagValue}
-							&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
-						{/each}
-					{:else}
-						None
+			<a href={localizeHref(fullPath)} class="card-anchor">
+				<PinyaCard
+					widthClass="w-full"
+					className="navigation-element"
+				>
+					{#if pageMeta.imageUrl}
+						<img src={pageMeta.imageUrl}
+						     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
 					{/if}
-				</section>
-			</button>
+					<section class="blurb-text">
+						<h2>{pageMeta.title}</h2>
+						<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
+						<p>{pageMeta.description ?? ""}</p>
+						Tags:
+						{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
+							{#each pageMeta.tags as tagValue, idx (idx)}
+								&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
+							{/each}
+						{:else}
+							None
+						{/if}
+					</section>
+				</PinyaCard>
+			</a>
 		{/each}
 
 		{#if visiblePages.length === 0}
 			<Card>
 				{#snippet content()}
-								<p class="default-card" >Sorry, no content was found</p>
-							{/snippet}
+					<p class="default-card">Sorry, no content was found</p>
+				{/snippet}
 			</Card>
 		{/if}
 	</div>
 
 	{#if shouldAllowControl}
 		<NavigationControl bind:currentIndex={currentIndex}
-		                   bind:contentLength={pageFlatList.length}
+		                   contentLength={pageFlatList.length}
 		                   bind:pageSize={pageSize}></NavigationControl>
 	{/if}
 
@@ -110,13 +114,13 @@
             border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
         }
 
-        .navigation-element {
+        :global(.navigation-element) {
             flex-direction: column;
         }
     }
 
     @container (min-width: 801px) {
-        .navigation-element {
+        :global(.navigation-element) {
             flex-direction: row;
         }
 
@@ -125,8 +129,8 @@
         }
     }
 
-    .navigation-element {
-		    /* todo: migration */
+    :global(.navigation-element) {
+        /* todo: migration */
         /*@apply btn card card-hover bg-surface-100 dark:bg-surface-900;*/
         container-type: inline-size;
         display: flex;
@@ -166,9 +170,31 @@
         flex-direction: column;
         max-width: 1000px;
         width: 100%;
+		    gap: 1lh;
     }
 
     .tag-container {
         margin: 0.25lh 0;
     }
+
+    a.card-anchor {
+		    filter: none;
+    }
+
+    :global(.navigation-element) {
+		    transition: 0.3s;
+    }
+
+    :global(.navigation-element:hover) {
+        transform: scale(1.02);
+		    box-shadow: 10px 5px 5px rgba(49, 8, 0, 0.25);
+    }
+
+    :global(.dark .navigation-element:hover) {
+		    box-shadow: 10px 5px 5px rgba(16, 0, 0, 0.35);
+    }
+
+    h2 {
+		    text-align: start;
+    }
 </style>

package/dist/{components/navigation_component/NavigationComponent.svelte.d.ts → ui/modules/NavigationMenu/NavigationMenu.svelte.d.ts}

@@ -3,17 +3,17 @@ interface Props {
     fileList: Record<string, unknown>;
     jsonList: Record<string, unknown>;
     title?: string | undefined;
-    imageMap?: any;
+    imageMap?: Map<string, string>;
     shouldAllowControl?: boolean;
     /**
- * Should include a slash before and after the path
- */
+     * Should include a slash before and after the path
+     */
     parentSubpath: string;
     allowUpperControl?: boolean;
     compareFn?: undefined | ParsePageMetaCompareFn;
     pageSize?: number;
     currentIndex?: number;
 }
-declare const NavigationComponent: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
-type NavigationComponent = ReturnType<typeof NavigationComponent>;
-export default NavigationComponent;
+declare const NavigationMenu: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
+type NavigationMenu = ReturnType<typeof NavigationMenu>;
+export default NavigationMenu;

package/dist/{components/navigation_component → ui/modules/NavigationMenu}/PageMeta.d.ts

@@ -3,14 +3,14 @@ export interface PageMeta {
     description?: string;
     imageAlt?: string;
     /**
-     * imageID is an ID that NavigationComponent can use to identify imported images
+     * imageID is an ID that NavigationMenu can use to identify imported images
      *
      * To use imageID:
      * 1. Add the imageID entry to the meta.json for the page
      * 2. Create a typescript file with the variable ImageMap: Map<string, string>
      * 3. Add a new entry with your imageID as key, and the image url as the value. Since this is
      * Typescript, you can use import ImageUrl from "./path.png" as you would normally do.N
-     * 4. Add ImageMap as an argument to your NavigationComponent.
+     * 4. Add ImageMap as an argument to your NavigationMenu.
      * Overall, this involves four files
      * - Your navigation page: ./+page.svelte
      * - Your image map typescript: ImageMap.ts
@@ -45,14 +45,14 @@ export interface SimplePageMeta {
     description?: string;
     imageAlt?: string;
     /**
-     * imageID is an ID that NavigationComponent can use to identify imported images
+     * imageID is an ID that NavigationMenu can use to identify imported images
      *
      * To use imageID:
      * 1. Add the imageID entry to the meta.json for the page
      * 2. Create a typescript file with the variable ImageMap: Map<string, string>
      * 3. Add a new entry with your imageID as key, and the image url as the value. Since this is
      * Typescript, you can use import ImageUrl from "./path.png" as you would normally do.N
-     * 4. Add ImageMap as an argument to your NavigationComponent.
+     * 4. Add ImageMap as an argument to your NavigationMenu.
      * Overall, this involves four files
      * - Your navigation page: ./+page.svelte
      * - Your image map typescript: ImageMap.ts

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

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

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

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

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

@@ -1,2 +1,2 @@
-export * from "./seaweed";
 export * from "./projects";
+export * from "./NavigationMenu";

package/dist/ui/modules/index.js

@@ -1,2 +1,2 @@
-export * from "./seaweed";
 export * from "./projects";
+export * from "./NavigationMenu";

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

@@ -1,110 +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;
-    }
+<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/LanguagePicker.svelte

@@ -1,43 +1,43 @@
-<script lang="ts">
-	import { deLocalizeHref, getLocale, localizeHref } from "../../../../paraglide/runtime";
-	import PinyaCombobox from "../../../elements/pinya-combobox/PinyaCombobox.svelte";
-	import { appState } from "../../../templates/PinyaPageLayout/runes.svelte";
-
-	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];
-			const pathname = deLocalizeHref(location.href);
-			location.href = localizeHref(pathname, { locale: data.value });
-		}
-	};
-
-	let disabled = $derived(!appState.isLanguagePickerAvailable);
-</script>
-
-<PinyaCombobox
-	data={comboboxData}
-	value={selectedCountry}
-	defaultValue={selectedCountry}
-	label="Select Language"
-	placeholder="Select Language"
-	{onValueChange}
-	{disabled}
+<script lang="ts">
+	import { deLocalizeHref, getLocale, localizeHref } from "../../../../paraglide/runtime";
+	import PinyaCombobox from "../../../elements/pinya-combobox/PinyaCombobox.svelte";
+	import { appState } from "../../../templates/PinyaPageLayout/runes.svelte";
+
+	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];
+			const pathname = deLocalizeHref(location.href);
+			location.href = localizeHref(pathname, { locale: data.value });
+		}
+	};
+
+	let disabled = $derived(!appState.isLanguagePickerAvailable);
+</script>
+
+<PinyaCombobox
+	data={comboboxData}
+	value={selectedCountry}
+	defaultValue={selectedCountry}
+	label="Select Language"
+	placeholder="Select Language"
+	{onValueChange}
+	{disabled}
 />