@turnipxenon/pineapple 2.4.55 → 2.4.57

package/src/lib/template/seaweed/SeaweedTemplate.svelte

@@ -20,6 +20,7 @@
 	import type { EntryProps } from "$pkg/template/seaweed/entries/EntryProps";
 	import { parseQueryTerms } from "$pkg/template/seaweed/ParseQueryTerms";
 	import UrlShortenerForm from "$pkg/template/seaweed/CreateUrlForm.svelte";
+	import PineappleSlideToggle from "$pkg/components/PineappleSlideToggle.svelte";
 
 	export let letChaos = true;
 	export let name = "Turnip";
@@ -371,7 +372,7 @@
 
 				<section class={group.gridClass}>
 					{#each group.items as entry}
-						<svelte:component this={entry} props={entryProps}></svelte:component>
+						<svelte:component this={entry.component} props={entryProps}></svelte:component>
 					{/each}
 				</section>
 			{/if}
@@ -385,18 +386,21 @@
 					<h1>Advanced settings</h1>
 					<p>This one is for those curious how I customize this page.</p>
 
-					<SlideToggle name="advanced-setting-slider" bind:checked={isAdvanceSettingOn}>
+					<PineappleSlideToggle name="advanced-setting-slider"
+					                      bind:checked={isAdvanceSettingOn}>
 						Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
-					</SlideToggle>
+					</PineappleSlideToggle>
 
 					{#if (isAdvanceSettingOn)}
-						<SlideToggle name="game-section-slider" bind:checked={seaweedTemplateData.gameSectionFirst}>
+						<PineappleSlideToggle name="game-section-slider"
+						                      bind:checked={seaweedTemplateData.gameSectionFirst}>
 							Should game section appear first over projects: {seaweedTemplateData.gameSectionFirst ? "On" : "Off"}
-						</SlideToggle>
+						</PineappleSlideToggle>
 						<p>Note: the above configuration was made before the dynamic entry list and to support links sent with that params, we will act like it only swaps the two groups, and nothing more dynamic if order query param does not exist. The configuration only happens during page load with query param, and it does not apply when changed here.</p>
-						<SlideToggle name="fun-note-slider" bind:checked={seaweedTemplateData.shouldAddFunNote}>
+						<PineappleSlideToggle name="fun-note-slider"
+						                      bind:checked={seaweedTemplateData.shouldAddFunNote}>
 							Should add fun note in description: {seaweedTemplateData.shouldAddFunNote ? "On" : "Off"}
-						</SlideToggle>
+						</PineappleSlideToggle>
 
 						<h3>Query terms to bold</h3>
 						<div class="query-term-grid">

package/src/lib/template/seaweed/SeaweedTemplateData.ts

@@ -19,21 +19,40 @@ export enum GroupGridClass {
 	Projects = "projects-section"
 }
 
+export interface ComponentMeta {
+	name: string;
+	component: ComponentType;
+}
+
 export interface EntryGroup {
 	name: string;
-	items: ComponentType[];
+	items: ComponentMeta[];
 	gridClass: string;
 }
 
 export const GameEntries: Readonly<EntryGroup> = {
 	name: DefaultHeader.Games.toString(),
-	items: [Pengi, Hepcat, ChefWings, Soulwork, ItchPromo],
+	items: [
+		{ name: "Pengi", component: Pengi },
+		{ name: "Hepcat", component: Hepcat },
+		{ name: "Chef Wings", component: ChefWings },
+		{ name: "Soulwork", component: Soulwork },
+		{ name: "Itch Promo", component: ItchPromo }
+	],
 	gridClass: GroupGridClass.Games.toString()
 };
 
 export const ProjectEntries: Readonly<EntryGroup> = {
 	name: DefaultHeader.Projects.toString(),
-	items: [MigranteAlberta, DecentralizedSocialMedia, CustomizedYarnspinner, FullStackC, Workset, ThisWebpage, MockUberApp],
+	items: [
+		{ name: "Migrante Alberta", component: MigranteAlberta },
+		{ name: "Decentralized Social Media", component: DecentralizedSocialMedia },
+		{ name: "Customized YarnSpinner", component: CustomizedYarnspinner },
+		{ name: "Full Stack C", component: FullStackC },
+		{ name: "Workset", component: Workset },
+		{ name: "This Webpage", component: ThisWebpage },
+		{ name: "Mock Uber App", component: MockUberApp }
+	],
 	gridClass: GroupGridClass.Projects.toString()
 };
 
@@ -55,7 +74,7 @@ export const AllGroupedEntriesProjectFirst: ReadonlyArray<EntryGroup> = [
 	GameEntries
 ];
 
-const allFlatEntries: Map<string, ComponentType> = new Map<string, ComponentType>();
+const allFlatEntries = new Map<string, ComponentMeta>();
 
 export const lazyInitializeAllFlatEntries = () => {
 	if (allFlatEntries.size === 0) {

package/src/lib/template/seaweed/entries/ThisWebpage.svelte

@@ -33,6 +33,8 @@
 				<Chip>Typescript</Chip>
 				<Chip>Vercel</Chip>
 				<Chip>YarnSpinner</Chip>
+				<Chip>Postgres (SQL database)</Chip>
+				<Chip>Prisma ORM</Chip>
 			</p>
 
 			<section class="game-link-section">

package/src/lib/template/seaweed/entry_order_config/EntryOrderConfig.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import {
+		type ComponentMeta,
 		type EntryGroup,
 		GetAllEntryFromGlobal,
 		GetEntryFromGlobal,
@@ -9,6 +10,9 @@
 	import type { ComponentType } from "svelte";
 	import { removeProxyWrapperOnString } from "./EntryOrderConfig";
 	import ComboBoxWithButton from "$pkg/components/combo_box/ComboBoxWithButton.svelte";
+	import CloseIcon from "$pkg/assets/icons/close.svg";
+	import UpwardIcon from "$pkg/assets/icons/arrow-upward.svg";
+	import "./entry-order-config.postcss";
 
 	export let seaweedEntries: EntryGroup[];
 	export let orderUrl: string;
@@ -27,7 +31,6 @@
 	const addEntry = (group: EntryGroup): ((selected: string) => void) => {
 		return (selected: string) => {
 			const c = GetEntryFromGlobal(selected);
-			console.log(selected, c);
 			if (c) {
 				group.items.push(c);
 				seaweedEntries = seaweedEntries;
@@ -45,7 +48,6 @@
 			} else {
 				return;
 			}
-			console.log(index, newIndex);
 
 			const tempVar = group.items[newIndex];
 			group.items[newIndex] = group.items[index];
@@ -97,12 +99,10 @@
 			updateOrderQuery();
 		};
 	};
-	const removeEntry = (entry: ComponentType, group: EntryGroup): (() => void) => {
+	const removeEntry = (entry: ComponentMeta, group: EntryGroup): (() => void) => {
 		return () => {
-			console.log("Clicked!");
 			for (let i = group.items.length - 1; i >= 0; i--) {
 				if (group.items[i].name === entry.name) {
-					console.log("Reduce");
 					group.items.splice(i, 1);
 					seaweedEntries = seaweedEntries;
 					updateOrderQuery();
@@ -113,10 +113,10 @@
 	};
 
 	const allDefaultEntries = Array.from(GetAllEntryFromGlobal().keys());
-	console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
 </script>
 
-<h3>Site ordering</h3>
+<br>
+<h2>Site ordering</h2>
 <blockquote>Sorry! This part of the website is still WIP, but here it is anyway. As long as it functions</blockquote>
 
 <!-- formatting: group1:entry1|entry2,group2:entry3
@@ -125,30 +125,75 @@
  , <= separates each group
  -->
 <div class="advanced-setting-list">
-	<!-- todo: we might have to extract this into it's own component -->
-	<!-- todo: NOW!!! -->
 	{#each seaweedEntries as group, groupIndex}
-		<div>
-			<div>
-				<button class="editable-button" on:click={removeGroup(group)}>X</button>
-				<!-- todo: move group up or down -->
-				<button class="editable-button" on:click={swapGroups(groupIndex, true)}>^</button>
-				<button class="editable-button" on:click={swapGroups(groupIndex, false)}>v</button>
-				{group.name}
+		<div class="entry-group card">
+
+			<div class="btn-group-header">
+				<button title={`Remove ${group.name}`}
+				        on:click={removeGroup(group)}>
+					<img class="img-icon" src={CloseIcon} alt={`Remove ${group.name}`}>
+				</button>
+
+				<button title={`Move group ${group.name} upwards`}
+				        on:click={swapGroups(groupIndex, true)}
+				        disabled="{groupIndex === 0}">
+					<img class="img-icon" src={UpwardIcon} alt={`Move group ${group.name} upwards`}>
+				</button>
+
+				<button title={`Move group ${group.name} downwards`}
+				        disabled={groupIndex === seaweedEntries.length - 1}
+				        on:click={swapGroups(groupIndex, false)}>
+					<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move group ${group.name} downwards`}>
+				</button>
+
+				<h2>{group.name}</h2>
 			</div>
-			<div class="advanced-setting-list card">
+
+			<table class="advanced-setting-list table">
+				<thead>
+				<tr>
+					<th>Entries</th>
+				</tr>
+				</thead>
+				<tbody>
 				{#each group.items as entry, entryIndex}
-					<div class="editable-entry">
-						<button on:click={removeEntry(entry, group)}>-</button>
-						<button on:click={swapEntry(entryIndex, group, true)}>^</button>
-						<button on:click={swapEntry(entryIndex, group, false)}>v</button>
-						{entry.name}
-					</div>
+					<tr class="entry-row">
+						<td class="btn-group-entry">
+
+							<button title={`Remove ${entry.name}`}
+							        on:click={removeEntry(entry, group)}>
+								<img class="img-icon" src={CloseIcon} alt={`Remove ${entry.name}`}>
+							</button>
+
+							<button title={`Move ${entry.name} upwards`}
+							        on:click={swapEntry(entryIndex, group, true)}
+							        disabled="{entryIndex === 0}">
+								<img class="img-icon" src={UpwardIcon} alt={`Move ${entry.name} upwards`}>
+							</button>
+
+							<button title={`Move ${entry.name} downwards`}
+							        disabled={entryIndex === group.items.length - 1}
+							        on:click={swapEntry(entryIndex, group, false)}>
+								<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move ${entry.name} downwards`}>
+							</button>
+							<div class="entry-name">
+								{entry.name}
+							</div>
+						</td>
+					</tr>
 				{/each}
-			</div>
+				</tbody>
+
+				<tfoot>
+				<tr>
+					<td>
+						<ComboBoxWithButton stringItems={allDefaultEntries}
+						                    onClick={addEntry(group)}></ComboBoxWithButton>
+					</td>
+				</tr>
+				</tfoot>
+			</table>
 
-			<ComboBoxWithButton stringItems={allDefaultEntries}
-			                    onClick={addEntry(group)}></ComboBoxWithButton>
 
 		</div>
 	{/each}
@@ -160,7 +205,49 @@
         flex-direction: column;
     }
 
-    .editable-entry > button, .editable-button {
-        @apply btn variant-filled-primary;
+    .btn-group-header {
+        @apply btn-group variant-filled-tertiary;
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5lh;
+    }
+
+    .btn-group-entry {
+        @apply btn-group;
+        display: flex;
+        padding: 0;
+    }
+
+    .btn-group-entry > div {
+        padding: 1em;
     }
+
+    .flipped-vertically {
+        transform: rotate(180deg);
+    }
+
+    .entry-group {
+        background-color: rgb(var(--color-surface-600));
+        margin-top: 1.5lh;
+        margin-bottom: 0.5lh;
+        padding: 0.5lh 0.5em;
+    }
+
+    .entry-row {
+        display: flex;
+        align-items: center;
+    }
+
+    .entry-name {
+        flex-grow: 1;
+    }
+
+    tr, td, th {
+        width: 100%;
+    }
+
+    tfoot > tr {
+        display: flex;
+    }
+
 </style>

package/src/lib/template/seaweed/entry_order_config/entry-order-config.postcss

@@ -0,0 +1,35 @@
+.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: rgb(var(--color-surface-500));
+}
+
+.dark tbody tr:nth-child(odd) {
+    background-color: rgb(var(--color-surface-900));
+}
+
+tbody tr:nth-child(even) {
+    background-color: rgb(var(--color-surface-200));
+}
+
+.dark tbody tr:nth-child(even) {
+    background-color: rgb(var(--color-surface-800));
+}

package/src/routes/(pineapple)/pineapple/(pineapple)/+page.svelte

@@ -5,7 +5,7 @@
 	import { Card, dialogManager, enableDialogueOverlay } from "$pkg";
 	import NavigationComponent from "$pkg/components/navigation_component/NavigationComponent.svelte";
 	import { ImageMap } from "./ImageMap";
-	import { SlideToggle } from "@skeletonlabs/skeleton";
+	import PineappleSlideToggle from "$pkg/components/PineappleSlideToggle.svelte";
 
 	enableDialogueOverlay.set(false);
 
@@ -55,9 +55,10 @@
 			class="btn variant-filled-secondary"
 			on:click={onTestDialogClick}><h3>Test dialog</h3></button>
 		<div>
-			<SlideToggle name="advanced-setting-slider" bind:checked={allowPagination}>
+			<PineappleSlideToggle name="advanced-setting-slider"
+			                      bind:checked={allowPagination}>
 				Allow pagination: {allowPagination ? "On" : "Off"}
-			</SlideToggle>
+			</PineappleSlideToggle>
 		</div>
 	</div>
 </Card>

package/src/routes/(seaweed)/portfolio/actual/+page.svelte

@@ -1,13 +1,12 @@
 <script>
 	import SeaweedTemplate from "$pkg/template/seaweed/SeaweedTemplate.svelte";
-	import RandomComponent from "./RandomComponent.svelte";
 </script>
 
 <SeaweedTemplate letChaos={false}
                  name="Allan Manuba"
                  email="allanmanuba@gmail.com"
                  linkedinSlug="allan-manuba"
-                 serverSideQueryParams="order=Games:Hepcat|ChefWings|Soulwork|ItchPromo:games-section,Projects:MigranteAlberta|DecentralizedSocialMedia|CustomizedYarnspinner|FullStackC|Workset|ThisWebpage|MockUberApp:projects-section,Relevant projects:MigranteAlberta:games-section&game-section-first=false"
+                 serverSideQueryParams="order=Relevant projects::games-section,Games:Pengi|Chef Wings|Hepcat|Itch Promo|Soulwork|Full Stack C:games-section,Projects:Migrante Alberta|Customized YarnSpinner|Decentralized Social Media|Workset|This Webpage:projects-section"
 >
 
 </SeaweedTemplate>

package/src/routes/(seaweed)/portfolio/actual/RandomComponent.svelte

@@ -1,7 +0,0 @@
-<script>
-	import { Card } from "$pkg";
-</script>
-
-<Card>
-	<h1 slot="content">Hello</h1>
-</Card>