@turnipxenon/pineapple 5.0.0 → 5.1.0

package/dist/ui/templates/SeaweedLayout/SeaweedLayout.svelte

@@ -1,32 +1,35 @@
 <!-- TODO: Documentation: consider documentation showcase -->
 
 <script lang="ts">
-	import { fly } from "svelte/transition";
-	import type { ProjectGroup, SeaweedLayoutProps } from "./props";
-	import ChumBucket from "./ChumBucket.svelte";
-	import { default as PinyaPageLayout } from "../PinyaPageLayout/PinyaPageLayout.svelte";
+	import { browser } from "$app/environment";
+	import { page } from "$app/state";
 	import { default as SocialSection } from "../../components/SocialSection.svelte";
-	import EntryGroup from "./EntryGroup.svelte";
-	import PineappleSwitch from "../../elements/PineappleSwitch.svelte";
 	import { CodeBlock } from "../../elements/CodeBlock";
-	import { TextChip } from "../../elements/TextChip";
-	import { SvelteMap } from "svelte/reactivity";
+	import PineappleSwitch from "../../elements/PineappleSwitch.svelte";
+	import { default as PinyaPageLayout } from "../PinyaPageLayout/PinyaPageLayout.svelte";
+	import ChumBucket from "./ChumBucket.svelte";
+	import EntryGroup from "./EntryGroup.svelte";
 	import EntryOrderConfig from "./EntryOrderConfig.svelte";
+	import { onDestroy, onMount } from "svelte";
+	import { SvelteMap } from "svelte/reactivity";
+	import { fly } from "svelte/transition";
+	import { TextChip } from "../../elements/TextChip";
 	import CreateUrlForm from "./CreateUrlForm.svelte";
-	import { onMount } from "svelte";
-	import { page } from "$app/state";
+	import type { ProjectGroup, SeaweedLayoutProps } from "./props";
 
 	let {
-		email,
-		linkedinSlug,
-		children,
-		sideSection,
+		email = "",
+		linkedinSlug = "",
+		children = undefined,
+		sideSection = undefined,
 		entryList, // todo
 		layout, // todo
 		domain = "http://localhost:5173/seaweed2",
 		queryTerms,
 		showMiniSocial = false,
-		serverParams = ""
+		serverParams = "",
+		emailRemoteQuery,
+		linkedinRemoteQuery
 	}: SeaweedLayoutProps = $props();
 
 	let actualLayout = $state(layout);
@@ -64,15 +67,29 @@
 				termList.push(qtTerm);
 				chipList.push(`.text-chip${qtTerm}`);
 			});
+		// language=HTML
 		styleStr = `<style>
 			${termList.join(", ")} {
 				font-weight: bolder;
-				color: var(--color-secondary-400);
+
+				&:not(.chip) {
+					color: var(--color-secondary-500);
+				}
+			}
+
+			html.dark {
+				${termList.join(", ")} {
+					font-weight: bolder;
+
+					&:not(.chip) {
+						color: var(--color-secondary-200);
+					}
+				}
 			}
 
 			${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) */;
+				color: #FFF5EFFF /* var(--color-secondary-contrast-light) */;
 			}
 			</style>`;
 	});
@@ -150,12 +167,57 @@
 		// endregion Bold terms
 	};
 
+	let upperSectionWrapper: HTMLDivElement | undefined = $state();
+	let resizeObserver: ResizeObserver | undefined = $state();
+	let isMobile = $state(false);
+	let isVeryNarrow = $state(false);
+
 	onMount(() => {
 		if (serverParams) {
 			filterSearchParams(new URLSearchParams(serverParams));
 		} else if (page.url.searchParams.size) {
 			filterSearchParams(page.url.searchParams);
 		}
+
+		/**
+		 * Get the computed font size of an element in pixels.
+		 * @param {HTMLElement} element The DOM element to check.
+		 * @returns {number} The font size in pixels as a number.
+		 */
+		function getElementFontSize(element) {
+			// Use window.getComputedStyle() to get all resolved CSS properties.
+			const computedStyle = window.getComputedStyle(element);
+			// Get the 'font-size' property value (which will be in 'px').
+			const fontSizeInPx = computedStyle.getPropertyValue("font-size");
+			// Parse the pixel value string (e.g., "16px") to a floating-point number.
+			return parseFloat(fontSizeInPx);
+		}
+
+		// code has to be below filterSearchParams!
+		if (browser && document.body) {
+			// Create a new ResizeObserver instance
+			resizeObserver = new ResizeObserver(entries => {
+				for (const entry of entries) {
+					// Log the new dimensions or perform other actions
+					const { width } = entry.contentRect; // or entry.borderBoxSize
+					const emWidth = width / getElementFontSize(document.body);
+
+					// 26em (about) + 50em (experience) + 2em (margin)
+					isMobile = emWidth < 79;
+					// magic number
+					isVeryNarrow = emWidth < 44;
+				}
+			});
+
+			// Start observing the target element
+			resizeObserver.observe(document.body);
+		}
+	});
+
+	onDestroy(() => {
+		if (browser && resizeObserver) {
+			resizeObserver.disconnect();
+		}
 	});
 </script>
 
@@ -165,10 +227,7 @@
 
 
 {#snippet socialSection()}
-	<SocialSection
-		email={email}
-		linkedinSlug={linkedinSlug}
-	/>
+	<SocialSection {emailRemoteQuery} {linkedinRemoteQuery} />
 {/snippet}
 <PinyaPageLayout appBardEndStyle="classic">
 	{#snippet appBarLead()}
@@ -179,29 +238,46 @@
 			>
 				<SocialSection
 					isSmallVersion={true}
-					email={email}
-					linkedinSlug={linkedinSlug}
+					{emailRemoteQuery}
+					{linkedinRemoteQuery}
 				/>
 			</div>
 		{/if}
 	{/snippet}
 
-	<div id="upper-section">
-
-		<div class="upper-section-start">
-			{@render sideSection(socialSection)}
+	{#if sideSection || children}
+		<div
+			id="upper-section"
+			bind:this={upperSectionWrapper}
+			class="upper-section-style"
+			class:is-mobile={isMobile}
+			class:is-very-narrow={isVeryNarrow}
+		>
+			{#if sideSection}
+				<div class="upper-section-start">
+					{@render sideSection(socialSection)}
+				</div>
+			{/if}
+
+			{#if children}
+				<div class="upper-section-end">
+					{@render children()}
+				</div>
+			{/if}
+
+			{#if actualLayout.length > 0}
+				<EntryGroup {...actualLayout[0]} />
+			{/if}
 		</div>
-
-		<div class="upper-section-end">
-			{@render children()}
-		</div>
-	</div>
+	{/if}
 
 	<!--todo: render list #migration-->
-	{#each actualLayout as group (group.title)}
-		<EntryGroup
-			{...group}
-		/>
+	{#each actualLayout as group, idx (group.title)}
+		{#if idx !== 0}
+			<EntryGroup
+				{...group}
+			/>
+		{/if}
 	{/each}
 
 	{#snippet footer()}
@@ -274,12 +350,80 @@
         border-top: 2px solid var(--color-footer-border);
     }
 
-    #upper-section {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 2rem;
-        justify-content: center;
+    :global {
+        #upper-section {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: 2rem;
+            justify-content: center;
+
+            &.is-mobile {
+                justify-content: stretch;
+
+                .upper-section-start, .entry-group-wrapper {
+                    width: 100%;
+                    max-width: 64em;
+                    margin: auto;
+                    flex: unset;
+                }
+
+                .normal-project-container {
+                    justify-content: stretch;
+
+                    > .pinya-card {
+                        max-width: calc(60em);
+                    }
+                }
+            }
+
+            .upper-section-start {
+                flex-basis: 26em;
+            }
+
+            .entry-group-wrapper {
+                width: unset;
+                max-width: 64em;
+                flex: 1;
+
+                .group-header {
+                    max-width: 64em;
+                }
+
+                .normal-project-container {
+                    justify-content: stretch;
+                    flex-direction: column;
+
+                    > .pinya-card {
+                        max-width: 64em;
+                    }
+
+                    > .pinya-four-part-card > section {
+                        .card-header-cover {
+                            flex: 1 1 12em;
+
+                            & > * {
+                                border-radius: var(--radius-xl);
+                                border-bottom-left-radius: var(--radius-xl);
+                                border-top-left-radius: var(--radius-xl);
+                            }
+                        }
+
+                        .card-content {
+                            padding-bottom: 1lh;
+                            flex: 9999 1 26em;
+                        }
+
+                        display: flex;
+                        flex-direction: row;
+                        flex-wrap: wrap;
+                        justify-content: stretch;
+                        align-items: stretch;
+                        margin: 0;
+                    }
+                }
+            }
+        }
     }
 
     .query-term-grid {
@@ -290,7 +434,7 @@
     }
 
     .advanced-setting {
-		    margin-left: 1em;
-		    margin-right: 1em;
+        margin-left: 1em;
+        margin-right: 1em;
     }
 </style>

package/dist/ui/templates/SeaweedLayout/SeaweedLayout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeaweedLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/SeaweedLayout.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAgB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA6PhE,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SeaweedLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/SeaweedLayout.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAgB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA0ThE,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ui/templates/SeaweedLayout/props.d.ts

@@ -1,28 +1,44 @@
+import type { RevealInfoRecord } from "../../../components/reveal-info/RevealInfoCollection";
 import type { Snippet } from "svelte";
 import type { ProjectComponentProps } from "./";
+import type { SvelteSet } from "svelte/reactivity";
 type ComponentSnippet = Snippet<[ProjectComponentProps]>;
+export declare enum SectionType {
+    Experience = "experience",
+    Projects = "projects"
+}
 export interface SnippetMeta {
     key: string;
     component: ComponentSnippet;
+    dateStarted?: Date | string;
+    dateFinished?: Date | string;
+    tags?: string[];
 }
 export interface ProjectGroup {
     key: string;
     title: string;
     entryList: SnippetMeta[];
     projectComponentProps?: ProjectComponentProps;
+    sectionType?: SectionType;
+    showFilter?: boolean;
+    showSort?: boolean;
+    showMoreLimit?: number;
 }
 export interface SeaweedLayoutProps {
     name: string;
     email: string;
     linkedinSlug: string;
     domain: string;
-    sideSection: Snippet<[Snippet]>;
-    children: Snippet;
+    sideSection?: Snippet<[Snippet]>;
+    children?: Snippet;
     entryList: SnippetMeta[];
     layout: ProjectGroup[];
     queryTerms: string[];
     showMiniSocial?: boolean;
     serverParams?: string;
+    emailRemoteQuery?: RevealInfoRecord;
+    linkedinRemoteQuery?: RevealInfoRecord;
 }
+export declare const getQueryTermContext: () => SvelteSet<string>, setQueryTermContext: (context: SvelteSet<string>) => SvelteSet<string>;
 export {};
 //# sourceMappingURL=props.d.ts.map

package/dist/ui/templates/SeaweedLayout/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAE7E,KAAK,gBAAgB,GAAG,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC9C;AAED,MAAM,WAAW,kBAAkB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAElB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AACzF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAE7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,KAAK,gBAAgB,GAAG,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;AAEzD,oBAAY,WAAW;IACtB,UAAU,eAAe;IACzB,QAAQ,aAAa;CACrB;AAED,MAAM,WAAW,WAAW;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,gBAAgB,CAAC;IAE5B,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAE9C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,mBAAmB,CAAC,EAAE,gBAAgB,CAAC;CACvC;AAGD,eAAO,MAAO,mBAAmB,2BAAE,mBAAmB,mDAAsC,CAAC"}

package/dist/ui/templates/SeaweedLayout/props.js

@@ -1 +1,8 @@
-export {};
+import { createContext } from 'svelte';
+export var SectionType;
+(function (SectionType) {
+    SectionType["Experience"] = "experience";
+    SectionType["Projects"] = "projects";
+})(SectionType || (SectionType = {}));
+/* A list of terms to be prepended with qt- later */
+export const [getQueryTermContext, setQueryTermContext] = createContext();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
@@ -44,11 +44,11 @@
     "wrangler": "4.59.1"
   },
   "dependencies": {
+    "@shikijs/transformers": "^3.22.0",
     "melt": "^0.44.0",
     "mode-watcher": "^0.5.1",
     "shiki": "^3.22.0",
     "shiki-transformer-copy-button": "0.0.3",
-    "@shikijs/transformers": "^3.22.0",
     "svelte-modals": "^2.0.1"
   },
   "peerDependencies": {