@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha.1

package/dist/template/seaweed/ChumBucket.svelte

@@ -1,87 +0,0 @@
-<script>import Card from "../../components/Card.svelte";
-import {} from "../..";
-import { onMount } from "svelte";
-let hasTriedGettingChumBucket = false;
-let pageMetaList = [];
-const loadPageMeta = async () => {
-  fetch("/api/get-latest-blogs").then((resp) => resp.json()).then((json) => {
-    pageMetaList = json;
-    hasTriedGettingChumBucket = true;
-  }).catch((_) => {
-    hasTriedGettingChumBucket = true;
-  });
-};
-onMount(() => {
-  loadPageMeta();
-});
-</script>
-
-<Card>
-	<div slot="content" class="chum-bucket">
-		<h2>More about me...</h2>
-		<p>Check out the latest things I've been rambling about at
-			<a href="https://turnipxenon.com" target="_blank">turnipxenon.com</a> or at
-			<a href="https://turnipxenon.com/blogs/coding-chagrin" target="_blank">turnipxenon.com/blogs/coding-chagrin.</a>
-		</p>
-
-		{#if pageMetaList.length > 0}
-			<h3><b>My latest blogs (sounds too fancy)</b></h3>
-		{/if}
-
-		<div class="chum-bucket-grid">
-			{#if hasTriedGettingChumBucket}
-				{#each pageMetaList as pageMeta}
-					<div class="chum-bucket-item">
-						{#if pageMeta.imageUrl}
-							<img src={`https://turnipxenon.com${pageMeta.imageUrl}`}
-							     class="chum-bucket-image"
-							     alt={pageMeta.imageAlt}>
-						{/if}
-						<div>
-							<h3><a href={`https://turnipxenon.com/${pageMeta.relativeLink}`}>{pageMeta.title}</a></h3>
-							<p>Published: {pageMeta.datePublished}
-								{#if pageMeta.lastUpdated}
-									| Last updated: {pageMeta.lastUpdated}
-								{/if}
-							</p>
-							<p>{pageMeta.description}</p>
-						</div>
-					</div>
-				{/each}
-			{:else}
-				{#each { length: 10 } as _}
-					<div class="placeholder" />
-				{/each}
-			{/if}
-		</div>
-	</div>
-</Card>
-
-<style>
-    .chum-bucket-item {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-    }
-
-    .chum-bucket-image {
-        max-width: 10em;
-        height: auto;
-        margin-top: 0.5em;
-        margin-inline-end: 1em;
-    }
-
-
-    .chum-bucket {
-        padding: 1.5lh 2em;
-        max-width: 600px;
-    }
-
-    .chum-bucket-grid {
-        display: flex;
-        flex-direction: column;
-        margin-top: 0.5lh;
-        gap: 0.5lh;
-    }
-</style>

package/dist/template/seaweed/ChumBucket.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ChumBucketProps = typeof __propDef.props;
-export type ChumBucketEvents = typeof __propDef.events;
-export type ChumBucketSlots = typeof __propDef.slots;
-export default class ChumBucket extends SvelteComponent<ChumBucketProps, ChumBucketEvents, ChumBucketSlots> {
-}
-export {};

package/docs/GroupLazyLoad.md

@@ -1,34 +0,0 @@
-# Group Lazy Load
-
-meh not possible or not easy T.T
-
-I want it to be easy to use like:
-
-```sveltehtml
-<GroupLazyLoad>
-    <svelte:fragment slot="content">
-        <video src="random_vid.mp4"></video>
-        <img src="random_image.webp" alt="test image">
-        <RandomComponentWithLazyLoadHook></RandomComponentWithLazyLoadHook>
-    </svelte:fragment>
-    <svelte:fragment slot="placeholder">
-        This placeholder is optional...
-    </svelte:fragment>
-</GroupLazyLoad>
-```
-
-OR
-
-
-```sveltehtml
-<GroupLazyLoad>
-    <svelte:fragment slot="content">
-        <video src="random_vid.mp4"></video>
-        <img src="random_image.webp" alt="test image">
-        <RandomComponentWithLazyLoadHook></RandomComponentWithLazyLoadHook>
-    </svelte:fragment>
-    <svelte:fragment slot="placeholder">
-        This placeholder is optional...
-    </svelte:fragment>
-</GroupLazyLoad>
-```

package/docs/OverlaySpec.md

@@ -1,23 +0,0 @@
-# Overlay Spec
-
-**What are the things that can appear on top of the normal content?**
-
-- Toast
-- Modal
-- Dialog
-  - Choices
-- Backstage
-  - Preferences
-  - Optional: Dialog??
-
-**Which one appears on top?**
-
-- Toast
-- Modal
-  - blocks access on anything below
-- Backstage
-  - blocks access on anything below
-- Dialog: choices
-  - blocks access on anything below
-- Dialog
-- Everything else

package/docs/PineappleFiberSpec.md

@@ -1,356 +0,0 @@
-# Pineapple Fiber Spec
-
-## Overview
-
-Pineapple Fiber is a script that translates Yarn scripts into Typescript files that my custom-built DialogManager could
-digest. It was made with the purpose of:
-
-1. Making iterations easier by using the VSCode Yarnspinner plugin as a playable prototype of the dialogs
-2. Making it more robust and flexible to changes
-3. Seeing the dialogs as graph to make dialog writing much easier
-4. Less clutter on *.svelte files
-
-To use, just run the script!
-
-## How to convert Yarn files to PineappleWeaver compliant typescript files
-
-Run `npm run generate-yarn`
-
-### How does it work?
-
-## PineappleFiber-based Yarn File Format
-
-For the latest specs, check
-out [Yarn file format specs](https://github.com/YarnSpinnerTool/YarnSpinner/blob/main/Documentation/Yarn-Spec.md).
-
-To make it clear which is Yarn-based definitions and PineappleFiber-based specifications, Yarn definitions are formatted
-with a blockquote.
-
-> Like this!
-
-### Project
-
-TODO: note yet implemented
-
-> The Yarn project is all Yarn files that are intended to be associated with one another.
-
-In PineappleFiber's world, these are the Typescript files importing each other! We might want this when we have common
-dialogues between files. We'll need to investigate about this more since we might end up with cyclical dependencies, and
-I would personally like to put a guard on it.
-
-### Lines
-
-> The line is the common unit that comprises all elements in a Yarn file. A line is a series of characters terminated by
-> the new line symbol. The new line symbol should be either the \n character or \n. Once chosen, the new line symbol
-> must remain the same throughout the project.
-
-> The following Yarn file contains four lines (in order); one header tag line, one header delimiter line, one body
-> dialogue line, one body delimiter line.
-
-```yarn
-title: Start
----
-This is some text
-===
-```
-
-### Whitespace
-
-> Whitespace is any non-visible character with a width greater than 0. Common whitespace encountered include the space
-> and the tab.
-
-### Comments
-
-> A comment is a line that starts with the // symbol. All text from the start of the comment to the end of the line must
-> be ignored. A comment starting in the middle of another line ends that line at the point the // symbol is encountered.
-> That line is assumed to have finished at that point as if the comment was not there. Comments must not impact the rest
-> of the lines or have any impact on the resulting Yarn program. Comments may occur in any line of a Yarn file and take
-> precedence over any other parsing rules such as hashtags, but may still be escaped.
-
-### Identifiers
-
-Check out
-the [identifier specs](https://github.com/YarnSpinnerTool/YarnSpinner/blob/main/Documentation/Yarn-Spec.md#identifiers)!
-
-## PineappleFiber-based Yarn Structure and extra definitions
-
-Reminder: Blockquotes are direct quotes are from the original Yarn spec!
-
-> The basic structure of a Yarn file is zero or more file tags and one or more Yarn nodes.
-
-![Yarn structure](https://github.com/YarnSpinnerTool/YarnSpinner/raw/main/Documentation/railroads/yarn_file.svg)
-
-### File Tags
-
-Not really relevant to us but here's the definition.
-
-> File tags are file level metadata that is relevant for all nodes in the file. A common use for file tags is for
-> versioning the file. File tags must go at the start of a file before any nodes begin. File tags must have the `#`
-> symbol
-> at the start of them and then contain all text up until the end of the line.
-
-![File tag structure](https://github.com/YarnSpinnerTool/YarnSpinner/raw/main/Documentation/railroads/file_tag.svg)
-
-### Nodes
-
-You'll find in PineappleFiber-based Yarn, we have three types of nodes! (Made it three types to reduce confusion.)
-
-1. Original Yarn node
-2. Choiceless PineappleFiber node
-3. Diverging PineappleFiber node
-
-The rest of the nodes are based on the Original Yarn node.
-
-#### (1) Original Yarn node
-
-> A node is the single story element of a Yarn file. Nodes are the story structural building blocks of Yarn; they are
-> designed to contain pieces of a story and then have these story pieces linked together. This is not a
-> requirement--everything could be done in a single node--but avoidance of the node structure quickly becomes unwieldy
-> for
-> the author. A node must be comprised of a single header and a single body in that order.
-
-![Node structure](https://github.com/YarnSpinnerTool/YarnSpinner/raw/main/Documentation/railroads/node.svg)
-
-To document the above in text form, we want to define concepts above prefixed with *part* and literal characters with
-*literal*. The same structure in the image is defined as:
-
-In text form, this looks like:
-
-1. part - header
-2. literal - `---`
-3. literal - NEWLINE (\n)
-4. part - body
-5. literal - `---`
-6. literal - NEWLINE (\n)
-
-This looks like:
-
-```yarn
-title: Start
----
-This is some text
-===
-```
-
-#### (2) Choiceless PineappleFiber node
-
-Choiceless PineappleFiber is the original Yarn node but with special metatags for PineappleFiber. The structure is
-as-follows:
-
-1. part - header
-2. literal - `---`
-3. literal - NEWLINE (\n)
-4. part - (optional) [Pineapple metatags](#Pineapple-metatags)
-5. part - body
-6. literal - `===`
-7. literal - NEWLINE (\n)
-
-```yarn
-title: Start
----
-Portrait: AresNeutral
-This is some text
-===
-```
-
-#### (3) Diverging PineappleFiber node
-
-Diverging PineappleFiber is based on the Choiceless PineappleFiber node but with a new part that creates links.
-The structure is as-follows:
-
-1. part - header
-2. literal - `---`
-3. literal - NEWLINE (\n)
-4. part - (optional) [Pineapple metatags](#Pineapple-metatags)
-5. part - body with [choice tags](#Choice-tag)
-6. literal - `<ChoiceBreak>`
-7. literal - NEWLINE (\n)
-8. literal - (optional for formatting) NEWLINE (\n)
-9. literal - [Choice directory](#Choice-directory)
-10. literal - `===`
-11. literal - NEWLINE (\n)
-
-```yarn
-title: Start
----
-Portrait: AresNeutral
-This is some text
-This is <choice FirstChoice>a choice</choice>.
-This is <choice AnotherChoice>another choice</choice>.
-<ChoiceBreak>
-
--> FirstChoice
-    <<jump DirectNode>>
--> Second Choice
-    <<jump AnotherNode>>
-===
-```
-
-### Pineapple metatags
-
-Note: these are case-insensitive!
-
-<table>
-<tr>
-    <th>Name</th>
-    <th>Description</th>
-    <th>Example</th>
-</tr>
-<tr>
-    <td>Portrait</td>
-    <td>(Optional) This is the portrait that appears in the web (see Figure 3.1). By default or 
-    when omitted, this is AresNeutral.</td>
-    <td>Portrait: AresHappy</td>
-</tr>
-</table>
-
-
-![img.png](images/figure-ares-happy.png)
-
-Figure 3.1. How Portait: AresHappy is rendered.
-
-### Choice tag
-
-Choice tags can be used in the **body**. A choice tag is a html tag with one attribute, which we'll call the **choice
-name**. Enclosed is the **content** which can be any text that does not contain the characters `<` or `>`. The structure
-is
-as follows:
-
-1. literal - `<choice`
-2. literal - SPACE
-3. part - choice name
-4. literal -`
-5. part - content
-6. literal - `</choice>`
-
-```html
-
-<choice FirstChoice>a choice</choice>
-```
-
-All the **choice name** in the **body** should have an equivalent **choice name** in the
-**[choice directory](#Choice-directory)**.
-
-### Choice directory
-
-The choice directory is a list of **Yarn options**. Each **Yarn option** has an equivalent **choice name** found in the
-**body**. Check out what options are in
-the [YarnSpinner doc](https://docs.yarnspinner.dev/getting-started/writing-in-yarn/lines-nodes-and-options#options).
-
-The options must have a **jump line** which is a **Yarn Jump** command that leads to another existing Node.
-
-The structure of a single option is as follows:
-
-1. part - Yarn option
-2. part - jump line
-
-```yarn
--> FirstChoice
-    <<jump DirectNode>>
-```
-
-## PineappleFiber Typescript equivalent
-
-When generated, each node is converted into a DialogDetail. A DialogDetail is composed of three parts:
-
-1. textContent: The body in a Yarn node.
-2. dialogId: The title or Yarn node name. Whatever is the node called Start or the first node, it will be the first node
-   ran when the dialogManager is run.
-3. portraitType: The PineappleFiber metatag Portrait equivalent in enum PortraitType. Defaults as AresNeutral.
-
-As an example, here's the Yarn script.
-
-```yarn
-# in About.yarn
-
-title: Start
-position: 0,0
----
-Portrait: Happy
-<p>Hi! I'm <b>Turnip (he/him)</b>! I like french fries, and seals! I fear being
-<a href="https://archive.nytimes.com/opinionator.blogs.nytimes.com/2013/06/15/i-know-what-you-think-of-me/" target=”_blank”>perceived</a>.
-Known for being gay for 2D men, especially catboys. Hope we can be <a href="https://en.wiktionary.org/wiki/OOMFie" target=”_blank”>oomfies!</a><br>ヾ(≧ ▽ ≦)ゝ</p>
-<choice Catboy>I like catboys too!</choice> | <choice Seal>I like seals!</choice>
-<ChoiceBreak>
-
--> Catboy
-    <<jump Catboy>>
--> Seal
-    <<jump Seal>>
-===
-title: Catboy
-position: 238,149
----
-<p>A fellow catboy liker, I see. Good taste! B)</p><br><choice Cool>Cool!</choice>
-<ChoiceBreak>
-
--> Cool
-    <<jump Start>>
-===
-title: Seal
-position: -227,152
----
-<p>Here's a seal :3</p><br><video playsinline autoplay muted loop style="max-height: 5rem;">
-<source src="https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4" type="video/mp4">Video of a seal</video>
-<br>
-<choice SealFart><i>*seal_fart.mp4*</i></choice>
-<ChoiceBreak>
-
--> SealFart
-    <<jump Start>>
-===
-```
-
-Here's what it looks like in YarnSpinner graph mode:
-
-![Yarn Spinner graph](images/figure-yarn-spinner.png)
-
-In Typescript, this would look like:
-
-```typescript
-// in About.ts
-
-// auto-generated from About.yarn
-
-import { dialogManager } from "$lib/store";
-import { PortraitType } from "$lib/types/pineapple_fiber/PortraitType";
-
-class _AboutYarn {
-   setDialogTree = () => {
-      dialogManager.setDialogTree([
-         {
-            textContent: `<p>Hi! I'm <b>Turnip (he/him)</b>! I like french fries, and seals! I fear being
-    <a href="https://archive.nytimes.com/opinionator.blogs.nytimes.com/2013/06/15/i-know-what-you-think-of-me/" target="”_blank”">perceived</a>.
-Known for being gay for 2D men, especially catboys. Hope we can be <a href="https://en.wiktionary.org/wiki/OOMFie" target="”_blank”">oomfies!</a><br>ヾ(≧ ▽ ≦)ゝ</p>
-<a href="#" class="choice-Catboy dialog-choice">I like catboys too!</a> | <a href="#" class="choice-Seal dialog-choice">I like seals!</a>`,
-            dialogId: "Start",
-            portraitType: PortraitType.AresNeutral
-         },
-         {
-            textContent: `<p>A fellow catboy liker, I see. Good taste! B)</p><br><a href="#" class="choice-Start dialog-choice">Cool!</a>`,
-            dialogId: "Catboy",
-            portraitType: PortraitType.AresLetsGo
-         },
-         {
-            textContent: `<p>Here's a seal :3</p><br><video playsinline autoplay muted loop style="max-height: 5rem;">
-<source src="https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4"
-type="video/mp4">Video of a seal
-</video><br><a href="#" class="choice-Start dialog-choice"><i>*seal_fart.mp4*</i></a>`,
-            dialogId: "Seal",
-            portraitType: PortraitType.AresYay
-         }
-      ]);
-   };
-}
-
-export const AboutYarn = new _AboutYarn();
-
-```
-
-## PineappleFiber metadata
-
-Variables are stored as `$variableName` in our localStorage.
-
-Visited nodes are stored as an integer number like `+NodeName`
-
-Note that the variable is updated AFTER the line is processed during runtime.

package/docs/archive/MigrationToAzure.md

@@ -1,102 +0,0 @@
-# Migration to Azure
-
-## Update
-
-I realized that migrating to Azure, and wanting to be on the same parity to what we have right now would cost more. I am fine with the possible charges Vercel may give in the future.
-
-## Overview
-
-We're moving from hosting our two sites, from Vercel to Azure.
-
-## Reason
-
-- We want to learn how to use Azure services, since I'm already familiar with AWS and a lot of Canadian jobs seem to use Azure.
-- I want to learn more about Pulumi. It seems like a promising way of defining infrastructure. It's like CDK but platform-agnostic.
-- It's not that I'm worried about learning Vercel's platform, but let's be honest, employers don't really appreciate seeing "experienced in Vercel VK" than "experienced in CosmosDB"
-- If we want our projects to be interconnected, we might have to use a backend server for our Discord bot. I think Vercel is cheap, but I don't trust them enough to not pull a Heroku on us.
-
-## Current solution
-
-Two of our static web apps are deployed in Vercel for free.
-
-## Proposed solution
-
-Move the two static web apps to Azure Static Web Apps.
-
-## Future solution
-
-In the near future, we will have a possible situation like this:
-
-1. User visits, invoking call to Azure Static Web App.
-2. Azure Static Web App checks if it is a dynamic route, and if it is, it invokes an Azure Function. (This might not be accurate, or may not require an Azure Function if server-side rendered? Maybe for that it uses Azure Web App (not static))
-3. Azure Function (or Web App?) calls DB to figure out the desired layout.
-
-The situation for the above is something I've thought of since I've seen my links get more bloated. I could shorten the link, and have the full layout definition stored in a Key-Value pair DB.
-
-## Work
-
-1. Throwaway prototype: try to do the tutorial for full stack web app.
-	- Link: https://techcommunity.microsoft.com/t5/apps-on-azure-blog/build-a-full-stack-react-application-with-azure-static-web-apps/ba-p/4090838
-2. Check out the difference between Azure Static Web App and Azure Web App.
-3. Migrate Pineapple to Azure Web App.
-4. Set up CI/CD
-5. Ensure that there is a staging environment for PRs.
-6. Migrate Seaweed to Azure Web App.
-
-## Future Work
-
-**We want to shorten our query params into pre-defined links. We also want to keep the query params since we've given
-them out already.**
-
-Priority between layout settings:
-
-1. Runtime advanced settings
-2. Query param parsing
-3. Unique url
-
-Work:
-
-1. Study AzureFunctions (or not) and CosmosDB
-2. Define a DB schema
-3. Define a protocol between AzureFunction and Azure Web App (or not; it really depends)
-4. Set up DB.
-5. Implement throwaway part of the webpage just as a simple DB connection sanity check.
-6. Implement connection to the DB.
-7. Potential task: set up how DB connection works in different stages (PR build vs deployment build). At this point, we may have understood how the system works now.
-8. Refactor Seaweed. There are too much functions in the script section of SeaweedTemplate.
-9. Add a single source of truth for the page layout.
-10. The current state is that each page controls are separate, so I have to find them each individually. This will make URL generation, Query param parsing, Query param setting without page redirection (new!), server side params, and runtime advanced setting changes all in sync. Wow, that's a lot, and complex. but we're already 80% there, just disorganized.
-11. Refactor so that each entry is a SvelteComponent. (Already done but I don't know if we have to start from scratch since the merge conflict between our current work and at this point of the tasks is gonna be massive)
-12. Define each entry as a list grouped between games and projects.
-13. Define group components. (Same case as 11)
-14. Define each group as a list grouped. Define properties like:
-	1. Entries under it
-	2. Header title
-	3. Header styling?
-	4. Grid styling
-15. Make the dynamic listing and grouping work with the following:
-	1. runtime advanced setting changes
-		1. Represent the above groupings and listings in advanced settings
-		2. Make addable entries
-		3. Make removable entries
-		4. Make addable groups
-		5. Make removable entries
-		6. Make movable entries (switch indices)
-		7. Make movable groups (switch indices)
-		8. Inevitable refactor
-	2. URL generation
-	3. Query param parsing
-	4. Query param setting without page redirection
-	5. Save to DB with password
-	6. Read data on server side
-	7. Make a warning to user side that the page is missing if the said page was not defined server side
-	8. Read data on client side
-	9. Process it on client side and let query params override on top of it.
-
-**We want our infra to be defined in Pulumi**
-
-**TODO (we will probably know more when we have the DB and multiple stage deploys)**
-
-## Acknowledgments
-
-- Kudos to 0gust1, specifically with their guide to [Use node-adapter](https://gist.github.com/0gust1/1fc3c461ace390df556b2231b7284e70#use-node-adapter) and [adjust the launch script](https://gist.github.com/0gust1/1fc3c461ace390df556b2231b7284e70#adjust-the-launch-script).

package/docs/pull_request_template.md

@@ -1,34 +0,0 @@
-## Which issues does this affect?
-
-- Closes #*PR number*
-
-## Overview
-
-*Insert brief description here*
-
-## Description
-
-*If there are more details or more things that needs to be talked about, put it here.*
-
-## Checks
-
-- [ ] If some of the checks below are deferred, link an issue for it under as a child
-
-### Accessibility
-
-- [ ] [Changes are keyboard accessible](https://accessibility.18f.gov/keyboard/)
-- [ ] [All form inputs have explicit labels](https://accessibility.18f.gov/forms/)
-- [ ] [Page content has a meaningful heading hierarchy](https://accessibility.18f.gov/headings/)
-- [ ] [All relevant images use an img tag and have alt attributes](https://accessibility.18f.gov/images/)
-- [ ] [Text has sufficient color contrast](https://accessibility.18f.gov/color/) (a contrast ratio of 4.5:1 with the
-  background)
-- [ ] [No red flags when running WAVE on the page](http://wave.webaim.org/)
-- [ ] The UI should also work in left-to-right direction
-
-For the full list, see [18F's Accessibility Checklist](https://accessibility.18f.gov/checklist/).
-
-
-<!--
-References:
-- https://github.com/ministryofjustice/accessibility-checklist/blob/master/README.md
--->

package/postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
-};

package/prisma/migrations/20240408050417_init/migration.sql

@@ -1,7 +0,0 @@
--- CreateTable
-CREATE TABLE "SeaweedParams" (
-    "slug" TEXT NOT NULL,
-    "queryParams" TEXT NOT NULL,
-
-    CONSTRAINT "SeaweedParams_pkey" PRIMARY KEY ("slug")
-);

package/prisma/migrations/migration_lock.toml

@@ -1,3 +0,0 @@
-# Please do not edit this file manually
-# It should be added in your version-control system (i.e. Git)
-provider = "postgresql"