@turnipxenon/pineapple 2.4.24 → 2.4.26

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,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/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

@@ -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/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.26",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",

package/src/lib/components/overrideable_meta/OverridableMeta.svelte

@@ -0,0 +1,56 @@
+<!--
+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 "$pkg";
+
+export const load = async (): Promise<OverridableMetaProps> => {
+	return {
+		title: "CustomTitle",
+	};
+};
+</code>
+-->
+
+<script lang="ts">
+	import WebThumbnailImage from "$pkg/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";
+	import type { OverridableMetaProps } from "./OverridableMetaProps";
+
+	const data: OverridableMetaProps = {
+		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: OverridableMetaProps = 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>

package/src/lib/components/overrideable_meta/OverridableMetaProps.ts

@@ -0,0 +1,7 @@
+export interface OverridableMetaProps {
+	title?: string;
+	ogUrl?: string;
+	ogTitle?: string;
+	ogDescription?: string;
+	ogImage?: string;
+}

package/src/lib/components/overrideable_meta/index.ts

@@ -0,0 +1,4 @@
+// noinspection JSUnusedGlobalSymbols
+
+export { default as OverridableMeta } from "./OverridableMeta.svelte";
+export * from "./OverridableMetaProps";

package/src/lib/index.ts

@@ -1,8 +1,11 @@
+// noinspection JSUnusedGlobalSymbols
+
 export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export { default as SeaweedTemplate } from "./template/Seaweed/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
 
+export * from "./components/overrideable_meta/index.ts";
 export * from "./components/dialog_manager/DialogManagerStore";
 export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";