@turnipxenon/pineapple 2.10.0 → 3.0.0-alpha-3

package/dist/template/seaweed/SeaweedTemplate.svelte

@@ -1,175 +1,238 @@
-<script>import { afterUpdate, onMount } from "svelte";
-import EntryOrderConfig from "./entry_order_config/EntryOrderConfig.svelte";
-import { runChaos } from "./RunChaos";
-import SocialSection from "../../components/SocialSection.svelte";
-import "./seaweed.postcss";
-import SeaweedBaseLayout from "../../components/layouts/SeaweedBaseLayout.svelte";
-import { CodeBlock } from "@skeletonlabs/skeleton";
-import { page } from "$app/stores";
-import Card from "../../components/Card.svelte";
-import {
-  TurnGroupEntriesMutable
-} from "./SeaweedTemplateData";
-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 seaweedTemplateData;
-export let projectFirstGroupedEntries;
-export let getAllEntryFromGlobal;
-export let getEntryFromGlobal;
-export let letChaos = true;
-export let name = "Turnip";
-export let email = "turnipxenon@gmail.com";
-export let linkedinSlug = "turnip-xenon";
-export let domain = "http://localhost:5173/portfolio/actual/";
-export let serverSideQueryParams = "";
-export let experienceSection;
-let entryProps = {
-  email,
-  letChaos,
-  linkedinSlug,
-  name,
-  seaweedTemplateData
-};
-let isVisible = true;
-const paramQTSet = /* @__PURE__ */ new Set();
-let isAdvanceSettingOn = false;
-$:
-  isSocialsGone = !isVisible;
-let qtfontWeight = "normal";
-let additionalFontWeight = "";
-let chaosDone = false;
-let mainVisibility = "visible";
-$:
-  mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
-const syncQT = () => {
-  if (seaweedTemplateData.queryTermMap.size === 0 || paramQTSet.size === 0) {
-    return;
-  }
-  seaweedTemplateData.queryTermMap.forEach((_, k) => {
-    seaweedTemplateData.queryTermMap.set(k, paramQTSet.has(k));
-  });
-  seaweedTemplateData.queryTermMap = seaweedTemplateData.queryTermMap;
-};
-const parseQueryTermsLocal = async () => {
-  const qtSet = /* @__PURE__ */ new Set();
-  parseQueryTerms(document.body, qtSet);
-  qtSet.forEach((t) => seaweedTemplateData.queryTermMap.set(t, true));
-  seaweedTemplateData.queryTermMap = seaweedTemplateData.queryTermMap;
-  syncQT();
-};
-const filterSearchParams = (searchParams) => {
-  const isFunOn = searchParams.get("fun")?.trim();
-  if (isFunOn === "true") {
-    seaweedTemplateData.shouldAddFunNote = true;
-  }
-  const gameSectionFirstParam = searchParams.get("game-section-first")?.trim();
-  const orderParam = searchParams.get("order")?.trim();
-  if (orderParam) {
-    seaweedTemplateData.groupedEntries = [];
-    orderParam.split(",").forEach((groupDefinition) => {
-      const pair = groupDefinition.split(":");
-      if (pair.length >= 2) {
-        const group = {
-          name: pair[0],
-          items: [],
-          gridClass: pair[2]
-        };
-        pair[1].split("|").forEach((e) => {
-          const component = getEntryFromGlobal(e);
-          if (component) {
-            group.items.push(component);
-          }
-        });
-        seaweedTemplateData.groupedEntries.push(group);
-      }
-    });
-    seaweedTemplateData.groupedEntries = seaweedTemplateData.groupedEntries;
-  } else if (gameSectionFirstParam === "false") {
-    seaweedTemplateData.groupedEntries = TurnGroupEntriesMutable(projectFirstGroupedEntries);
-  }
-  const qtValue = searchParams.get("qt")?.trim();
-  if (qtValue !== void 0) {
-    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();
-  } else {
-    qtfontWeight = "bold";
-  }
-};
-onMount(async () => {
-  if (!letChaos && serverSideQueryParams) {
-    filterSearchParams(new URLSearchParams(serverSideQueryParams));
-  } else if (!letChaos && $page.url.searchParams) {
-    filterSearchParams($page.url.searchParams);
-  }
-  if (letChaos) {
-    runChaos(document.body);
-    chaosDone = true;
-  }
-});
-let isParsed = false;
-afterUpdate(async () => {
-  if (!letChaos && !isParsed) {
-    isParsed = true;
-    await parseQueryTermsLocal();
-  }
-});
-const toggleTerm = (term) => {
-  seaweedTemplateData.queryTermMap.set(term, !seaweedTemplateData.queryTermMap.get(term));
-  seaweedTemplateData.queryTermMap = seaweedTemplateData.queryTermMap;
-};
-let orderUrl = "";
-let advancedUrl = domain;
-let advancedQuery = "";
-const updateUrl = (seaweedTemplateData2) => {
-  if (seaweedTemplateData2 === void 0) {
-    return;
-  }
-  const queryParams = [];
-  if (orderUrl) {
-    queryParams.push(orderUrl);
-  }
-  const qtList = [];
-  seaweedTemplateData2.queryTermMap.forEach((shouldBold, term) => {
-    if (shouldBold) {
-      qtList.push(term);
-    }
-  });
-  if (qtList.length === 0) {
-    queryParams.push("qt=clear");
-  } else if (seaweedTemplateData2.queryTermMap.size !== qtList.length) {
-    queryParams.push(`qt=${qtList.map((t) => t.slice(3, t.length)).join(",")}`);
-  }
-  if (seaweedTemplateData2.shouldAddFunNote) {
-    queryParams.push("fun=true");
-  }
-  if (!seaweedTemplateData2.gameSectionFirst) {
-    queryParams.push("game-section-first=false");
-  }
-  if (queryParams.length > 0) {
-    advancedQuery = queryParams.join("&");
-    advancedUrl = `${domain}?${advancedQuery}`;
-  } else {
-    advancedUrl = domain;
-  }
-};
-$:
-  updateUrl(seaweedTemplateData);
-const updateSeaweedWhenFunNoteChanged = (_) => {
-  entryProps = entryProps;
-};
-$:
-  updateSeaweedWhenFunNoteChanged(seaweedTemplateData.shouldAddFunNote);
+<!-- @migration-task Error while migrating Svelte code: Can't migrate code with afterUpdate. Please migrate by hand. -->
+<script lang="ts">
+	import { afterUpdate, type ComponentType, onMount } from "svelte";
+	import EntryOrderConfig from "./entry_order_config/EntryOrderConfig.svelte";
+	import { runChaos } from "./RunChaos";
+	import SocialSection from "../../ui/components/SocialSection.svelte";
+	import SeaweedBaseLayout from "../../components/layouts/SeaweedBaseLayout.svelte";
+	import { page } from "$app/stores";
+	import Card from "../../components/Card.svelte";
+	import {
+		type ComponentMeta,
+		type EntryGroup,
+		type SeaweedTemplateData,
+		TurnGroupEntriesMutable
+	} from "./SeaweedTemplateData";
+	import type { EntryProps } from "./entries/EntryProps";
+	import { parseQueryTerms } from "./ParseQueryTerms";
+	import UrlShortenerForm from "./CreateUrlForm.svelte";
+	import PineappleSlideToggle from "../../components/PineappleSlideToggle.svelte";
+	import { Chip } from "../../index";
+	import ChumBucket from "../../ui/modules/seaweed/ChumBucket.svelte";
+
+	export let seaweedTemplateData: SeaweedTemplateData;
+	export let projectFirstGroupedEntries: ReadonlyArray<EntryGroup>;
+	export let getAllEntryFromGlobal: () => Map<string, ComponentMeta>;
+	export let getEntryFromGlobal: (name: string) => undefined | ComponentMeta;
+	export let letChaos = true;
+	export let name = "Turnip";
+	export let email = "turnipxenon@gmail.com";
+	export let linkedinSlug = "turnip-xenon";
+	export let domain = "http://localhost:5173/portfolio/actual/";
+	export let serverSideQueryParams = "";
+	export let experienceSection: ComponentType;
+
+	// region query params
+	let entryProps: EntryProps = {
+		email,
+		letChaos,
+		linkedinSlug,
+		name,
+		seaweedTemplateData
+	};
+
+	let isVisible = true;
+	const paramQTSet = new Set<string>();
+
+	let isAdvanceSettingOn = false;
+	$: isSocialsGone = !isVisible;
+	$: console.log("is visible", isVisible);
+
+	let qtfontWeight = "normal";
+	let additionalFontWeight = "";
+
+	let chaosDone = false;
+	let mainVisibility = "visible";
+	$: mainVisibility = letChaos && !chaosDone ? "hidden" : "visible";
+
+	const syncQT = () => {
+		if (seaweedTemplateData.queryTermMap.size === 0 || paramQTSet.size === 0) {
+			return;
+		}
+
+		seaweedTemplateData.queryTermMap.forEach((_, k) => {
+			seaweedTemplateData.queryTermMap.set(k, paramQTSet.has(k));
+		});
+
+		// force svelte refresh
+		seaweedTemplateData.queryTermMap = seaweedTemplateData.queryTermMap;
+	};
+
+	const parseQueryTermsLocal = async () => {
+		const qtSet = new Set<string>();
+		parseQueryTerms(document.body, qtSet);
+		qtSet.forEach(t => seaweedTemplateData.queryTermMap.set(t, true));
+		// force svelte update
+		seaweedTemplateData.queryTermMap = seaweedTemplateData.queryTermMap;
+		syncQT();
+	};
+
+	/** 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,
+	 *
+	 *  ONLY CALL INSIDE onMount()
+	 **/
+	const filterSearchParams = (searchParams: URLSearchParams) => {
+		const isFunOn = searchParams.get("fun")?.trim();
+		if (isFunOn === "true") {
+			seaweedTemplateData.shouldAddFunNote = true;
+		}
+
+		// region Order
+		const gameSectionFirstParam = searchParams.get("game-section-first")?.trim();
+		const orderParam = searchParams.get("order")?.trim();
+		if (orderParam) {
+			seaweedTemplateData.groupedEntries = [];
+
+			orderParam.split(",").forEach(groupDefinition => {
+				const pair = groupDefinition.split(":");
+				if (pair.length >= 2) {
+					const group: EntryGroup = {
+						name: pair[0],
+						items: [],
+						gridClass: pair[2]
+					};
+
+					pair[1].split("|").forEach(e => {
+						const component = getEntryFromGlobal(e);
+						if (component) {
+							group.items.push(component);
+						}
+					});
+
+					seaweedTemplateData.groupedEntries.push(group);
+				}
+
+			});
+
+			seaweedTemplateData.groupedEntries = seaweedTemplateData.groupedEntries;
+		} else if (gameSectionFirstParam === "false") {
+			seaweedTemplateData.groupedEntries = TurnGroupEntriesMutable(projectFirstGroupedEntries);
+		}
+		// endregion
+
+		// region Bold terms
+		const qtValue = searchParams.get("qt")?.trim();
+		if (qtValue !== undefined) {
+			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");
+
+			// https://stackoverflow.com/a/24285947/17836168
+			const style = document.createElement("style");
+			// noinspection JSDeprecatedSymbols
+			style.type = "text/css";
+			style.innerText = dynamicStyle;
+			document.head.appendChild(style);
+			syncQT();
+		} else {
+			qtfontWeight = "bold";
+		}
+		// endregion Bold terms
+	};
+	// endregion query params
+
+	/* region chaos scripts */
+	/* endregion chaos scripts */
+
+	onMount(async () => {
+		if (!letChaos && serverSideQueryParams) {
+			filterSearchParams(new URLSearchParams(serverSideQueryParams));
+		} else if (!letChaos && $page.url.searchParams) {
+			filterSearchParams($page.url.searchParams);
+		}
+
+		if (letChaos) {
+			runChaos(document.body);
+			chaosDone = true;
+		}
+	});
+
+	// todo: figure out what this does #migration
+	// let isParsed = false;
+	// afterUpdate(async () => {
+	// 	if (!letChaos && !isParsed) {
+	// 		isParsed = true;
+	// 		await parseQueryTermsLocal();
+	// 	}
+	// });
+
+	const toggleTerm = (term: string) => {
+		seaweedTemplateData.queryTermMap.set(term, !seaweedTemplateData.queryTermMap.get(term));
+		seaweedTemplateData.queryTermMap = seaweedTemplateData.queryTermMap;
+	};
+
+	// when either gameSectionFirst or the queryTerms are updated, update advancedUrl
+	let orderUrl = "";
+	let advancedUrl = domain;
+	let advancedQuery = "";
+	const updateUrl = (seaweedTemplateData: SeaweedTemplateData) => {
+		if (seaweedTemplateData === undefined) {
+			return;
+		}
+
+		const queryParams: string[] = [];
+
+		if (orderUrl) {
+			queryParams.push(orderUrl);
+		}
+
+		const qtList: string[] = [];
+		seaweedTemplateData.queryTermMap.forEach((shouldBold, term) => {
+			if (shouldBold) {
+				qtList.push(term);
+			}
+		});
+
+		if (qtList.length === 0) {
+			queryParams.push("qt=clear");
+		} else if (seaweedTemplateData.queryTermMap.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 (seaweedTemplateData.shouldAddFunNote) {
+			queryParams.push("fun=true");
+		}
+
+		if (!seaweedTemplateData.gameSectionFirst) {
+			queryParams.push("game-section-first=false");
+		}
+
+		if (queryParams.length > 0) {
+			advancedQuery = queryParams.join("&");
+			advancedUrl = `${domain}?${advancedQuery}`;
+		} else {
+			advancedUrl = domain;
+		}
+	};
+	$: updateUrl(seaweedTemplateData);
+
+	// eslint-disable-next-line
+	const updateSeaweedWhenFunNoteChanged = (_: boolean) => {
+		entryProps = entryProps;
+	};
+	$: updateSeaweedWhenFunNoteChanged(seaweedTemplateData.shouldAddFunNote);
 </script>
 
 <SeaweedBaseLayout bind:shouldDisplayLeadingIcons={isSocialsGone}>
@@ -235,7 +298,7 @@ $:
 								      checked={shouldBold}>
 									<!-- todo: change shouldBold -->
 									<span style={`font-weight: ${shouldBold ? "bold" : "normal"}`}>
-										{#if (shouldBold)}&check;{/if}
+										{#if (shouldBold)}✓{/if}
 										{term}
 									</span>
 								</Chip>
@@ -260,28 +323,14 @@ $:
 		{/if}
 	</main>
 
-	<SocialSection slot="extraLeadingIcons"
-	               isSlot={true}
-	               email={email}
-	               linkedinSlug={linkedinSlug}
-	               isSmallVersion={true}></SocialSection>
+	{#snippet extraLeadingIcons()}
+		<SocialSection
+			isSlot={true}
+			email={email}
+			linkedinSlug={linkedinSlug}
+			isSmallVersion={true}></SocialSection>
+	{/snippet}
 </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>/*$$__STYLE_CONTENT__$$*/
 </style>

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

@@ -1,29 +1,32 @@
-import { SvelteComponent } from "svelte";
 import { type ComponentType } from "svelte";
-import "./seaweed.postcss";
 import { type ComponentMeta, type EntryGroup, type SeaweedTemplateData } from "./SeaweedTemplateData";
-declare const __propDef: {
-    props: {
-        seaweedTemplateData: SeaweedTemplateData;
-        projectFirstGroupedEntries: ReadonlyArray<EntryGroup>;
-        getAllEntryFromGlobal: () => Map<string, ComponentMeta>;
-        getEntryFromGlobal: (name: string) => undefined | ComponentMeta;
-        letChaos?: boolean | undefined;
-        name?: string | undefined;
-        email?: string | undefined;
-        linkedinSlug?: string | undefined;
-        domain?: string | undefined;
-        serverSideQueryParams?: string | undefined;
-        experienceSection: ComponentType;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SeaweedTemplateProps = typeof __propDef.props;
-export type SeaweedTemplateEvents = typeof __propDef.events;
-export type SeaweedTemplateSlots = typeof __propDef.slots;
-export default class SeaweedTemplate extends SvelteComponent<SeaweedTemplateProps, SeaweedTemplateEvents, SeaweedTemplateSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SeaweedTemplate: $$__sveltets_2_IsomorphicComponent<{
+    seaweedTemplateData: SeaweedTemplateData;
+    projectFirstGroupedEntries: ReadonlyArray<EntryGroup>;
+    getAllEntryFromGlobal: () => Map<string, ComponentMeta>;
+    getEntryFromGlobal: (name: string) => undefined | ComponentMeta;
+    letChaos?: boolean;
+    name?: string;
+    email?: string;
+    linkedinSlug?: string;
+    domain?: string;
+    serverSideQueryParams?: string;
+    experienceSection: ComponentType;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SeaweedTemplate = InstanceType<typeof SeaweedTemplate>;
+export default SeaweedTemplate;

package/dist/template/seaweed/ToastSettings.d.ts

@@ -0,0 +1,15 @@
+export interface ToastSettings {
+    /** The unique toast ID. */
+    id?: string;
+    /** The unique toast title text. */
+    title?: string;
+    /** The unique toast description text. */
+    description?: string;
+    /**
+     * Define the toast type.
+     * @default info
+     */
+    type?: "info" | "error" | "success";
+    /** The duration of the toast. Default varies by type. */
+    duration?: number;
+}

package/dist/template/seaweed/ToastSettings.js

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

package/dist/template/seaweed/entries/ChefWings.svelte

@@ -1,47 +1,45 @@
-<script>export let props;
-import {} from "./EntryProps";
-import HeaderChefWings from "../../../assets/game_dev/footage-chef-wings.gif";
-import LinkIcon from "../../../assets/icons/link-icon.svg";
-import Card from "../../../components/Card.svelte";
-import { getModalStore } from "@skeletonlabs/skeleton";
-const modalStore = getModalStore();
-const chefWingsWarning = {
-  type: "confirm",
-  title: "Warning: please confirm",
-  body: `This will directly link to the game itself, since this game does not have any game page or any publicly viewable source code. The game is only playable on desktop. Are you sure you wish to proceed? If there are any bugs, please report at <a href='mailto:${props.email}' target='_blank'>${props.email}</a>.`,
-  response: (r) => {
-    if (r) {
-      window.open("https://selk.io/birb-project/trunk/");
-    }
-  }
-};
+<script lang="ts">
+
+	import { type EntryProps } from "./EntryProps";
+	import HeaderChefWings from "../../../assets/game_dev/footage-chef-wings.gif";
+	import LinkIcon from "../../../assets/icons/link-icon.svg";
+	import Card from "../../../components/Card.svelte";
+
+	interface Props {
+		props: EntryProps;
+	}
+
+	let { props }: Props = $props();
+
 </script>
 
 <Card>
-	<section class="game-card" slot="content">
-		<img src={HeaderChefWings} alt="todo" loading="lazy">
-		<section class="game-card-body">
+	{#snippet content()}
+		<section class="game-card" >
+			<img src={HeaderChefWings} alt="todo" loading="lazy">
+			<section class="game-card-body">
 
-			<h1>Chef Wings</h1>
-			<p>
-				A “roguelite-lite” where you gather ingredients in a procedurally-generated dungeon and use
-				them to cook for customers and then critics!
-			</p>
-			<p>
-				I built and documented several of the game’s systems including the game state management
-				system that extends <span class="qt-unity">Unity’s</span> existing Monobehavior lifecycle with new events,
-				and the dialogue, event, and level systems that coordinate the game flow using the interactive
-				dialogue tool YarnSpinner
-			</p>
+				<h1>Chef Wings</h1>
+				<p>
+					A “roguelite-lite” where you gather ingredients in a procedurally-generated dungeon and use
+					them to cook for customers and then critics!
+				</p>
+				<p>
+					I built and documented several of the game’s systems including the game state management
+					system that extends <span class="qt-unity">Unity’s</span> existing Monobehavior lifecycle with new events,
+					and the dialogue, event, and level systems that coordinate the game flow using the interactive
+					dialogue tool YarnSpinner
+				</p>
 
-			<section class="game-link-section">
-				<button type="button" class="game-button turnip-button"
-				        title="https://selk.io/birb-project/trunk/"
-				        on:click={()=>modalStore.trigger(chefWingsWarning)}>
-					<img alt="itch.io icon" src={LinkIcon}>
-					<span>selk.io/birb-project/trunk/</span>
-				</button>
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        title="https://selk.io/birb-project/trunk/"
+					        onclick={()=>{alert('not implemented')}}>
+						<img alt="itch.io icon" src={LinkIcon}>
+						<span>selk.io/birb-project/trunk/</span>
+					</button>
+				</section>
 			</section>
 		</section>
-	</section>
+	{/snippet}
 </Card>

package/dist/template/seaweed/entries/ChefWings.svelte.d.ts

@@ -1,17 +1,7 @@
-import { SvelteComponent } from "svelte";
 import { type EntryProps } from "./EntryProps";
-declare const __propDef: {
-    props: {
-        props: EntryProps;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ChefWingsProps = typeof __propDef.props;
-export type ChefWingsEvents = typeof __propDef.events;
-export type ChefWingsSlots = typeof __propDef.slots;
-export default class ChefWings extends SvelteComponent<ChefWingsProps, ChefWingsEvents, ChefWingsSlots> {
+interface Props {
+    props: EntryProps;
 }
-export {};
+declare const ChefWings: import("svelte").Component<Props, {}, "">;
+type ChefWings = ReturnType<typeof ChefWings>;
+export default ChefWings;