@turnipxenon/pineapple 1.1.2

package/src/lib/scripts/pineapple_fiber/PineappleWeaver.ts

@@ -0,0 +1,252 @@
+/**
+ * Pineapple Fiber
+ *
+ * A script that generates Typescript files from Yarn where the choices are embedded on
+ * the dialogue itself
+ *
+ * npx vite-node src/lib/scripts/pineapple_fiber/PineappleWeaver.ts
+ */
+
+import { getAllFiles } from "$pkg/scripts/util/FileManagement";
+import fs, { readFileSync } from "fs";
+import type { DialogDetail } from "$pkg/types/pineapple_fiber/DialogDetail";
+import { PortraitType } from "$pkg/types/pineapple_fiber/PortraitType";
+
+// import { getAllFiles } from "../util/FileManagement";
+// import fs, { readFileSync } from "fs";
+// import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
+// import { PortraitType } from "../../types/pineapple_fiber/PortraitType";
+
+interface ChoiceDetail {
+	name: string;
+	jumpNode: string;
+}
+
+const shouldDebug = false;
+
+const pineappleWeaverRun = () => {
+	console.info("Starting Pineapple Weaver.");
+	const BASE_PATH = "./src/routes";
+	getAllFiles(BASE_PATH, (path: string): boolean => {
+		return path.split(".").pop() === "yarn";
+	}).map((filePath) => {
+		console.info(`Converting: ${filePath}`);
+		const fileContent = readFileSync(filePath, "utf-8");
+		const dialogDetailList: DialogDetail[] = [];
+
+		fileContent.split("===").map((unparsedNode) => {
+			// todo: detect empty nodes
+			// todo: improve the code readability
+			if (unparsedNode.trim() === "") {
+				return;
+			}
+
+			const dialogDetails: DialogDetail = {
+				// todo: dissect the line below and give comments because it is complex
+				dialogId: unparsedNode
+					.slice(unparsedNode.indexOf("title: "))
+					.split("\n")[0]
+					.split(" ")
+					.pop()
+					?.trim(),
+				portraitType: PortraitType.AresNeutral,
+				textContent: "" // will be filled later below
+			};
+			let portraitUnset = true;
+
+			// parse the PineappleFiber metatags
+			const unparsedBody = unparsedNode.split("---").pop()!.trim();
+			const bodyList = unparsedBody.split("\n");
+			let contentIndexStart = 0;
+			for (let index = 0; index < bodyList.length; index++) {
+				const possibleTagPair = bodyList[index].split(": ");
+				const possibleTagName = possibleTagPair[0].toLowerCase();
+
+				if (!["portrait"].includes(possibleTagName)) {
+					break;
+				}
+
+				contentIndexStart = index + 1; // increase count for each viable tah
+				switch (possibleTagName) {
+					case "portrait":
+						portraitUnset = false;
+						// todo: implement a way to match the appropriate portrait based on the metatag
+						// from https://stackoverflow.com/a/17381004/17836168
+						dialogDetails.portraitType =
+							PortraitType[possibleTagPair[1].trim() as keyof typeof PortraitType];
+						if (shouldDebug) {
+							console.log(
+								"Portrait detected:",
+								possibleTagPair[1],
+								" => ",
+								dialogDetails.portraitType
+							);
+						}
+						break;
+				}
+			}
+
+			// portrait check
+			if (portraitUnset) {
+				console.warn(`Portrait missing for node: ${dialogDetails.dialogId}`);
+				dialogDetails.portraitType = PortraitType.AresNeutral;
+			}
+
+			// remove the metatags from the body
+			const unprocessedContent = bodyList.slice(contentIndexStart).join("\n");
+			const contentPair = unprocessedContent.split("<ChoiceBreak>");
+
+			if (contentPair.length === 2) {
+				// parse for the choice names in the options
+				enum ChoiceParsingState {
+					Free, // detects for the next option
+					Line // previously detected an option, will try to detect for the next option
+				}
+
+				let parsingState: ChoiceParsingState = ChoiceParsingState.Free;
+				const currentChoiceDetail: ChoiceDetail = { jumpNode: "", name: "" };
+				const choiceList: ChoiceDetail[] = [];
+				let shouldSkipChoices = false;
+
+				const checkChoiceForSave = () => {
+					if (currentChoiceDetail.name !== "") {
+						choiceList.push({
+							name: currentChoiceDetail.name,
+							jumpNode: currentChoiceDetail.jumpNode
+						});
+					}
+				};
+
+				contentPair[1]
+					.trim()
+					.split("\n")
+					.filter((line) => {
+						const trimmedLine = line.trim();
+						if (shouldSkipChoices) {
+							return false;
+						}
+
+						if (trimmedLine.startsWith("// ignore the rest")) {
+							shouldSkipChoices = true;
+							return false;
+						}
+
+						return true;
+					})
+					.map((line) => {
+						const trimmedLine = line.trim();
+
+						switch (parsingState) {
+							case ChoiceParsingState.Free:
+								if (trimmedLine.startsWith("->")) {
+									// save previous choice
+									checkChoiceForSave();
+
+									// write start of new choice
+									currentChoiceDetail.name = trimmedLine.split(" ").pop()!;
+									parsingState = ChoiceParsingState.Line;
+								}
+								break;
+
+							case ChoiceParsingState.Line:
+								if (trimmedLine.startsWith("<<jump")) {
+									const jumpNode = trimmedLine.split(" ").pop()!;
+									currentChoiceDetail.jumpNode = jumpNode.slice(0, jumpNode.length - 2); // remove ">>"
+									parsingState = ChoiceParsingState.Free;
+								}
+								break;
+
+							default:
+								console.error(`Unimplemented parsing state: ${parsingState}`);
+								break;
+						}
+					});
+				checkChoiceForSave();
+
+				dialogDetails.textContent = contentPair[0];
+
+				// handle choice start tags to a href
+				choiceList.forEach((choiceDetail) => {
+					const keyword = `<choice ${choiceDetail.name}>`;
+					while (dialogDetails.textContent.includes(keyword)) {
+						dialogDetails.textContent = dialogDetails.textContent.replace(
+							keyword,
+							`<a class="choice-${choiceDetail.jumpNode} dialog-choice" title="Click to continue the dialog">`
+						);
+					}
+				});
+
+				const externalKeyword = "<a href=";
+				while (dialogDetails.textContent.includes(externalKeyword)) {
+					dialogDetails.textContent = dialogDetails.textContent.replace(
+						externalKeyword,
+						'<a target="_blank" class="external-link" href='
+					); // make all external tags with a custom cursor
+				}
+
+				const choiceEndKeyword = "</choice>";
+				while (dialogDetails.textContent.includes(choiceEndKeyword)) {
+					dialogDetails.textContent = dialogDetails.textContent.replace(choiceEndKeyword, "</a>"); // convert all choice end tags to a tags
+				}
+			} else {
+				// assume only one which indicates it's choiceless
+				dialogDetails.textContent = unprocessedContent;
+			}
+
+			dialogDetailList.push(dialogDetails);
+		});
+
+		const dialogDetailToString = (detail: DialogDetail): string => {
+			if (detail.portraitType === undefined) {
+				detail.portraitType = PortraitType.AresNeutral;
+				console.error(`Missing portrait at dialog: ${detail.dialogId}`);
+				console.error(`It contains: ${detail.textContent}`);
+			}
+			return `		{
+			dialogId: "${detail.dialogId}",
+			portraitType: PortraitType.${detail.portraitType.toString()},
+			textContent: \`${detail.textContent}\`
+		},`;
+		};
+
+		const dialogDetailListToString = (detailList: DialogDetail[]): string => {
+			return detailList
+				.map((detail) => {
+					return dialogDetailToString(detail);
+				})
+				.join("\n");
+		};
+
+		// generate file
+		const filePathList = filePath.split(".");
+		const fileName = filePathList[filePathList.length - 2].split("/").pop();
+		const template = `// this file was generated by PineappleWeaver.ts
+// do not edit!
+			
+import type { DialogDetail } from "@turnipxenon/pineapple";
+import { dialogManager, PortraitType } from "@turnipxenon/pineapple";
+
+class _${fileName}Yarn {
+	dialogList: DialogDetail[] = [
+${dialogDetailListToString(dialogDetailList)}
+	];
+	
+	/* Remember to call DialogManager.subscribeToSetDialogChoice before calling this in Svelte */
+	setDialogTree = () => {
+		dialogManager.setDialogTree(this.dialogList);
+	};
+}
+
+export const ${fileName}Yarn = new _${fileName}Yarn();
+`;
+
+		const filePathSplit = filePath.split(".");
+		filePathSplit.pop();
+		const generatedPath = `${filePathSplit.join(".")}Yarn.ts`;
+		fs.writeFileSync(generatedPath, template);
+	});
+
+	console.info("Finish converting all yarn files!");
+};
+
+pineappleWeaverRun();

package/src/lib/scripts/util/FileManagement.ts

@@ -0,0 +1,38 @@
+import fs from "fs";
+
+// from https://stackoverflow.com/a/26832802
+export const getDirectories = (path: string): string[] => {
+	return fs
+		.readdirSync(path)
+		.filter(function (file) {
+			return fs.statSync(path + "/" + file).isDirectory();
+		})
+		.map((value: string) => {
+			return path + "/" + value;
+		});
+};
+
+/**
+ * Get all files underneath a path. The results can be filtered!
+ * @param path: path where to start finding all files underneath
+ * @param filter?: optional path filter
+ */
+export const getAllFiles = (path: string, filter?: (path: string) => boolean): string[] => {
+	const contentList = fs.readdirSync(path);
+	const fileList: string[] = [];
+
+	contentList.forEach((content) => {
+		const contentName = path + "/" + content;
+		const stat = fs.statSync(contentName);
+		if (stat.isDirectory()) {
+			fileList.push(...getAllFiles(contentName, filter));
+		} else {
+			// takes advantage of lazy evaluation
+			if (filter === undefined || filter(contentName)) {
+				fileList.push(contentName);
+			}
+		}
+	});
+
+	return fileList;
+};

package/src/lib/scripts/util/ManualCheck.ts

@@ -0,0 +1,32 @@
+import { getAllFiles } from "$lib/scripts/util/FileManagement";
+import { readFileSync } from "fs";
+
+/**
+ * checks for manual dialog tree sets in all files except for *Yarn.ts and DialogManager.ts
+ */
+const checkManualDialogSet = () => {
+	// todo:
+	const BASE_PATH = "./src/routes";
+	getAllFiles(BASE_PATH, (path: string): boolean => {
+		// from: https://stackoverflow.com/a/424006/17836168
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		const filename: string = path.split("\\").pop().split("/").pop();
+
+		const isNonYarn = !filename.endsWith("Yarn.ts");
+
+		// takes advantage of lazy evaluation
+		// is non-yarn and is not exempted
+		return isNonYarn && !["DialogManager.ts"].includes(filename);
+	}).map((filePath) => {
+		// todo:
+		const fileContent = readFileSync(filePath, "utf-8");
+		if (fileContent.includes("dialogManager.setDialogTree")) {
+			console.warn(`Warning! Manual dialog tree set found in path: ${filePath}`);
+		}
+	});
+};
+
+export const runAll = () => {
+	checkManualDialogSet();
+};

package/src/lib/scripts/util/ManualCheckRun.ts

@@ -0,0 +1,7 @@
+import { runAll } from "$lib/scripts/util/ManualCheck";
+
+/**
+ * todo: Integrate manual check into CI check#137
+ * ISSUE #137 https://github.com/TurnipXenon/pineapple/issues/137
+ */
+runAll();

package/src/lib/store.ts

@@ -0,0 +1,18 @@
+import { writable } from "svelte/store";
+
+/**
+ * Enables background in main layout
+ *
+ * @example
+ * When updating to false, remember to restore the value to true, our default value, onDestroy.
+ * Avoid async to prevent weird flashes of updates!
+ * ```
+ * import {enableBackground} from "$lib/store.ts";
+ * enableBackground.update(() => false);
+ *
+ * onDestroy(() => {
+ *     enableBackground.update(() =>  true);
+ * });
+ * ```
+ */
+export const enableBackground = writable(true);

package/src/lib/styles/DefaultGridContainer.css

@@ -0,0 +1,61 @@
+.default-grid-container-title-card {
+	max-width: calc(var(--default-card-max-width) + 32rem) !important;
+	width: 100%;
+	padding: 2rem !important;
+	text-align: center !important;
+}
+
+.default-grid-container {
+	width: 100%;
+	max-width: calc(var(--default-card-max-width) + 32rem);
+	padding-top: 4rem;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: flex-start;
+}
+
+.default-grid-container > .card,
+.default-grid-container > .lite-wrapper {
+	width: 22rem;
+	margin: clamp(0vw, 1vw, 1.5rem);
+}
+
+.default-grid-container div h3 {
+	margin: 0.5em;
+	text-align: center;
+	font-weight: bold;
+}
+
+.default-grid-container video {
+	padding: var(--theme-border-base);
+}
+
+.default-grid-container img {
+	padding: var(--theme-border-base);
+	width: 100%;
+}
+
+.links {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+}
+
+.card.tx-badge {
+	object-fit: scale-down;
+	padding: 0.5rem;
+}
+
+img.tx-badge,
+.card.tx-badge {
+	max-height: 5rem;
+	max-width: 6rem;
+	margin: 1rem;
+}
+
+.twitter-wrapper {
+	padding: 1rem;
+}

package/src/lib/theme.postcss

@@ -0,0 +1,107 @@
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: var(--color-text-500);
+	--theme-font-color-dark: var(--color-text-900);
+	--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 */
+	/* 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-400: 203 137 116; /* ⬅ #cb8974 */
+	--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 */
+}

package/src/lib/types/BlogBlurbMeta.ts

@@ -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: string[] = [];
+	publishDate = "";
+	lastUpdate = "";
+	previewSrc: any = "";
+	previewSrcScript = "";
+	previewAlt = "";
+	blogLink = "";
+}

package/src/lib/types/BreadcrumbData.ts

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

package/src/lib/types/pineapple_fiber/DialogDetail.ts

@@ -0,0 +1,7 @@
+import type { PortraitType } from "$lib/types/pineapple_fiber/PortraitType";
+
+export interface DialogDetail {
+	textContent: string;
+	dialogId?: string;
+	portraitType?: PortraitType;
+}

package/src/lib/types/pineapple_fiber/DialogState.ts

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

package/src/lib/types/pineapple_fiber/DialogVariableStore.ts

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

package/src/lib/types/pineapple_fiber/PortraitType.ts

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

package/src/lib/util/stable_random.ts

@@ -0,0 +1,16 @@
+export const generatedDailySeed = (): number => {
+	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: number): (() => number) => {
+	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/src/routes/+error.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { onDestroy } from "svelte";
+	import { dialogManager } from "$lib/components/dialog_manager/DialogManagerStore.ts";
+	import { ErrorYarn } from "./ErrorYarn";
+
+	ErrorYarn.setDialogTree();
+
+	onDestroy(() => {
+		dialogManager.setDialogToDefault();
+	});
+</script>
+
+<div class="card default-card">
+	<blockquote class="twitter-tweet">
+		<p dir="ltr" lang="en">
+			Going to be 96 years old showing this to the geriatric ward nurses my pushing the emergency help button and they
+			run in and i just show them this for the 30th time that day <a href="https://t.co/YqjP1Uox2Q"
+		>pic.twitter.com/YqjP1Uox2Q</a
+		>
+		</p>
+		&mdash; ᶻ 𝗓 𐰁 (@felidfang)<a href="https://twitter.com/felidfang/status/1325145574572744705?ref_src=twsrc%5Etfw"
+	>November 7, 2020</a
+	>
+	</blockquote>
+	<script async charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
+</div>

package/src/routes/+layout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import PinyaBaseLayout from "$lib/components/PineappleBaseLayout.svelte";
+	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
+</script>
+
+<svelte:head>
+	<title>{PUBLIC_CRINGE_USERNAME}</title>
+	<meta content="summary" name="Turnip time!" />
+	<meta content="@{PUBLIC_CRINGE_USERNAME}" name="twitter:site" />
+	<meta content="@{PUBLIC_CRINGE_USERNAME}" name="twitter:creator" />
+	<meta content="https://www.{PUBLIC_CRINGE_USERNAME}.com/" name="og:url" />
+	<meta content="{PUBLIC_CRINGE_USERNAME} | Home" name="og:title" />
+	<meta
+		content="I have no idea! Anyway... Hi! I don't know what I'm doing! Also check out my games!"
+		name="og:description"
+	/>
+	<meta content="https://www.{PUBLIC_CRINGE_USERNAME}.com/default-card.png" property="og:image" />
+</svelte:head>
+
+<PinyaBaseLayout>
+	<slot />
+</PinyaBaseLayout>
+