@turnipxenon/pineapple 2.4.29 → 2.4.31

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

@@ -0,0 +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;
+    }
+</style>

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

@@ -0,0 +1,118 @@
+import type { RawGlob } from "$pkg";
+
+export interface PageMeta {
+	// generated meta
+	relativeLink: string;
+	nestedPages: PageMeta[];
+
+	// defined meta
+	title: string; // defaults to directory name
+	tags: string[];
+
+	/**
+	 * Images are only limited to absolute paths (includes files in static folder)
+	 */
+	image?: string;
+	imageAlt?: string;
+	description?: string;
+	datePublished?: string;
+	lastUpdated?: string;
+	shouldGroup?: boolean;
+}
+
+/**
+ * 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>,
+															compareFn?: ParsePageMetaCompareFn): PageMeta[] => {
+	const pageFlatList: PageMeta[] = [];
+	// save for the future
+	// let pageGroupedList: PageMeta[] = [];
+
+	for (const path in fileList) {
+		const pathParts = path.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 body = (fileList[path] as RawGlob).default as string;
+		// let metadata : undefined | Map<string, string | string[]>;
+		if (body.startsWith("<!--")) {
+			// todo: absorb more metadata
+			const metadata = JSON.parse(body.slice("<!--".length, body.indexOf("-->")));
+			meta.title = metadata["title"] ?? meta.title;
+			meta.tags = metadata["tags"];
+			meta.description = metadata["description"];
+			meta.datePublished = metadata["datePublished"];
+			meta.lastUpdated = metadata["lastUpdated"];
+			meta.shouldGroup = metadata["shouldGroup"] as boolean;
+
+			meta.image = metadata["image"];
+			if (meta.image) {
+				meta.imageAlt = metadata["imageAlt"];
+				if (!meta.imageAlt) {
+					console.warn(`Accessibility issues: image alt missing for image ${meta.image}`);
+				}
+			}
+		}
+
+		pageFlatList.push(meta);
+	}
+
+	pageFlatList.sort((a, b) => a.relativeLink.localeCompare(b.relativeLink));
+
+	// find groupings
+	// 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);
+	}
+
+	return pageFlatList;
+};

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

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

package/src/lib/index.ts

@@ -6,6 +6,7 @@ export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
 
 export * from "$pkg/components/overrideable_meta/index";
+export * from "$pkg/components/navigation_component/index";
 export * from "./components/dialog_manager/DialogManagerStore";
 export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";

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

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { createGoToFunction } from "$pkg/util/util";
 	import { Card } from "$pkg";
 </script>

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

@@ -0,0 +1,13 @@
+<!--{
+	"title": "Custom title for page 1",
+	"image": "/favicon.png",
+	"tags": ["random"]
+}-->
+<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/+page.svelte

@@ -0,0 +1,8 @@
+<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)/page3/+page.svelte

@@ -0,0 +1,8 @@
+<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)/page3/page5/+page.svelte

@@ -0,0 +1,8 @@
+<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)/page3/page6/+page.svelte

@@ -0,0 +1,8 @@
+<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)/page3/page7/(test_layout)/page8/+page.svelte

@@ -0,0 +1,8 @@
+<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)/page3/page7/+page.svelte

@@ -0,0 +1,8 @@
+<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)/page4/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { Card } from "$pkg";
+</script>
+
+<Card>
+	<h1 slot="content" class="default-card">Page 1</h1>
+</Card>

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

@@ -3,8 +3,9 @@
 	import TestCard from "$pkg/components/pineapple/toast/custom-toast/TestCustomToast.svelte";
 	import TestDialogYarn from "./TestDialog.yarn?raw";
 	import { Card, dialogManager } from "$pkg";
+	import NavigationComponent from "$pkg/components/navigation_component/NavigationComponent.svelte";
 
-
+	// region Toast test scripts
 	let testingQueueNumber = 1;
 	const testingRandomPhrases = [
 		"Niko",
@@ -24,6 +25,11 @@
 			dialogManager.toggleDialogOverlay();
 		}
 	};
+	// endregion
+
+
+	// todo: fix fragile relative reference to the root
+	const fileList = import.meta.glob("./**/+page.svelte", { query: "?raw", eager: true });
 </script>
 
 <div class="pineapple-container">
@@ -45,8 +51,11 @@
 				on:click={onTestDialogClick}><h3>Test dialog</h3></button>
 		</div>
 	</Card>
-	<Card><h1 class="filler" slot="content">Card</h1></Card>
-	<Card><h1 class="filler" slot="content">Card</h1></Card>
+
+	<NavigationComponent title="Navigation Component Test"
+	                     fileList={fileList}
+	                     parentSubpath="/pineapple/">
+	</NavigationComponent>
 </div>
 
 <style lang="postcss">
@@ -60,8 +69,4 @@
         display: flex;
         flex-direction: column;
     }
-
-    .filler {
-        padding: 2em;
-    }
 </style>