@turnipxenon/pineapple 2.10.0 → 3.0.0-alpha-3

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

@@ -1,32 +1,40 @@
-<script>import {} from "./EntryProps";
-import Card from "../../../components/Card.svelte";
-import GithubIcon from "../../../assets/icons/github-mark.svg";
-import WeaverFootage from "../../../assets/others/weaver-footage.gif";
-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 WeaverFootage from "../../../assets/others/weaver-footage.gif";
+
+	interface Props {
+		props: EntryProps;
+	}
+
+	let { props }: Props = $props();
 </script>
 
 
 <Card>
-	<section class="project-card" slot="content">
-		<img alt="Footage of a visual novel-like dynamic dialog interaction happening on the same page we are on"
-		     src={WeaverFootage} />
+	{#snippet content()}
+		<section class="project-card" >
+			<img alt="Footage of a visual novel-like dynamic dialog interaction happening on the same page we are on"
+			     src={WeaverFootage} />
 
-		<div class="project-card-body">
-			<h2>Customized Yarnspinner interpreter and dialog runner</h2>
+			<div class="project-card-body">
+				<h2>Customized Yarnspinner interpreter and dialog runner</h2>
 
-			A custom dialog interpreter, written in <span class="qt-ts">Typescript</span>, that tokenizes then
-			transpiles custom Yarnspinner dialog into a <span class="qt-ts">Typescript</span> file. The said files can
-			be used on a corresponding runner or library, also implemented alongside it, allowing the ability to play a
-			custom-flavor of YarnSpinner dialogs on <span class="qt-svelte">Svelte</span>.
+				A custom dialog interpreter, written in <span class="qt-ts">Typescript</span>, that tokenizes then
+				transpiles custom Yarnspinner dialog into a <span class="qt-ts">Typescript</span> file. The said files can
+				be used on a corresponding runner or library, also implemented alongside it, allowing the ability to play a
+				custom-flavor of YarnSpinner dialogs on <span class="qt-svelte">Svelte</span>.
 
-			<section class="game-link-section">
-				<button type="button" class="game-button turnip-button"
-				        role="link"
-				        title="https://github.com/TurnipXenon/pineapple/blob/main/docs/PineappleFiberSpec.md"
-				        on:click={() => window.open("https://github.com/TurnipXenon/pineapple/blob/main/docs/PineappleFiberSpec.md")}>
-					<img src={GithubIcon} alt="github icon">
-				</button>
-			</section>
-		</div>
-	</section>
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/TurnipXenon/pineapple/blob/main/docs/PineappleFiberSpec.md"
+					        onclick={() => window.open("https://github.com/TurnipXenon/pineapple/blob/main/docs/PineappleFiberSpec.md")}>
+						<img src={GithubIcon} alt="github icon">
+					</button>
+				</section>
+			</div>
+		</section>
+	{/snippet}
 </Card>

package/dist/template/seaweed/entries/CustomizedYarnspinner.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 CustomizedYarnspinnerProps = typeof __propDef.props;
-export type CustomizedYarnspinnerEvents = typeof __propDef.events;
-export type CustomizedYarnspinnerSlots = typeof __propDef.slots;
-export default class CustomizedYarnspinner extends SvelteComponent<CustomizedYarnspinnerProps, CustomizedYarnspinnerEvents, CustomizedYarnspinnerSlots> {
+interface Props {
+    props: EntryProps;
 }
-export {};
+declare const CustomizedYarnspinner: import("svelte").Component<Props, {}, "">;
+type CustomizedYarnspinner = ReturnType<typeof CustomizedYarnspinner>;
+export default CustomizedYarnspinner;

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

@@ -1,55 +1,64 @@
-<script>import HeaderHepCat from "../../../assets/temp/header-hep-cat.mp4";
-import BitbucketIcon from "../../../assets/icons/bitbucket-icon.svg";
-import { ItchLogoHotLink } from "../../../consts";
-import Card from "../../../components/Card.svelte";
-export let props;
+<script lang="ts">
+	import type { EntryProps } from "./EntryProps";
+	import HeaderHepCat from "../../../assets/temp/header-hep-cat.mp4";
+	import BitbucketIcon from "../../../assets/icons/bitbucket-icon.svg";
+	import { ItchLogoHotLink } from "../../../consts";
+	import Card from "../../../components/Card.svelte";
+
+	interface Props {
+		props: EntryProps;
+	}
+
+	let { props }: Props = $props();
 </script>
 
 <Card>
-	<section class="game-card" slot="content">
-		<!-- todo: move the image crop a bit lower -->
-		<video playsinline autoplay muted loop preload="none" id="hepcat-video">
-			<source src={HeaderHepCat} type="video/mp4">
-		</video>
-
-		<section class="game-card-body">
-
-			<h1>Hepcat</h1>
-
-			<blockquote>
-				"Cats, Jazz, and a little bit of Death. What more could anyone ask for?"
-			</blockquote>
-
-
-			<p>This is a course project made by a team of six for <a
-				href="https://sites.google.com/ualberta.ca/cmput250/">CMPUT 250</a>, and it won <a
-				href="https://webdocs.cs.ualberta.ca/~nathanst/certificate/">Game of the year.</a>
-			</p>
-
-			<p>
-				Hep Cat is a rhythm game made in <a
-				href="https://www.rpgmakerweb.com/products/programs/rpg-maker-mv" target="_blank" class="qt-rpgmaker">
-				RPG Maker MV</a> with the help of additional custom-made <span class="qt-js">Javascript</span> plugins. I
-				wrote the rhythm game plugin's framework. For this plugin to work, I
-				had to write a <span class="qt-python">Python</span> script that parses osu! files into readable JSON
-				files.
-			</p>
-
-
-			<section class="game-link-section">
-				<button type="button" class="game-button turnip-button"
-				        role="link"
-				        title="https://bitbucket.org/egginchicken/hep-cat/src/master/"
-				        on:click={()=> window.open("https://bitbucket.org/egginchicken/hep-cat/src/master/")}>
-					<img alt="bitbucket icon" src={BitbucketIcon}>
-				</button>
-				<button type="button" class="game-button turnip-button"
-				        role="link"
-				        title="https://just-a-phantom.itch.io/hep-cat"
-				        on:click={()=> window.open("https://just-a-phantom.itch.io/hep-cat")}>
-					<img alt="itch.io icon" src={ItchLogoHotLink}>
-				</button>
+	{#snippet content()}
+		<section class="game-card" >
+			<!-- todo: move the image crop a bit lower -->
+			<video playsinline autoplay muted loop preload="none" id="hepcat-video">
+				<source src={HeaderHepCat} type="video/mp4">
+			</video>
+
+			<section class="game-card-body">
+
+				<h1>Hepcat</h1>
+
+				<blockquote>
+					"Cats, Jazz, and a little bit of Death. What more could anyone ask for?"
+				</blockquote>
+
+
+				<p>This is a course project made by a team of six for <a
+					href="https://sites.google.com/ualberta.ca/cmput250/">CMPUT 250</a>, and it won <a
+					href="https://webdocs.cs.ualberta.ca/~nathanst/certificate/">Game of the year.</a>
+				</p>
+
+				<p>
+					Hep Cat is a rhythm game made in <a
+					href="https://www.rpgmakerweb.com/products/programs/rpg-maker-mv" target="_blank" class="qt-rpgmaker">
+					RPG Maker MV</a> with the help of additional custom-made <span class="qt-js">Javascript</span> plugins. I
+					wrote the rhythm game plugin's framework. For this plugin to work, I
+					had to write a <span class="qt-python">Python</span> script that parses osu! files into readable JSON
+					files.
+				</p>
+
+
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://bitbucket.org/egginchicken/hep-cat/src/master/"
+					        onclick={()=> window.open("https://bitbucket.org/egginchicken/hep-cat/src/master/")}>
+						<img alt="bitbucket icon" src={BitbucketIcon}>
+					</button>
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://just-a-phantom.itch.io/hep-cat"
+					        onclick={()=> window.open("https://just-a-phantom.itch.io/hep-cat")}>
+						<img alt="itch.io icon" src={ItchLogoHotLink}>
+					</button>
+				</section>
 			</section>
 		</section>
-	</section>
+	{/snippet}
 </Card>

package/dist/template/seaweed/entries/Hepcat.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 HepcatProps = typeof __propDef.props;
-export type HepcatEvents = typeof __propDef.events;
-export type HepcatSlots = typeof __propDef.slots;
-export default class Hepcat extends SvelteComponent<HepcatProps, HepcatEvents, HepcatSlots> {
+interface Props {
+    props: EntryProps;
 }
-export {};
+declare const Hepcat: import("svelte").Component<Props, {}, "">;
+type Hepcat = ReturnType<typeof Hepcat>;
+export default Hepcat;

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

@@ -1,49 +1,57 @@
-<script>import {} from "./EntryProps";
-import HeaderPengi from "../../../assets/temp/header-pengi.mp4";
-import GithubIcon from "../../../assets/icons/github-mark.svg";
-import { ItchLogoHotLink } from "../../../consts";
-import Card from "../../../components/Card.svelte";
-export let props;
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import HeaderPengi from "../../../assets/temp/header-pengi.mp4";
+	import GithubIcon from "../../../assets/icons/github-mark.svg";
+	import { ItchLogoHotLink } from "../../../consts";
+	import Card from "../../../components/Card.svelte";
+
+	interface Props {
+		props: EntryProps;
+	}
+
+	let { props }: Props = $props();
 </script>
 
 <Card>
-	<section class="game-card" slot="content">
-		<video playsinline autoplay muted loop preload="none">
-			video unavailable. original video contains pengi gameplay showing the dynamic dialog
-			layout and character animation.
-			<source src={HeaderPengi} type="video/mp4">
-		</video>
-
-		<section class="game-card-body">
-
-			<h1>Pengi</h1>
-
-			<blockquote>
-				Well well, quite the dreamer, aren’t you? Might be hard to get in... costs a lot of
-				money...
-			</blockquote>
-
-			<p>
-				Pengi is a text-based adventure made in <span class="qt-unity">Unity</span>. I acted as the sole
-				programmer for the team. Most of the work revolves around UI and creating <a
-				href="https://yarnspinner.dev/" target="_blank">YarnSpinner</a> commands for writers
-				to use to create expressive stage directions in the script.
-			</p>
-
-			<section class="game-link-section">
-				<button type="button" class="game-button turnip-button"
-				        role="link"
-				        title="https://github.com/GreenTea-M/ProjectPengi"
-				        on:click={()=> window.open("https://github.com/GreenTea-M/ProjectPengi")}>
-					<img alt="github icon" src={GithubIcon}>
-				</button>
-				<button type="button" class="game-button turnip-button"
-				        role="link"
-				        title="https://turnipxenon.itch.io/pengi"
-				        on:click={()=> window.open("https://turnipxenon.itch.io/pengi")}>
-					<img alt="itch.io icon" src={ItchLogoHotLink}>
-				</button>
+	{#snippet content()}
+		<section class="game-card" >
+			<video playsinline autoplay muted loop preload="none">
+				video unavailable. original video contains pengi gameplay showing the dynamic dialog
+				layout and character animation.
+				<source src={HeaderPengi} type="video/mp4">
+			</video>
+
+			<section class="game-card-body">
+
+				<h1>Pengi</h1>
+
+				<blockquote>
+					Well well, quite the dreamer, aren’t you? Might be hard to get in... costs a lot of
+					money...
+				</blockquote>
+
+				<p>
+					Pengi is a text-based adventure made in <span class="qt-unity">Unity</span>. I acted as the sole
+					programmer for the team. Most of the work revolves around UI and creating <a
+					href="https://yarnspinner.dev/" target="_blank">YarnSpinner</a> commands for writers
+					to use to create expressive stage directions in the script.
+				</p>
+
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/GreenTea-M/ProjectPengi"
+					        onclick={()=> window.open("https://github.com/GreenTea-M/ProjectPengi")}>
+						<img alt="github icon" src={GithubIcon}>
+					</button>
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://turnipxenon.itch.io/pengi"
+					        onclick={()=> window.open("https://turnipxenon.itch.io/pengi")}>
+						<img alt="itch.io icon" src={ItchLogoHotLink}>
+					</button>
+				</section>
 			</section>
 		</section>
-	</section>
+	{/snippet}
 </Card>

package/dist/template/seaweed/entries/Pengi.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 PengiProps = typeof __propDef.props;
-export type PengiEvents = typeof __propDef.events;
-export type PengiSlots = typeof __propDef.slots;
-export default class Pengi extends SvelteComponent<PengiProps, PengiEvents, PengiSlots> {
+interface Props {
+    props: EntryProps;
 }
-export {};
+declare const Pengi: import("svelte").Component<Props, {}, "">;
+type Pengi = ReturnType<typeof Pengi>;
+export default Pengi;

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

@@ -1,46 +1,54 @@
-<script>import {} from "./EntryProps";
-import HeaderSoulwork from "../../../assets/temp/header-soulwork.mp4";
-import GithubIcon from "../../../assets/icons/github-mark.svg";
-import { ItchLogoHotLink } from "../../../consts";
-import Card from "../../../components/Card.svelte";
-export let props;
+<script lang="ts">
+	import { type EntryProps } from "./EntryProps";
+	import HeaderSoulwork from "../../../assets/temp/header-soulwork.mp4";
+	import GithubIcon from "../../../assets/icons/github-mark.svg";
+	import { ItchLogoHotLink } from "../../../consts";
+	import Card from "../../../components/Card.svelte";
+
+	interface Props {
+		props: EntryProps;
+	}
+
+	let { props }: Props = $props();
 </script>
 
 <Card>
-	<section class="game-card" slot="content">
-		<video playsinline autoplay muted loop preload="none">
-			<source src={HeaderSoulwork} type="video/mp4">
-		</video>
-		<section class="game-card-body">
+	{#snippet content()}
+		<section class="game-card" >
+			<video playsinline autoplay muted loop preload="none">
+				<source src={HeaderSoulwork} type="video/mp4">
+			</video>
+			<section class="game-card-body">
 
-			<h1>Soulwork</h1>
+				<h1>Soulwork</h1>
 
-			<p>
-				Soulwork is a 2D platforming game that uses unique physics to solve puzzle-based levels.
-				This project is a Time to Game Jam entry, restricting game development to be under 48
-				hours.
-			</p>
-			<p>
-				I helped make the level designing tools used by the designers to drag-and-drop objects
-				on the stage. I also helped program the unique physics-based gameplay mechanic. This was
-				was made in <span class="qt-unity">Unity</span> written using <span class="qt-cs">C#</span>.
-			</p>
+				<p>
+					Soulwork is a 2D platforming game that uses unique physics to solve puzzle-based levels.
+					This project is a Time to Game Jam entry, restricting game development to be under 48
+					hours.
+				</p>
+				<p>
+					I helped make the level designing tools used by the designers to drag-and-drop objects
+					on the stage. I also helped program the unique physics-based gameplay mechanic. This was
+					was made in <span class="qt-unity">Unity</span> written using <span class="qt-cs">C#</span>.
+				</p>
 
 
-			<section class="game-link-section">
-				<button type="button" class="game-button turnip-button"
-				        role="link"
-				        title="https://github.com/Zeyu-Li/Clockwork"
-				        on:click={()=> window.open("https://github.com/Zeyu-Li/Clockwork")}>
-					<img alt="github icon" src={GithubIcon}>
-				</button>
-				<button type="button" class="game-button turnip-button"
-				        role="link"
-				        title="https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331"
-				        on:click={()=> window.open("https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331")}>
-					<img alt="itch.io icon" src={ItchLogoHotLink}>
-				</button>
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/Zeyu-Li/Clockwork"
+					        onclick={()=> window.open("https://github.com/Zeyu-Li/Clockwork")}>
+						<img alt="github icon" src={GithubIcon}>
+					</button>
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331"
+					        onclick={()=> window.open("https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331")}>
+						<img alt="itch.io icon" src={ItchLogoHotLink}>
+					</button>
+				</section>
 			</section>
 		</section>
-	</section>
+	{/snippet}
 </Card>

package/dist/template/seaweed/entries/Soulwork.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 SoulworkProps = typeof __propDef.props;
-export type SoulworkEvents = typeof __propDef.events;
-export type SoulworkSlots = typeof __propDef.slots;
-export default class Soulwork extends SvelteComponent<SoulworkProps, SoulworkEvents, SoulworkSlots> {
+interface Props {
+    props: EntryProps;
 }
-export {};
+declare const Soulwork: import("svelte").Component<Props, {}, "">;
+type Soulwork = ReturnType<typeof Soulwork>;
+export default Soulwork;

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;