@turnipxenon/pineapple 3.1.0-alpha.9 → 4.0.0-alpha.1

package/README.md

@@ -106,6 +106,16 @@ As a reference as to why we need to do above, we use the UI framework Skeleton,
 
 TODO: if we are happy with our base, publish it to github and link the corresponding git commits here
 
+7. Update to "@sveltejs/adapter-auto": "^4.0.0", we need node 22
+8. Add alias in svelte.config
+
+```js
+kit: {
+	alias: {
+		$pkg: path.resolve("./node_modules/@turnipxenon/pineapple/dist/lib")
+	}
+}
+```
 
 ## Local linking
 

package/dist/index.d.ts

@@ -1,6 +1,4 @@
-export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
-export * from "./components/index";
-export * from "./components/overrideable_meta/index";
+export * from "./modules/overrideable_meta/index";
 export * from "./ui/modules/NavigationMenu/index";
 export * from "./types/api/index";
 export * from "./components/dialog_manager/DialogManagerStore";
@@ -11,4 +9,6 @@ export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
 export * from "./api/index";
 export type { IDialogManager } from "./components/dialog_manager/IDialogManager";
+export { default as BlogTemplate } from "./ui/templates/blog_template/BlogTemplate.svelte";
+export { default as DialogOverlay } from "./ui/modules/dialog_overlay/DialogOverlay.svelte";
 export { dialogManager } from "./components/dialog_manager/DialogManager";

package/dist/index.js

@@ -1,7 +1,5 @@
 // noinspection JSUnusedGlobalSymbols
-export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
-export * from "./components/index";
-export * from "./components/overrideable_meta/index";
+export * from "./modules/overrideable_meta/index";
 export * from "./ui/modules/NavigationMenu/index";
 export * from "./types/api/index";
 export * from "./components/dialog_manager/DialogManagerStore";
@@ -11,4 +9,6 @@ export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
 export * from "./api/index";
+export { default as BlogTemplate } from "./ui/templates/blog_template/BlogTemplate.svelte";
+export { default as DialogOverlay } from "./ui/modules/dialog_overlay/DialogOverlay.svelte";
 export { dialogManager } from "./components/dialog_manager/DialogManager";

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

@@ -16,6 +16,7 @@
 	import js from "shiki/langs/javascript.mjs";
 	import ts from "shiki/langs/typescript.mjs";
 	import markdown from "shiki/langs/markdown.mjs";
+	import xml from "shiki/langs/xml.mjs";
 
 	// https://shiki.style/guide/sync-usage
 	const shiki = createHighlighterCoreSync({
@@ -23,7 +24,7 @@
 		// Implement your import theme.
 		themes: [themeLight, themeDark],
 		// Implement your imported and supported languages.
-		langs: [console, html, css, js, ts, markdown]
+		langs: [console, html, css, js, ts, markdown, xml]
 	});
 </script>
 

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

@@ -1,6 +1,6 @@
 export interface CodeBlockProps {
     code?: string;
-    lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown';
+    lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown' | 'xml';
     base?: string;
     rounded?: string;
     shadow?: string;

package/dist/ui/modules/NavigationMenu/NavigationMenu.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import NavigationControl from "./NavigationControl.svelte";
 	import { parsePageMeta, type ParsePageMetaCompareFn } from "./PageMeta";
-	import { Card } from "../../../components/index";
 	import { PinyaCard } from "../../elements/index";
 	import { localizeHref } from "../../../paraglide/runtime.js";
 
@@ -62,7 +61,7 @@
 		<!-- all the misc routes-->
 		{#each visiblePages as pageMeta (pageMeta.title)}
 			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
-			<a href={localizeHref(fullPath)} class="card-anchor">
+			<a href={localizeHref(fullPath)} class="card-anchor a-as-btn">
 				<PinyaCard
 					widthClass="w-full"
 					className="navigation-element"
@@ -89,11 +88,9 @@
 		{/each}
 
 		{#if visiblePages.length === 0}
-			<Card>
-				{#snippet content()}
+			<PinyaCard>
 					<p class="default-card">Sorry, no content was found</p>
-				{/snippet}
-			</Card>
+			</PinyaCard>
 		{/if}
 	</div>
 

package/dist/{components → ui/modules}/dialog_overlay/DialogOverlay.svelte

@@ -2,15 +2,15 @@
 	import { slide } from "svelte/transition";
 	import { onMount } from "svelte";
 
-	import AresHappy from "../../assets/characters/ares/ares_happy.webp";
-	import { DialogState } from "../../types/pineapple_fiber/DialogState";
-	import { dialogManager } from "../dialog_manager/DialogManager";
-	import PinyaCard from "../../ui/elements/PinyaCard/PinyaCard.svelte";
-	import { appState } from "../../ui/templates/index";
-	import CloseIcon from "../../assets/icons/close.svg";
-	import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
-	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
-	import PinyaButton from "../../ui/elements/PinyaButton/PinyaButton.svelte";
+	import AresHappy from "../../../assets/characters/ares/ares_happy.webp";
+	import { DialogState } from "../../../types/pineapple_fiber/DialogState";
+	import { dialogManager } from "../../../components/dialog_manager/DialogManager";
+	import PinyaCard from "../../elements/PinyaCard/PinyaCard.svelte";
+	import { appState } from "../../templates/index";
+	import CloseIcon from "../../../assets/icons/close.svg";
+	import FABIcon from "../../../assets/bg_tiled/bg_tiled_turnip.png";
+	import { enableDialogueOverlay } from "../../../components/dialog_manager/DialogManagerStore";
+	import PinyaButton from "../../elements/PinyaButton/PinyaButton.svelte";
 
 	let currentMessage = $state("");
 	let currentPortrait = $state(AresHappy);
@@ -199,7 +199,8 @@
     }
 
     :global(.fab) {
-        /*@apply btn preset-filled-tertiary-500;*/
+		    position: relative;
+        transform: scale3d(1, 1, 1.5);
         background-color: var(--color-tertiary-500);
         padding: 0.3rem;
         width: clamp(2rem, 5vw, 4rem);

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

@@ -1,2 +1,4 @@
 export * from "./projects";
 export * from "./NavigationMenu";
+export { default as BlogTemplate } from "../templates/blog_template/BlogTemplate.svelte";
+export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";

package/dist/ui/modules/index.js

@@ -1,2 +1,4 @@
 export * from "./projects";
 export * from "./NavigationMenu";
+export { default as BlogTemplate } from "../templates/blog_template/BlogTemplate.svelte";
+export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";

package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte

@@ -10,7 +10,7 @@
 	import GeneralSettingsModal from "../../modules/modals/general-settings/GeneralSettingsModal.svelte";
 	import { appState } from "./runes.svelte";
 	import { enableBackground } from "../../../store";
-	import DialogOverlay from "../../../components/dialog_overlay/DialogOverlay.svelte";
+	import DialogOverlay from "../../modules/dialog_overlay/DialogOverlay.svelte";
 
 	let {
 		children,
@@ -70,13 +70,14 @@
 {@render header('hidden shadow-none w-full')}
 {@render header('fixed z-15 w-[105vw]')}
 
-<DialogOverlay></DialogOverlay>
 <RandomizedBackground enabled={$enableBackground} />
 
 <div class="default-page-container">
 	{@render children?.()}
 </div>
 
+<DialogOverlay></DialogOverlay>
+
 {#if footer}
 	{@render footer()}
 {:else }

package/dist/{components → ui/templates}/blog_template/BlogTemplate.svelte

@@ -2,10 +2,10 @@
 	import "./blog-template.css";
 	import { onDestroy, onMount, type Snippet } from "svelte";
 	import BlogTemplateInner from "./BlogTemplateInner.svelte";
-	import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
-	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
-	import PinyaCard from "../../ui/elements/PinyaCard/PinyaCard.svelte";
-	import { appState } from "../../ui/templates/index";
+	import type { SimplePageMeta } from "../../modules/NavigationMenu/index";
+	import { enableDialogueOverlay } from "../../../components/dialog_manager/DialogManagerStore";
+	import PinyaCard from "../../elements/PinyaCard/PinyaCard.svelte";
+	import { appState } from "../index";
 
 	// grab page meta from the adjacent meta.json
 	interface Props {

package/dist/{components → ui/templates}/blog_template/BlogTemplate.svelte.d.ts

@@ -1,6 +1,6 @@
 import "./blog-template.css";
 import { type Snippet } from "svelte";
-import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
+import type { SimplePageMeta } from "../../modules/NavigationMenu/index";
 interface Props {
     pageMeta: SimplePageMeta;
     shouldFillWholePage?: boolean;

package/dist/{components → ui/templates}/blog_template/BlogTemplateInner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
+	import type { SimplePageMeta } from "../../modules/NavigationMenu/index";
 
 	interface Props {
 		pageMeta: SimplePageMeta;

package/dist/{components → ui/templates}/blog_template/BlogTemplateInner.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
+import type { SimplePageMeta } from "../../modules/NavigationMenu/index";
 interface Props {
     pageMeta: SimplePageMeta;
     children?: import('svelte').Snippet;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "3.1.0-alpha.9",
+  "version": "4.0.0-alpha.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",

package/dist/components/Card.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-	import { run } from 'svelte/legacy';
-
-	interface Props {
-		margin?: string;
-		marginBottom?: string;
-		overrideStyle?: string;
-		includeDataNoSnippet?: boolean;
-		additionalClass?: string[];
-		turnOnLightModeBorder?: boolean;
-		content?: import('svelte').Snippet<[any]>;
-	}
-
-	let {
-		margin = "0",
-		marginBottom = "2lh",
-		overrideStyle = "",
-		includeDataNoSnippet = true,
-		additionalClass = [],
-		turnOnLightModeBorder = true,
-		content
-	}: Props = $props();
-
-	// warning: don't forget the semi-colon when adding new style!
-	const style = `
-		--turnip-card-margin: ${margin};
-		--turnip-card-margin-bottom: ${marginBottom};
-		${overrideStyle};
-	`;
-
-	if (!content) {
-		console.error("Missing content slot in card. No content will be displayed.");
-	}
-
-	const originalClasses = ["card", "turnip-card bg-surface-100 dark:bg-surface-900"].concat(additionalClass).join(" ");
-	let classes = $state(originalClasses.slice());
-	const toggleLightModeBorder = (turnOnLightModeBorder: boolean) => {
-		classes = originalClasses;
-		if (turnOnLightModeBorder) {
-			classes += " light-mode-border border-surface-600 border-2 dark:border-0";
-		}
-	};
-	run(() => {
-		toggleLightModeBorder(turnOnLightModeBorder);
-	});
-</script>
-
-{#if (includeDataNoSnippet)}
-	<div class={classes} style={style} data-nosnippet>
-		{@render content?.({ class: "card", })}
-	</div>
-{:else }
-	<div class={classes} style={style}>
-		{@render content?.({ class: "card", })}
-	</div>
-{/if}
-
-<style>
-    .turnip-card {
-        margin: var(--turnip-card-margin);
-        margin-bottom: var(--turnip-card-margin-bottom);
-        border-radius: var(--theme-rounded-container);
-    }
-</style>

package/dist/components/Card.svelte.d.ts

@@ -1,12 +0,0 @@
-interface Props {
-    margin?: string;
-    marginBottom?: string;
-    overrideStyle?: string;
-    includeDataNoSnippet?: boolean;
-    additionalClass?: string[];
-    turnOnLightModeBorder?: boolean;
-    content?: import('svelte').Snippet<[any]>;
-}
-declare const Card: import("svelte").Component<Props, {}, "">;
-type Card = ReturnType<typeof Card>;
-export default Card;

package/dist/components/CarouselElement.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-
-    import {fly, slide, scale} from "svelte/transition";
-    interface Props {
-        activeGameIndex: number;
-        selfIndex: number;
-        children?: import('svelte').Snippet;
-    }
-
-    let { activeGameIndex, selfIndex, children }: Props = $props();
-
-</script>
-
-{#if (activeGameIndex === selfIndex)}
-	<!--todo: make section consistent size for all-->
-	<section class="game-showcase"
-	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
-		{@render children?.()}
-	</section>
-{/if}
-
-<style>
-    .game-showcase {
-        @apply snap-center rounded-container;
-        margin: auto;
-        width: 100%;
-    }
-</style>

package/dist/components/CarouselElement.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    activeGameIndex: number;
-    selfIndex: number;
-    children?: import('svelte').Snippet;
-}
-declare const CarouselElement: import("svelte").Component<Props, {}, "">;
-type CarouselElement = ReturnType<typeof CarouselElement>;
-export default CarouselElement;

package/dist/components/LazyAsset.svelte

@@ -1,124 +0,0 @@
-<script lang="ts">
-    import {LazyAssetStatus, LazyAssetType} from "./LazyAssetType";
-    import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
-    import {onMount} from "svelte";
-
-
-	// in pixels
-
-	// playsinline autoplay muted loop
-	// whatever your heart's content
-	interface Props {
-		src: string;
-		alt: string;
-		width: string;
-		height: string;
-		props?: any;
-	}
-
-	let {
-		src,
-		alt,
-		width,
-		height,
-		props = $bindable({})
-	}: Props = $props();
-	// todo: add size and alt text
-
-	props = {
-		...props,
-		alt,
-		width,
-		height
-	};
-
-	// auto detect asset type
-	let extension = $state("");
-	const getAssetType = (): LazyAssetType => {
-		const srcArray = src.split(".");
-		extension = srcArray[srcArray.length - 1];
-		switch (extension) {
-			case "png":
-			case "webp":
-			case "gif":
-			case "jpg":
-				return LazyAssetType.Image;
-			case "ogg":
-			case "webm":
-			case "mp4":
-				return LazyAssetType.Video;
-			default:
-				console.log(`Unknown asset type for: ${src}`);
-				return LazyAssetType.Unknown;
-		}
-	};
-	const assetType: LazyAssetType = getAssetType();
-
-	let actualSrc = $state("");
-	let status: LazyAssetStatus = $state(LazyAssetStatus.Loading);
-
-	onMount(async () => {
-		const path = src.includes("https://") ? src : `${window.location.origin}${src}`;
-
-        switch(assetType) {
-            case LazyAssetType.Image: {
-                const img = new Image();
-                img.onload = () => {
-                    actualSrc = path;
-                    status = LazyAssetStatus.Loaded;
-                }
-                img.src = path;
-                break;
-            }
-            case LazyAssetType.Video: {
-                fetch(path)
-                    .then(resp => resp.blob())
-                    .then(blob => {
-                        actualSrc = URL.createObjectURL(blob);
-                        status = LazyAssetStatus.Loaded;
-                    })
-                    .catch(error => {
-                        console.warn(error);
-                        status = LazyAssetStatus.Error;
-                    });
-                break;
-            }
-            case LazyAssetType.Unknown: {
-                console.warn("Unknown asset: ", path)
-                status = LazyAssetStatus.Error;
-                break;
-            }
-
-        }
-	});
-</script>
-
-{#if status === LazyAssetStatus.Loaded}
-	{#if assetType === LazyAssetType.Image}
-		<img src={actualSrc} alt="Placeholder image" {...props} />
-	{:else if assetType === LazyAssetType.Video}
-		<video playsinline autoplay muted loop {...props} poster={BgTiledAres} style="object-fit: scale-down">
-			<source src={actualSrc} type={`video/${extension}`} />
-			Your browser does not support the video tag.
-		</video>
-	{:else}
-		<img src={actualSrc} alt="Placeholder image" />
-	{/if}
-{:else}
-	<img class="rotate" src={BgTiledAres} {...props} style="object-fit: scale-down" />
-{/if}
-
-<style>
-    .rotate {
-        animation: rotation 4s infinite linear;
-    }
-
-    @keyframes rotation {
-        from {
-            transform: rotate(0deg);
-        }
-        to {
-            transform: rotate(359deg);
-        }
-    }
-</style>

package/dist/components/LazyAsset.svelte.d.ts

@@ -1,10 +0,0 @@
-interface Props {
-    src: string;
-    alt: string;
-    width: string;
-    height: string;
-    props?: any;
-}
-declare const LazyAsset: import("svelte").Component<Props, {}, "props">;
-type LazyAsset = ReturnType<typeof LazyAsset>;
-export default LazyAsset;

package/dist/components/LazyAssetType.d.ts

@@ -1,10 +0,0 @@
-export declare enum LazyAssetType {
-    Image = 0,
-    Video = 1,
-    Unknown = 2
-}
-export declare enum LazyAssetStatus {
-    Loading = 0,
-    Loaded = 1,
-    Error = 2
-}

package/dist/components/LazyAssetType.js

@@ -1,12 +0,0 @@
-export var LazyAssetType;
-(function (LazyAssetType) {
-    LazyAssetType[LazyAssetType["Image"] = 0] = "Image";
-    LazyAssetType[LazyAssetType["Video"] = 1] = "Video";
-    LazyAssetType[LazyAssetType["Unknown"] = 2] = "Unknown";
-})(LazyAssetType || (LazyAssetType = {}));
-export var LazyAssetStatus;
-(function (LazyAssetStatus) {
-    LazyAssetStatus[LazyAssetStatus["Loading"] = 0] = "Loading";
-    LazyAssetStatus[LazyAssetStatus["Loaded"] = 1] = "Loaded";
-    LazyAssetStatus[LazyAssetStatus["Error"] = 2] = "Error";
-})(LazyAssetStatus || (LazyAssetStatus = {}));

package/dist/components/OnElementVisbilityChanged.d.ts

@@ -1 +0,0 @@
-export type OnElementVisibilityChanged = (isVisible: boolean) => void;

package/dist/components/OnElementVisbilityChanged.js

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

package/dist/components/PineappleSlideToggle.svelte

@@ -1,30 +0,0 @@
-<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}
-        controlBase="bg-red-500"
-        checked={checked}
-        onCheckedChange={(e) => {
-					checked = e.checked;
-					onChange?.();
-        }}
->
-	{@render children?.()}
-</Switch>

package/dist/components/PineappleSlideToggle.svelte.d.ts

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

package/dist/components/RandomizedBackground.svelte

@@ -1,87 +0,0 @@
-<!--
-    @component
-    @deprecated
--->
-<script lang="ts">
-	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";
-
-	interface Props {
-		enable: any;
-	}
-
-	let { enable }: Props = $props();
-
-	const imageList = [BgTiledAres, BgTiledCorn, BgTiledPineapple, BgTiledReinhard, BgTiledTomato, BgTiledTurnip];
-
-	const seed = generatedDailySeed();
-	const rng = mulberry32Generator(seed);
-
-	const shuffle = (array: any[]): any[] => {
-		// 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([]);
-
-	for (let i = 0; i < 20; i++) {
-		shuffle(imageList);
-		generatedImageList = generatedImageList.concat(imageList);
-	}
-</script>
-
-<svelte:head>
-	<!-- from: https://dev.to/khromov/preloading-images-in-svelte-465h	-->
-	{#each imageList as image}
-		<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 enable}
-	<div class="default-background" aria-hidden="true">
-		{#each generatedImageList as imageItem}
-			<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/components/RandomizedBackground.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    enable: any;
-}
-/** @deprecated */
-declare const RandomizedBackground: import("svelte").Component<Props, {}, "">;
-type RandomizedBackground = ReturnType<typeof RandomizedBackground>;
-export default RandomizedBackground;