@turnipxenon/pineapple 3.0.0-alpha.6 → 3.0.0-alpha.8

package/dist/components/blog_template/BlogTemplate.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-	import { Card, enableDialogueOverlay, type SimplePageMeta } from "../..";
 	import "./blog-template.css";
 	import { enableBackground } from "../../store";
 	import { onDestroy, onMount } from "svelte";
 	import BlogTemplateInner from "./BlogTemplateInner.svelte";
+	import type { SimplePageMeta } from "../navigation_component/index";
+	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+	import { Card } from "../index";
 
 	// grab page meta from the adjacent meta.json
 	interface Props {

package/dist/components/blog_template/BlogTemplate.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type SimplePageMeta } from "../..";
 import "./blog-template.css";
+import type { SimplePageMeta } from "../navigation_component/index";
 interface Props {
     pageMeta: SimplePageMeta;
     shouldFillWholePage?: boolean;

package/dist/components/index.d.ts

@@ -3,6 +3,6 @@ export { default as Card } from "./Card.svelte";
 export { default as Chip } from "./chip/Chip.svelte";
 export { default as PineappleSlideToggle } from "./PineappleSlideToggle.svelte";
 export { default as SocialSection } from "../ui/components/SocialSection.svelte";
-export { default as ElementVisbilityDetector } from "./ElementVisbilityDetector.svelte";
+export { default as ElementVisibilityDetector } from "../ui/elements/ElementVisibilityDetector.svelte";
 export { default as BlogTemplate } from "./blog_template/BlogTemplate.svelte";
 export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";

package/dist/components/index.js

@@ -4,6 +4,6 @@ export { default as Card } from "./Card.svelte";
 export { default as Chip } from "./chip/Chip.svelte";
 export { default as PineappleSlideToggle } from "./PineappleSlideToggle.svelte";
 export { default as SocialSection } from "../ui/components/SocialSection.svelte";
-export { default as ElementVisbilityDetector } from "./ElementVisbilityDetector.svelte";
+export { default as ElementVisibilityDetector } from "../ui/elements/ElementVisibilityDetector.svelte";
 export { default as BlogTemplate } from "./blog_template/BlogTemplate.svelte";
 export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";

package/dist/components/layouts/SeaweedBaseLayout.svelte

@@ -27,8 +27,6 @@
 		children
 	}: Props = $props();
 
-	$inspect("inside: should display:", shouldDisplayLeadingIcons, !!extraLeadingIcons);
-
 	$effect(() => {
 		if (extraLeadingIcons && shouldDisplayLeadingIcons) {
 			appState.lead = extraLeadingIcons;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import SocialSection from "../../../ui/components/SocialSection.svelte";
 	import Card from "../../../components/Card.svelte";
-	import ElementVisibilityDetector from "../../../components/ElementVisbilityDetector.svelte";
+	import ElementVisibilityDetector from "../../../ui/elements/ElementVisibilityDetector.svelte";
 	import type { EntryProps } from "./EntryProps";
 
 	interface Props {

package/dist/{components/ElementVisbilityDetector.svelte → ui/elements/ElementVisibilityDetector.svelte}

@@ -1,12 +1,15 @@
 <script lang="ts">
-    import {onMount} from "svelte";
+	import { onMount, type Snippet } from "svelte";
 
     interface Props {
         isVisible?: boolean;
-        children?: import('svelte').Snippet;
+        children?: Snippet;
     }
 
-    let { isVisible = $bindable(true), children }: Props = $props();
+    let {
+			isVisible = $bindable(true),
+	    children
+		}: Props = $props();
 
     let stickyElem: HTMLElement = $state();
 

package/dist/ui/elements/ElementVisibilityDetector.svelte.d.ts

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

package/dist/ui/elements/index.d.ts

@@ -1,5 +1,6 @@
 export { default as ImageIcon } from "./ImageIcon.svelte";
 export { default as TextLink } from "./TextLink.svelte";
+export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
 export * from "./ColorScheme";
 export * from "./GeneralUIProps";
 export * from "./OnBackground";

package/dist/ui/elements/index.js

@@ -1,5 +1,6 @@
 export { default as ImageIcon } from "./ImageIcon.svelte";
 export { default as TextLink } from "./TextLink.svelte";
+export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
 export * from "./ColorScheme";
 export * from "./GeneralUIProps";
 export * from "./OnBackground";

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

@@ -7,14 +7,14 @@
 		entryList
 	}: ProjectGroup = $props();
 
-	const isSpecial = entryList.length % 3 === 1;
+	const isSpecial = $derived(entryList.length % 3 === 1);
 
-	let normalUiList: SnippetMeta[] = isSpecial
+	let normalUiList: SnippetMeta[] = $derived(isSpecial
 		? [...entryList.slice(0, -4)]
-		: [...entryList];
-	let overflowUiList: SnippetMeta[] = isSpecial
+		: [...entryList]);
+	let overflowUiList: SnippetMeta[] = $derived(isSpecial
 		? [...entryList.slice(-4)]
-		: [];
+		: []);
 
 
 	// <!--todo: implement in seaweedlayout #migration-->

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import type { SeaweedLayoutProps } from "./props";
+	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";
@@ -9,16 +10,21 @@
 	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 = $bindable(), // todo
+		layout, // todo
 		domain = "http://localhost:5173/seaweed2",
-		queryTerms
+		queryTerms,
+		showMiniSocial = false,
+		serverParams = ""
 	}: SeaweedLayoutProps = $props();
 
+	let actualLayout = $state(layout);
 	let isAdvanceSettingOn = $state(true);
 	let orderUrl = $state("");
 
@@ -47,8 +53,8 @@
 		const chipList: string[] = [];
 		const termList: string[] = [];
 		queryStates.entries()
-			.filter(([_, state]) => state)
-			.forEach(([term, state], idx) => {
+			.filter(([, state]) => state)
+			.forEach(([term]) => {
 				const qtTerm = `.qt-${term}`;
 				termList.push(qtTerm);
 				chipList.push(`.text-chip${qtTerm}`);
@@ -78,6 +84,74 @@
 	});
 
 	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>
@@ -90,7 +164,14 @@
 {/snippet}
 <PinyaPageLayout>
 	{#snippet appBarLead()}
-		<div></div>
+		{#if showMiniSocial}
+			<div
+				class="flex flex-row"
+				transition:fly={{x:-10}}
+			>
+				<SocialSection isSmallVersion={true} />
+			</div>
+		{/if}
 	{/snippet}
 
 	<div id="upper-section">
@@ -105,7 +186,7 @@
 	</div>
 
 	<!--todo: render list #migration-->
-	{#each layout as group (group.title)}
+	{#each actualLayout as group (group.title)}
 		<EntryGroup {...group}></EntryGroup>
 	{/each}
 
@@ -143,7 +224,7 @@
 					</div>
 
 					<EntryOrderConfig2
-						{layout}
+						bind:layout={actualLayout}
 						bind:orderUrl={orderUrl}
 						allEntries={entryList}
 					></EntryOrderConfig2>

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

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

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

@@ -21,5 +21,7 @@ export interface SeaweedLayoutProps {
     entryList: SnippetMeta[];
     layout: ProjectGroup[];
     queryTerms: string[];
+    showMiniSocial?: boolean;
+    serverParams?: string;
 }
 export {};

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.6",
+  "version": "3.0.0-alpha.8",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",
@@ -18,21 +18,25 @@
     "to-dev": "git checkout main && git pull origin main && git branch -d turnip/dev && git checkout -b turnip/dev"
   },
   "devDependencies": {
-    "@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",
-    "@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-check": "^4.0.0",
     "svelte2tsx": "^0.6.20",
     "tslib": "^2.4.1",
     "typescript": "^5.5.0",
+    "typescript-eslint": "^8.20.0",
     "vite": "^5.4.4"
   },
   "dependencies": {
@@ -40,7 +44,6 @@
     "@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",
@@ -87,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/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;