@turnipxenon/pineapple 2.4.36 → 2.4.38

package/dist/components/navigation_component/PageMeta.js

@@ -24,10 +24,9 @@ export const parsePageMeta = (fileList, jsonList, imageMap, compareFn) => {
     // let pageGroupedList: PageMeta[] = [];
     const jsonMap = new Map();
     Object.keys(jsonList).forEach(path => {
-        const pathParts = path.split("/");
+        const pathEnd = path.split("../").pop();
+        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;
@@ -40,7 +39,8 @@ export const parsePageMeta = (fileList, jsonList, imageMap, compareFn) => {
         }
     });
     for (const path in fileList) {
-        const pathParts = path.split("/");
+        const pathEnd = path.split("../").pop();
+        const pathParts = pathEnd.split("/");
         pathParts.pop();
         // get title
         const title = pathParts[pathParts.length - 1].replaceAll("-", " ");

package/dist/components/pineapple/PineappleBaseLayout.svelte

@@ -134,8 +134,8 @@ enableDialogueOverlay.set(showDialogByDefault);
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-top: 4em;
-        margin-right: 1em;
+        width: 100%;
+        padding: 1lh clamp(8px, 10vw, 2em);
         flex-direction: column;
         z-index: 0;
 }
@@ -269,7 +269,7 @@ enableDialogueOverlay.set(showDialogByDefault);
         bottom: var(--fab-margin);
         width: 4em;
         border-radius: 50%;
-		    z-index: 100;
+        z-index: 100;
     }
 
     .fab > img {
@@ -285,6 +285,6 @@ enableDialogueOverlay.set(showDialogByDefault);
     }
 
     .turnip-icon {
-		    margin: 4px;
+        margin: 4px;
     }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.36",
+  "version": "2.4.38",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",
@@ -15,7 +15,8 @@
     "check-requirements": "npx vite-node src/lib/scripts/SetDefaultEnvironment.ts",
     "custom-check": "npx vite-node src/lib/scripts/util/ManualCheckRun.ts",
     "preview": "vite preview",
-    "prepublishOnly": "yarn package"
+    "prepublishOnly": "yarn package",
+    "to-dev": "git checkout main && git pull origin main && git checkout -b turnip/dev"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.1.1",

package/src/lib/components/Card.svelte

@@ -3,6 +3,7 @@
 	export let marginBottom = "2lh";
 	export let overrideStyle = "";
 	export let includeDataNoSnippet = true;
+	export let additionalClass: string[] = [];
 
 	// warning: don't forget the semi-colon when adding new style!
 	const style = `
@@ -14,10 +15,12 @@
 	if (!$$slots.content) {
 		console.error("Missing content slot in card. No content will be displayed.");
 	}
+
+	const classes = ["card", "turnip-card"].concat(additionalClass).join(" ");
 </script>
 
 {#if (includeDataNoSnippet)}
-	<div class="card turnip-card" style={style} data-no-snippet>
+	<div class={classes} style={style} data-no-snippet>
 		<slot name="content" class="card" />
 	</div>
 {:else }

package/src/lib/components/dialog_overlay/DialogOverlay.svelte

@@ -16,26 +16,25 @@
 		}
 	});
 
-	onMount(() => {
-		dialogManager.update(0);
-	});
-
 	let hidePercent = 100;
 	let isHidden = true;
-	dialogManager.hidePercent.subscribe((value) => {
-		hidePercent = value * 0.4;
-		isHidden = false;
-	});
+	onMount(() => {
+		dialogManager.hidePercent.subscribe((value) => {
+			hidePercent = value * 0.4;
+			isHidden = false;
+		});
 
-	dialogManager.currentReadableState.subscribe((value) => {
-		isHidden = value === DialogState.Invisible;
-		if (value === DialogState.Invisible) {
-		}
+		dialogManager.currentReadableState.subscribe((value) => {
+			isHidden = value === DialogState.Invisible;
+		});
+
+		dialogManager.update(0);
 	});
 
 	const onDialogClick = () => {
 		dialogManager.skipAnimation();
 	};
+
 </script>
 
 <div class="dialog-elements"

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

@@ -1,144 +1,146 @@
-<script lang="ts">
-	import NavigationControl from "$pkg/components/navigation_component/NavigationControl.svelte";
-	import { Card, createGoToFunction } from "$pkg";
-	import { parsePageMeta, type ParsePageMetaCompareFn } from "$pkg/components/navigation_component/PageMeta";
-
-	export let title: string | undefined = undefined;
-	export let fileList: Record<string, unknown>;
-	export let jsonList: Record<string, unknown>;
-	export let imageMap = new Map<string, string>();
-
-	/**
-	 * Should include a slash before and after the path
-	 */
-	export let parentSubpath: string;
-
-	export let compareFn: undefined | ParsePageMetaCompareFn = undefined;
-	export let pageSize = 5;
-	export let currentIndex = 0;
-
-	const pageFlatList = parsePageMeta(fileList, jsonList, imageMap, compareFn);
-
-	$: visiblePages = pageFlatList.slice(currentIndex * pageSize, (currentIndex * pageSize) + pageSize);
-</script>
-
-<div class="navigation-wrapper">
-	{#if (title)}
-		<Card>
-			<h1 slot="content" class="default-card navigation-title">
-				{title}
-			</h1>
-		</Card>
-	{/if}
-
-	<NavigationControl bind:currentIndex={currentIndex}
-	                   bind:contentLength={pageFlatList.length}
-	                   bind:pageSize={pageSize}></NavigationControl>
-
-	<div class="navigation-component">
-		<!-- all the misc routes-->
-		{#each visiblePages as pageMeta}
-			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
-			<button class="navigation-element"
-			        title={fullPath}
-			        on:click={createGoToFunction(fullPath)}>
-				{#if pageMeta.imageUrl}
-					<img src={pageMeta.imageUrl}
-					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
-				{/if}
-				<section class="blurb-text">
-					<h2>{pageMeta.title}</h2>
-					<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
-					<p>{pageMeta.description ?? ""}</p>
-					Tags:
-					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
-						{#each pageMeta.tags as tagValue}
-							&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
-						{/each}
-					{:else}
-						None
-					{/if}
-				</section>
-			</button>
-		{/each}
-
-		{#if visiblePages.length === 0}
-			<Card>
-				<p class="default-card" slot="content">Sorry, no content was found</p>
-			</Card>
-		{/if}
-	</div>
-
-	<NavigationControl bind:currentIndex={currentIndex}
-	                   bind:contentLength={pageFlatList.length}
-	                   bind:pageSize={pageSize}></NavigationControl>
-
-</div>
-
-<style lang="postcss">
-    @media (max-width: 800px) {
-        img {
-            max-height: 20rem;
-            width: 100%;
-            flex-basis: 100%;
-            border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
-        }
-
-        .navigation-element {
-            flex-direction: column;
-        }
-    }
-
-    @media (min-width: 801px) {
-        .navigation-element {
-            flex-direction: row;
-        }
-
-        img {
-            width: 20em;
-        }
-    }
-
-    .navigation-element {
-        @apply btn card card-hover bg-surface-100 dark:bg-surface-900;
-        display: flex;
-        /*flex-direction: row;*/
-        text-align: start;
-        align-items: flex-start;
-        padding: 0;
-    }
-
-    img {
-        height: 20em;
-        object-fit: cover;
-        padding: var(--theme-border-base);
-        border-radius: var(--theme-rounded-container) 0 0 var(--theme-rounded-container);
-    }
-
-    .navigation-component {
-        display: flex;
-        flex-direction: column;
-        gap: 2em;
-    }
-
-    .navigation-title {
-        text-align: center;
-    }
-
-    .blurb-text {
-        padding: 2em;
-        flex-grow: 1;
-        white-space: initial;
-        min-width: 0;
-    }
-
-    .navigation-wrapper {
-        display: flex;
-        flex-direction: column;
-        max-width: 1000px;
-    }
-
-    .tag-container {
-        margin: 0.25lh 0;
-    }
+<script lang="ts">
+	import NavigationControl from "$pkg/components/navigation_component/NavigationControl.svelte";
+	import { Card, createGoToFunction } from "$pkg";
+	import { parsePageMeta, type ParsePageMetaCompareFn } from "$pkg/components/navigation_component/PageMeta";
+
+	export let title: string | undefined = undefined;
+	export let fileList: Record<string, unknown>;
+	export let jsonList: Record<string, unknown>;
+	export let imageMap = new Map<string, string>();
+
+	/**
+	 * Should include a slash before and after the path
+	 */
+	export let parentSubpath: string;
+
+	export let compareFn: undefined | ParsePageMetaCompareFn = undefined;
+	export let pageSize = 5;
+	export let currentIndex = 0;
+
+	const pageFlatList = parsePageMeta(fileList, jsonList, imageMap, compareFn);
+
+	$: visiblePages = pageFlatList.slice(currentIndex * pageSize, (currentIndex * pageSize) + pageSize);
+</script>
+
+<div class="navigation-wrapper">
+	{#if (title)}
+		<Card>
+			<h1 slot="content" class="default-card navigation-title">
+				{title}
+			</h1>
+		</Card>
+	{/if}
+
+	<NavigationControl bind:currentIndex={currentIndex}
+	                   bind:contentLength={pageFlatList.length}
+	                   bind:pageSize={pageSize}></NavigationControl>
+
+	<div class="navigation-component">
+		<!-- all the misc routes-->
+		{#each visiblePages as pageMeta}
+			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
+			<button class="navigation-element"
+			        title={fullPath}
+			        on:click={createGoToFunction(fullPath)}>
+				{#if pageMeta.imageUrl}
+					<img src={pageMeta.imageUrl}
+					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+				{/if}
+				<section class="blurb-text">
+					<h2>{pageMeta.title}</h2>
+					<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
+					<p>{pageMeta.description ?? ""}</p>
+					Tags:
+					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
+						{#each pageMeta.tags as tagValue}
+							&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
+						{/each}
+					{:else}
+						None
+					{/if}
+				</section>
+			</button>
+		{/each}
+
+		{#if visiblePages.length === 0}
+			<Card>
+				<p class="default-card" slot="content">Sorry, no content was found</p>
+			</Card>
+		{/if}
+	</div>
+
+	<NavigationControl bind:currentIndex={currentIndex}
+	                   bind:contentLength={pageFlatList.length}
+	                   bind:pageSize={pageSize}></NavigationControl>
+
+</div>
+
+<style lang="postcss">
+    @media (max-width: 800px) {
+        img {
+            max-height: 20rem;
+            width: 100%;
+            flex-basis: 100%;
+            border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
+        }
+
+        .navigation-element {
+            flex-direction: column;
+        }
+    }
+
+    @media (min-width: 801px) {
+        .navigation-element {
+            flex-direction: row;
+        }
+
+        img {
+            width: 20em;
+        }
+    }
+
+    .navigation-element {
+        @apply btn card card-hover bg-surface-100 dark:bg-surface-900;
+        display: flex;
+        /*flex-direction: row;*/
+        text-align: start;
+        align-items: flex-start;
+        padding: 0;
+    }
+
+    img {
+        height: 20em;
+        object-fit: cover;
+        padding: var(--theme-border-base);
+        border-radius: var(--theme-rounded-container) 0 0 var(--theme-rounded-container);
+    }
+
+    .navigation-component {
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+    }
+
+    .navigation-title {
+        text-align: center;
+        max-width: initial;
+    }
+
+    .blurb-text {
+        padding: 2em;
+        flex-grow: 1;
+        white-space: initial;
+        min-width: 0;
+    }
+
+    .navigation-wrapper {
+        display: flex;
+        flex-direction: column;
+        max-width: 1000px;
+		    width: 100%;
+    }
+
+    .tag-container {
+        margin: 0.25lh 0;
+    }
 </style>

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>