@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha-3

package/dist/ui/templates/seaweed-layout/ProjectComponentProps.d.ts

@@ -0,0 +1,4 @@
+import type { Snippet } from 'svelte';
+export interface ProjectComponentProps {
+}
+export type ComponentSnippet = Snippet<[ProjectComponentProps]>;

package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte

@@ -0,0 +1,316 @@
+<script lang="ts">
+	import CloseIcon from "../../../assets/icons/close.svg";
+	import UpwardIcon from "../../../assets/icons/arrow-upward.svg";
+	import type { ProjectGroup, SnippetMeta } from "../index";
+	import { getContext, onMount } from "svelte";
+	import { PinyaCard } from "../../elements/index";
+	import PinyaCombobox from "../../elements/pinya-combobox/PinyaCombobox.svelte";
+	import { PinyaButton } from "../../elements/index.js";
+	import { type ToastContext } from "@skeletonlabs/skeleton-svelte";
+
+	export const toast: ToastContext = getContext("toast");
+
+	interface Props {
+		layout: ProjectGroup[];
+		orderUrl: string;
+		allEntries: SnippetMeta[];
+		group: ProjectGroup;
+		groupIndex: number;
+	}
+
+	let {
+		layout = $bindable(),
+		orderUrl = $bindable(),
+		allEntries,
+		group,
+		groupIndex
+	}: Props = $props();
+
+	const updateOrderQuery = () => {
+		orderUrl = "order=" + layout.map(g => {
+			const groupUrl = g.entryList.map(e => e.key).join("|");
+			// the last item after : is a grid class but we're keeping it here for legacy reason
+			return `${g.title}:${groupUrl}:`;
+		}).join(",");
+	};
+
+	const swapEntry = (index: number, group: ProjectGroup, shouldDecrement: boolean): (() => void) => {
+		return () => {
+			let newIndex = index;
+			if (shouldDecrement && index >= 1) {
+				newIndex--;
+			} else if (!shouldDecrement && index <= group.entryList.length - 2) {
+				newIndex++;
+			} else {
+				return;
+			}
+
+			const tempVar = group.entryList[newIndex];
+			group.entryList[newIndex] = group.entryList[index];
+			group.entryList[index] = tempVar;
+			layout = layout;
+			updateOrderQuery();
+		};
+	};
+	const swapGroups = (index: number, shouldDecrement: boolean): (() => void) => {
+		return () => {
+			let newIndex = index;
+			if (shouldDecrement && index >= 1) {
+				newIndex--;
+			} else if (!shouldDecrement && index <= layout.length - 2) {
+				newIndex++;
+			} else {
+				return;
+			}
+
+			const tempVar = layout[newIndex];
+			layout[newIndex] = layout[index];
+			layout[index] = tempVar;
+			layout = layout;
+			updateOrderQuery();
+		};
+	};
+
+	const removeGroup = (group: ProjectGroup): (() => void) => {
+		return () => {
+			const index = layout.indexOf(group);
+			if (index === -1) {
+				return;
+			}
+
+			layout.splice(index, 1);
+			layout = layout;
+			updateOrderQuery();
+		};
+	};
+	const removeEntry = (entry: SnippetMeta, group: ProjectGroup): (() => void) => {
+		return () => {
+			for (let i = group.entryList.length - 1; i >= 0; i--) {
+				if (group.entryList[i].key === entry.key) {
+					group.entryList.splice(i, 1);
+					layout = layout;
+					updateOrderQuery();
+					break;
+				}
+			}
+		};
+	};
+
+	const comboboxData = allEntries.map(entry => {
+		return {
+			label: entry.key,
+			value: entry.key
+		};
+	});
+
+	let comboboxValue = $state([comboboxData[0].value]);
+
+	const addEntry = () => {
+		const c = allEntries.find(e => e.key === comboboxValue[0]);
+
+		if (!c) {
+			console.warn(`Unknown key: ${comboboxValue}`);
+			return;
+		}
+
+		if (group.entryList.includes(c)) {
+			toast.create({
+				title: "Duplicate entry",
+				description: `The entry ${comboboxValue} is already in ${group.title}`,
+				type: "error"
+			});
+			return;
+		}
+
+		group.entryList.push(c);
+		layout = layout;
+		updateOrderQuery();
+	};
+</script>
+
+<PinyaCard
+	widthClass="max-w-2xl"
+	borderClass="border-[2px] border-primary-500"
+	marginClass="mt-4 mb-4"
+	paddingClass=""
+>
+
+	<div class="m-4 flex flex-row gap-2">
+		<button title={`Remove ${group.title}`}
+		        onclick={removeGroup(group)}>
+			<img class="img-icon" src={CloseIcon} alt={`Remove ${group.title}`}>
+		</button>
+
+		<button title={`Move group ${group.title} upwards`}
+		        onclick={swapGroups(groupIndex, true)}
+		        disabled="{groupIndex === 0}">
+			<img class="img-icon" src={UpwardIcon} alt={`Move group ${group.title} upwards`}>
+		</button>
+
+		<button title={`Move group ${group.title} downwards`}
+		        disabled={groupIndex === layout.length - 1}
+		        onclick={swapGroups(groupIndex, false)}>
+			<img
+				class="img-icon flipped-vertically"
+				src={UpwardIcon}
+				alt={`Move group ${group.title} downwards`}
+			>
+		</button>
+
+		<div class="fake-h3 ml-2">Group title: {group.title}</div>
+	</div>
+
+	<hr class="border-primary-500 border-1">
+
+	<table class="table">
+		<thead>
+		<tr>
+			<th class="fake-h4">Entries</th>
+		</tr>
+		</thead>
+		<tbody>
+		{#each group.entryList as entry, entryIndex (entry)}
+			<tr class="entry-row">
+				<td class="entry-data">
+
+					<button title={`Remove ${entry.key}`}
+					        onclick={removeEntry(entry, group)}>
+						<img class="img-icon" src={CloseIcon} alt={`Remove ${entry.key}`}>
+					</button>
+
+					<button title={`Move ${entry.key} upwards`}
+					        onclick={swapEntry(entryIndex, group, true)}
+					        disabled="{entryIndex === 0}">
+						<img class="img-icon" src={UpwardIcon} alt={`Move ${entry.key} upwards`}>
+					</button>
+
+					<button title={`Move ${entry.key} downwards`}
+					        disabled={entryIndex === group.key.length - 1}
+					        onclick={swapEntry(entryIndex, group, false)}>
+						<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move ${entry.key} downwards`}>
+					</button>
+					<div class="entry-name">
+						{entry.key}
+					</div>
+				</td>
+			</tr>
+		{/each}
+		</tbody>
+
+		<tfoot>
+		<tr>
+			<td class="combobox-container">
+				<PinyaButton onclick={addEntry}>Add Entry
+				</PinyaButton>
+				<PinyaCombobox
+					data={comboboxData}
+					defaultValue={comboboxValue}
+					bind:value={comboboxValue}
+					label="New entry"
+					placeholder="Add new entry"
+					contentZIndex="10"
+				/>
+			</td>
+		</tr>
+		</tfoot>
+	</table>
+
+
+</PinyaCard>
+
+
+<style>
+
+
+    .advanced-setting-list {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .btn-group-header {
+        @apply preset-filled-tertiary-500;
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5lh;
+    }
+
+    .btn-group-entry {
+        @apply ;
+        display: flex;
+        padding: 0;
+    }
+
+    .btn-group-entry > div {
+        padding: 1em;
+    }
+
+    .flipped-vertically {
+        transform: rotate(180deg);
+    }
+
+    .entry-group {
+        border-radius: var(--theme-rounded-container);
+        background-color: rgb(var(--color-surface-600));
+        margin-top: 1.5lh;
+        margin-bottom: 0.5lh;
+        padding: 0.5lh 0.5em;
+    }
+
+    .entry-name {
+        grow: 1;
+    }
+
+    tr, td, th, table {
+        width: 100%;
+    }
+
+    table {
+        margin-bottom: 1lh;
+    }
+
+    tfoot > tr {
+        display: flex;
+    }
+
+    .btn-group > button {
+        padding: 0.3em 0.75em;
+    }
+
+    .btn-group-header > h2 {
+        font-weight: bolder;
+        padding-top: 1lh;
+        padding-bottom: 1lh;
+        margin-bottom: 0;
+        padding-inline-start: 1em;
+    }
+
+    .dark .btn-group-header > h2 {
+        color: rgb(var(--theme-font-color-dark));
+    }
+
+    .dark .entry-group {
+        background-color: rgb(var(--color-surface-800));
+    }
+
+
+    tbody tr:nth-child(odd) {
+        background-color: var(--color-surface-100-900);
+    }
+
+    tbody tr:nth-child(even), thead {
+        background-color: var(--color-surface-300-700);
+    }
+
+    .entry-data {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        align-items: center;
+    }
+
+    .combobox-container {
+        display: flex;
+        flex-direction: row;
+        gap: 1em;
+    }
+</style>

package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ProjectGroup, SnippetMeta } from "../index";
+import { type ToastContext } from "@skeletonlabs/skeleton-svelte";
+interface Props {
+    layout: ProjectGroup[];
+    orderUrl: string;
+    allEntries: SnippetMeta[];
+    group: ProjectGroup;
+    groupIndex: number;
+}
+declare const ProjectGroupConfig: import("svelte").Component<Props, {
+    toast: ToastContext;
+}, "orderUrl" | "layout">;
+type ProjectGroupConfig = ReturnType<typeof ProjectGroupConfig>;
+export default ProjectGroupConfig;

package/dist/ui/templates/seaweed-layout/SeaweedLayout.md

@@ -0,0 +1,4 @@
+# Query format
+
+- ?order=title:entry 1|entry 2:layout-type,title2:entry 3:layout-type
+- &qt=js,vue,ts,java,android,react,go,aws,observability,infra,unity,cs,rpgmaker,python,django,heroku,svelte,c,foundation,valgrind,google,firebase

package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import type { SeaweedLayoutProps } from "./props";
+	import ChumBucket from "../../modules/seaweed/ChumBucket.svelte";
+	import { PinyaPageLayout } from "../index";
+	import { SocialSection } from "../../components/index";
+	import EntryGroup from "./EntryGroup.svelte";
+	import PineappleSwitch from "../../elements/PineappleSwitch.svelte";
+	import { CodeBlock, TextChip } from "../../elements/index";
+	import { SvelteMap } from "svelte/reactivity";
+	import EntryOrderConfig2 from "./EntryOrderConfig2.svelte";
+	import CreateUrlForm from "../../../template/seaweed/CreateUrlForm.svelte";
+
+	let {
+		children,
+		sideSection,
+		entryList, // todo
+		layout = $bindable(), // todo
+		domain = "http://localhost:5173/seaweed2",
+		queryTerms
+	}: SeaweedLayoutProps = $props();
+
+	let isAdvanceSettingOn = $state(true);
+	let orderUrl = $state("");
+
+	let queryStates = new SvelteMap<string, boolean>(queryTerms.map(term => [term, true]));
+	let styleStr = $state("");
+	let queryQt = $derived.by(() => {
+		const qtArr = [...queryStates.entries()
+			.filter(([, state]) => state)
+			.map(([term]) => term)
+		];
+
+		if (qtArr.length === queryStates.size) {
+			return "";
+		}
+
+		const qtStr = qtArr.join(",");
+
+		if (qtStr) {
+			return `qt=${qtStr}`;
+		}
+
+		return "qt=clear";
+	});
+
+	$effect(() => {
+		const chipList: string[] = [];
+		const termList: string[] = [];
+		queryStates.entries()
+			.filter(([_, state]) => state)
+			.forEach(([term, state], idx) => {
+				const qtTerm = `.qt-${term}`;
+				termList.push(qtTerm);
+				chipList.push(`.text-chip${qtTerm}`);
+			});
+		styleStr = `<style>
+			${termList.join(", ")} {
+				font-weight: bolder;
+				color: var(--color-secondary-400);
+			}
+
+			${chipList.join(", ")} {
+				background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
+				color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
+			}
+			</style>`;
+	});
+
+	let advancedQuery = $derived.by(() => {
+		const query = [orderUrl, queryQt]
+			.filter(q => q)
+			.join("&");
+		if (query) {
+			return `${query}`;
+		}
+
+		return "";
+	});
+
+	let advancedUrl = $derived.by(() => `${domain}/?${advancedQuery}`);
+</script>
+
+<svelte:head>
+	{@html styleStr}
+</svelte:head>
+
+
+{#snippet socialSection()}
+	<SocialSection></SocialSection>
+{/snippet}
+<PinyaPageLayout>
+	{#snippet appBarLead()}
+		<div></div>
+	{/snippet}
+
+	<div id="upper-section">
+
+		<div class="upper-section-start">
+			{@render sideSection(socialSection)}
+		</div>
+
+		<div class="upper-section-end">
+			{@render children()}
+		</div>
+	</div>
+
+	<!--todo: render list #migration-->
+	{#each layout as group (group.title)}
+		<EntryGroup {...group}></EntryGroup>
+	{/each}
+
+	{#snippet footer()}
+		<div class="footer">
+			<ChumBucket></ChumBucket>
+
+			<div class="default-card advanced-setting mt-16 mb-32">
+				<h1>Advanced settings</h1>
+				<p>This one is for those curious how I customize this page.</p>
+
+				<PineappleSwitch name="advanced-setting-slider"
+				                 bind:checked={isAdvanceSettingOn}>
+				</PineappleSwitch>
+				Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
+
+				{#if (isAdvanceSettingOn)}
+
+					<h3 class="mt-6">Query terms to bold</h3>
+					<div class="query-term-grid max-w-2xl">
+						{#each queryStates as [term, shouldBold] (term)}
+							<button
+								class="bg-transparent hover:brightness-110"
+								onclick={() => { queryStates.set(term, !shouldBold); }}
+							>
+								<TextChip queryClass={shouldBold ? 'highlight-chip' : ''}>
+									<!-- todo: change shouldBold -->
+									<span style={`font-weight: ${shouldBold ? "bold" : "normal"}`}>
+										{#if (shouldBold)}✓{/if}
+										{term}
+									</span>
+								</TextChip>
+							</button>
+						{/each}
+					</div>
+
+					<EntryOrderConfig2
+						{layout}
+						bind:orderUrl={orderUrl}
+						allEntries={entryList}
+					></EntryOrderConfig2>
+
+					<br>
+					<p>Copy the url below and open a new page with it</p>
+					<CodeBlock code={advancedUrl} lang="markdown" classes="max-w-2xl" />
+					<CreateUrlForm queryParams={advancedQuery}></CreateUrlForm>
+				{/if}
+			</div>
+		</div>
+	{/snippet}
+</PinyaPageLayout>
+
+<style>
+    :global(html) {
+        --color-bg-footer: var(--color-surface-200);
+        --color-footer-border: var(--color-primary-500);
+    }
+
+    :global(html.dark) {
+        --color-bg-footer: var(--color-surface-900);
+        --color-footer-border: var(--color-primary-950);
+    }
+
+    .footer {
+        width: 100vw;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 3lh;
+        background-color: var(--color-bg-footer);
+        border-top: 2px solid var(--color-footer-border);
+    }
+
+    #upper-section {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 2rem;
+        justify-content: center;
+    }
+
+    .query-term-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25em;
+        margin-top: 1lh;
+    }
+</style>

package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SeaweedLayoutProps } from "./props";
+declare const SeaweedLayout: import("svelte").Component<SeaweedLayoutProps, {}, "layout">;
+type SeaweedLayout = ReturnType<typeof SeaweedLayout>;
+export default SeaweedLayout;

package/dist/ui/templates/seaweed-layout/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SeaweedLayout } from "./SeaweedLayout.svelte";
+export { default as EntryGroup } from "./EntryGroup.svelte";
+export * from "./props";
+export * from "./ProjectComponentProps";

package/dist/ui/templates/seaweed-layout/index.js

@@ -0,0 +1,4 @@
+export { default as SeaweedLayout } from "./SeaweedLayout.svelte";
+export { default as EntryGroup } from "./EntryGroup.svelte";
+export * from "./props";
+export * from "./ProjectComponentProps";

package/dist/ui/templates/seaweed-layout/props.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+interface ProjectComponentProps {
+}
+type ComponentSnippet = Snippet<[ProjectComponentProps]>;
+export interface SnippetMeta {
+    key: string;
+    component: ComponentSnippet;
+}
+export interface ProjectGroup {
+    key: string;
+    title: string;
+    entryList: SnippetMeta[];
+}
+export interface SeaweedLayoutProps {
+    name: string;
+    email: string;
+    linkedinSlug: string;
+    domain: string;
+    sideSection: Snippet<[Snippet]>;
+    children: Snippet;
+    entryList: SnippetMeta[];
+    layout: ProjectGroup[];
+    queryTerms: string[];
+}
+export {};

package/dist/util/util.d.ts

@@ -8,3 +8,4 @@ export declare const createExternalLinkWarningFunction: (args: ExternalLinkWarni
 export interface RawGlob {
     default: string;
 }
+export declare const getQueryTerms: (modules: Record<string, unknown>) => string[];

package/dist/util/util.js

@@ -25,3 +25,12 @@ export const createExternalLinkWarningFunction = (args) => {
         location.href = args.href;
     });
 };
+export const getQueryTerms = (modules) => {
+    const re = new RegExp("qt-(\\w+)+", "g");
+    const queryTerms = new Set();
+    for (const path in modules) {
+        const modStr = modules[path];
+        [...modStr.matchAll(re).map(i => i[1])].forEach(term => queryTerms.add(term));
+    }
+    return [...queryTerms].sort();
+};