@turnipxenon/pineapple 2.4.27 → 2.4.29

package/.idea/workspace.xml

@@ -4,8 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Fix package main index">
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Fix dialog positioning&#10;&#10;Dialog positioning seemed to be broken when the styles from Seaweed moved to postcss, even if the dialog solely exists in Pineapple">
+      <change beforePath="$PROJECT_DIR$/src/lib/components/pineapple/PineappleBaseLayout.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/pineapple/PineappleBaseLayout.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/routes/(pineapple)/pineapple/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/(pineapple)/pineapple/+page.svelte" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -40,13 +41,14 @@
         <option value="+page.svelte" />
         <option value="OverrideableMeta" />
         <option value="index.ts" />
+        <option value="CSS File" />
       </list>
     </option>
   </component>
   <component name="Git.Settings">
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="main" />
+        <entry key="$PROJECT_DIR$" value="6265bc453ce0896e47aa5b4c13ed4923220ea380" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -80,32 +82,33 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "DefaultHtmlFileTemplate": "HTML File",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "git-widget-placeholder": "turnip/meta",
-    "ignore.virus.scanning.warn.message": "true",
-    "last_opened_file_path": "C:/Users/Pumpkin/Projects/Web/pineapple/src/routes/(seaweed)/portfolio/actual",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_interpreter_path": "node",
-    "nodejs_package_manager_path": "yarn",
-    "npm.build.executor": "Run",
-    "npm.dev (1).executor": "Run",
-    "npm.dev --open.executor": "Run",
-    "npm.dev offline.executor": "Run",
-    "npm.dev-offline.executor": "Run",
-    "npm.dev.executor": "Run",
-    "settings.editor.selected.configurable": "inlay.hints",
-    "ts.external.directory.path": "C:\\Users\\Pumpkin\\Projects\\Web\\pineapple\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;DefaultHtmlFileTemplate&quot;: &quot;HTML File&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;turnip/meta&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Pumpkin/Projects/Web/pineapple/src/routes/(seaweed)/portfolio/actual&quot;,
+    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_interpreter_path&quot;: &quot;node&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;yarn&quot;,
+    &quot;npm.build.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev (1).executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev --open.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev offline.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev-offline.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;inlay.hints&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Pumpkin\\Projects\\Web\\pineapple\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(seaweed)\portfolio\actual" />
@@ -115,11 +118,11 @@
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\about" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\dialog_overlay" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\overrideable_meta" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\types" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\template\Seaweed" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\about" />
     </key>
     <key name="es6.move.members.recent.items">
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\types\RootLayoutProps.ts" />
@@ -156,9 +159,9 @@
       <list>
         <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.dev-offline" />
-        <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.dev-offline" />
         <item itemvalue="npm.dev --open" />
+        <item itemvalue="npm.dev-offline" />
       </list>
     </recent_temporary>
   </component>
@@ -225,15 +228,8 @@
       <workItem from="1711115902471" duration="148000" />
       <workItem from="1711116299202" duration="1291000" />
       <workItem from="1711179012668" duration="14397000" />
-      <workItem from="1711206704484" duration="4312000" />
-    </task>
-    <task id="LOCAL-00045" summary="Solve videos not dynamically loading">
-      <option name="closed" value="true" />
-      <created>1710203392528</created>
-      <option name="number" value="00045" />
-      <option name="presentableId" value="LOCAL-00045" />
-      <option name="project" value="LOCAL" />
-      <updated>1710203392528</updated>
+      <workItem from="1711206704484" duration="9686000" />
+      <workItem from="1711323704651" duration="348000" />
     </task>
     <task id="LOCAL-00046" summary="Remove unnecessary iframe requests">
       <option name="closed" value="true" />
@@ -619,7 +615,15 @@
       <option name="project" value="LOCAL" />
       <updated>1711210905814</updated>
     </task>
-    <option name="localTasksCounter" value="94" />
+    <task id="LOCAL-00094" summary="Fix dialog positioning&#10;&#10;Dialog positioning seemed to be broken when the styles from Seaweed moved to postcss, even if the dialog solely exists in Pineapple">
+      <option name="closed" value="true" />
+      <created>1711214822227</created>
+      <option name="number" value="00094" />
+      <option name="presentableId" value="LOCAL-00094" />
+      <option name="project" value="LOCAL" />
+      <updated>1711214822227</updated>
+    </task>
+    <option name="localTasksCounter" value="95" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -657,7 +661,7 @@
                   <entry key="branch">
                     <value>
                       <list>
-                        <option value="turnip/dev" />
+                        <option value="turnip/meta" />
                       </list>
                     </value>
                   </entry>
@@ -677,7 +681,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Add dismissable toast" />
     <MESSAGE value="Adjust default toast body styling and add shadow to toast" />
     <MESSAGE value="Clean up todos" />
     <MESSAGE value="Add default PR template" />
@@ -702,6 +705,7 @@
     <MESSAGE value="Hide advanced settings when letChaos is true" />
     <MESSAGE value="Add OverridableMeta component" />
     <MESSAGE value="Fix package main index" />
-    <option name="LAST_COMMIT_MESSAGE" value="Fix package main index" />
+    <MESSAGE value="Fix dialog positioning&#10;&#10;Dialog positioning seemed to be broken when the styles from Seaweed moved to postcss, even if the dialog solely exists in Pineapple" />
+    <option name="LAST_COMMIT_MESSAGE" value="Fix dialog positioning&#10;&#10;Dialog positioning seemed to be broken when the styles from Seaweed moved to postcss, even if the dialog solely exists in Pineapple" />
   </component>
 </project>

package/.svelte-kit/__package__/components/{DialogOverlay.svelte → dialog_overlay/DialogOverlay.svelte}

@@ -1,7 +1,7 @@
-<script>import AresHappy from "../assets/characters/ares/ares_happy.webp";
+<script>import AresHappy from "../../assets/characters/ares/ares_happy.webp";
 import { onMount } from "svelte";
-import { dialogManager } from "./dialog_manager/DialogManagerStore";
-import { DialogState } from "../types/pineapple_fiber/DialogState";
+import { dialogManager } from "../dialog_manager/DialogManagerStore";
+import { DialogState } from "../../types/pineapple_fiber/DialogState";
 let currentMessage = "";
 dialogManager.currentMessage.subscribe((value) => {
   currentMessage = value;
@@ -35,7 +35,9 @@ const onDialogClick = () => {
      hidden={isHidden}
      style="--hidePercentWidth: -{hidePercent}vw;
             --hidePercentHeight: {hidePercent}vh;">
-	<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
+	<div class="dialog-portrait-container">
+		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
+	</div>
 	<div class="card dialog-box variant-ghost-primary" on:click={onDialogClick}>
 		<div class="card dialog-name">
 			<p><b>Turnip</b></p>
@@ -53,8 +55,12 @@ const onDialogClick = () => {
         z-index: 10;
     }
 
-    .dialog-elements > img {
-        transform: translateX(var(--hidePercentWidth));
+    .dialog-elements:dir(ltr) {
+        left: 0;
+    }
+
+    .dialog-elements:dir(rtl) {
+        right: 0;
     }
 
     .dialog-elements > div {
@@ -81,16 +87,40 @@ const onDialogClick = () => {
         padding-right: 1rem;
         padding-top: 0.5rem;
         position: fixed;
+}
 
+    .dialog-name:dir(ltr) {
         /* for centering vertically */
         transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
-}
+    }
 
-    .dialog-portrait {
+    .dialog-name:dir(rtl) {
+        /* for centering vertically */
+        transform: translateX(calc(clamp(0em, 5vw - 0.5em, 1em) * -1)) translateY(-50%);
+    }
+
+    .dialog-portrait-container {
         position: fixed;
         bottom: 0;
-        left: clamp(-4rem, calc(5vw - 5em), 0rem);
         height: clamp(30rem, 75vw, 40rem);
         width: auto;
     }
+
+    .dialog-portrait-container:dir(ltr) {
+        transform: translateX(var(--hidePercentWidth));
+        left: clamp(-4rem, calc(5vw - 5em), 0rem);
+    }
+
+    .dialog-portrait-container:dir(rtl) {
+        transform: translateX(calc(var(--hidePercentWidth) * -1));
+        right: clamp(-4rem, calc(5vw - 5em), 0rem);
+    }
+
+    .dialog-portrait {
+        height: 100%;
+    }
+
+    .dialog-portrait:dir(rtl) {
+        transform: scaleX(-1);
+    }
 </style>

package/.svelte-kit/__package__/components/overrideable_meta/OverridableMeta.svelte

@@ -1,21 +1,21 @@
-<!--
-OverridableMeta is convenient Svelte component allowing each page to override the head meta values
-based on their +page.ts.
-
-For example:
-<code>
-// +page.ts
-
-import type { OverridableMetaProps } from "../..";
-
-export const load = async (): Promise<OverridableMetaProps> => {
-	return {
-		title: "CustomTitle",
-	};
-};
-</code>
--->
-
+<!--
+OverridableMeta is convenient Svelte component allowing each page to override the head meta values
+based on their +page.ts.
+
+For example:
+<code>
+// +page.ts
+
+import type { OverridableMetaProps } from "../..";
+
+export const load = async (): Promise<OverridableMetaProps> => {
+	return {
+		title: "CustomTitle",
+	};
+};
+</code>
+-->
+
 <script>import WebThumbnailImage from "../../assets/placeholder/placeholder_circle.png";
 export let rootUrl = "http://localhost:5173";
 export let title = "Welcome to my portfolio";
@@ -38,14 +38,14 @@ page.subscribe((p) => {
   data.ogDescription = pageData.ogDescription ?? ogDescription;
   data.ogImage = pageData.ogImage ?? ogImage;
 });
-</script>
-
-<svelte:head>
-	<meta charset="utf-8" />
-	<title>{data.title}</title>
-	<meta name="twitter:card" content="summary" />
-	<meta property="og:url" content={data.ogUrl} />
-	<meta property="og:title" content={data.ogTitle} />
-	<meta property="og:description" content={data.ogDescription} />
-	<meta property="og:image" content={data.ogImage} />
-</svelte:head>
+</script>
+
+<svelte:head>
+	<meta charset="utf-8" />
+	<title>{data.title}</title>
+	<meta name="twitter:card" content="summary" />
+	<meta property="og:url" content={data.ogUrl} />
+	<meta property="og:title" content={data.ogTitle} />
+	<meta property="og:description" content={data.ogDescription} />
+	<meta property="og:image" content={data.ogImage} />
+</svelte:head>

package/.svelte-kit/__package__/components/pineapple/PineappleBaseLayout.svelte

@@ -8,7 +8,7 @@ import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
 import CloseIcon from "../../assets/icons/close.svg";
 import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
 import Toast from "./toast/Toast.svelte";
-import DialogOverlay from "../DialogOverlay.svelte";
+import DialogOverlay from "../dialog_overlay/DialogOverlay.svelte";
 import { fade } from "svelte/transition";
 let pages = [];
 const updateBreadcrumb = (pathname) => {
@@ -269,6 +269,7 @@ enableDialogueOverlay.set(showDialogByDefault);
         bottom: var(--fab-margin);
         width: 4em;
         border-radius: 50%;
+		    z-index: 100;
     }
 
     .fab > img {

package/.svelte-kit/generated/server/internal.js

@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width\" />\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\" data-theme=\"crimson\">\n\t\t<div style=\"display: contents\" class=\"h-full overflow-hidden\">" + body + "</div>\n\t</body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "10fknr1"
+	version_hash: "h76do5"
 };
 
 export async function get_hooks() {

package/dist/components/{DialogOverlay.svelte → dialog_overlay/DialogOverlay.svelte}

@@ -1,7 +1,7 @@
-<script>import AresHappy from "../assets/characters/ares/ares_happy.webp";
+<script>import AresHappy from "../../assets/characters/ares/ares_happy.webp";
 import { onMount } from "svelte";
-import { dialogManager } from "./dialog_manager/DialogManagerStore";
-import { DialogState } from "../types/pineapple_fiber/DialogState";
+import { dialogManager } from "../dialog_manager/DialogManagerStore";
+import { DialogState } from "../../types/pineapple_fiber/DialogState";
 let currentMessage = "";
 dialogManager.currentMessage.subscribe((value) => {
   currentMessage = value;
@@ -35,7 +35,9 @@ const onDialogClick = () => {
      hidden={isHidden}
      style="--hidePercentWidth: -{hidePercent}vw;
             --hidePercentHeight: {hidePercent}vh;">
-	<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
+	<div class="dialog-portrait-container">
+		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
+	</div>
 	<div class="card dialog-box variant-ghost-primary" on:click={onDialogClick}>
 		<div class="card dialog-name">
 			<p><b>Turnip</b></p>
@@ -53,8 +55,12 @@ const onDialogClick = () => {
         z-index: 10;
     }
 
-    .dialog-elements > img {
-        transform: translateX(var(--hidePercentWidth));
+    .dialog-elements:dir(ltr) {
+        left: 0;
+    }
+
+    .dialog-elements:dir(rtl) {
+        right: 0;
     }
 
     .dialog-elements > div {
@@ -81,16 +87,40 @@ const onDialogClick = () => {
         padding-right: 1rem;
         padding-top: 0.5rem;
         position: fixed;
+}
 
+    .dialog-name:dir(ltr) {
         /* for centering vertically */
         transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
-}
+    }
 
-    .dialog-portrait {
+    .dialog-name:dir(rtl) {
+        /* for centering vertically */
+        transform: translateX(calc(clamp(0em, 5vw - 0.5em, 1em) * -1)) translateY(-50%);
+    }
+
+    .dialog-portrait-container {
         position: fixed;
         bottom: 0;
-        left: clamp(-4rem, calc(5vw - 5em), 0rem);
         height: clamp(30rem, 75vw, 40rem);
         width: auto;
     }
+
+    .dialog-portrait-container:dir(ltr) {
+        transform: translateX(var(--hidePercentWidth));
+        left: clamp(-4rem, calc(5vw - 5em), 0rem);
+    }
+
+    .dialog-portrait-container:dir(rtl) {
+        transform: translateX(calc(var(--hidePercentWidth) * -1));
+        right: clamp(-4rem, calc(5vw - 5em), 0rem);
+    }
+
+    .dialog-portrait {
+        height: 100%;
+    }
+
+    .dialog-portrait:dir(rtl) {
+        transform: scaleX(-1);
+    }
 </style>

package/dist/components/overrideable_meta/OverridableMeta.svelte

@@ -1,21 +1,21 @@
-<!--
-OverridableMeta is convenient Svelte component allowing each page to override the head meta values
-based on their +page.ts.
-
-For example:
-<code>
-// +page.ts
-
-import type { OverridableMetaProps } from "../..";
-
-export const load = async (): Promise<OverridableMetaProps> => {
-	return {
-		title: "CustomTitle",
-	};
-};
-</code>
--->
-
+<!--
+OverridableMeta is convenient Svelte component allowing each page to override the head meta values
+based on their +page.ts.
+
+For example:
+<code>
+// +page.ts
+
+import type { OverridableMetaProps } from "../..";
+
+export const load = async (): Promise<OverridableMetaProps> => {
+	return {
+		title: "CustomTitle",
+	};
+};
+</code>
+-->
+
 <script>import WebThumbnailImage from "../../assets/placeholder/placeholder_circle.png";
 export let rootUrl = "http://localhost:5173";
 export let title = "Welcome to my portfolio";
@@ -38,14 +38,14 @@ page.subscribe((p) => {
   data.ogDescription = pageData.ogDescription ?? ogDescription;
   data.ogImage = pageData.ogImage ?? ogImage;
 });
-</script>
-
-<svelte:head>
-	<meta charset="utf-8" />
-	<title>{data.title}</title>
-	<meta name="twitter:card" content="summary" />
-	<meta property="og:url" content={data.ogUrl} />
-	<meta property="og:title" content={data.ogTitle} />
-	<meta property="og:description" content={data.ogDescription} />
-	<meta property="og:image" content={data.ogImage} />
-</svelte:head>
+</script>
+
+<svelte:head>
+	<meta charset="utf-8" />
+	<title>{data.title}</title>
+	<meta name="twitter:card" content="summary" />
+	<meta property="og:url" content={data.ogUrl} />
+	<meta property="og:title" content={data.ogTitle} />
+	<meta property="og:description" content={data.ogDescription} />
+	<meta property="og:image" content={data.ogImage} />
+</svelte:head>

package/dist/components/pineapple/PineappleBaseLayout.svelte

@@ -8,7 +8,7 @@ import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
 import CloseIcon from "../../assets/icons/close.svg";
 import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
 import Toast from "./toast/Toast.svelte";
-import DialogOverlay from "../DialogOverlay.svelte";
+import DialogOverlay from "../dialog_overlay/DialogOverlay.svelte";
 import { fade } from "svelte/transition";
 let pages = [];
 const updateBreadcrumb = (pathname) => {
@@ -269,6 +269,7 @@ enableDialogueOverlay.set(showDialogByDefault);
         bottom: var(--fab-margin);
         width: 4em;
         border-radius: 50%;
+		    z-index: 100;
     }
 
     .fab > img {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.27",
+  "version": "2.4.29",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",

package/src/lib/components/{DialogOverlay.svelte → dialog_overlay/DialogOverlay.svelte}

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import AresHappy from "$lib/assets/characters/ares/ares_happy.webp";
+	import AresHappy from "$pkg/assets/characters/ares/ares_happy.webp";
 	import { onMount } from "svelte";
-
-	import { dialogManager } from "$lib/components/dialog_manager/DialogManagerStore";
+	import { dialogManager } from "$pkg/components/dialog_manager/DialogManagerStore";
 	import { DialogState } from "$pkg/types/pineapple_fiber/DialogState";
 
 	let currentMessage = "";
@@ -43,7 +42,9 @@
      hidden={isHidden}
      style="--hidePercentWidth: -{hidePercent}vw;
             --hidePercentHeight: {hidePercent}vh;">
-	<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
+	<div class="dialog-portrait-container">
+		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
+	</div>
 	<div class="card dialog-box variant-ghost-primary" on:click={onDialogClick}>
 		<div class="card dialog-name">
 			<p><b>Turnip</b></p>
@@ -61,8 +62,12 @@
         z-index: 10;
     }
 
-    .dialog-elements > img {
-        transform: translateX(var(--hidePercentWidth));
+    .dialog-elements:dir(ltr) {
+        left: 0;
+    }
+
+    .dialog-elements:dir(rtl) {
+        right: 0;
     }
 
     .dialog-elements > div {
@@ -87,16 +92,40 @@
     .dialog-name {
         @apply pt-2 px-4;
         position: fixed;
+    }
 
+    .dialog-name:dir(ltr) {
         /* for centering vertically */
         transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
     }
 
-    .dialog-portrait {
+    .dialog-name:dir(rtl) {
+        /* for centering vertically */
+        transform: translateX(calc(clamp(0em, 5vw - 0.5em, 1em) * -1)) translateY(-50%);
+    }
+
+    .dialog-portrait-container {
         position: fixed;
         bottom: 0;
-        left: clamp(-4rem, calc(5vw - 5em), 0rem);
         height: clamp(30rem, 75vw, 40rem);
         width: auto;
     }
+
+    .dialog-portrait-container:dir(ltr) {
+        transform: translateX(var(--hidePercentWidth));
+        left: clamp(-4rem, calc(5vw - 5em), 0rem);
+    }
+
+    .dialog-portrait-container:dir(rtl) {
+        transform: translateX(calc(var(--hidePercentWidth) * -1));
+        right: clamp(-4rem, calc(5vw - 5em), 0rem);
+    }
+
+    .dialog-portrait {
+        height: 100%;
+    }
+
+    .dialog-portrait:dir(rtl) {
+        transform: scaleX(-1);
+    }
 </style>

package/src/lib/components/overrideable_meta/OverridableMeta.svelte

@@ -1,56 +1,56 @@
-<!--
-OverridableMeta is convenient Svelte component allowing each page to override the head meta values
-based on their +page.ts.
-
-For example:
-<code>
-// +page.ts
-
-import type { OverridableMetaProps } from "$pkg";
-
-export const load = async (): Promise<OverridableMetaProps> => {
-	return {
-		title: "CustomTitle",
-	};
-};
-</code>
--->
-
-<script lang="ts">
-	import WebThumbnailImage from "$pkg/assets/placeholder/placeholder_circle.png";
-
-	export let rootUrl = "http://localhost:5173";
-	export let title = "Welcome to my portfolio";
-	export let ogTitle = "Turnip time!";
-	export let ogDescription = "Welcome to Turnip's test portfolio";
-	export let ogImage = WebThumbnailImage;
-
-	import { page } from "$app/stores";
-	import type { OverridableMetaProps } from "./OverridableMetaProps";
-
-	const data: OverridableMetaProps = {
-		title: "Welcome to my portfolio",
-		ogUrl: "https://www.crouton.net/",
-		ogTitle: "Turnip time!",
-		ogDescription: "Welcome to Turnip's test portfolio",
-		ogImage: WebThumbnailImage
-	};
-	page.subscribe(p => {
-		const pageData: OverridableMetaProps = p.data;
-		data.title = pageData.title ?? title;
-		data.ogUrl = `${rootUrl}${p.url.pathname}`;
-		data.ogTitle = pageData.ogTitle ?? ogTitle;
-		data.ogDescription = pageData.ogDescription ?? ogDescription;
-		data.ogImage = pageData.ogImage ?? ogImage;
-	});
-</script>
-
-<svelte:head>
-	<meta charset="utf-8" />
-	<title>{data.title}</title>
-	<meta name="twitter:card" content="summary" />
-	<meta property="og:url" content={data.ogUrl} />
-	<meta property="og:title" content={data.ogTitle} />
-	<meta property="og:description" content={data.ogDescription} />
-	<meta property="og:image" content={data.ogImage} />
-</svelte:head>
+<!--
+OverridableMeta is convenient Svelte component allowing each page to override the head meta values
+based on their +page.ts.
+
+For example:
+<code>
+// +page.ts
+
+import type { OverridableMetaProps } from "$pkg";
+
+export const load = async (): Promise<OverridableMetaProps> => {
+	return {
+		title: "CustomTitle",
+	};
+};
+</code>
+-->
+
+<script lang="ts">
+	import WebThumbnailImage from "$pkg/assets/placeholder/placeholder_circle.png";
+
+	export let rootUrl = "http://localhost:5173";
+	export let title = "Welcome to my portfolio";
+	export let ogTitle = "Turnip time!";
+	export let ogDescription = "Welcome to Turnip's test portfolio";
+	export let ogImage = WebThumbnailImage;
+
+	import { page } from "$app/stores";
+	import type { OverridableMetaProps } from "./OverridableMetaProps";
+
+	const data: OverridableMetaProps = {
+		title: "Welcome to my portfolio",
+		ogUrl: "https://www.crouton.net/",
+		ogTitle: "Turnip time!",
+		ogDescription: "Welcome to Turnip's test portfolio",
+		ogImage: WebThumbnailImage
+	};
+	page.subscribe(p => {
+		const pageData: OverridableMetaProps = p.data;
+		data.title = pageData.title ?? title;
+		data.ogUrl = `${rootUrl}${p.url.pathname}`;
+		data.ogTitle = pageData.ogTitle ?? ogTitle;
+		data.ogDescription = pageData.ogDescription ?? ogDescription;
+		data.ogImage = pageData.ogImage ?? ogImage;
+	});
+</script>
+
+<svelte:head>
+	<meta charset="utf-8" />
+	<title>{data.title}</title>
+	<meta name="twitter:card" content="summary" />
+	<meta property="og:url" content={data.ogUrl} />
+	<meta property="og:title" content={data.ogTitle} />
+	<meta property="og:description" content={data.ogDescription} />
+	<meta property="og:image" content={data.ogImage} />
+</svelte:head>

package/src/lib/components/overrideable_meta/OverridableMetaProps.ts

@@ -1,7 +1,7 @@
-export interface OverridableMetaProps {
-	title?: string;
-	ogUrl?: string;
-	ogTitle?: string;
-	ogDescription?: string;
-	ogImage?: string;
-}
+export interface OverridableMetaProps {
+	title?: string;
+	ogUrl?: string;
+	ogTitle?: string;
+	ogDescription?: string;
+	ogImage?: string;
+}

package/src/lib/components/overrideable_meta/index.ts

@@ -1,4 +1,4 @@
-// noinspection JSUnusedGlobalSymbols
-
-export { default as OverridableMeta } from "./OverridableMeta.svelte";
-export * from "./OverridableMetaProps";
+// noinspection JSUnusedGlobalSymbols
+
+export { default as OverridableMeta } from "./OverridableMeta.svelte";
+export * from "./OverridableMetaProps";

package/src/lib/components/pineapple/PineappleBaseLayout.svelte

@@ -17,7 +17,7 @@
 	import CloseIcon from "$pkg/assets/icons/close.svg";
 	import { dialogManager, enableDialogueOverlay } from "$pkg/components/dialog_manager/DialogManagerStore";
 	import Toast from "$pkg/components/pineapple/toast/Toast.svelte";
-	import DialogOverlay from "$pkg/components/DialogOverlay.svelte";
+	import DialogOverlay from "$pkg/components/dialog_overlay/DialogOverlay.svelte";
 	import { fade } from "svelte/transition";
 	// todo: clean up all these imports!
 
@@ -201,6 +201,7 @@
         bottom: var(--fab-margin);
         width: 4em;
         border-radius: 50%;
+		    z-index: 100;
     }
 
     .fab > img {

package/src/routes/(pineapple)/pineapple/+page.svelte

@@ -26,24 +26,28 @@
 	};
 </script>
 
-<Card>
-	<div slot="content" class="default-card">
-		<button
-			class="btn variant-filled-secondary"
-			on:click={() => {
+<div class="pineapple-container">
+	<Card>
+		<div slot="content" class="default-card">
+			<button
+				class="btn variant-filled-secondary"
+				on:click={() => {
 			showComponentInToast({componentAndProps: {component: TestCard, props: undefined}});
 		}}><h3>Test custom toast</h3></button>
-		<button
-			class="btn variant-filled-secondary"
-			on:click={() => {
+			<button
+				class="btn variant-filled-secondary"
+				on:click={() => {
 			showTextInToast(`${testingQueueNumber} ${testingRandomPhrases[testingQueueNumber]}`);
 			testingQueueNumber = (testingQueueNumber + 1) % testingRandomPhrases.length;
 		}}><h3>Handy toast</h3></button>
-		<button
-			class="btn variant-filled-secondary"
-			on:click={onTestDialogClick}><h3>Test dialog</h3></button>
-	</div>
-</Card>
+			<button
+				class="btn variant-filled-secondary"
+				on:click={onTestDialogClick}><h3>Test dialog</h3></button>
+		</div>
+	</Card>
+	<Card><h1 class="filler" slot="content">Card</h1></Card>
+	<Card><h1 class="filler" slot="content">Card</h1></Card>
+</div>
 
 <style lang="postcss">
     .default-card {
@@ -51,4 +55,13 @@
         flex-wrap: wrap;
         gap: 2em;
     }
+
+    .pineapple-container {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .filler {
+        padding: 2em;
+    }
 </style>

package/src/routes/(pineapple)/pineapple/+page.ts

@@ -1,8 +1,8 @@
-import type { OverridableMetaProps } from "$pkg/components/overrideable_meta/OverridableMetaProps";
-
-export const load = async (): Promise<OverridableMetaProps> => {
-	return {
-		title: "Pineapple",
-		ogTitle: "Pineapple"
-	};
-};
+import type { OverridableMetaProps } from "$pkg/components/overrideable_meta/OverridableMetaProps";
+
+export const load = async (): Promise<OverridableMetaProps> => {
+	return {
+		title: "Pineapple",
+		ogTitle: "Pineapple"
+	};
+};

package/src/routes/(seaweed)/portfolio/+page.ts

@@ -1,8 +1,8 @@
-import type { OverridableMetaProps } from "$pkg/components/overrideable_meta/OverridableMetaProps";
-
-export const load = async (): Promise<OverridableMetaProps> => {
-	return {
-		title: "Niko",
-		ogTitle: "Niko"
-	};
-};
+import type { OverridableMetaProps } from "$pkg/components/overrideable_meta/OverridableMetaProps";
+
+export const load = async (): Promise<OverridableMetaProps> => {
+	return {
+		title: "Niko",
+		ogTitle: "Niko"
+	};
+};