@turnipxenon/pineapple 2.4.24 → 2.4.25

package/.idea/workspace.xml

@@ -4,9 +4,7 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Refactor GameSection out of SeaweedTemplate">
-      <change beforePath="$PROJECT_DIR$/src/lib/template/Seaweed/SeaweedTemplate.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/template/Seaweed/SeaweedTemplate.svelte" afterDir="false" />
-    </list>
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Add page query param creator" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -35,9 +33,9 @@
         <option value="ToggleableContent" />
         <option value="Toast" />
         <option value="TestCard" />
-        <option value="TypeScript File" />
         <option value="GameSection" />
         <option value="ProjectSection" />
+        <option value="TypeScript File" />
       </list>
     </option>
   </component>
@@ -113,11 +111,11 @@
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast\custom-toast" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\types" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\template\Seaweed" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\about" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast\custom-toast" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast" />
     </key>
     <key name="es6.move.members.recent.items">
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\util\util.ts" />
@@ -221,23 +219,7 @@
       <workItem from="1711108187279" duration="1163000" />
       <workItem from="1711115902471" duration="148000" />
       <workItem from="1711116299202" duration="1291000" />
-      <workItem from="1711179012668" duration="1717000" />
-    </task>
-    <task id="LOCAL-00039" summary="Add chips and query">
-      <option name="closed" value="true" />
-      <created>1710127422091</created>
-      <option name="number" value="00039" />
-      <option name="presentableId" value="LOCAL-00039" />
-      <option name="project" value="LOCAL" />
-      <updated>1710127422091</updated>
-    </task>
-    <task id="LOCAL-00040" summary="Add chips and query">
-      <option name="closed" value="true" />
-      <created>1710128080602</created>
-      <option name="number" value="00040" />
-      <option name="presentableId" value="LOCAL-00040" />
-      <option name="project" value="LOCAL" />
-      <updated>1710128080602</updated>
+      <workItem from="1711179012668" duration="13200000" />
     </task>
     <task id="LOCAL-00041" summary="Turn the portfolio site into a template">
       <option name="closed" value="true" />
@@ -615,7 +597,23 @@
       <option name="project" value="LOCAL" />
       <updated>1711180642880</updated>
     </task>
-    <option name="localTasksCounter" value="88" />
+    <task id="LOCAL-00088" summary="Remove unnecessary imports and variables in SeaweedTemplate">
+      <option name="closed" value="true" />
+      <created>1711180796474</created>
+      <option name="number" value="00088" />
+      <option name="presentableId" value="LOCAL-00088" />
+      <option name="project" value="LOCAL" />
+      <updated>1711180796474</updated>
+    </task>
+    <task id="LOCAL-00089" summary="Add page query param creator">
+      <option name="closed" value="true" />
+      <created>1711192223071</created>
+      <option name="number" value="00089" />
+      <option name="presentableId" value="LOCAL-00089" />
+      <option name="project" value="LOCAL" />
+      <updated>1711192223071</updated>
+    </task>
+    <option name="localTasksCounter" value="90" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -673,8 +671,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Add animation to dynamically added button in social section" />
-    <MESSAGE value="Implement normal state for PineappleBaseLayout" />
     <MESSAGE value="Add custom toast" />
     <MESSAGE value="Add simple text toast and toast queue" />
     <MESSAGE value="Enforce stricter typing for Toast components" />
@@ -698,6 +694,8 @@
     <MESSAGE value="Add external link warning stub" />
     <MESSAGE value="Refactor Game Section to separate component" />
     <MESSAGE value="Refactor GameSection out of SeaweedTemplate" />
-    <option name="LAST_COMMIT_MESSAGE" value="Refactor GameSection out of SeaweedTemplate" />
+    <MESSAGE value="Remove unnecessary imports and variables in SeaweedTemplate" />
+    <MESSAGE value="Add page query param creator" />
+    <option name="LAST_COMMIT_MESSAGE" value="Add page query param creator" />
   </component>
 </project>

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,21 +289,46 @@ $:
 
 		</div>
 
-		<GameSection email={email}></GameSection>
-
-		<ProjectSection email={email}></ProjectSection>
+		{#if (gameSectionFirst)}
+			<GameSection email={email}></GameSection>
+			<ProjectSection email={email}></ProjectSection>
+		{:else }
+			<ProjectSection email={email}></ProjectSection>
+			<GameSection email={email}></GameSection>
+		{/if}
 
 		<div aria-hidden="true" style="height: 25vh" />
 
 		<Card>
-			<div slot="content" class="default-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="slider-label" bind:checked={isAdvanceSettingOn}>
+				<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>
+
+					<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>
@@ -244,3 +341,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

@@ -130,4 +130,4 @@ h2 {
 
 .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/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: "oftg2b"
 };
 
 export async function get_hooks() {

package/dist/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,21 +289,46 @@ $:
 
 		</div>
 
-		<GameSection email={email}></GameSection>
-
-		<ProjectSection email={email}></ProjectSection>
+		{#if (gameSectionFirst)}
+			<GameSection email={email}></GameSection>
+			<ProjectSection email={email}></ProjectSection>
+		{:else }
+			<ProjectSection email={email}></ProjectSection>
+			<GameSection email={email}></GameSection>
+		{/if}
 
 		<div aria-hidden="true" style="height: 25vh" />
 
 		<Card>
-			<div slot="content" class="default-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="slider-label" bind:checked={isAdvanceSettingOn}>
+				<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>
+
+					<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>
@@ -244,3 +341,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/dist/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/dist/template/Seaweed/seaweed.postcss

@@ -130,4 +130,4 @@ h2 {
 
 .accordion-header {
     margin-top: 0.25em;
-}
+}

package/dist/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/package.json

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

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

@@ -3,11 +3,12 @@
 	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 "$pkg/components/SocialSection.svelte";
 	import "./seaweed.postcss";
 	import SeaweedBaseLayout from "$pkg/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 "$pkg/components/Card.svelte";
 	import { onMount } from "svelte";
@@ -20,11 +21,71 @@
 
 	$: isSocialsGone = !isVisible;
 
+	// region query params
+	import gameContent from "./GameSection.svelte?raw";
+	import projectContent from "./ProjectSection.svelte?raw";
+	import selfContent from "./SeaweedTemplate.svelte?raw";
 
+	let qtMap = new Map<string, boolean>();
+	const paramQTSet = new Set<string>();
+
+	const syncQT = () => {
+		if (qtMap.size === 0 || paramQTSet.size === 0) {
+			return;
+		}
+
+		qtMap.forEach((_, k) => {
+			qtMap.set(k, paramQTSet.has(k));
+		});
+
+		// force svelte refresh
+		qtMap = qtMap;
+	};
+
+	const parseQTTerms = async () => {
+		const qtSet = new Set<string>();
+		const rawTermList: string[] = [];
+		[gameContent, projectContent, selfContent].forEach(body => {
+			// parse the qt-* term which exists within elements like:
+			// <span class="qt-*">TERM</span>
+			rawTermList.push(
+				...body // step 3: destructure the array
+					.split("\"") // step 1: split the text as double quotations (") as the delimiter
+					.filter(s => s.startsWith("qt-")) // step 2: filter out texts that does not begin with "qt-"
+			);
+		});
+
+		// step 4: some spans contain multiple classes, split them up
+		// then add them to qtTerms
+		// e.g. <span class="qt-1 qt-2">TERM</span>
+		rawTermList.forEach(t => {
+			t.split(" ").forEach(nt => {
+				// filter out some of this meta terms
+				if (["qt-1", "qt-2", "qt-*", "qt-"].includes(nt)) {
+					return;
+				}
+
+				// adding to set ensures the entry is unique
+				qtSet.add(nt);
+			});
+		});
+
+		// activate svelte reactivity
+		qtSet.forEach(t => qtMap.set(t, true));
+		syncQT();
+	};
+	parseQTTerms();
+
+	// todo: fix fragile relative reference to the root
+	// const fileList = import.meta.glob("./**/+page.svelte", { query: "?raw", eager: true });
+	// const titleToLink = new Map<string, string>();
+
+	let gameSectionFirst = true;
 	let qtfontWeight = "normal";
 	let additionalFontWeight = "";
 	/** qt values and what they mean:
 	 *  undefined: set all qt terms to font-weight: bold
+	 *  todo: implement clear
 	 *  clear: unset all terms to font-weight: normal
 	 *  <term>: only set qt-<term> to bold
 	 *  <term1>,<term2>: only set qt-<term1> and qt-<term2> to bold,
@@ -32,6 +93,12 @@
 	 *  ONLY CALL INSIDE onMount()
 	 **/
 	const filterSearchParams = (searchParams: URLSearchParams) => {
+		const gameSectionFirstParam = searchParams.get("game-section-first")?.trim();
+		if (gameSectionFirstParam === "false") {
+			gameSectionFirst = false;
+		}
+
+		// region Bold terms
 		const qtValue = searchParams.get("qt")?.trim();
 		if (qtValue === undefined) {
 			qtfontWeight = "bold";
@@ -39,6 +106,10 @@
 		}
 		qtfontWeight = "normal";
 		const dynamicStyle = qtValue.split(",").map((term) => {
+			// side-effect
+			paramQTSet.add(`qt-${term}`);
+
+			// main effect
 			return `span.qt-${term} { font-weight: bold !important; }`;
 		}).join("\n");
 
@@ -48,7 +119,10 @@
 		style.type = "text/css";
 		style.innerText = dynamicStyle;
 		document.head.appendChild(style);
+		syncQT();
+		// endregion Bold terms
 	};
+	// endregion query params
 
 	/* region chaos scripts */
 	const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
@@ -96,6 +170,10 @@
 		}
 	};
 
+	let mainVisibility = "visible";
+	$: mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
+	/* endregion chaos scripts */
+
 	onMount(() => {
 		if (!letChaos && $page.url.searchParams) {
 			filterSearchParams($page.url.searchParams);
@@ -107,9 +185,45 @@
 		}
 	});
 
-	let mainVisibility = "visible";
-	$: mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
-	/* endregion chaos scripts */
+	const toggleTerm = (term: string) => {
+		qtMap.set(term, !qtMap.get(term));
+		qtMap = qtMap;
+	};
+
+	// when either gameSectionFirst or the queryTerms are updated, update advancedUrl
+	let advancedUrl = domain;
+	const updateUrl = () => {
+		const queryParams: string[] = [];
+
+		const qtList: string[] = [];
+		qtMap.forEach((shouldBold, term) => {
+			if (shouldBold) {
+				qtList.push(term);
+			}
+		});
+
+		if (qtList.length === 0) {
+			queryParams.push("qt=clear");
+		} else if (qtMap.size !== qtList.length) {
+			// we'll only add if the lengths are not equal
+			// dont need to add query if all terms in qtMap is true
+			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;
+		}
+		// advancedUrl = `${domain}?${q}`;
+	};
+	$: // noinspection CommaExpressionJS
+		gameSectionFirst, qtMap, updateUrl();
+	// $: gameSectionQuery = gameSectionFirst ? "" : "game-section-first=false";
 </script>
 
 <SeaweedBaseLayout bind:shouldDisplayLeadingIcons={isSocialsGone}>
@@ -246,21 +360,46 @@
 
 		</div>
 
-		<GameSection email={email}></GameSection>
-
-		<ProjectSection email={email}></ProjectSection>
+		{#if (gameSectionFirst)}
+			<GameSection email={email}></GameSection>
+			<ProjectSection email={email}></ProjectSection>
+		{:else }
+			<ProjectSection email={email}></ProjectSection>
+			<GameSection email={email}></GameSection>
+		{/if}
 
 		<div aria-hidden="true" style="height: 25vh" />
 
 		<Card>
-			<div slot="content" class="default-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="slider-label" bind:checked={isAdvanceSettingOn}>
+				<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>
+
+					<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>
@@ -273,3 +412,22 @@
 	               linkedinSlug={linkedinSlug}
 	               isSmallVersion={true}></SocialSection>
 </SeaweedBaseLayout>
+
+<style lang="postcss">
+    .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/src/lib/template/Seaweed/seaweed.postcss

@@ -130,4 +130,4 @@ h2 {
 
 .accordion-header {
     margin-top: 0.25em;
-}
+}

package/src/lib/util/util.ts

@@ -32,3 +32,7 @@ export const createExternalLinkWarningFunction = (args: ExternalLinkWarningArgs)
 		location.href = args.href;
 	});
 };
+
+export interface RawGlob {
+	default: string;
+}

package/src/routes/+layout.svelte

@@ -7,6 +7,24 @@
 	import "$lib/app.postcss";
 
 	import "$lib/styles/global.css";
+
+	// region Skeleton Store
+
+	// endregion Skeleton Store
+
+	// region highlightjs
+	import { initializeStores, storeHighlightJs } from "@skeletonlabs/skeleton";
+	import "highlight.js/styles/github-dark.css";
+
+	import xml from "highlight.js/lib/languages/xml"; // for HTML
+	import hljs from "highlight.js/lib/core";
+
+	initializeStores();
+
+	hljs.registerLanguage("xml", xml);
+	hljs.registerLanguage("url", xml);
+	storeHighlightJs.set(hljs);
+	// endregion highlightjs
 </script>
 
 <slot />