@turnipxenon/pineapple 2.4.37 → 2.4.38

package/src/lib/components/navigation_component/NavigationControl.svelte

@@ -1,61 +1,61 @@
-<script lang="ts">
-	import { onMount } from "svelte";
-
-	export let currentIndex = 0;
-	export let contentLength: number;
-	export let pageSize: number;
-
-	import { Card } from "$pkg";
-	import { page } from "$app/stores";
-	import { goto } from "$app/navigation";
-
-	const queryIndex = $page.url.searchParams.get("index");
-	if (queryIndex) {
-		currentIndex = parseInt(queryIndex) || 0;
-	}
-	const queryPageSize = $page.url.searchParams.get("pageSize");
-	if (queryPageSize) {
-		pageSize = parseInt(queryPageSize) || 5;
-	}
-
-	const movePage = (isNext: boolean) => {
-		if (isNext) {
-			currentIndex = currentIndex + 1;
-		} else {
-			currentIndex = currentIndex - 1;
-		}
-
-		const query = new URLSearchParams($page.url.searchParams.toString());
-		query.set("index", currentIndex.toString());
-		goto(`?${query.toString()}`);
-	};
-
-	onMount(() => {
-		const query = new URLSearchParams($page.url.searchParams.toString());
-		query.set("index", currentIndex.toString());
-		query.set("pageSize", pageSize.toString());
-		goto(`?${query.toString()}`);
-	});
-</script>
-
-<div class="navigation-control-container">
-	<button class="navigation-control-button"
-	        disabled={currentIndex <= 0}
-	        on:click={() => {movePage(false)}}>{"<"}</button>
-	<Card marginBottom="0"><p slot="content" style="margin: 1em">Page {currentIndex + 1}</p></Card>
-	<button class="navigation-control-button"
-	        disabled={(currentIndex + 1) * pageSize >= contentLength}
-	        on:click={() => {movePage(true)}}>{">"}</button>
-</div>
-
-<style lang="postcss">
-    .navigation-control-container {
-        display: flex;
-        justify-content: space-between;
-        margin: 1lh 0;
-    }
-
-    .navigation-control-button {
-        @apply btn variant-filled-secondary;
-    }
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	export let currentIndex = 0;
+	export let contentLength: number;
+	export let pageSize: number;
+
+	import { Card } from "$pkg";
+	import { page } from "$app/stores";
+	import { goto } from "$app/navigation";
+
+	const queryIndex = $page.url.searchParams.get("index");
+	if (queryIndex) {
+		currentIndex = parseInt(queryIndex) || 0;
+	}
+	const queryPageSize = $page.url.searchParams.get("pageSize");
+	if (queryPageSize) {
+		pageSize = parseInt(queryPageSize) || 5;
+	}
+
+	const movePage = (isNext: boolean) => {
+		if (isNext) {
+			currentIndex = currentIndex + 1;
+		} else {
+			currentIndex = currentIndex - 1;
+		}
+
+		const query = new URLSearchParams($page.url.searchParams.toString());
+		query.set("index", currentIndex.toString());
+		goto(`?${query.toString()}`);
+	};
+
+	onMount(() => {
+		const query = new URLSearchParams($page.url.searchParams.toString());
+		query.set("index", currentIndex.toString());
+		query.set("pageSize", pageSize.toString());
+		goto(`?${query.toString()}`);
+	});
+</script>
+
+<div class="navigation-control-container">
+	<button class="navigation-control-button"
+	        disabled={currentIndex <= 0}
+	        on:click={() => {movePage(false)}}>{"<"}</button>
+	<Card marginBottom="0"><p slot="content" style="margin: 1em">Page {currentIndex + 1}</p></Card>
+	<button class="navigation-control-button"
+	        disabled={(currentIndex + 1) * pageSize >= contentLength}
+	        on:click={() => {movePage(true)}}>{">"}</button>
+</div>
+
+<style lang="postcss">
+    .navigation-control-container {
+        display: flex;
+        justify-content: space-between;
+        margin: 1lh 0;
+    }
+
+    .navigation-control-button {
+        @apply btn variant-filled-secondary;
+    }
 </style>

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

@@ -1,206 +1,206 @@
-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.
-	 * 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;
-}
-
-/**
- * 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);
+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.
+	 * 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;
+}
+
+/**
+ * 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/pineapple/PineappleBaseLayout.svelte

@@ -149,8 +149,8 @@
 
     .default-page-container {
         @apply flex justify-center items-center;
-        margin-top: 4em;
-        margin-right: 1em;
+        width: 100%;
+        padding: 1lh clamp(8px, 10vw, 2em);
         flex-direction: column;
         z-index: 0;
     }
@@ -201,7 +201,7 @@
         bottom: var(--fab-margin);
         width: 4em;
         border-radius: 50%;
-		    z-index: 100;
+        z-index: 100;
     }
 
     .fab > img {
@@ -217,6 +217,6 @@
     }
 
     .turnip-icon {
-		    margin: 4px;
+        margin: 4px;
     }
 </style>

package/src/routes/(pineapple)/+layout.svelte

@@ -2,7 +2,7 @@
 	import PinyaBaseLayout from "$pkg/components/pineapple/PineappleBaseLayout.svelte";
 </script>
 
-<PinyaBaseLayout>
+<PinyaBaseLayout showDialogByDefault={true}>
 	<slot />
 </PinyaBaseLayout>
 

package/src/routes/(pineapple)/pineapple/(extra-pages)/page1/+page.svelte

@@ -1,8 +1,8 @@
-<script>
-	import { Card } from "$pkg";
-	import { page } from "$app/stores";
-</script>
-
-<Card>
-	<h1 slot="content" class="default-card">{$page.url}</h1>
+<script>
+	import { Card } from "$pkg";
+	import { page } from "$app/stores";
+</script>
+
+<Card>
+	<h1 slot="content" class="default-card">{$page.url}</h1>
 </Card>

package/src/routes/(pineapple)/pineapple/(extra-pages)/page1/meta.json

@@ -1,24 +1,24 @@
-{
-  "datePublished": "2023-01-01",
-  "description": "random description but look at Ares! Let's try out a long-ish text to see how things would wrap and all that. I don't know what else to say. Please stream Umpah Umpah.",
-  "imageAlt": "Image of Ares being excited",
-  "imageID": "testImageID",
-  "imageURL": "./favicon.png/?q=imageIDTakesPrecedence",
-  "lastUpdated": "2023-02-02",
-  "shouldGroup": false,
-  "shouldHide": false,
-  "tags": [
-    "random",
-    "random8",
-    "random2",
-    "random5",
-    "random5",
-    "random5",
-    "random5",
-    "random5",
-    "random5",
-    "random5",
-    "random4"
-  ],
-  "title": "Custom title for page 1!!!"
+{
+  "datePublished": "2023-01-01",
+  "description": "random description but look at Ares! Let's try out a long-ish text to see how things would wrap and all that. I don't know what else to say. Please stream Umpah Umpah.",
+  "imageAlt": "Image of Ares being excited",
+  "imageID": "testImageID",
+  "imageURL": "./favicon.png/?q=imageIDTakesPrecedence",
+  "lastUpdated": "2023-02-02",
+  "shouldGroup": false,
+  "shouldHide": false,
+  "tags": [
+    "random",
+    "random8",
+    "random2",
+    "random5",
+    "random5",
+    "random5",
+    "random5",
+    "random5",
+    "random5",
+    "random5",
+    "random4"
+  ],
+  "title": "Custom title for page 1!!!"
 }

package/src/routes/(pineapple)/pineapple/(extra-pages)/page2/+page.svelte

@@ -1,8 +1,8 @@
-<script>
-	import { Card } from "$pkg";
-	import { page } from "$app/stores";
-</script>
-
-<Card>
-	<h1 slot="content" class="default-card">{$page.url}</h1>
+<script>
+	import { Card } from "$pkg";
+	import { page } from "$app/stores";
+</script>
+
+<Card>
+	<h1 slot="content" class="default-card">{$page.url}</h1>
 </Card>

package/src/routes/(pineapple)/pineapple/(extra-pages)/page2/meta.json

@@ -1,8 +1,8 @@
-{
-  "lastUpdated": "2024-03-03",
-  "title": "Custom title for page 2",
-  "imageUrl": "/favicon.png",
-  "tags": [
-    "random"
-  ]
+{
+  "lastUpdated": "2024-03-03",
+  "title": "Custom title for page 2",
+  "imageUrl": "/favicon.png",
+  "tags": [
+    "random"
+  ]
 }