@turnipxenon/pineapple 3.0.0-alpha.1 → 3.0.0-alpha.11

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

@@ -0,0 +1,277 @@
+<script lang="ts">
+	import { fly } from "svelte/transition";
+	import type { ProjectGroup, 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";
+	import { onMount } from "svelte";
+	import { page } from "$app/state";
+
+	let {
+		children,
+		sideSection,
+		entryList, // todo
+		layout, // todo
+		domain = "http://localhost:5173/seaweed2",
+		queryTerms,
+		showMiniSocial = false,
+		serverParams = ""
+	}: SeaweedLayoutProps = $props();
+
+	let actualLayout = $state(layout);
+	let isAdvanceSettingOn = $state(false);
+	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]) => {
+				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}`);
+
+
+	/** 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) => {
+		// region Order
+		const orderParam = searchParams.get("order")?.trim();
+		console.log(searchParams);
+		console.log(orderParam);
+		if (orderParam) {
+			actualLayout = [];
+
+			orderParam.split(",").forEach((groupDefinition, idx) => {
+				const pair = groupDefinition.split(":");
+				if (pair.length >= 2) {
+					const group: ProjectGroup = {
+						title: pair[0],
+						entryList: [],
+						key: `${pair[0]}-${idx}`
+					};
+
+					pair[1].split("|").forEach(key => {
+						const component = entryList.find(e => e.key === key);
+						if (component) {
+							group.entryList.push(component);
+						}
+					});
+
+					actualLayout.push(group);
+				}
+			});
+
+			actualLayout = [...actualLayout];
+			console.log(actualLayout);
+		}
+		// endregion
+
+		// region Bold terms
+		const qtValue = searchParams.get("qt")?.trim();
+		if (qtValue !== undefined) {
+			queryStates.keys()
+				.forEach(key => queryStates.set(key, false));
+
+			if (qtValue !== "clear") {
+				qtValue.split(",").forEach((term) => {
+					if (queryStates.has(term)) {
+						queryStates.set(term, true);
+					}
+				});
+			}
+		}
+		// endregion Bold terms
+	};
+
+	onMount(() => {
+		if (serverParams) {
+			filterSearchParams(new URLSearchParams(serverParams));
+		} else if (page.url.searchParams.size) {
+			filterSearchParams(page.url.searchParams);
+		}
+	});
+</script>
+
+<svelte:head>
+	{@html styleStr}
+</svelte:head>
+
+
+{#snippet socialSection()}
+	<SocialSection></SocialSection>
+{/snippet}
+<PinyaPageLayout>
+	{#snippet appBarLead()}
+		{#if showMiniSocial}
+			<div
+				class="flex flex-row"
+				transition:fly={{x:-10}}
+			>
+				<SocialSection isSmallVersion={true} />
+			</div>
+		{/if}
+	{/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 actualLayout 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
+						bind:layout={actualLayout}
+						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, {}, "">;
+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,27 @@
+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[];
+    showMiniSocial?: boolean;
+    serverParams?: string;
+}
+export {};

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

@@ -0,0 +1 @@
+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();
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.11",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",
@@ -18,33 +18,32 @@
     "to-dev": "git checkout main && git pull origin main && git branch -d turnip/dev && git checkout -b turnip/dev"
   },
   "devDependencies": {
-    "@inlang/paraglide-js": "2.0.0-beta.30",
-    "@sveltejs/adapter-auto": "^3.1.1",
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-auto": "^4.0.0",
     "@sveltejs/kit": "^2.5.27",
     "@sveltejs/package": "^2.3.7",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.6",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "prisma": "^5.12.1",
-    "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "svelte2tsx": "^0.6.20",
-    "tailwindcss": "^4.0.14",
     "tslib": "^2.4.1",
     "typescript": "^5.5.0",
+    "typescript-eslint": "^8.20.0",
     "vite": "^5.4.4"
   },
   "dependencies": {
+    "@inlang/paraglide-js": "2.0.0-beta.30",
     "@prisma/client": "^5.12.1",
     "@skeletonlabs/skeleton": "^3.1.0",
     "@skeletonlabs/skeleton-svelte": "^1.0.0",
-    "@sveltejs/kit": "^2.5.27",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tailwindcss/vite": "^4.0.14",
     "@types/htmlparser2": "^3.10.7",
@@ -54,9 +53,12 @@
     "mode-watcher": "^0.5.1",
     "node-html-parser": "^6.1.5",
     "publint": "^0.2.7",
+    "shiki": "^3.2.1",
+    "shiki-transformer-copy-button": "0.0.3",
     "string-width": "^7.1.0",
     "svelte": "^5.0.0",
     "svelte-modals": "^2.0.1",
+    "tailwindcss": "^4.0.14",
     "ts-node": "^10.9.1"
   },
   "exports": {
@@ -88,6 +90,9 @@
     "src/lib/styles/app.css",
     "src/lib/theme.css"
   ],
+  "engines": {
+    "node": ">=22"
+  },
   "repository": "https://github.com/TurnipXenon/pineapple",
   "author": "turnipxenon <turnipxenon@gmail.com>",
   "license": "MIT",

package/src/lib/styles/app.css

@@ -4,7 +4,7 @@
 @import "@skeletonlabs/skeleton/themes/crimson";
 @import "./turnip-theme.css";
 
-@source "../node_modules/@skeletonlabs/skeleton-svelte/dist";
+@source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -51,3 +51,94 @@ a.external-link {
     --tw-ring-color: rgb(var(--color-text-400));
     /*background-color: red;*/
 }
+
+@layer base {
+    .game-link-section {
+        @apply mt-6 flex gap-2 justify-center;
+    }
+
+    .game-video-cover {
+        @apply rounded-t-lg max-h-64 object-cover w-full;
+    }
+
+    .text-chip-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .text-chip {
+        background-color: var(--color-secondary-50-950) /* light-dark(var(--color-secondary-50), var(--color-secondary-950)) */;
+        color: var(--color-secondary-950-50) /* light-dark(var(--color-secondary-950), var(--color-secondary-50)) */;
+    }
+}
+
+/*https://shiki.style/guide/dual-themes*/
+html.dark .shiki,
+html.dark .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+.shiki {
+    span {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+}
+
+/* region shiki copy button */
+pre:has(code) {
+    position: relative;
+}
+
+pre button.copy {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    height: 28px;
+    width: 28px;
+    padding: 0;
+    display: flex;
+
+    & span {
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+
+    & .ready {
+        background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
+
+        @variant dark {
+            background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");
+        }
+    }
+
+    & .success {
+        display: none;
+        background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
+
+        @variant dark {
+            background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");
+        }
+    }
+
+    &.copied {
+        & .success {
+            display: block;
+        }
+
+        & .ready {
+            display: none;
+        }
+    }
+}
+
+/* endregion shiki copy button */

package/dist/components/ElementVisbilityDetector.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    isVisible?: boolean;
-    children?: import('svelte').Snippet;
-}
-declare const ElementVisbilityDetector: import("svelte").Component<Props, {}, "isVisible">;
-type ElementVisbilityDetector = ReturnType<typeof ElementVisbilityDetector>;
-export default ElementVisbilityDetector;