@turnipxenon/pineapple 2.4.67 → 2.4.68

package/.idea/workspace.xml

@@ -4,7 +4,15 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="CreateUrlForm" comment="Add hideable upper controls for NavigationComponent" />
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="CreateUrlForm" comment="Add default value for allowUpperControl in NavigationComponent">
+      <change afterPath="$PROJECT_DIR$/src/lib/api/GetLatestBlogs.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/lib/api/index.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/lib/template/seaweed/ChumBucket.svelte" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/routes/api/get-latest-blogs/+server.ts" 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" />
+      <change beforePath="$PROJECT_DIR$/src/lib/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/template/seaweed/SeaweedTemplate.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/template/seaweed/SeaweedTemplate.svelte" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -50,10 +58,11 @@
         <option value="ComboBoxWithButton" />
         <option value="RandomComponent" />
         <option value="UrlShortenerForm" />
-        <option value="TypeScript File" />
         <option value="PineappleSlideToggle" />
         <option value="PostCSS File" />
         <option value="CSS File" />
+        <option value="ChumBucket" />
+        <option value="TypeScript File" />
       </list>
     </option>
   </component>
@@ -156,7 +165,7 @@
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\util\util.ts" />
     </key>
   </component>
-  <component name="RunManager" selected="npm.to-dev">
+  <component name="RunManager" selected="npm.dev --open">
     <configuration name="dev --open" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
@@ -195,8 +204,8 @@
     </list>
     <recent_temporary>
       <list>
-        <item itemvalue="npm.to-dev" />
         <item itemvalue="npm.dev --open" />
+        <item itemvalue="npm.to-dev" />
         <item itemvalue="npm.dev-offline" />
         <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.to-dev" />
@@ -346,14 +355,14 @@
       <workItem from="1712757929028" duration="266000" />
       <workItem from="1712759920412" duration="16000" />
       <workItem from="1712761439292" duration="385000" />
-    </task>
-    <task id="LOCAL-00135" summary="Add resolutions to use Node 20 in Azure SWA GithubActions">
-      <option name="closed" value="true" />
-      <created>1712380591931</created>
-      <option name="number" value="00135" />
-      <option name="presentableId" value="LOCAL-00135" />
-      <option name="project" value="LOCAL" />
-      <updated>1712380591931</updated>
+      <workItem from="1712761882975" duration="777000" />
+      <workItem from="1712766991700" duration="25000" />
+      <workItem from="1712767347310" duration="142000" />
+      <workItem from="1712771630436" duration="32000" />
+      <workItem from="1712772267848" duration="578000" />
+      <workItem from="1712774708776" duration="809000" />
+      <workItem from="1712777702027" duration="1171000" />
+      <workItem from="1712779118025" duration="2748000" />
     </task>
     <task id="LOCAL-00136" summary="Add resolutions to use Node 20 in Azure SWA GithubActions&#10;&#10;Reference: https://github.com/Azure/static-web-apps-cli/issues/756#issuecomment-1775748572">
       <option name="closed" value="true" />
@@ -739,7 +748,15 @@
       <option name="project" value="LOCAL" />
       <updated>1712761479941</updated>
     </task>
-    <option name="localTasksCounter" value="184" />
+    <task id="LOCAL-00184" summary="Add default value for allowUpperControl in NavigationComponent">
+      <option name="closed" value="true" />
+      <created>1712761924487</created>
+      <option name="number" value="00184" />
+      <option name="presentableId" value="LOCAL-00184" />
+      <option name="project" value="LOCAL" />
+      <updated>1712761924487</updated>
+    </task>
+    <option name="localTasksCounter" value="185" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -777,7 +794,7 @@
                   <entry key="branch">
                     <value>
                       <list>
-                        <option value="main" />
+                        <option value="turnip/dev" />
                       </list>
                     </value>
                   </entry>
@@ -797,7 +814,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Fix yarn dependencies" />
     <MESSAGE value="Support swappable group for backwards compatibility" />
     <MESSAGE value="Add back gameSectionFirst behaviour" />
     <MESSAGE value="Delay parsing for query terms after page transformation" />
@@ -822,6 +838,7 @@
     <MESSAGE value="Add border for slider toggle during light mode" />
     <MESSAGE value="WIP attempt to fix slider" />
     <MESSAGE value="Add hideable upper controls for NavigationComponent" />
-    <option name="LAST_COMMIT_MESSAGE" value="Add hideable upper controls for NavigationComponent" />
+    <MESSAGE value="Add default value for allowUpperControl in NavigationComponent" />
+    <option name="LAST_COMMIT_MESSAGE" value="Add default value for allowUpperControl in NavigationComponent" />
   </component>
 </project>

package/.svelte-kit/__package__/api/GetLatestBlogs.d.ts

@@ -0,0 +1 @@
+export declare const GetLatestBlogs: () => Promise<Response>;

package/.svelte-kit/__package__/api/GetLatestBlogs.js

@@ -0,0 +1,7 @@
+export const GetLatestBlogs = async () => {
+    const resp = await fetch("http://turnipxenon.com/api/get-latest-blogs");
+    if (!resp.ok) {
+        return new Response(JSON.stringify([]));
+    }
+    return new Response(JSON.stringify(await resp.json()));
+};

package/.svelte-kit/__package__/api/index.d.ts

@@ -0,0 +1 @@
+export {};

package/.svelte-kit/__package__/api/index.js

@@ -0,0 +1,2 @@
+// noinspection ES6UnusedImports
+import { GetLatestBlogs } from "./GetLatestBlogs";

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

@@ -9,7 +9,7 @@ export interface PageMeta {
      * 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.
+     * Typescript, you can use import ImageUrl from "./path.png" as you would normally do.N
      * 4. Add ImageMap as an argument to your NavigationComponent.
      * Overall, this involves four files
      * - Your navigation page: ./+page.svelte

package/.svelte-kit/__package__/index.d.ts

@@ -14,3 +14,4 @@ export * from "./components/dialog_manager/DialogUtils";
 export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
+export * from "./api/index";

package/.svelte-kit/__package__/index.js

@@ -15,3 +15,4 @@ export * from "./components/dialog_manager/DialogUtils";
 export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
+export * from "./api/index";

package/.svelte-kit/__package__/template/seaweed/ChumBucket.svelte

@@ -0,0 +1,72 @@
+<script>import Card from "../../components/Card.svelte";
+import {} from "../..";
+import { onMount } from "svelte";
+let pageMetaList = [];
+const loadPageMeta = async () => {
+  fetch("/api/get-latest-blogs").then((resp) => resp.json()).then((json) => {
+    pageMetaList = json;
+  });
+};
+onMount(() => {
+  loadPageMeta();
+});
+</script>
+
+<Card>
+	<div slot="content" class="chum-bucket">
+		<h2>More about me...</h2>
+		<p>Check out the latest things I've been rambling about at
+			<a href="https://turnipxenon.com" target="_blank">turnipxenon.com</a> or at
+			<a href="https://turnipxenon.com/blogs/coding-chagrin" target="_blank">turnipxenon.com/blogs/coding-chagrin.</a>
+		</p>
+
+		{#if pageMetaList.length > 0}
+			<h3><b>My latest blogs (sounds too fancy)</b></h3>
+		{/if}
+
+		<div class="chum-bucket-grid">
+			{#each pageMetaList as pageMeta}
+				<div class="chum-bucket-item">
+					{#if pageMeta.imageUrl}
+						<img src={`https://turnipxenon.com${pageMeta.imageUrl}`}
+						     class="chum-bucket-image"
+						     alt={pageMeta.imageAlt}>
+					{/if}
+					<div>
+						<h3><a href={`https://turnipxenon.com/${pageMeta.relativeLink}`}>{pageMeta.title}</a></h3>
+						<p>{pageMeta.description}</p>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</Card>
+
+<style>
+    .chum-bucket-item {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+    }
+
+    .chum-bucket-image {
+        max-width: 10em;
+        height: auto;
+        margin-top: 0.5em;
+        margin-inline-end: 1em;
+    }
+
+
+    .chum-bucket {
+        padding: 1.5lh 2em;
+        max-width: 600px;
+    }
+
+    .chum-bucket-grid {
+        display: flex;
+        flex-direction: column;
+        margin-top: 0.5lh;
+        gap: 0.5lh;
+    }
+</style>

package/.svelte-kit/__package__/template/seaweed/ChumBucket.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChumBucketProps = typeof __propDef.props;
+export type ChumBucketEvents = typeof __propDef.events;
+export type ChumBucketSlots = typeof __propDef.slots;
+export default class ChumBucket extends SvelteComponent<ChumBucketProps, ChumBucketEvents, ChumBucketSlots> {
+}
+export {};

package/.svelte-kit/__package__/template/seaweed/SeaweedTemplate.svelte

@@ -18,6 +18,7 @@ import { parseQueryTerms } from "./ParseQueryTerms";
 import UrlShortenerForm from "./CreateUrlForm.svelte";
 import PineappleSlideToggle from "../../components/PineappleSlideToggle.svelte";
 import { Chip } from "../../index";
+import ChumBucket from "./ChumBucket.svelte";
 export let letChaos = true;
 export let name = "Turnip";
 export let email = "turnipxenon@gmail.com";
@@ -318,8 +319,10 @@ $:
 			{/if}
 		{/each}
 
+		<ChumBucket></ChumBucket>
+
 		{#if (!letChaos)}
-			<div aria-hidden="true" style="height: 25vh" />
+			<div aria-hidden="true" style="height: 3lh" />
 
 			<Card>
 				<div slot="content" class="default-card advanced-setting">

package/.svelte-kit/ambient.d.ts

@@ -165,6 +165,7 @@ declare module '$env/static/private' {
 	export const PUBLIC: string;
 	export const PWD: string;
 	export const PyCharm: string;
+	export const SESSIONNAME: string;
 	export const SHLVL: string;
 	export const SYSTEMDRIVE: string;
 	export const SYSTEMROOT: string;
@@ -357,6 +358,7 @@ declare module '$env/dynamic/private' {
 		PUBLIC: string;
 		PWD: string;
 		PyCharm: string;
+		SESSIONNAME: string;
 		SHLVL: string;
 		SYSTEMDRIVE: string;
 		SYSTEMROOT: string;

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: "sdfwev"
+	version_hash: "u4p1xt"
 };
 
 export async function get_hooks() {

package/.svelte-kit/types/route_meta_data.json

@@ -5,6 +5,9 @@
 	"/api/create-url": [
 		"src/routes/api/create-url/+server.ts"
 	],
+	"/api/get-latest-blogs": [
+		"src/routes/api/get-latest-blogs/+server.ts"
+	],
 	"/(pineapple)/pineapple/(pineapple)": [
 		"src/routes/(pineapple)/pineapple/(pineapple)/+page.ts"
 	],

package/.svelte-kit/types/src/routes/api/get-latest-blogs/$types.d.ts

@@ -0,0 +1,10 @@
+import type * as Kit from '@sveltejs/kit';
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+// @ts-ignore
+type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
+type RouteParams = {  };
+type RouteId = '/api/get-latest-blogs';
+
+export type RequestHandler = Kit.RequestHandler<RouteParams, RouteId>;
+export type RequestEvent = Kit.RequestEvent<RouteParams, RouteId>;

package/dist/api/GetLatestBlogs.d.ts

@@ -0,0 +1 @@
+export declare const GetLatestBlogs: () => Promise<Response>;

package/dist/api/GetLatestBlogs.js

@@ -0,0 +1,7 @@
+export const GetLatestBlogs = async () => {
+    const resp = await fetch("http://turnipxenon.com/api/get-latest-blogs");
+    if (!resp.ok) {
+        return new Response(JSON.stringify([]));
+    }
+    return new Response(JSON.stringify(await resp.json()));
+};

package/dist/api/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/api/index.js

@@ -0,0 +1,2 @@
+// noinspection ES6UnusedImports
+import { GetLatestBlogs } from "./GetLatestBlogs";

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

@@ -9,7 +9,7 @@ export interface PageMeta {
      * 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.
+     * Typescript, you can use import ImageUrl from "./path.png" as you would normally do.N
      * 4. Add ImageMap as an argument to your NavigationComponent.
      * Overall, this involves four files
      * - Your navigation page: ./+page.svelte

package/dist/index.d.ts

@@ -14,3 +14,4 @@ export * from "./components/dialog_manager/DialogUtils";
 export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
+export * from "./api/index";

package/dist/index.js

@@ -15,3 +15,4 @@ export * from "./components/dialog_manager/DialogUtils";
 export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
+export * from "./api/index";

package/dist/template/seaweed/ChumBucket.svelte

@@ -0,0 +1,72 @@
+<script>import Card from "../../components/Card.svelte";
+import {} from "../..";
+import { onMount } from "svelte";
+let pageMetaList = [];
+const loadPageMeta = async () => {
+  fetch("/api/get-latest-blogs").then((resp) => resp.json()).then((json) => {
+    pageMetaList = json;
+  });
+};
+onMount(() => {
+  loadPageMeta();
+});
+</script>
+
+<Card>
+	<div slot="content" class="chum-bucket">
+		<h2>More about me...</h2>
+		<p>Check out the latest things I've been rambling about at
+			<a href="https://turnipxenon.com" target="_blank">turnipxenon.com</a> or at
+			<a href="https://turnipxenon.com/blogs/coding-chagrin" target="_blank">turnipxenon.com/blogs/coding-chagrin.</a>
+		</p>
+
+		{#if pageMetaList.length > 0}
+			<h3><b>My latest blogs (sounds too fancy)</b></h3>
+		{/if}
+
+		<div class="chum-bucket-grid">
+			{#each pageMetaList as pageMeta}
+				<div class="chum-bucket-item">
+					{#if pageMeta.imageUrl}
+						<img src={`https://turnipxenon.com${pageMeta.imageUrl}`}
+						     class="chum-bucket-image"
+						     alt={pageMeta.imageAlt}>
+					{/if}
+					<div>
+						<h3><a href={`https://turnipxenon.com/${pageMeta.relativeLink}`}>{pageMeta.title}</a></h3>
+						<p>{pageMeta.description}</p>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</Card>
+
+<style>
+    .chum-bucket-item {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+    }
+
+    .chum-bucket-image {
+        max-width: 10em;
+        height: auto;
+        margin-top: 0.5em;
+        margin-inline-end: 1em;
+    }
+
+
+    .chum-bucket {
+        padding: 1.5lh 2em;
+        max-width: 600px;
+    }
+
+    .chum-bucket-grid {
+        display: flex;
+        flex-direction: column;
+        margin-top: 0.5lh;
+        gap: 0.5lh;
+    }
+</style>

package/dist/template/seaweed/ChumBucket.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChumBucketProps = typeof __propDef.props;
+export type ChumBucketEvents = typeof __propDef.events;
+export type ChumBucketSlots = typeof __propDef.slots;
+export default class ChumBucket extends SvelteComponent<ChumBucketProps, ChumBucketEvents, ChumBucketSlots> {
+}
+export {};

package/dist/template/seaweed/SeaweedTemplate.svelte

@@ -18,6 +18,7 @@ import { parseQueryTerms } from "./ParseQueryTerms";
 import UrlShortenerForm from "./CreateUrlForm.svelte";
 import PineappleSlideToggle from "../../components/PineappleSlideToggle.svelte";
 import { Chip } from "../../index";
+import ChumBucket from "./ChumBucket.svelte";
 export let letChaos = true;
 export let name = "Turnip";
 export let email = "turnipxenon@gmail.com";
@@ -318,8 +319,10 @@ $:
 			{/if}
 		{/each}
 
+		<ChumBucket></ChumBucket>
+
 		{#if (!letChaos)}
-			<div aria-hidden="true" style="height: 25vh" />
+			<div aria-hidden="true" style="height: 3lh" />
 
 			<Card>
 				<div slot="content" class="default-card advanced-setting">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.67",
+  "version": "2.4.68",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",

package/src/lib/api/GetLatestBlogs.ts

@@ -0,0 +1,7 @@
+export const GetLatestBlogs = async () => {
+	const resp = await fetch("http://turnipxenon.com/api/get-latest-blogs");
+	if (!resp.ok) {
+		return new Response(JSON.stringify([]));
+	}
+	return new Response(JSON.stringify(await resp.json()));
+};

package/src/lib/api/index.ts

@@ -0,0 +1,3 @@
+// noinspection ES6UnusedImports
+
+import { GetLatestBlogs } from "$pkg/api/GetLatestBlogs";

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

@@ -12,7 +12,7 @@ export interface PageMeta {
 	 * 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.
+	 * Typescript, you can use import ImageUrl from "./path.png" as you would normally do.N
 	 * 4. Add ImageMap as an argument to your NavigationComponent.
 	 * Overall, this involves four files
 	 * - Your navigation page: ./+page.svelte

package/src/lib/index.ts

@@ -17,3 +17,4 @@ export * from "./components/dialog_manager/DialogUtils";
 export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
+export * from "./api/index";

package/src/lib/template/seaweed/ChumBucket.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import Card from "$pkg/components/Card.svelte";
+	import { type PageMeta } from "$pkg";
+	import { onMount } from "svelte";
+
+	let pageMetaList: PageMeta[] = [];
+	const loadPageMeta = async () => {
+		fetch("/api/get-latest-blogs").then(resp => resp.json()).then(json => {
+			pageMetaList = json as PageMeta[];
+		});
+	};
+
+	onMount(() => {
+		loadPageMeta();
+	});
+</script>
+
+<Card>
+	<div slot="content" class="chum-bucket">
+		<h2>More about me...</h2>
+		<p>Check out the latest things I've been rambling about at
+			<a href="https://turnipxenon.com" target="_blank">turnipxenon.com</a> or at
+			<a href="https://turnipxenon.com/blogs/coding-chagrin" target="_blank">turnipxenon.com/blogs/coding-chagrin.</a>
+		</p>
+
+		{#if pageMetaList.length > 0}
+			<h3><b>My latest blogs (sounds too fancy)</b></h3>
+		{/if}
+
+		<div class="chum-bucket-grid">
+			{#each pageMetaList as pageMeta}
+				<div class="chum-bucket-item">
+					{#if pageMeta.imageUrl}
+						<img src={`https://turnipxenon.com${pageMeta.imageUrl}`}
+						     class="chum-bucket-image"
+						     alt={pageMeta.imageAlt}>
+					{/if}
+					<div>
+						<h3><a href={`https://turnipxenon.com/${pageMeta.relativeLink}`}>{pageMeta.title}</a></h3>
+						<p>{pageMeta.description}</p>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</Card>
+
+<style lang="postcss">
+    .chum-bucket-item {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+    }
+
+    .chum-bucket-image {
+        max-width: 10em;
+        height: auto;
+        margin-top: 0.5em;
+        margin-inline-end: 1em;
+    }
+
+
+    .chum-bucket {
+        padding: 1.5lh 2em;
+        max-width: 600px;
+    }
+
+    .chum-bucket-grid {
+        display: flex;
+        flex-direction: column;
+        margin-top: 0.5lh;
+        gap: 0.5lh;
+    }
+</style>

package/src/lib/template/seaweed/SeaweedTemplate.svelte

@@ -22,6 +22,7 @@
 	import UrlShortenerForm from "$pkg/template/seaweed/CreateUrlForm.svelte";
 	import PineappleSlideToggle from "$pkg/components/PineappleSlideToggle.svelte";
 	import { Chip } from "$pkg/index";
+	import ChumBucket from "$pkg/template/seaweed/ChumBucket.svelte";
 
 	export let letChaos = true;
 	export let name = "Turnip";
@@ -379,8 +380,10 @@
 			{/if}
 		{/each}
 
+		<ChumBucket></ChumBucket>
+
 		{#if (!letChaos)}
-			<div aria-hidden="true" style="height: 25vh" />
+			<div aria-hidden="true" style="height: 3lh" />
 
 			<Card>
 				<div slot="content" class="default-card advanced-setting">

package/src/routes/api/get-latest-blogs/+server.ts

@@ -0,0 +1,4 @@
+import type { RequestHandler } from "./$types";
+import { GetLatestBlogs } from "$pkg/api/GetLatestBlogs";
+
+export const GET: RequestHandler = GetLatestBlogs;