@turnipxenon/pineapple 2.4.24 → 2.4.26

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

@@ -2,10 +2,11 @@
 export let name = "Turnip";
 export let email = "turnipxenon@gmail.com";
 export let linkedinSlug = "turnip-xenon";
+export let domain = "http://localhost:5173/portfolio/actual/";
 import SocialSection from "../../components/SocialSection.svelte";
 import "./seaweed.postcss";
 import SeaweedBaseLayout from "../../components/layouts/SeaweedBaseLayout.svelte";
-import { Accordion, AccordionItem, SlideToggle } from "@skeletonlabs/skeleton";
+import { Accordion, AccordionItem, CodeBlock, SlideToggle } from "@skeletonlabs/skeleton";
 import { page } from "$app/stores";
 import Card from "../../components/Card.svelte";
 import { onMount } from "svelte";
@@ -16,9 +17,49 @@ let isVisible = true;
 let isAdvanceSettingOn = false;
 $:
   isSocialsGone = !isVisible;
+import gameContent from "./GameSection.svelte?raw";
+import projectContent from "./ProjectSection.svelte?raw";
+import selfContent from "./SeaweedTemplate.svelte?raw";
+let qtMap = /* @__PURE__ */ new Map();
+const paramQTSet = /* @__PURE__ */ new Set();
+const syncQT = () => {
+  if (qtMap.size === 0 || paramQTSet.size === 0) {
+    return;
+  }
+  qtMap.forEach((_, k) => {
+    qtMap.set(k, paramQTSet.has(k));
+  });
+  qtMap = qtMap;
+};
+const parseQTTerms = async () => {
+  const qtSet = /* @__PURE__ */ new Set();
+  const rawTermList = [];
+  [gameContent, projectContent, selfContent].forEach((body) => {
+    rawTermList.push(
+      ...body.split('"').filter((s) => s.startsWith("qt-"))
+      // step 2: filter out texts that does not begin with "qt-"
+    );
+  });
+  rawTermList.forEach((t) => {
+    t.split(" ").forEach((nt) => {
+      if (["qt-1", "qt-2", "qt-*", "qt-"].includes(nt)) {
+        return;
+      }
+      qtSet.add(nt);
+    });
+  });
+  qtSet.forEach((t) => qtMap.set(t, true));
+  syncQT();
+};
+parseQTTerms();
+let gameSectionFirst = true;
 let qtfontWeight = "normal";
 let additionalFontWeight = "";
 const filterSearchParams = (searchParams) => {
+  const gameSectionFirstParam = searchParams.get("game-section-first")?.trim();
+  if (gameSectionFirstParam === "false") {
+    gameSectionFirst = false;
+  }
   const qtValue = searchParams.get("qt")?.trim();
   if (qtValue === void 0) {
     qtfontWeight = "bold";
@@ -26,12 +67,14 @@ const filterSearchParams = (searchParams) => {
   }
   qtfontWeight = "normal";
   const dynamicStyle = qtValue.split(",").map((term) => {
+    paramQTSet.add(`qt-${term}`);
     return `span.qt-${term} { font-weight: bold !important; }`;
   }).join("\n");
   const style = document.createElement("style");
   style.type = "text/css";
   style.innerText = dynamicStyle;
   document.head.appendChild(style);
+  syncQT();
 };
 const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
 let chaosDone = false;
@@ -69,6 +112,9 @@ const runChaos = (node) => {
     }
   }
 };
+let mainVisibility = "visible";
+$:
+  mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
 onMount(() => {
   if (!letChaos && $page.url.searchParams) {
     filterSearchParams($page.url.searchParams);
@@ -78,9 +124,35 @@ onMount(() => {
     chaosDone = true;
   }
 });
-let mainVisibility = "visible";
+const toggleTerm = (term) => {
+  qtMap.set(term, !qtMap.get(term));
+  qtMap = qtMap;
+};
+let advancedUrl = domain;
+const updateUrl = () => {
+  const queryParams = [];
+  const qtList = [];
+  qtMap.forEach((shouldBold, term) => {
+    if (shouldBold) {
+      qtList.push(term);
+    }
+  });
+  if (qtList.length === 0) {
+    queryParams.push("qt=clear");
+  } else if (qtMap.size !== qtList.length) {
+    queryParams.push(`qt=${qtList.map((t) => t.slice(3, t.length)).join(",")}`);
+  }
+  if (!gameSectionFirst) {
+    queryParams.push("game-section-first=false");
+  }
+  if (queryParams.length > 0) {
+    advancedUrl = `${domain}?${queryParams.join("&")}`;
+  } else {
+    advancedUrl = domain;
+  }
+};
 $:
-  mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
+  gameSectionFirst, qtMap, updateUrl();
 </script>
 
 <SeaweedBaseLayout bind:shouldDisplayLeadingIcons={isSocialsGone}>
@@ -217,25 +289,51 @@ $:
 
 		</div>
 
-		<GameSection email={email}></GameSection>
+		{#if (gameSectionFirst)}
+			<GameSection email={email}></GameSection>
+			<ProjectSection email={email}></ProjectSection>
+		{:else }
+			<ProjectSection email={email}></ProjectSection>
+			<GameSection email={email}></GameSection>
+		{/if}
 
-		<ProjectSection email={email}></ProjectSection>
+		{#if (!letChaos)}
+			<div aria-hidden="true" style="height: 25vh" />
 
-		<div aria-hidden="true" style="height: 25vh" />
+			<Card>
+				<div slot="content" class="default-card advanced-setting">
+					<h1>Advanced settings</h1>
+					<p>This one is for those curious how I customize this page.</p>
+					<SlideToggle name="advanced-setting-slider" bind:checked={isAdvanceSettingOn}>
+						Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
+					</SlideToggle>
+					{#if (isAdvanceSettingOn)}
+						<SlideToggle name="game-section-slider" bind:checked={gameSectionFirst}>
+							Should game section appear first over projects: {gameSectionFirst ? "On" : "Off"}
+						</SlideToggle>
 
-		<Card>
-			<div slot="content" class="default-card">
-				<h1>Advanced settings</h1>
-				<p>This one is for those curious how I customize this page.</p>
-				<SlideToggle name="slider-label" bind:checked={isAdvanceSettingOn}>
-					Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
-				</SlideToggle>
-				{#if (isAdvanceSettingOn)}
-					<br>
-				{/if}
-			</div>
-		</Card>
+						<h3>Query terms to bold</h3>
+						<div class="query-term-grid">
+							{#each qtMap.entries() as [term, shouldBold]}
+								<!--{@const shouldBold = false}-->
+								<button
+									class="chip {shouldBold ? 'variant-filled-tertiary' : 'variant-soft-tertiary'}"
+									on:click={() => {toggleTerm(term)}}
+								>
+									<!-- todo: change shouldBold -->
+									{#if (shouldBold)}&check;{/if}
+									{term}
+								</button>
+							{/each}
+						</div>
 
+						<br>
+						<p>Copy the url below and open a new page with it</p>
+						<CodeBlock language="url" code={advancedUrl}></CodeBlock>
+					{/if}
+				</div>
+			</Card>
+		{/if}
 	</main>
 
 	<SocialSection slot="extraLeadingIcons"
@@ -244,3 +342,22 @@ $:
 	               linkedinSlug={linkedinSlug}
 	               isSmallVersion={true}></SocialSection>
 </SeaweedBaseLayout>
+
+<style>
+    .advanced-setting {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5lh;
+    }
+
+    h3 {
+        font-size: 1.5em;
+        line-height: 1.5lh;
+    }
+
+    .query-term-grid {
+        display: flex;
+        gap: 0.25em;
+        flex-wrap: wrap;
+    }
+</style>

package/.svelte-kit/__package__/template/Seaweed/SeaweedTemplate.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         name?: string | undefined;
         email?: string | undefined;
         linkedinSlug?: string | undefined;
+        domain?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/.svelte-kit/__package__/template/Seaweed/seaweed.postcss

@@ -1,133 +1,133 @@
-main {
-    width: 100%;
-    overflow: visible;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-h1 {
-    font-size: 2em;
-}
-
-h2 {
-    font-size: 1.5em;
-}
-
-.section-card {
-    padding: 3em;
-    max-width: 800px;
-}
-
-.game-card, .project-card {
-    width: 100vw;
-    max-width: 36em;
-    margin-bottom: 3em;
-}
-
-.game-card > video {
-    border-top-left-radius: 1em;
-    border-top-right-radius: 1em;
-    max-height: 24em;
-    width: 100%;
-    object-fit: cover;
-}
-
-#migrante-alberta, .game-card > img, .project-card > img {
-    border-top-left-radius: 1em;
-    border-top-right-radius: 1em;
-}
-
-#migrante-alberta {
-    width: 100%;
-    object-fit: cover;
-}
-
-.game-button {
-    @apply btn variant-filled-primary;
-}
-
-.game-button > img {
-    max-height: 1lh;
-    /* todo: consider night mode day mode */
-}
-
-.two-column-separated {
-    display: flex;
-    justify-content: space-between;
-}
-
-.more-section {
-    padding: 1em;
-}
-
-.greater-about-div {
-    display: flex;
-    flex-direction: column;
-    max-width: 36em;
-}
-
-.experience-and-about-div {
-    display: flex;
-    gap: 2em;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: flex-start;
-}
-
-.game-card-body, .project-card-body {
-    padding: 1em;
-}
-
-.game-card-body > blockquote {
-    margin-bottom: 0.7lh;
-}
-
-.game-card-body > h1, .project-card-body > h2 {
-    text-align: center;
-}
-
-.game-link-section {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 1em;
-    margin-top: 1em;
-}
-
-.games-section, .projects-section {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2em;
-    justify-content: center;
-}
-
-.projects-section {
-    align-items: flex-start;
-    /*justify-content: flex-start;*/
-}
-
-.long-btn-image {
-    max-height: 1lh;
-}
-
-.itch-promo {
-    padding: 4em;
-}
-
-#hepcat-video {
-    object-position: 0 0;
-}
-
-.title-card {
-    width: clamp(360px, 80vw, 800px);
-}
-
-[class*='qt-'] {
-    font-weight: var(--qt-font-weight);
-}
-
-.accordion-header {
-    margin-top: 0.25em;
-}
+main {
+    width: 100%;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
+.section-card {
+    padding: 3em;
+    max-width: 800px;
+}
+
+.game-card, .project-card {
+    width: 100vw;
+    max-width: 36em;
+    margin-bottom: 3em;
+}
+
+.game-card > video {
+    border-top-left-radius: 1em;
+    border-top-right-radius: 1em;
+    max-height: 24em;
+    width: 100%;
+    object-fit: cover;
+}
+
+#migrante-alberta, .game-card > img, .project-card > img {
+    border-top-left-radius: 1em;
+    border-top-right-radius: 1em;
+}
+
+#migrante-alberta {
+    width: 100%;
+    object-fit: cover;
+}
+
+.game-button {
+    @apply btn variant-filled-primary;
+}
+
+.game-button > img {
+    max-height: 1lh;
+    /* todo: consider night mode day mode */
+}
+
+.two-column-separated {
+    display: flex;
+    justify-content: space-between;
+}
+
+.more-section {
+    padding: 1em;
+}
+
+.greater-about-div {
+    display: flex;
+    flex-direction: column;
+    max-width: 36em;
+}
+
+.experience-and-about-div {
+    display: flex;
+    gap: 2em;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.game-card-body, .project-card-body {
+    padding: 1em;
+}
+
+.game-card-body > blockquote {
+    margin-bottom: 0.7lh;
+}
+
+.game-card-body > h1, .project-card-body > h2 {
+    text-align: center;
+}
+
+.game-link-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 1em;
+    margin-top: 1em;
+}
+
+.games-section, .projects-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2em;
+    justify-content: center;
+}
+
+.projects-section {
+    align-items: flex-start;
+    /*justify-content: flex-start;*/
+}
+
+.long-btn-image {
+    max-height: 1lh;
+}
+
+.itch-promo {
+    padding: 4em;
+}
+
+#hepcat-video {
+    object-position: 0 0;
+}
+
+.title-card {
+    width: clamp(360px, 80vw, 800px);
+}
+
+[class*='qt-'] {
+    font-weight: var(--qt-font-weight);
+}
+
+.accordion-header {
+    margin-top: 0.25em;
+}

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

@@ -5,3 +5,6 @@ export interface ExternalLinkWarningArgs {
     href: string;
 }
 export declare const createExternalLinkWarningFunction: (args: ExternalLinkWarningArgs) => (() => void);
+export interface RawGlob {
+    default: string;
+}

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

@@ -46,7 +46,6 @@ declare module '$env/static/private' {
 	export const HOMEDRIVE: string;
 	export const HOMEPATH: string;
 	export const IDEA_INITIAL_DIRECTORY: string;
-	export const IJ_RESTARTER_LOG: string;
 	export const INIT_CWD: string;
 	export const JAVA_HOME: string;
 	export const LOCALAPPDATA: string;
@@ -240,7 +239,6 @@ declare module '$env/dynamic/private' {
 		HOMEDRIVE: string;
 		HOMEPATH: string;
 		IDEA_INITIAL_DIRECTORY: string;
-		IJ_RESTARTER_LOG: string;
 		INIT_CWD: string;
 		JAVA_HOME: string;
 		LOCALAPPDATA: string;

package/.svelte-kit/generated/client/nodes/5.js

@@ -1 +1,3 @@
+import * as universal from "../../../../src/routes/(pineapple)/pineapple/+page.ts";
+export { universal };
 export { default as component } from "../../../../src/routes/(pineapple)/pineapple/+page.svelte";

package/.svelte-kit/generated/client/nodes/6.js

@@ -1 +1,3 @@
+import * as universal from "../../../../src/routes/(seaweed)/portfolio/+page.ts";
+export { universal };
 export { default as component } from "../../../../src/routes/(seaweed)/portfolio/+page.svelte";

package/.svelte-kit/generated/client/nodes/7.js

@@ -1 +1,3 @@
+import * as universal from "../../../../src/routes/(seaweed)/portfolio/actual/+page.ts";
+export { universal };
 export { default as component } from "../../../../src/routes/(seaweed)/portfolio/actual/+page.svelte";

package/.svelte-kit/generated/client/nodes/8.js

@@ -1 +1 @@
-export { default as component } from "../../../../src/routes/(seaweed)/portfolio/+page.svelte";
+export { default as component } from "../../../../src/routes/(seaweed)/portfolio/actual/+page.svelte";

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: "1cu0e7k"
+	version_hash: "6ez2bd"
 };
 
 export async function get_hooks() {

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

@@ -2,9 +2,14 @@
 	"/(seaweed)": [],
 	"/(pineapple)": [],
 	"/": [],
-	"/(pineapple)/pineapple": [],
+	"/(pineapple)/pineapple": [
+		"src/routes/(pineapple)/pineapple/+page.ts"
+	],
 	"/(seaweed)/portfolio": [
+		"src/routes/(seaweed)/portfolio/+page.ts",
 		"src/routes/(seaweed)/portfolio/+page.server.ts"
 	],
-	"/(seaweed)/portfolio/actual": []
+	"/(seaweed)/portfolio/actual": [
+		"src/routes/(seaweed)/portfolio/actual/+page.ts"
+	]
 }

package/.svelte-kit/types/src/routes/(pineapple)/pineapple/$types.d.ts

@@ -14,4 +14,6 @@ export type Snapshot<T = any> = Kit.Snapshot<T>;
 type PageParentData = Omit<EnsureDefined<import('../../$types.js').LayoutData>, keyof import('../$types.js').LayoutData> & EnsureDefined<import('../$types.js').LayoutData>;
 
 export type PageServerData = null;
-export type PageData = Expand<PageParentData>;
+export type PageLoad<OutputData extends OutputDataShape<PageParentData> = OutputDataShape<PageParentData>> = Kit.Load<RouteParams, PageServerData, PageParentData, OutputData, RouteId>;
+export type PageLoadEvent = Parameters<PageLoad>[0];
+export type PageData = Expand<Omit<PageParentData, keyof Kit.LoadProperties<Awaited<ReturnType<typeof import('../../../../../../src/routes/(pineapple)/pineapple/+page.js').load>>>> & OptionalUnion<EnsureDefined<Kit.LoadProperties<Awaited<ReturnType<typeof import('../../../../../../src/routes/(pineapple)/pineapple/+page.js').load>>>>>>;

package/.svelte-kit/types/src/routes/(seaweed)/portfolio/$types.d.ts

@@ -14,11 +14,13 @@ export type Snapshot<T = any> = Kit.Snapshot<T>;
 type PageServerParentData = Omit<EnsureDefined<import('../../$types.js').LayoutServerData>, keyof import('../$types.js').LayoutServerData> & EnsureDefined<import('../$types.js').LayoutServerData>;
 type PageParentData = Omit<EnsureDefined<import('../../$types.js').LayoutData>, keyof import('../$types.js').LayoutData> & EnsureDefined<import('../$types.js').LayoutData>;
 
-export type PageServerLoad<OutputData extends OutputDataShape<PageServerParentData> = OutputDataShape<PageServerParentData>> = Kit.ServerLoad<RouteParams, PageServerParentData, OutputData, RouteId>;
+export type PageServerLoad<OutputData extends Partial<App.PageData> & Record<string, any> | void = Partial<App.PageData> & Record<string, any> | void> = Kit.ServerLoad<RouteParams, PageServerParentData, OutputData, RouteId>;
 export type PageServerLoadEvent = Parameters<PageServerLoad>[0];
 export type ActionData = unknown;
 export type PageServerData = Expand<OptionalUnion<EnsureDefined<Kit.LoadProperties<Awaited<ReturnType<typeof import('./proxy+page.server.js').load>>>>>>;
-export type PageData = Expand<Omit<PageParentData, keyof PageServerData> & EnsureDefined<PageServerData>>;
+export type PageLoad<OutputData extends OutputDataShape<PageParentData> = OutputDataShape<PageParentData>> = Kit.Load<RouteParams, PageServerData, PageParentData, OutputData, RouteId>;
+export type PageLoadEvent = Parameters<PageLoad>[0];
+export type PageData = Expand<Omit<PageParentData, keyof Kit.LoadProperties<Awaited<ReturnType<typeof import('../../../../../../src/routes/(seaweed)/portfolio/+page.js').load>>>> & OptionalUnion<EnsureDefined<Kit.LoadProperties<Awaited<ReturnType<typeof import('../../../../../../src/routes/(seaweed)/portfolio/+page.js').load>>>>>>;
 export type Action<OutputData extends Record<string, any> | void = Record<string, any> | void> = Kit.Action<RouteParams, OutputData, RouteId>
 export type Actions<OutputData extends Record<string, any> | void = Record<string, any> | void> = Kit.Actions<RouteParams, OutputData, RouteId>
 export type RequestEvent = Kit.RequestEvent<RouteParams, RouteId>;

package/.svelte-kit/types/src/routes/(seaweed)/portfolio/actual/$types.d.ts

@@ -14,4 +14,6 @@ export type Snapshot<T = any> = Kit.Snapshot<T>;
 type PageParentData = Omit<EnsureDefined<import('../../../$types.js').LayoutData>, keyof import('../../$types.js').LayoutData> & EnsureDefined<import('../../$types.js').LayoutData>;
 
 export type PageServerData = null;
-export type PageData = Expand<PageParentData>;
+export type PageLoad<OutputData extends OutputDataShape<PageParentData> = OutputDataShape<PageParentData>> = Kit.Load<RouteParams, PageServerData, PageParentData, OutputData, RouteId>;
+export type PageLoadEvent = Parameters<PageLoad>[0];
+export type PageData = Expand<Omit<PageParentData, keyof Kit.LoadProperties<Awaited<ReturnType<typeof import('../../../../../../../src/routes/(seaweed)/portfolio/actual/+page.js').load>>>> & OptionalUnion<EnsureDefined<Kit.LoadProperties<Awaited<ReturnType<typeof import('../../../../../../../src/routes/(seaweed)/portfolio/actual/+page.js').load>>>>>>;

package/dist/components/overrideable_meta/OverridableMeta.svelte

@@ -0,0 +1,51 @@
+<!--
+OverridableMeta is convenient Svelte component allowing each page to override the head meta values
+based on their +page.ts.
+
+For example:
+<code>
+// +page.ts
+
+import type { OverridableMetaProps } from "../..";
+
+export const load = async (): Promise<OverridableMetaProps> => {
+	return {
+		title: "CustomTitle",
+	};
+};
+</code>
+-->
+
+<script>import WebThumbnailImage from "../../assets/placeholder/placeholder_circle.png";
+export let rootUrl = "http://localhost:5173";
+export let title = "Welcome to my portfolio";
+export let ogTitle = "Turnip time!";
+export let ogDescription = "Welcome to Turnip's test portfolio";
+export let ogImage = WebThumbnailImage;
+import { page } from "$app/stores";
+const data = {
+  title: "Welcome to my portfolio",
+  ogUrl: "https://www.crouton.net/",
+  ogTitle: "Turnip time!",
+  ogDescription: "Welcome to Turnip's test portfolio",
+  ogImage: WebThumbnailImage
+};
+page.subscribe((p) => {
+  const pageData = p.data;
+  data.title = pageData.title ?? title;
+  data.ogUrl = `${rootUrl}${p.url.pathname}`;
+  data.ogTitle = pageData.ogTitle ?? ogTitle;
+  data.ogDescription = pageData.ogDescription ?? ogDescription;
+  data.ogImage = pageData.ogImage ?? ogImage;
+});
+</script>
+
+<svelte:head>
+	<meta charset="utf-8" />
+	<title>{data.title}</title>
+	<meta name="twitter:card" content="summary" />
+	<meta property="og:url" content={data.ogUrl} />
+	<meta property="og:title" content={data.ogTitle} />
+	<meta property="og:description" content={data.ogDescription} />
+	<meta property="og:image" content={data.ogImage} />
+</svelte:head>