@turnipxenon/pineapple 2.8.0 → 2.10.0

package/src/lib/components/navigation_component/PageMeta.ts

@@ -1,249 +0,0 @@
-import type { RawGlob } from "$pkg/util/util";
-
-export interface PageMeta {
-	datePublished?: string;
-	description?: string;
-
-	imageAlt?: string; // defaults to directory name
-	/**
-	 * imageID is an ID that NavigationComponent 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.
-	 * Overall, this involves four files
-	 * - Your navigation page: ./+page.svelte
-	 * - Your image map typescript: ImageMap.ts
-	 * - The page you want with an image represented in the navigation: ./topic1/+page.svelte
-	 * - The meta for that page: ./topic1/meta.json
-	 *
-	 * imageID takes precedence over imageURL
-	 */
-	imageID?: string;
-
-	/**
-	 * imageURL is only limited to absolute paths (includes files in static folder)
-	 *
-	 * if imageID is defined, this will be ignored
-	 */
-	imageUrl?: string;
-
-	lastUpdated?: string;
-	nestedPages: PageMeta[];
-
-	/**
-	 * relativeLink is generated automatically. This will be ignored in meta.json.
-	 */
-	relativeLink: string;
-	shouldGroup?: boolean;
-	shouldHide?: boolean;
-	tags: string[];
-
-	/**
-	 * title defaults to the directory name if it's an empty string.
-	 */
-	title: string;
-}
-
-export interface SimplePageMeta {
-	datePublished?: string;
-	description?: string;
-
-	imageAlt?: string; // defaults to directory name
-	/**
-	 * imageID is an ID that NavigationComponent 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.
-	 * Overall, this involves four files
-	 * - Your navigation page: ./+page.svelte
-	 * - Your image map typescript: ImageMap.ts
-	 * - The page you want with an image represented in the navigation: ./topic1/+page.svelte
-	 * - The meta for that page: ./topic1/meta.json
-	 *
-	 * imageID takes precedence over imageURL
-	 */
-	imageID?: string;
-
-	/**
-	 * imageURL is only limited to absolute paths (includes files in static folder)
-	 *
-	 * if imageID is defined, this will be ignored
-	 */
-	imageUrl?: string;
-
-	lastUpdated?: string;
-
-	shouldGroup?: boolean;
-	shouldHide?: boolean;
-	tags: string[];
-
-	/**
-	 * title defaults to the directory name if it's an empty string.
-	 */
-	title: string;
-}
-
-/**
- * todo: doc
- * @param parentList
- * @param child
- */
-export const findPageMetaParent = (parentList: PageMeta[], child: PageMeta): boolean => {
-	let isChild = false;
-
-	parentList.every(parent => {
-		if (child.relativeLink.startsWith(`${parent.relativeLink}/`)) {
-			const isNestedChild = findPageMetaParent(parent.nestedPages, child);
-			if (!isNestedChild) {
-				parent.nestedPages.push(child);
-			}
-			isChild = true;
-			return false;
-		}
-
-		return true;
-	});
-
-	return isChild;
-};
-
-export type ParsePageMetaCompareFn = ((a: PageMeta, b: PageMeta) => number);
-
-export const parsePageMeta = (fileList: Record<string, unknown>,
-															jsonList: Record<string, unknown>,
-															imageMap: Map<string, string>,
-															compareFn?: ParsePageMetaCompareFn): PageMeta[] => {
-	const pageFlatList: PageMeta[] = [];
-	// save for the future
-	// let pageGroupedList: PageMeta[] = [];
-	const jsonMap = new Map<string, { [k: string]: unknown }>();
-	Object.keys(jsonList).forEach(path => {
-		const pathEnd = path.split("../").pop() as string;
-		const pathParts = pathEnd.split("/");
-		pathParts.pop();
-
-		// get url path
-		const subPath = pathParts.filter(s => {
-			return s !== "." && s.indexOf("(") !== 0;
-		});
-
-		try {
-			jsonMap.set(subPath.join("/"), JSON.parse((jsonList[path] as RawGlob).default));
-		} catch (e) {
-			console.error(`Error parsing json at: ${path}: ${e}`);
-		}
-
-	});
-
-	for (const path in fileList) {
-		const pathEnd = path.split("../").pop() as string;
-		const pathParts = pathEnd.split("/");
-		pathParts.pop();
-
-		// get title
-		const title = pathParts[pathParts.length - 1].replaceAll("-", " ");
-
-		// get url path
-		const subPath = pathParts.filter(s => {
-			return s !== "." && s.indexOf("(") !== 0;
-		});
-
-
-		// todo: consider
-		// subPath.unshift("/misc");
-		const meta: PageMeta = {
-			relativeLink: subPath.join("/"),
-			title,
-			tags: [],
-			nestedPages: []
-			// todo: transform the data in server.ts?
-		};
-
-
-		const metadata = jsonMap.get(meta.relativeLink);
-		if (metadata) {
-			meta.title = metadata["title"] as string ?? meta.title;
-			meta.tags = metadata["tags"] as string[] ?? [];
-			meta.description = metadata["description"] as string;
-			meta.datePublished = metadata["datePublished"] as string;
-			meta.lastUpdated = metadata["lastUpdated"] as string;
-			meta.shouldGroup = metadata["shouldGroup"] as boolean;
-			meta.shouldHide = metadata["shouldHide"] as boolean;
-
-			meta.imageID = metadata["imageID"] as string;
-			meta.imageUrl = imageMap.get(meta.imageID) ?? metadata["imageUrl"] as string;
-
-			if (meta.imageUrl) {
-				meta.imageAlt = metadata["imageAlt"] as string;
-				if (!meta.imageAlt) {
-					console.warn(`Accessibility issues: image alt missing for image ${meta.imageUrl}`);
-				}
-			}
-		}
-
-		if (meta.shouldHide) {
-			continue;
-		}
-
-		pageFlatList.push(meta);
-	}
-
-	pageFlatList.sort((a, b) => a.relativeLink.localeCompare(b.relativeLink));
-
-	// find groupings
-	// grouping should be BEFORE the external sort
-	// todo: we don't even have use for this yet!
-	// pageFlatList.forEach(p => {
-	// 	if (!findPageMetaParent(pageGroupedList, p)) {
-	// 		pageGroupedList.push(p);
-	// 	}
-	// });
-
-	if (compareFn) {
-		pageFlatList.sort(compareFn);
-	} else {
-		pageFlatList.sort(DefaultPageMetaSorter);
-	}
-
-	return pageFlatList;
-};
-
-const AWins = -1;
-const BWins = 1;
-
-/**
- * Prioritizes, in order, recently lastUpdated or datePublished, has description, then title
- *
- * @param a
- * @param b
- * @constructor
- */
-export const DefaultPageMetaSorter: ParsePageMetaCompareFn = (a, b) => {
-	const aDate = a.lastUpdated || a.datePublished;
-	const bDate = b.lastUpdated || b.datePublished;
-
-	if (aDate && !bDate) {
-		return AWins;
-	} else if (!aDate && bDate) {
-		return BWins;
-	} else if (aDate && bDate) {
-		// we invert the value because we want the dates to be in descending order
-		return -aDate.localeCompare(bDate);
-	}
-
-	if (a.description && !b.description) {
-		return AWins;
-	} else if (!a.description && b.description) {
-		return BWins;
-	}
-
-	return a.title.localeCompare(b.title);
-};

package/src/lib/components/navigation_component/index.ts

@@ -1,4 +0,0 @@
-// noinspection JSUnusedGlobalSymbols
-
-export { default as NavigationComponent } from "./NavigationComponent.svelte";
-export * from "./PageMeta";

package/src/lib/components/overrideable_meta/OverridableMeta.svelte

@@ -1,56 +0,0 @@
-<!--
-OverridableMeta is convenient Svelte component allowing each page to override the head meta values
-based on their +page.ts.
-
-For example:
-<code>
-// +page.ts
-
-import type { OverridableMetaProps } from "$pkg";
-
-export const load = async (): Promise<OverridableMetaProps> => {
-	return {
-		title: "CustomTitle",
-	};
-};
-</code>
--->
-
-<script lang="ts">
-	import WebThumbnailImage from "$pkg/assets/placeholder/placeholder_circle.png";
-
-	export let rootUrl = "http://localhost:5173";
-	export let title = "Welcome to my portfolio";
-	export let ogTitle = "Turnip time!";
-	export let ogDescription = "Welcome to Turnip's test portfolio";
-	export let ogImage = WebThumbnailImage;
-
-	import { page } from "$app/stores";
-	import type { OverridableMetaProps } from "./OverridableMetaProps";
-
-	const data: OverridableMetaProps = {
-		title: "Welcome to my portfolio",
-		ogUrl: "https://www.crouton.net/",
-		ogTitle: "Turnip time!",
-		ogDescription: "Welcome to Turnip's test portfolio",
-		ogImage: WebThumbnailImage
-	};
-	page.subscribe(p => {
-		const pageData: OverridableMetaProps = p.data;
-		data.title = pageData.title ?? title;
-		data.ogUrl = `${rootUrl}${p.url.pathname}`;
-		data.ogTitle = pageData.ogTitle ?? ogTitle;
-		data.ogDescription = pageData.ogDescription ?? ogDescription;
-		data.ogImage = pageData.ogImage ?? ogImage;
-	});
-</script>
-
-<svelte:head>
-	<meta charset="utf-8" />
-	<title>{data.title}</title>
-	<meta name="twitter:card" content="summary" />
-	<meta property="og:url" content={data.ogUrl} />
-	<meta property="og:title" content={data.ogTitle} />
-	<meta property="og:description" content={data.ogDescription} />
-	<meta property="og:image" content={data.ogImage} />
-</svelte:head>

package/src/lib/components/overrideable_meta/OverridableMetaProps.ts

@@ -1,9 +0,0 @@
-export interface OverridableMetaProps {
-	title?: string;
-	ogUrl?: string;
-	ogTitle?: string;
-	ogDescription?: string;
-	ogImage?: string;
-	datePublished?: string;
-	lastUpdated?: string;
-}

package/src/lib/components/overrideable_meta/index.ts

@@ -1,4 +0,0 @@
-// noinspection JSUnusedGlobalSymbols
-
-export { default as OverridableMeta } from "./OverridableMeta.svelte";
-export * from "./OverridableMetaProps";

package/src/lib/components/pineapple/PineappleBaseLayout.svelte

@@ -1,222 +0,0 @@
-<script lang="ts">
-	export let showDialogByDefault = false;
-
-	// For auto dark/light mode
-	import { AppBar, AppShell, autoModeWatcher, LightSwitch } from "@skeletonlabs/skeleton";
-	import RandomizedBackground from "$pkg/components/RandomizedBackground.svelte";
-
-	// navigation
-	import { page } from "$app/stores";
-	// store
-	import { enableBackground } from "$pkg/store";
-	import type { BreadcrumbData } from "$pkg/types/BreadcrumbData";
-	// assets
-	// import DialogOverlay from "$lib/components/DialogOverlay.svelte";
-	import AresLogo from "$pkg/assets/characters/ares/ares_logo.webp";
-	import FABIcon from "$pkg/assets/bg_tiled/bg_tiled_turnip.png";
-	import CloseIcon from "$pkg/assets/icons/close.svg";
-	import { dialogManager, enableDialogueOverlay } from "$pkg/components/dialog_manager/DialogManagerStore";
-	import Toast from "$pkg/components/pineapple/toast/Toast.svelte";
-	import DialogOverlay from "$pkg/components/dialog_overlay/DialogOverlay.svelte";
-	import { fade } from "svelte/transition";
-	// todo: clean up all these imports!
-
-	let pages: BreadcrumbData[] = [];
-
-	const updateBreadcrumb = (pathname: string) => {
-		pages = [];
-		let basePath = "";
-		pathname.split("/").forEach((value, index) => {
-			if (index === 0) {
-				basePath = "/";
-				pages.push({
-					path: "/",
-					name: "Home"
-				});
-				return;
-			}
-
-			if (value === "") {
-				return;
-			}
-
-			basePath += value + "/";
-			pages.push({
-				path: basePath,
-				name: value
-			});
-		});
-		pages = pages;
-	};
-
-	$: updateBreadcrumb($page.url.pathname); // run every time we navigate
-
-	let enableBackgroundValue = true;
-	enableBackground.subscribe((value) => {
-		enableBackgroundValue = value;
-	});
-
-	let enableDialogueOverlayValue = true;
-	enableDialogueOverlay.subscribe((value) => {
-		enableDialogueOverlayValue = value;
-	});
-
-	enableDialogueOverlay.set(showDialogByDefault);
-</script>
-
-<!-- App Shell -->
-<svelte:head>
-	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
-</svelte:head>
-
-<!--todo: turn off hidden when it's time-->
-<button class="fab" on:click={()=>{
-	dialogManager.toggleDialogOverlay()
-}}>
-	{#if (enableDialogueOverlayValue)}
-		<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
-	{:else }
-		<img class="turnip-icon" src={FABIcon} alt="interactive floating action button represented as a turnip">
-	{/if}
-</button>
-
-<AppShell>
-	<svelte:fragment slot="header">
-		<!-- App Bar -->
-		<AppBar
-			background="app-shell-token"
-			slotDefault="place-content-start"
-			slotTrail="place-content-end">
-			<svelte:fragment slot="lead">
-				<!--TODO: add logo or something for the lead in layout-->
-				<img
-					alt="Ares's head titled towards the left with his tongue out and winking"
-					class="ares-logo"
-					src={AresLogo}
-				/>
-				<span class="mr-2" />
-				<ol class="breadcrumb">
-					{#each pages as crumb, i}
-						{#if i < pages.length - 1}
-							<li class="crumb" in:fade>
-								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
-								&nbsp;&rsaquo;&nbsp;
-							</li>
-						{:else}
-							<li class="crumb" in:fade>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
-						{/if}
-					{/each}
-				</ol>
-			</svelte:fragment>
-			<svelte:fragment slot="trail">
-				<LightSwitch bgLight="bg-surface-400" />
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
-
-	<RandomizedBackground enable={enableBackgroundValue} />
-
-	<Toast></Toast>
-
-	<DialogOverlay></DialogOverlay>
-
-	<div class="default-page-container">
-		<slot />
-		<div class="footer-space" />
-	</div>
-
-</AppShell>
-
-<style lang="postcss">
-    :root {
-        --dialog-start-pad: clamp(0em, 5vw, 2em);
-        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-start-pad) - var(--theme-border-base)));
-        --dialog-box-height: clamp(15em, 50vw, 18em);
-
-        /** FAB icon margin/position calculation origin:
-						Criteria:
-						- We want at mobile (360px) our margin to be at 1em (16px)
-						- We want at web (1960px) our margin to be at 2em (32px)
-
-						A useful scaling factor might vw. At 360px, 16px would be around 4.44vw (360/16).
-						At 360px: margin is at 16px or 1em.
-						At 1960px: 4.44vw is at 87px but that will be clamped to 32px or 2em.
-						The calculation implies that the natural point that the margin becomes 2em is clamped on
-						wider screens is at 727px.
-				*/
-        --fab-margin: clamp(1em, 4.44vw, 2em);
-    }
-
-    .default-page-container {
-        @apply flex justify-center items-center;
-        width: 100%;
-        padding: 1lh clamp(8px, 10vw, 2em);
-        flex-direction: column;
-        z-index: 0;
-    }
-
-    .ares-logo {
-        object-fit: contain;
-        height: 2em;
-        margin-inline-end: 0.5em;
-    }
-
-    /* breadcrumb does not work due to a lot of magic stuff i do
-       the code below is from skeleton's tailwind css:
-       https://github.com/skeletonlabs/skeleton/blob/54f4ecedabf2be6d94a670b56dc8821095ca3fc9/packages/plugin/src/styles/components/breadcrumbs.css
-
-       it likely disappeared due to code gen shenanigans and package magic */
-    .breadcrumb,
-    .breadcrumb-nonresponsive {
-        @apply flex items-center w-full overflow-x-auto;
-        /*@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;*/
-    }
-
-    .crumb {
-        @apply flex justify-center items-center;
-        margin: 0.1em;
-    }
-
-    .crumb-separator {
-        @apply flex;
-        color: var(--color-text-50);
-    }
-
-    /* === Auto-Responsive === */
-
-    .breadcrumb li {
-        @apply hidden md:block;
-    }
-
-    .breadcrumb li:nth-last-child(3),
-    .breadcrumb li:nth-last-child(2),
-    .breadcrumb li:nth-last-child(1) {
-        @apply block;
-    }
-
-    .fab {
-        @apply btn variant-filled-tertiary;
-        padding: 0;
-        position: fixed;
-        bottom: var(--fab-margin);
-        width: 4em;
-        border-radius: 50%;
-        z-index: 100;
-    }
-
-    .fab > img {
-        width: 100%;
-    }
-
-    .fab:dir(ltr) {
-        right: var(--fab-margin);
-    }
-
-    .fab:dir(rtl) {
-        left: var(--fab-margin);
-    }
-
-    .turnip-icon {
-        margin: 4px;
-    }
-</style>

package/src/lib/components/pineapple/toast/DefaultToastBody.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-	import type { Props } from "$pkg/components/pineapple/toast/DefaultToastBody";
-	import type { DismissToastCallback } from "$pkg/components/pineapple/toast/Toast";
-	import CloseIcon from "$pkg/assets/icons/close.svg";
-
-	export let props: Props;
-	export let dismissToastCallback: DismissToastCallback | undefined;
-	export let shouldEnableButton = false;
-</script>
-
-<div class="body-container">
-	<!-- todo: support markdown? -->
-	<button class="btn"
-	        disabled={!shouldEnableButton}
-	        on:click={dismissToastCallback}>
-		<img class="img-icon" src={CloseIcon} alt="close button">
-	</button>
-	<div class="text-container">
-		<span>{props.message}</span>
-	</div>
-</div>
-
-<style lang="postcss">
-    .body-container {
-        display: flex;
-        gap: 1em;
-    }
-
-    .text-container {
-        margin-top: 0.25lh;
-        margin-right: 1em;
-    }
-
-    .text-container:dir(rtl) {
-        margin-left: 1em;
-    }
-
-    .btn {
-        @apply bg-surface-100 dark:bg-surface-900;
-        border-radius: 8px;
-		    padding: 0.5em;
-    }
-</style>

package/src/lib/components/pineapple/toast/DefaultToastBody.ts

@@ -1,10 +0,0 @@
-import DefaultToastBody from "./DefaultToastBody.svelte";
-
-export interface Props {
-	message: string;
-}
-
-export interface DefaultToastPair {
-	component: typeof DefaultToastBody;
-	props: Props;
-}