@turnipxenon/pineapple 2.10.0 → 3.0.0-alpha.1

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

@@ -1,46 +1,55 @@
-<script>import {} from "./EntryProps";
-import Card from "../../../components/Card.svelte";
-import GithubIcon from "../../../assets/icons/github-mark.svg";
-import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";
-import { Chip } from "../../..";
-export let props;
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import Card from "../../../components/Card.svelte";
+	import GithubIcon from "../../../assets/icons/github-mark.svg";
+	import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";
+	import { Chip } from "../../..";
+
+	// noinspection JSUnusedGlobalSymbols
+	interface Props {
+		props: EntryProps;
+	}
+
+	let { props }: Props = $props();
 </script>
 
 <Card>
-	<section class="project-card" slot="content">
+	{#snippet content()}
+		<section class="project-card" >
 
-		<video playsinline autoplay muted loop preload="none">
-			<source src={ThisWebsiteFootage} type="video/mp4">
-			video unavailable. original video contains clips of this website being resized and light-dark mode being
-			toggled.
-		</video>
-		<div class="project-card-body">
-			<h2>This webpage!</h2>
+			<video playsinline autoplay muted loop preload="none">
+				<source src={ThisWebsiteFootage} type="video/mp4">
+				video unavailable. original video contains clips of this website being resized and light-dark mode being
+				toggled.
+			</video>
+			<div class="project-card-body">
+				<h2>This webpage!</h2>
 
-			<p>
-				The webpage is made with two parts. The webpage that has the content for everything here, I've lovingly called Seaweed. I kept seaweed as a private package. On the other hand, the base package which I want to use for all spin offs of my websites is called Pineapple and have kept that codebase public.
-			</p>
-			<p>The webpage can dynamically emphasize terms, rearrange the layout, use different terms, and save all these configurations as a shortened link. Additionally fetches the latest blog entries from turnipxenon.com via REST calls.</p>
+				<p>
+					The webpage is made with two parts. The webpage that has the content for everything here, I've lovingly called Seaweed. I kept seaweed as a private package. On the other hand, the base package which I want to use for all spin offs of my websites is called Pineapple and have kept that codebase public.
+				</p>
+				<p>The webpage can dynamically emphasize terms, rearrange the layout, use different terms, and save all these configurations as a shortened link. Additionally fetches the latest blog entries from turnipxenon.com via REST calls.</p>
 
-			<p>
-				<Chip>Svelte</Chip>
-				<Chip>Skeleton (Svelte UI library)</Chip>
-				<Chip>Typescript</Chip>
-				<Chip>Vercel</Chip>
-				<Chip>YarnSpinner</Chip>
-				<Chip>Postgres (SQL database)</Chip>
-				<Chip>Prisma ORM</Chip>
-				<Chip>RESTful API</Chip>
-			</p>
+				<p>
+					<Chip>Svelte</Chip>
+					<Chip>Skeleton (Svelte UI library)</Chip>
+					<Chip>Typescript</Chip>
+					<Chip>Vercel</Chip>
+					<Chip>YarnSpinner</Chip>
+					<Chip>Postgres (SQL database)</Chip>
+					<Chip>Prisma ORM</Chip>
+					<Chip>RESTful API</Chip>
+				</p>
 
-			<section class="game-link-section">
-				<button type="button" class="btn variant-filled-primary turnip-button"
-				        role="link"
-				        title="https://github.com/TurnipXenon/pineapple"
-				        on:click={() => window.open("https://github.com/TurnipXenon/pineapple")}>
-					<img src={GithubIcon} class="long-btn-image" alt="github icon">
-				</button>
-			</section>
-		</div>
-	</section>
+				<section class="game-link-section">
+					<button type="button" class="btn preset-filled-primary-500 turnip-button"
+					        role="link"
+					        title="https://github.com/TurnipXenon/pineapple"
+					        onclick={() => window.open("https://github.com/TurnipXenon/pineapple")}>
+						<img src={GithubIcon} class="long-btn-image" alt="github icon">
+					</button>
+				</section>
+			</div>
+		</section>
+	{/snippet}
 </Card>

package/dist/template/seaweed/entries/ThisWebpage.svelte.d.ts

@@ -1,17 +1,7 @@
-import { SvelteComponent } from "svelte";
 import { type EntryProps } from "./EntryProps";
-declare const __propDef: {
-    props: {
-        props: EntryProps;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ThisWebpageProps = typeof __propDef.props;
-export type ThisWebpageEvents = typeof __propDef.events;
-export type ThisWebpageSlots = typeof __propDef.slots;
-export default class ThisWebpage extends SvelteComponent<ThisWebpageProps, ThisWebpageEvents, ThisWebpageSlots> {
+interface Props {
+    props: EntryProps;
 }
-export {};
+declare const ThisWebpage: import("svelte").Component<Props, {}, "">;
+type ThisWebpage = ReturnType<typeof ThisWebpage>;
+export default ThisWebpage;

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

@@ -1,10 +1,16 @@
-<script>import SocialSection from "../../../components/SocialSection.svelte";
-import Card from "../../../components/Card.svelte";
-import { Accordion, AccordionItem } from "@skeletonlabs/skeleton";
-import ElementVisibilityDetector from "../../../components/ElementVisbilityDetector.svelte";
-export let entryProps;
-export let isVisible;
-let { email, letChaos, linkedinSlug, name } = entryProps;
+<script lang="ts">
+	import SocialSection from "../../../ui/components/SocialSection.svelte";
+	import Card from "../../../components/Card.svelte";
+	import ElementVisibilityDetector from "../../../components/ElementVisbilityDetector.svelte";
+	import type { EntryProps } from "./EntryProps";
+
+	interface Props {
+		entryProps: EntryProps;
+		isVisible: boolean;
+	}
+
+	let { entryProps, isVisible = $bindable() }: Props = $props();
+	let { email, letChaos, linkedinSlug, name } = entryProps;
 </script>
 
 <div class="experience-and-about-div">
@@ -12,102 +18,113 @@ let { email, letChaos, linkedinSlug, name } = entryProps;
 	<div class="greater-about-div">
 
 		<Card includeDataNoSnippet={false}>
-			<section class="section-card" slot="content">
-
-				<h1>About</h1>
-
-				<p>
-					Hi! My name is {name}! I work as a software developer. Outside of that, I like making games, and
-					trying to do everything in between required to make one. I have some showcased below, our visit
-					my itch.io page for more of them.
-				</p>
-				<!-- todo: link the degree details idk -->
-				<p>
-					I also graduated with BS Computing Science, Specializing in Software Practice, and a
-					certificate in Computer Game Development at University of Alberta.
-				</p>
-				{#if entryProps.seaweedTemplateData.shouldAddFunNote}
+			{#snippet content()}
+				<section class="section-card">
+
+					<h1>About</h1>
+
 					<p>
-						I'm inspired by games like Harvest Moon: Friends of Mineral Town, Rune Factory 4, Theatrhythm,
-						Bravely Default: Flying Fairy, Boku no Natsuyasumi 2, and A Short Hike.
+						Hi! My name is {name}! I work as a software developer. Outside of that, I like making games, and
+						trying to do everything in between required to make one. I have some showcased below, our visit
+						my itch.io page for more of them.
 					</p>
-				{/if}
+					<!-- todo: link the degree details idk -->
+					<p>
+						I also graduated with BS Computing Science, Specializing in Software Practice, and a
+						certificate in Computer Game Development at University of Alberta.
+					</p>
+					{#if entryProps.seaweedTemplateData.shouldAddFunNote}
+						<p>
+							I'm inspired by games like Harvest Moon: Friends of Mineral Town, Rune Factory 4, Theatrhythm,
+							Bravely Default: Flying Fairy, Boku no Natsuyasumi 2, and A Short Hike.
+						</p>
+					{/if}
 
-				<!-- todo: maybe put cute stuff here -->
-				<!--						</ToggleableContent>-->
-			</section>
+					<!-- todo: maybe put cute stuff here -->
+					<!--						</ToggleableContent>-->
+				</section>
+			{/snippet}
 		</Card>
 
 		<Card>
-			<section class="section-card" slot="content">
-				<SocialSection email={email} linkedinSlug={linkedinSlug}></SocialSection>
-				<ElementVisibilityDetector bind:isVisible={isVisible}>
-				</ElementVisibilityDetector>
-			</section>
+			{#snippet content()}
+				<section class="section-card">
+					<SocialSection email={email} linkedinSlug={linkedinSlug}></SocialSection>
+					<ElementVisibilityDetector bind:isVisible={isVisible}>
+					</ElementVisibilityDetector>
+				</section>
+			{/snippet}
 		</Card>
 
 	</div>
 
 	<Card>
-		<section class="section-card" slot="content">
-			<h1>Experience</h1>
-
-			<h2>Highlight</h2>
-			<p>I like French Fries</p>
-
-			<h2>Software Engineer</h2>
-			<div class="two-column-separated">
-				<div>July 2023 – January 2024</div>
-				<div style="text-align: end">Control, Remote</div>
-			</div>
-			<ul>
-				<li>
-					Developed things
-				</li>
-				<li>
-					Woah
-				</li>
-			</ul>
-			<br>
-
-			<h2>Software Engineer Intern</h2>
-			<div class="two-column-separated">
-				<div>May 2022 – Aug 2022</div>
-				<div style="text-align: end">Pou Company</div>
-			</div>
-			<ul>
-				<li>
-					Stuff
-				</li>
-				<li>
-					Golang
-				</li>
-			</ul>
-			<br>
-			<!-- todo: turn off flashing when accordion is expanded -->
-			<Accordion>
-				<AccordionItem>
-					<div slot="summary">
-						<h2 class="accordion-header">More experience</h2>
-					</div>
-					<svelte:fragment slot="content">
-						<section class="more-section">
-							<h2>Software Engineer Intern</h2>
-							<div class="two-column-separated">
-								<div>May 2021 – Dec 2021</div>
-								<div style="text-align: end">Testing</div>
-							</div>
-							<ul>
-								<li>
-									Amazing
-								</li>
-							</ul>
-							<br>
-						</section>
-					</svelte:fragment>
-				</AccordionItem>
-			</Accordion>
-		</section>
+		{#snippet content()}
+			<section class="section-card">
+				<h1>Experience</h1>
+
+				<h2>Highlight</h2>
+				<p>I like French Fries</p>
+
+				<h2>Software Engineer</h2>
+				<div class="two-column-separated">
+					<div>July 2023 – January 2024</div>
+					<div style="text-align: end">Control, Remote</div>
+				</div>
+				<ul>
+					<li>
+						Developed things
+					</li>
+					<li>
+						Woah
+					</li>
+				</ul>
+				<br>
+
+				<h2>Software Engineer Intern</h2>
+				<div class="two-column-separated">
+					<div>May 2022 – Aug 2022</div>
+					<div style="text-align: end">Pou Company</div>
+				</div>
+				<ul>
+					<li>
+						Stuff
+					</li>
+					<li>
+						Golang
+					</li>
+				</ul>
+				<br>
+				<!-- todo: turn off flashing when accordion is expanded -->
+				<!-- todo: migrate accordion -->
+				<!--				<Accordion>-->
+				<!--					<Accordion.Item>-->
+				<!--						{#snippet summary()}-->
+				<!--							<div>-->
+				<!--								<h2 class="accordion-header">More experience</h2>-->
+				<!--							</div>-->
+				<!--						{/snippet}-->
+				<!--						{#snippet content()}-->
+
+				<!--							<section class="more-section">-->
+				<!--								<h2>Software Engineer Intern</h2>-->
+				<!--								<div class="two-column-separated">-->
+				<!--									<div>May 2021 – Dec 2021</div>-->
+				<!--									<div style="text-align: end">Testing</div>-->
+				<!--								</div>-->
+				<!--								<ul>-->
+				<!--									<li>-->
+				<!--										Amazing-->
+				<!--									</li>-->
+				<!--								</ul>-->
+				<!--								<br>-->
+				<!--							</section>-->
+
+				<!--						{/snippet}-->
+				<!--					</Accordion.Item>-->
+				<!--				</Accordion>-->
+			</section>
+		{/snippet}
 	</Card>
 
 </div>

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

@@ -1,18 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type { EntryProps } from "./EntryProps";
-declare const __propDef: {
-    props: {
-        entryProps: EntryProps;
-        isVisible: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type WorkExperienceProps = typeof __propDef.props;
-export type WorkExperienceEvents = typeof __propDef.events;
-export type WorkExperienceSlots = typeof __propDef.slots;
-export default class WorkExperience extends SvelteComponent<WorkExperienceProps, WorkExperienceEvents, WorkExperienceSlots> {
+interface Props {
+    entryProps: EntryProps;
+    isVisible: boolean;
 }
-export {};
+declare const WorkExperience: import("svelte").Component<Props, {}, "isVisible">;
+type WorkExperience = ReturnType<typeof WorkExperience>;
+export default WorkExperience;

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

@@ -1,48 +1,57 @@
-<script>import {} from "./EntryProps";
-import Card from "../../../components/Card.svelte";
-import GithubIcon from "../../../assets/icons/github-mark.svg";
-import WindowSetGraph from "../../../assets/others/window-set.png";
-export let props;
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import Card from "../../../components/Card.svelte";
+	import GithubIcon from "../../../assets/icons/github-mark.svg";
+	import WindowSetGraph from "../../../assets/others/window-set.png";
+
+	// noinspection JSUnusedGlobalSymbols
+	interface Props {
+		props: EntryProps;
+	}
+
+	let { props }: Props = $props();
 </script>
 
 <Card>
-	<section class="project-card" slot="content">
-		<img
-			alt="A graph that visualizes the number of memory pages made by Quicksort cached within the window set as
-						time goes by. The trend appears to look like a damping harmonic motion that does not go below the zero line. More
-						details include the data size being 200000 entries, each data point skips 1060174 data points, with a
-						page size of 4096 bytes, and window size of 100000 bytes."
-			src={WindowSetGraph} />
-		<div class="project-card-body">
-			<h2>Working set simulation</h2>
+	{#snippet content()}
+		<section class="project-card" >
+			<img
+				alt="A graph that visualizes the number of memory pages made by Quicksort cached within the window set as
+							time goes by. The trend appears to look like a damping harmonic motion that does not go below the zero line. More
+							details include the data size being 200000 entries, each data point skips 1060174 data points, with a
+							page size of 4096 bytes, and window size of 100000 bytes."
+				src={WindowSetGraph} />
+			<div class="project-card-body">
+				<h2>Working set simulation</h2>
 
-			<p>
-				A <span class="qt-c">C</span> program that simulates the working set model based on the output of memory
-				addresses
-				<span class="qt-valgrind">valgrind</span> detects as being accessed by a program being ran. It's
-				implemented using a nested hashmap <span class="qt-foundation">data structure</span> implemented from
-				scratch. The working set is the collection of memory pages referenced by a program within a certain time
-				frame. It comes with a report analyzing and benchmarking how memory allocation, between sorting <span
-				class="qt-foundation">algorithms</span> heapsort, quicksort, and radixsort, is affected by the window set
-				size, page size, and their input size.
-			</p>
+				<p>
+					A <span class="qt-c">C</span> program that simulates the working set model based on the output of memory
+					addresses
+					<span class="qt-valgrind">valgrind</span> detects as being accessed by a program being ran. It's
+					implemented using a nested hashmap <span class="qt-foundation">data structure</span> implemented from
+					scratch. The working set is the collection of memory pages referenced by a program within a certain time
+					frame. It comes with a report analyzing and benchmarking how memory allocation, between sorting <span
+					class="qt-foundation">algorithms</span> heapsort, quicksort, and radixsort, is affected by the window set
+					size, page size, and their input size.
+				</p>
 
-			<section class="game-link-section">
-				<button type="button" class="game-button turnip-button"
-				        role="link"
-				        title="https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/REPORT.pdf"
-				        on:click={() => window.open("https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/REPORT.pdf")}>
-					<img src={GithubIcon} class="long-btn-image" alt="github icon">
-					<span>Benchmark report</span>
-				</button>
-				<button type="button" class="game-button turnip-button"
-				        role="link"
-				        title="https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/DESIGN.md"
-				        on:click={() => window.open("https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/DESIGN.md")}>
-					<img src={GithubIcon} class="long-btn-image" alt="github icon">
-					<span>Design</span>
-				</button>
-			</section>
-		</div>
-	</section>
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/REPORT.pdf"
+					        onclick={() => window.open("https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/REPORT.pdf")}>
+						<img src={GithubIcon} class="long-btn-image" alt="github icon">
+						<span>Benchmark report</span>
+					</button>
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/DESIGN.md"
+					        onclick={() => window.open("https://github.com/TurnipXenon/C380-1Code/blob/main/Assignment03/DESIGN.md")}>
+						<img src={GithubIcon} class="long-btn-image" alt="github icon">
+						<span>Design</span>
+					</button>
+				</section>
+			</div>
+		</section>
+	{/snippet}
 </Card>

package/dist/template/seaweed/entries/Workset.svelte.d.ts

@@ -1,17 +1,7 @@
-import { SvelteComponent } from "svelte";
 import { type EntryProps } from "./EntryProps";
-declare const __propDef: {
-    props: {
-        props: EntryProps;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type WorksetProps = typeof __propDef.props;
-export type WorksetEvents = typeof __propDef.events;
-export type WorksetSlots = typeof __propDef.slots;
-export default class Workset extends SvelteComponent<WorksetProps, WorksetEvents, WorksetSlots> {
+interface Props {
+    props: EntryProps;
 }
-export {};
+declare const Workset: import("svelte").Component<Props, {}, "">;
+type Workset = ReturnType<typeof Workset>;
+export default Workset;