@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha.1

package/dist/template/seaweed/CreateUrlForm.svelte

@@ -1,40 +1,52 @@
-<script>import { CreateUrlResult, jsonToCreateUrlResponse } from "../../types/api/CreateUrl";
-import { getToastStore } from "@skeletonlabs/skeleton";
-export let queryParams = "";
-const toastStore = getToastStore();
-let request = {
-  queryParams: "",
-  shortUrl: "",
-  password: ""
-};
-$:
-  request.queryParams = queryParams;
-const failToast = {
-  message: "Adding new url failed"
-};
-const toastMap = /* @__PURE__ */ new Map([
-  [CreateUrlResult.Success, {
-    message: "Successfully added new url"
-  }],
-  [CreateUrlResult.Duplicate, {
-    message: "Short url already used; try again with another url"
-  }],
-  [CreateUrlResult.Fail, failToast]
-]);
-const post = () => {
-  fetch("/api/create-url", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(request)
-  }).then(
-    (resp) => resp.json()
-  ).then((json) => {
-    const properResp = jsonToCreateUrlResponse(json);
-    toastStore.trigger(toastMap.get(properResp.result) ?? failToast);
-  });
-};
+<script lang="ts">
+	import { type CreateUrlRequest, CreateUrlResult, jsonToCreateUrlResponse } from "../../types/api/CreateUrl";
+	import { type ToastSettings } from "@skeletonlabs/skeleton-svelte";
+
+	interface Props {
+		queryParams?: string;
+	}
+
+	let { queryParams = "" }: Props = $props();
+
+	const toastStore = getToastStore();
+
+	let request: CreateUrlRequest = $state({
+		queryParams: "",
+		shortUrl: "",
+		password: ""
+	});
+
+	$effect(() => {
+		request.queryParams = queryParams;
+	});
+
+
+	const failToast: ToastSettings = {
+		message: "Adding new url failed"
+	};
+	const toastMap = new Map<CreateUrlResult, ToastSettings>([
+		[CreateUrlResult.Success, {
+			message: "Successfully added new url"
+		}],
+		[CreateUrlResult.Duplicate, {
+			message: "Short url already used; try again with another url"
+		}],
+		[CreateUrlResult.Fail, failToast]
+	]);
+	const post = () => {
+		fetch("/api/create-url", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json"
+			},
+			body: JSON.stringify(request)
+		}).then(resp =>
+			resp.json()
+		).then(json => {
+			const properResp = jsonToCreateUrlResponse(json);
+			toastStore.trigger(toastMap.get(properResp.result) ?? failToast);
+		});
+	};
 </script>
 
 <div class="local-list">
@@ -50,7 +62,7 @@ const post = () => {
 	       class="input"
 	       type="password"
 	       placeholder="ILoveTurnips" />
-	<button class="send-link btn variant-filled" on:click={post}>Send link</button>
+	<button class="send-link btn preset-filled" onclick={post}>Send link</button>
 </div>
 
 <style>

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

@@ -1,16 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        queryParams?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CreateUrlFormProps = typeof __propDef.props;
-export type CreateUrlFormEvents = typeof __propDef.events;
-export type CreateUrlFormSlots = typeof __propDef.slots;
-export default class CreateUrlForm extends SvelteComponent<CreateUrlFormProps, CreateUrlFormEvents, CreateUrlFormSlots> {
+interface Props {
+    queryParams?: string;
 }
-export {};
+declare const CreateUrlForm: import("svelte").Component<Props, {}, "">;
+type CreateUrlForm = ReturnType<typeof CreateUrlForm>;
+export default CreateUrlForm;

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;