@turnipxenon/pineapple 2.4.32 → 2.4.33

package/.idea/workspace.xml

@@ -4,9 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Export NavigationComponent">
-      <change beforePath="$PROJECT_DIR$/src/lib/components/navigation_component/NavigationComponent.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/navigation_component/NavigationComponent.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lib/components/navigation_component/PageMeta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/navigation_component/PageMeta.ts" afterDir="false" />
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Migrate from relying on json instead of comments for meta">
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -43,8 +42,8 @@
         <option value="CSS File" />
         <option value="+page" />
         <option value="NavigationComponent" />
-        <option value="TypeScript File" />
         <option value="NavigationControl" />
+        <option value="TypeScript File" />
       </list>
     </option>
   </component>
@@ -93,7 +92,7 @@
     &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
     &quot;git-widget-placeholder&quot;: &quot;turnip/navigation&quot;,
     &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/Pumpkin/Projects/Web/pineapple/src/lib/components/navigation_component&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Pumpkin/Projects/Web/pineapple/src/routes/(pineapple)/pineapple/(extra-pages)/page2&quot;,
     &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
     &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
     &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
@@ -114,11 +113,11 @@
 }</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\(extra-pages)\page2" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\navigation_component" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3\page7\(test_layout)\page8" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3\page7" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3\page5" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\(extra-pages)" />
@@ -242,23 +241,8 @@
       <workItem from="1711472302524" duration="9738000" />
       <workItem from="1711482094100" duration="5506000" />
       <workItem from="1711487798169" duration="264000" />
-      <workItem from="1711488375110" duration="657000" />
-    </task>
-    <task id="LOCAL-00060" summary="Fix wrong link in migrante">
-      <option name="closed" value="true" />
-      <created>1710305826429</created>
-      <option name="number" value="00060" />
-      <option name="presentableId" value="LOCAL-00060" />
-      <option name="project" value="LOCAL" />
-      <updated>1710305826429</updated>
-    </task>
-    <task id="LOCAL-00061" summary="Reorganize directories to make Pineapple as default layout but still overrideable by Seaweed">
-      <option name="closed" value="true" />
-      <created>1710373523715</created>
-      <option name="number" value="00061" />
-      <option name="presentableId" value="LOCAL-00061" />
-      <option name="project" value="LOCAL" />
-      <updated>1710373523715</updated>
+      <workItem from="1711488375110" duration="856000" />
+      <workItem from="1711490061858" duration="2823000" />
     </task>
     <task id="LOCAL-00062" summary="Improve text contrast in dark mode">
       <option name="closed" value="true" />
@@ -636,7 +620,23 @@
       <option name="project" value="LOCAL" />
       <updated>1711487908874</updated>
     </task>
-    <option name="localTasksCounter" value="109" />
+    <task id="LOCAL-00109" summary="Add a way to hide an entry in NavigationComponent">
+      <option name="closed" value="true" />
+      <created>1711489071463</created>
+      <option name="number" value="00109" />
+      <option name="presentableId" value="LOCAL-00109" />
+      <option name="project" value="LOCAL" />
+      <updated>1711489071463</updated>
+    </task>
+    <task id="LOCAL-00110" summary="Migrate from relying on json instead of comments for meta">
+      <option name="closed" value="true" />
+      <created>1711492747330</created>
+      <option name="number" value="00110" />
+      <option name="presentableId" value="LOCAL-00110" />
+      <option name="project" value="LOCAL" />
+      <updated>1711492747331</updated>
+    </task>
+    <option name="localTasksCounter" value="111" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -694,8 +694,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Adjust turnip fab button color" />
-    <MESSAGE value="Replace btn-group postcss class with turnip-menu&#10;&#10;There is postcss defined class called btn-group which has styles that have !important, which I accidentally used not knowing it exists, and it overrides whatever styles I apply on my class" />
     <MESSAGE value="Add external link warning stub" />
     <MESSAGE value="Refactor Game Section to separate component" />
     <MESSAGE value="Refactor GameSection out of SeaweedTemplate" />
@@ -719,6 +717,8 @@
     <MESSAGE value="Move NavigationControl to a component" />
     <MESSAGE value="Set queryParams based on index and pageSize" />
     <MESSAGE value="Export NavigationComponent" />
-    <option name="LAST_COMMIT_MESSAGE" value="Export NavigationComponent" />
+    <MESSAGE value="Add a way to hide an entry in NavigationComponent" />
+    <MESSAGE value="Migrate from relying on json instead of comments for meta" />
+    <option name="LAST_COMMIT_MESSAGE" value="Migrate from relying on json instead of comments for meta" />
   </component>
 </project>

package/.svelte-kit/__package__/components/navigation_component/NavigationComponent.svelte

@@ -3,11 +3,13 @@ import { Card, createGoToFunction } from "../..";
 import { parsePageMeta } from "./PageMeta";
 export let title = void 0;
 export let fileList;
+export let jsonList;
+export let imageMap = /* @__PURE__ */ new Map();
 export let parentSubpath;
 export let compareFn = void 0;
 export let pageSize = 5;
 export let currentIndex = 0;
-const pageFlatList = parsePageMeta(fileList, compareFn);
+const pageFlatList = parsePageMeta(fileList, jsonList, imageMap, compareFn);
 $:
   visiblePages = pageFlatList.slice(currentIndex * pageSize, currentIndex * pageSize + pageSize);
 </script>
@@ -32,8 +34,8 @@ $:
 			<button class="navigation-element"
 			        title={fullPath}
 			        on:click={createGoToFunction(fullPath)}>
-				{#if pageMeta.image}
-					<img src={pageMeta.image} alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+				{#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>

package/.svelte-kit/__package__/components/navigation_component/NavigationComponent.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         title?: string | undefined;
         fileList: Record<string, unknown>;
+        jsonList: Record<string, unknown>;
+        imageMap?: Map<string, string> | undefined;
         /**
              * Should include a slash before and after the path
              */ parentSubpath: string;

package/.svelte-kit/__package__/components/navigation_component/PageMeta.d.ts

@@ -4,9 +4,25 @@ export interface PageMeta {
     title: string;
     tags: string[];
     /**
-     * Images are only limited to absolute paths (includes files in static folder)
+     * 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
      */
-    image?: string;
+    imageID?: string;
+    /**
+     * imageURL is only limited to absolute paths (includes files in static folder)
+     */
+    imageUrl?: string;
     imageAlt?: string;
     description?: string;
     datePublished?: string;
@@ -21,4 +37,4 @@ export interface PageMeta {
  */
 export declare const findPageMetaParent: (parentList: PageMeta[], child: PageMeta) => boolean;
 export type ParsePageMetaCompareFn = ((a: PageMeta, b: PageMeta) => number);
-export declare const parsePageMeta: (fileList: Record<string, unknown>, compareFn?: ParsePageMetaCompareFn) => PageMeta[];
+export declare const parsePageMeta: (fileList: Record<string, unknown>, jsonList: Record<string, unknown>, imageMap: Map<string, string>, compareFn?: ParsePageMetaCompareFn) => PageMeta[];

package/.svelte-kit/__package__/components/navigation_component/PageMeta.js

@@ -18,10 +18,27 @@ export const findPageMetaParent = (parentList, child) => {
     });
     return isChild;
 };
-export const parsePageMeta = (fileList, compareFn) => {
+export const parsePageMeta = (fileList, jsonList, imageMap, compareFn) => {
     const pageFlatList = [];
     // save for the future
     // let pageGroupedList: PageMeta[] = [];
+    const jsonMap = new Map();
+    Object.keys(jsonList).forEach(path => {
+        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;
+        });
+        try {
+            jsonMap.set(subPath.join("/"), JSON.parse(jsonList[path].default));
+        }
+        catch (e) {
+            console.error(`Error parsing json at: ${path}: ${e}`);
+        }
+    });
     for (const path in fileList) {
         const pathParts = path.split("/");
         pathParts.pop();
@@ -40,30 +57,23 @@ export const parsePageMeta = (fileList, compareFn) => {
             nestedPages: []
             // todo: transform the data in server.ts?
         };
-        const body = fileList[path].default;
-        // let metadata : undefined | Map<string, string | string[]>;
-        if (body.startsWith("<!--")) {
-            // todo: absorb more metadata
-            try {
-                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"];
-                meta.shouldHide = metadata["shouldHide"];
-                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}`);
-                    }
+        const metadata = jsonMap.get(meta.relativeLink);
+        if (metadata) {
+            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"];
+            meta.shouldHide = metadata["shouldHide"];
+            meta.imageID = metadata["imageID"];
+            meta.imageUrl = imageMap.get(meta.imageID) ?? metadata["imageUrl"];
+            if (meta.imageUrl) {
+                meta.imageAlt = metadata["imageAlt"];
+                if (!meta.imageAlt) {
+                    console.warn(`Accessibility issues: image alt missing for image ${meta.imageUrl}`);
                 }
             }
-            catch (e) {
-                console.error(`Error at ${meta.relativeLink}: ${e}`);
-            }
         }
         pageFlatList.push(meta);
     }

package/.svelte-kit/generated/server/internal.js

@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width\" />\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\" data-theme=\"crimson\">\n\t\t<div style=\"display: contents\" class=\"h-full overflow-hidden\">" + body + "</div>\n\t</body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "19q2v79"
+	version_hash: "99eys7"
 };
 
 export async function get_hooks() {

package/dist/components/navigation_component/NavigationComponent.svelte

@@ -3,11 +3,13 @@ import { Card, createGoToFunction } from "../..";
 import { parsePageMeta } from "./PageMeta";
 export let title = void 0;
 export let fileList;
+export let jsonList;
+export let imageMap = /* @__PURE__ */ new Map();
 export let parentSubpath;
 export let compareFn = void 0;
 export let pageSize = 5;
 export let currentIndex = 0;
-const pageFlatList = parsePageMeta(fileList, compareFn);
+const pageFlatList = parsePageMeta(fileList, jsonList, imageMap, compareFn);
 $:
   visiblePages = pageFlatList.slice(currentIndex * pageSize, currentIndex * pageSize + pageSize);
 </script>
@@ -32,8 +34,8 @@ $:
 			<button class="navigation-element"
 			        title={fullPath}
 			        on:click={createGoToFunction(fullPath)}>
-				{#if pageMeta.image}
-					<img src={pageMeta.image} alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+				{#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>

package/dist/components/navigation_component/NavigationComponent.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         title?: string | undefined;
         fileList: Record<string, unknown>;
+        jsonList: Record<string, unknown>;
+        imageMap?: Map<string, string> | undefined;
         /**
              * Should include a slash before and after the path
              */ parentSubpath: string;

package/dist/components/navigation_component/PageMeta.d.ts

@@ -4,9 +4,25 @@ export interface PageMeta {
     title: string;
     tags: string[];
     /**
-     * Images are only limited to absolute paths (includes files in static folder)
+     * 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
      */
-    image?: string;
+    imageID?: string;
+    /**
+     * imageURL is only limited to absolute paths (includes files in static folder)
+     */
+    imageUrl?: string;
     imageAlt?: string;
     description?: string;
     datePublished?: string;
@@ -21,4 +37,4 @@ export interface PageMeta {
  */
 export declare const findPageMetaParent: (parentList: PageMeta[], child: PageMeta) => boolean;
 export type ParsePageMetaCompareFn = ((a: PageMeta, b: PageMeta) => number);
-export declare const parsePageMeta: (fileList: Record<string, unknown>, compareFn?: ParsePageMetaCompareFn) => PageMeta[];
+export declare const parsePageMeta: (fileList: Record<string, unknown>, jsonList: Record<string, unknown>, imageMap: Map<string, string>, compareFn?: ParsePageMetaCompareFn) => PageMeta[];

package/dist/components/navigation_component/PageMeta.js

@@ -18,10 +18,27 @@ export const findPageMetaParent = (parentList, child) => {
     });
     return isChild;
 };
-export const parsePageMeta = (fileList, compareFn) => {
+export const parsePageMeta = (fileList, jsonList, imageMap, compareFn) => {
     const pageFlatList = [];
     // save for the future
     // let pageGroupedList: PageMeta[] = [];
+    const jsonMap = new Map();
+    Object.keys(jsonList).forEach(path => {
+        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;
+        });
+        try {
+            jsonMap.set(subPath.join("/"), JSON.parse(jsonList[path].default));
+        }
+        catch (e) {
+            console.error(`Error parsing json at: ${path}: ${e}`);
+        }
+    });
     for (const path in fileList) {
         const pathParts = path.split("/");
         pathParts.pop();
@@ -40,30 +57,23 @@ export const parsePageMeta = (fileList, compareFn) => {
             nestedPages: []
             // todo: transform the data in server.ts?
         };
-        const body = fileList[path].default;
-        // let metadata : undefined | Map<string, string | string[]>;
-        if (body.startsWith("<!--")) {
-            // todo: absorb more metadata
-            try {
-                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"];
-                meta.shouldHide = metadata["shouldHide"];
-                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}`);
-                    }
+        const metadata = jsonMap.get(meta.relativeLink);
+        if (metadata) {
+            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"];
+            meta.shouldHide = metadata["shouldHide"];
+            meta.imageID = metadata["imageID"];
+            meta.imageUrl = imageMap.get(meta.imageID) ?? metadata["imageUrl"];
+            if (meta.imageUrl) {
+                meta.imageAlt = metadata["imageAlt"];
+                if (!meta.imageAlt) {
+                    console.warn(`Accessibility issues: image alt missing for image ${meta.imageUrl}`);
                 }
             }
-            catch (e) {
-                console.error(`Error at ${meta.relativeLink}: ${e}`);
-            }
         }
         pageFlatList.push(meta);
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.32",
+  "version": "2.4.33",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",

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

@@ -5,6 +5,8 @@
 
 	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
@@ -15,7 +17,7 @@
 	export let pageSize = 5;
 	export let currentIndex = 0;
 
-	const pageFlatList = parsePageMeta(fileList, compareFn);
+	const pageFlatList = parsePageMeta(fileList, jsonList, imageMap, compareFn);
 
 	$: visiblePages = pageFlatList.slice(currentIndex * pageSize, (currentIndex * pageSize) + pageSize);
 </script>
@@ -40,8 +42,8 @@
 			<button class="navigation-element"
 			        title={fullPath}
 			        on:click={createGoToFunction(fullPath)}>
-				{#if pageMeta.image}
-					<img src={pageMeta.image} alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+				{#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>

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

@@ -1,4 +1,4 @@
-import type { RawGlob } from "$pkg";
+import type { RawGlob } from "$pkg/util/util";
 
 export interface PageMeta {
 	// generated meta
@@ -10,9 +10,26 @@ export interface PageMeta {
 	tags: string[];
 
 	/**
-	 * Images are only limited to absolute paths (includes files in static folder)
+	 * 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
 	 */
-	image?: string;
+	imageID?: string;
+
+	/**
+	 * imageURL is only limited to absolute paths (includes files in static folder)
+	 */
+	imageUrl?: string;
 	imageAlt?: string;
 	description?: string;
 	datePublished?: string;
@@ -48,10 +65,32 @@ export const findPageMetaParent = (parentList: PageMeta[], child: PageMeta): boo
 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 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;
+		});
+
+		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 pathParts = path.split("/");
@@ -77,30 +116,26 @@ export const parsePageMeta = (fileList: Record<string, unknown>,
 		};
 
 
-		const body = (fileList[path] as RawGlob).default as string;
-		// let metadata : undefined | Map<string, string | string[]>;
-		if (body.startsWith("<!--")) {
-			// todo: absorb more metadata
-			try {
-				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.shouldHide = metadata["shouldHide"] 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}`);
-					}
+		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}`);
 				}
-			} catch (e) {
-				console.error(`Error at ${meta.relativeLink}: ${e}`);
 			}
+
 		}
 
 		pageFlatList.push(meta);

package/src/routes/(pineapple)/pineapple/(extra-pages)/ImageMap.ts

@@ -0,0 +1,5 @@
+import TestImage from "$pkg/assets/characters/ares/ares_yay.webp";
+
+export const ImageMap = new Map<string, string>([
+	["testImageID", TestImage]]
+);

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

@@ -1,8 +1,3 @@
-<!--{
-	"title": "Custom title for page 1",
-	"image": "/favicon.png",
-	"tags": ["random"]
-}-->
 <script>
 	import { Card } from "$pkg";
 	import { page } from "$app/stores";

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

@@ -0,0 +1,5 @@
+{
+  "title": "Custom title for page 1",
+  "imageUrl": "/favicon.png",
+  "tags": ["random"]
+}

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

@@ -0,0 +1,5 @@
+{
+  "title": "Custom title for page 2!!!",
+  "imageID": "testImageID",
+  "tags": ["random"]
+}

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

@@ -4,6 +4,7 @@
 	import TestDialogYarn from "./TestDialog.yarn?raw";
 	import { Card, dialogManager } from "$pkg";
 	import NavigationComponent from "$pkg/components/navigation_component/NavigationComponent.svelte";
+	import { ImageMap } from "./(extra-pages)/ImageMap";
 
 	// region Toast test scripts
 	let testingQueueNumber = 1;
@@ -29,7 +30,8 @@
 
 
 	// todo: fix fragile relative reference to the root
-	const fileList = import.meta.glob("./**/+page.svelte", { query: "?raw", eager: true });
+	const fileList = import.meta.glob("./**/+page.svelte", { query: "?raw" });
+	const jsonList = import.meta.glob("./**/meta.json", { query: "?raw", eager: true });
 </script>
 
 <div class="pineapple-container">
@@ -54,6 +56,8 @@
 
 	<NavigationComponent title="Navigation Component Test"
 	                     fileList={fileList}
+	                     jsonList={jsonList}
+	                     imageMap={ImageMap}
 	                     parentSubpath="/pineapple/">
 	</NavigationComponent>
 </div>

package/vite.config.ts

@@ -3,5 +3,5 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
 	plugins: [sveltekit()],
-	assetsInclude: ['**/*.yarn']
+	assetsInclude: ["**/*.yarn", "**/*.json"]
 });