@turnipxenon/pineapple 2.1.1 → 2.3.1

package/dist/template/SeaweedTemplate.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        letChaos?: boolean | undefined;
+        name?: string | undefined;
+        email?: string | undefined;
+        linkedinSlug?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SeaweedTemplateProps = typeof __propDef.props;
+export type SeaweedTemplateEvents = typeof __propDef.events;
+export type SeaweedTemplateSlots = typeof __propDef.slots;
+export default class SeaweedTemplate extends SvelteComponent<SeaweedTemplateProps, SeaweedTemplateEvents, SeaweedTemplateSlots> {
+}
+export {};

package/dist/theme.postcss

@@ -0,0 +1,116 @@
+@tailwind variants;
+
+:root {
+    /* =~= Theme Properties =~= */
+    --theme-font-family-base: system-ui;
+    --theme-font-family-heading: system-ui;
+    --theme-font-color-base: var(--color-primary-900);
+    --theme-font-color-dark: var(--color-primary-100);
+    --theme-rounded-base: 24px;
+    --theme-rounded-container: 16px;
+    --theme-border-base: 2px;
+    /* =~= Theme On-X Colors =~= */
+    --on-primary: var(--color-text-900);
+    --on-secondary: var(--color-surface-500);
+    --on-tertiary: var(--color-text-900);
+    --on-success: var(--color-text-900);
+    --on-warning: var(--color-text-900);
+    --on-error: var(--color-surface-500);
+    --on-surface: var(--color-text-900);
+    /* =~= Theme Colors  =~= */
+    /* primary | #b9a26e */
+    --color-primary-50: 245 241 233; /* ⬅ #f5f1e9 */
+    --color-primary-100: 241 236 226; /* ⬅ #f1ece2 */
+    --color-primary-200: 238 232 219; /* ⬅ #eee8db */
+    --color-primary-300: 227 218 197; /* ⬅ #e3dac5 */
+    --color-primary-400: 206 190 154; /* ⬅ #cebe9a */
+    --color-primary-500: 185 162 110; /* ⬅ #b9a26e */
+    --color-primary-600: 167 146 99; /* ⬅ #a79263 */
+    --color-primary-700: 139 122 83; /* ⬅ #8b7a53 */
+    --color-primary-800: 111 97 66; /* ⬅ #6f6142 */
+    --color-primary-900: 91 79 54; /* ⬅ #5b4f36 */
+    --color-primary-1000: 66 54 29; /* ⬅ #42361d */
+    /* secondary | #b55639 */
+    --color-secondary-50: 244 230 225; /* ⬅ #f4e6e1 */
+    --color-secondary-100: 240 221 215; /* ⬅ #f0ddd7 */
+    --color-secondary-200: 237 213 206; /* ⬅ #edd5ce */
+    --color-secondary-300: 225 187 176; /* ⬅ #e1bbb0 */
+    --color-secondary-350: 214 162 146; /* ⬅ #D6A292 */
+    --color-secondary-400: 203 137 116; /* ⬅ #cb8974 */
+    --color-secondary-450: 192 112 87; /* ⬅ #C07057 */
+    --color-secondary-500: 181 86 57; /* ⬅ #b55639 */
+    --color-secondary-600: 163 77 51; /* ⬅ #a34d33 */
+    --color-secondary-700: 136 65 43; /* ⬅ #88412b */
+    --color-secondary-800: 109 52 34; /* ⬅ #6d3422 */
+    --color-secondary-900: 89 42 28; /* ⬅ #592a1c */
+    /* tertiary | #cd7949 */
+    --color-tertiary-50: 248 235 228; /* ⬅ #f8ebe4 */
+    --color-tertiary-100: 245 228 219; /* ⬅ #f5e4db */
+    --color-tertiary-200: 243 222 210; /* ⬅ #f3ded2 */
+    --color-tertiary-300: 235 201 182; /* ⬅ #ebc9b6 */
+    --color-tertiary-400: 220 161 128; /* ⬅ #dca180 */
+    --color-tertiary-500: 205 121 73; /* ⬅ #cd7949 */
+    --color-tertiary-600: 185 109 66; /* ⬅ #b96d42 */
+    --color-tertiary-700: 154 91 55; /* ⬅ #9a5b37 */
+    --color-tertiary-800: 123 73 44; /* ⬅ #7b492c */
+    --color-tertiary-900: 100 59 36; /* ⬅ #643b24 */
+    /* success | #7cab36 */
+    --color-success-50: 235 242 225; /* ⬅ #ebf2e1 */
+    --color-success-100: 229 238 215; /* ⬅ #e5eed7 */
+    --color-success-200: 222 234 205; /* ⬅ #deeacd */
+    --color-success-300: 203 221 175; /* ⬅ #cbddaf */
+    --color-success-400: 163 196 114; /* ⬅ #a3c472 */
+    --color-success-500: 124 171 54; /* ⬅ #7cab36 */
+    --color-success-600: 112 154 49; /* ⬅ #709a31 */
+    --color-success-700: 93 128 41; /* ⬅ #5d8029 */
+    --color-success-800: 74 103 32; /* ⬅ #4a6720 */
+    --color-success-900: 61 84 26; /* ⬅ #3d541a */
+    /* warning | #b8993a */
+    --color-warning-50: 244 240 225; /* ⬅ #f4f0e1 */
+    --color-warning-100: 241 235 216; /* ⬅ #f1ebd8 */
+    --color-warning-200: 237 230 206; /* ⬅ #ede6ce */
+    --color-warning-300: 227 214 176; /* ⬅ #e3d6b0 */
+    --color-warning-400: 205 184 117; /* ⬅ #cdb875 */
+    --color-warning-500: 184 153 58; /* ⬅ #b8993a */
+    --color-warning-600: 166 138 52; /* ⬅ #a68a34 */
+    --color-warning-700: 138 115 44; /* ⬅ #8a732c */
+    --color-warning-800: 110 92 35; /* ⬅ #6e5c23 */
+    --color-warning-900: 90 75 28; /* ⬅ #5a4b1c */
+    /* error | #b53977 */
+    --color-error-50: 244 225 235; /* ⬅ #f4e1eb */
+    --color-error-100: 240 215 228; /* ⬅ #f0d7e4 */
+    --color-error-200: 237 206 221; /* ⬅ #edcedd */
+    --color-error-300: 225 176 201; /* ⬅ #e1b0c9 */
+    --color-error-400: 203 116 160; /* ⬅ #cb74a0 */
+    --color-error-500: 181 57 119; /* ⬅ #b53977 */
+    --color-error-600: 163 51 107; /* ⬅ #a3336b */
+    --color-error-700: 136 43 89; /* ⬅ #882b59 */
+    --color-error-800: 109 34 71; /* ⬅ #6d2247 */
+    --color-error-900: 89 28 58; /* ⬅ #591c3a */
+    /* surface | #fff7e3 */
+    --color-surface-50: 255 254 251; /* ⬅ #fffefb */
+    --color-surface-100: 255 253 249; /* ⬅ #fffdf9 */
+    --color-surface-200: 255 253 248; /* ⬅ #fffdf8 */
+    --color-surface-300: 255 252 244; /* ⬅ #fffcf4 */
+    --color-surface-400: 255 249 235; /* ⬅ #fff9eb */
+    --color-surface-500: 255 247 227; /* ⬅ #fff7e3 */
+    --color-surface-600: 230 222 204; /* ⬅ #e6decc */
+    --color-surface-700: 191 185 170; /* ⬅ #bfb9aa */
+    --color-surface-800: 153 148 136; /* ⬅ #999488 */
+    --color-surface-900: 125 121 111; /* ⬅ #7d796f */
+    /* text color | #3f312f */
+    --color-text-50: 226 224 224; /* ⬅ #e2e0e0 */
+    --color-text-100: 217 214 213; /* ⬅ #d9d6d5 */
+    --color-text-200: 207 204 203; /* ⬅ #cfcccb */
+    --color-text-300: 178 173 172; /* ⬅ #b2adac */
+    --color-text-400: 121 111 109; /* ⬅ #796f6d */
+    --color-text-500: 63 49 47; /* ⬅ #3f312f */
+    --color-text-600: 57 44 42; /* ⬅ #392c2a */
+    --color-text-700: 47 37 35; /* ⬅ #2f2523 */
+    --color-text-800: 38 29 28; /* ⬅ #261d1c */
+    --color-text-900: 31 24 23; /* ⬅ #1f1817 */
+}
+
+.app-shell-token {
+    @apply bg-surface-600 dark:bg-surface-900;
+}

package/dist/types/BlogBlurbMeta.d.ts

@@ -0,0 +1,11 @@
+export declare class BlogBlurbMeta {
+    title: string;
+    blurb: string;
+    tagList: string[];
+    publishDate: string;
+    lastUpdate: string;
+    previewSrc: any;
+    previewSrcScript: string;
+    previewAlt: string;
+    blogLink: string;
+}

package/dist/types/BlogBlurbMeta.js

@@ -0,0 +1,16 @@
+// I don't wanna waste time figuring out how to fight against the rollup magic
+// svelte does so let's just copy paste this class, as a treat LOL
+// Mirror is between
+// - src/lib/types/BlogBlurbMeta.ts
+// - pineapple_scripts/blog_list_data_generator.ts
+export class BlogBlurbMeta {
+    title = "";
+    blurb = "";
+    tagList = [];
+    publishDate = "";
+    lastUpdate = "";
+    previewSrc = "";
+    previewSrcScript = "";
+    previewAlt = "";
+    blogLink = "";
+}

package/dist/types/BreadcrumbData.d.ts

@@ -0,0 +1,4 @@
+export interface BreadcrumbData {
+    path: string;
+    name: string;
+}

package/dist/types/BreadcrumbData.js

@@ -0,0 +1 @@
+export {};

package/dist/types/pineapple_fiber/DialogDetail.d.ts

@@ -0,0 +1,6 @@
+import type { PortraitType } from "./PortraitType";
+export interface DialogDetail {
+    textContent: string;
+    dialogId?: string;
+    portraitType?: PortraitType;
+}

package/dist/types/pineapple_fiber/DialogDetail.js

@@ -0,0 +1 @@
+export {};

package/dist/types/pineapple_fiber/DialogState.d.ts

@@ -0,0 +1,5 @@
+export declare enum DialogState {
+    Invisible = 0,
+    Visible = 1,
+    Busy = 2
+}

package/dist/types/pineapple_fiber/DialogState.js

@@ -0,0 +1,6 @@
+export var DialogState;
+(function (DialogState) {
+    DialogState[DialogState["Invisible"] = 0] = "Invisible";
+    DialogState[DialogState["Visible"] = 1] = "Visible";
+    DialogState[DialogState["Busy"] = 2] = "Busy";
+})(DialogState || (DialogState = {}));

package/dist/types/pineapple_fiber/DialogVariableStore.d.ts

@@ -0,0 +1,2 @@
+export type DialogMapStore = Storage;
+export declare const createNewMapStore: () => DialogMapStore;

package/dist/types/pineapple_fiber/DialogVariableStore.js

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { browser } from "$app/environment";
+export const createNewMapStore = () => {
+    return browser
+        ? localStorage
+        : {
+            // dumb storage if not in browser
+            length: 0,
+            setItem: (key, value) => { },
+            getItem: (key) => {
+                return null;
+            },
+            clear: () => { },
+            key: (index) => {
+                return null;
+            },
+            removeItem: (key) => { }
+        };
+};

package/dist/types/pineapple_fiber/PortraitType.d.ts

@@ -0,0 +1,11 @@
+export declare enum PortraitType {
+    AresHappy = "AresHappy",
+    AresDisappointed = "AresDisappointed",
+    AresBlushing = "AresBlushing",
+    AresLetsGo = "AresLetsGo",
+    AresMad = "AresMad",
+    AresNeutral = "AresNeutral",
+    AresSlightlyMad = "AresSlightlyMad",
+    AresSurprised = "AresSurprised",
+    AresYay = "AresYay"
+}

package/dist/types/pineapple_fiber/PortraitType.js

@@ -0,0 +1,12 @@
+export var PortraitType;
+(function (PortraitType) {
+    PortraitType["AresHappy"] = "AresHappy";
+    PortraitType["AresDisappointed"] = "AresDisappointed";
+    PortraitType["AresBlushing"] = "AresBlushing";
+    PortraitType["AresLetsGo"] = "AresLetsGo";
+    PortraitType["AresMad"] = "AresMad";
+    PortraitType["AresNeutral"] = "AresNeutral";
+    PortraitType["AresSlightlyMad"] = "AresSlightlyMad";
+    PortraitType["AresSurprised"] = "AresSurprised";
+    PortraitType["AresYay"] = "AresYay";
+})(PortraitType || (PortraitType = {}));

package/dist/util/create_go_to_function.d.ts

@@ -0,0 +1 @@
+export declare const createGoToFunction: (path: string) => (() => void);

package/dist/util/create_go_to_function.js

@@ -0,0 +1,5 @@
+export const createGoToFunction = (path) => {
+    return (() => {
+        location.href = path;
+    });
+};

package/dist/util/stable_random.d.ts

@@ -0,0 +1,2 @@
+export declare const generatedDailySeed: () => number;
+export declare const mulberry32Generator: (a: number) => (() => number);

package/dist/util/stable_random.js

@@ -0,0 +1,15 @@
+export const generatedDailySeed = () => {
+    const date = new Date();
+    const time = date.getTime() + 86400000;
+    return time - (time % 86400000);
+};
+// psuedo misc with seed
+// from https://stackoverflow.com/a/47593316
+export const mulberry32Generator = (a) => {
+    return function () {
+        var t = (a += 0x6d2b79f5);
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+};

package/docs/GroupLazyLoad.md

@@ -0,0 +1,34 @@
+# 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/PineappleFiberSpec.md

@@ -0,0 +1,356 @@
+# 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.