@turnipxenon/pineapple 2.4.28 → 2.4.30

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/pineapple/PineappleBaseLayout.svelte

@@ -201,6 +201,7 @@
         bottom: var(--fab-margin);
         width: 4em;
         border-radius: 50%;
+		    z-index: 100;
     }
 
     .fab > img {

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,26 +25,38 @@
 			dialogManager.toggleDialogOverlay();
 		}
 	};
+	// endregion
+
+
+	// todo: fix fragile relative reference to the root
+	const fileList = import.meta.glob("./**/+page.svelte", { query: "?raw", eager: true });
 </script>
 
-<Card>
-	<div slot="content" class="default-card">
-		<button
-			class="btn variant-filled-secondary"
-			on:click={() => {
+<div class="pineapple-container">
+	<Card>
+		<div slot="content" class="default-card">
+			<button
+				class="btn variant-filled-secondary"
+				on:click={() => {
 			showComponentInToast({componentAndProps: {component: TestCard, props: undefined}});
 		}}><h3>Test custom toast</h3></button>
-		<button
-			class="btn variant-filled-secondary"
-			on:click={() => {
+			<button
+				class="btn variant-filled-secondary"
+				on:click={() => {
 			showTextInToast(`${testingQueueNumber} ${testingRandomPhrases[testingQueueNumber]}`);
 			testingQueueNumber = (testingQueueNumber + 1) % testingRandomPhrases.length;
 		}}><h3>Handy toast</h3></button>
-		<button
-			class="btn variant-filled-secondary"
-			on:click={onTestDialogClick}><h3>Test dialog</h3></button>
-	</div>
-</Card>
+			<button
+				class="btn variant-filled-secondary"
+				on:click={onTestDialogClick}><h3>Test dialog</h3></button>
+		</div>
+	</Card>
+
+	<NavigationComponent title="Navigation Component Test"
+	                     fileList={fileList}
+	                     parentSubpath="/pineapple/">
+	</NavigationComponent>
+</div>
 
 <style lang="postcss">
     .default-card {
@@ -51,4 +64,9 @@
         flex-wrap: wrap;
         gap: 2em;
     }
+
+    .pineapple-container {
+        display: flex;
+        flex-direction: column;
+    }
 </style>