@turnipxenon/pineapple 2.4.52 → 2.4.53

package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte

@@ -90,120 +90,120 @@ const removeEntry = (entry, group) => {
 };
 const allDefaultEntries = Array.from(GetAllEntryFromGlobal().keys());
 console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
-</script>
-
-<h3>Site ordering</h3>
-<blockquote>Sorry! This part of the website is still WIP, but here it is anyway. As long as it functions</blockquote>
-
-<!-- formatting: group1:entry1|entry2,group2:entry3
- : <= separates the group header, the entries, and the class
- | <= separates each entries
- , <= separates each group
- -->
-<div class="advanced-setting-list">
-	<!-- todo: we might have to extract this into it's own component -->
-	<!-- todo: NOW!!! -->
-	{#each seaweedEntries as group, groupIndex}
-		<div>
-			<div>
-				<button class="editable-button" on:click={removeGroup(group)}>X</button>
-				<!-- todo: move group up or down -->
-				<button class="editable-button" on:click={swapGroups(groupIndex, true)}>^</button>
-				<button class="editable-button" on:click={swapGroups(groupIndex, false)}>v</button>
-				{group.name}
-			</div>
-			<div class="advanced-setting-list card">
-				{#each group.items as entry, entryIndex}
-					<div class="editable-entry">
-						<button on:click={removeEntry(entry, group)}>-</button>
-						<button on:click={swapEntry(entryIndex, group, true)}>^</button>
-						<button on:click={swapEntry(entryIndex, group, false)}>v</button>
-						{entry.name}
-					</div>
-				{/each}
-			</div>
-
-			<ComboBoxWithButton stringItems={allDefaultEntries}
-			                    onClick={addEntry(group)}></ComboBoxWithButton>
-
-		</div>
-	{/each}
-</div>
-
-<style>
-    .advanced-setting-list {
-        display: flex;
-        flex-direction: column;
-    }
-
-    :is(.dark .editable-entry > button),:is(.dark  .editable-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-
-    .editable-entry > button:disabled, .editable-button:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-    .editable-entry > button:disabled:hover, .editable-button:disabled:hover {
-        --tw-brightness: brightness(1);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .editable-entry > button:disabled:active, .editable-button:disabled:active {
-        --tw-scale-x: 1;
-        --tw-scale-y: 1;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-    .editable-entry > button, .editable-button {
-        font-size: 1rem;
-        line-height: 1.5rem;
-        padding-left: 1.25rem;
-        padding-right: 1.25rem;
-        padding-top: 9px;
-        padding-bottom: 9px;
-        white-space: nowrap;
-        text-align: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        border-radius: var(--theme-rounded-base);
-}
-
-    .editable-entry > button > :not([hidden]) ~ :not([hidden]), .editable-button > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-    .editable-entry > button:hover, .editable-button:hover {
-        --tw-brightness: brightness(1.15);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .editable-entry > button:active, .editable-button:active {
-        --tw-scale-x: 95%;
-        --tw-scale-y: 95%;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-        --tw-brightness: brightness(.9);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .editable-entry > button, .editable-button {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-
-    :is(.dark .editable-entry > button),:is(.dark  .editable-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-</style>
+</script>
+
+<h3>Site ordering</h3>
+<blockquote>Sorry! This part of the website is still WIP, but here it is anyway. As long as it functions</blockquote>
+
+<!-- formatting: group1:entry1|entry2,group2:entry3
+ : <= separates the group header, the entries, and the class
+ | <= separates each entries
+ , <= separates each group
+ -->
+<div class="advanced-setting-list">
+	<!-- todo: we might have to extract this into it's own component -->
+	<!-- todo: NOW!!! -->
+	{#each seaweedEntries as group, groupIndex}
+		<div>
+			<div>
+				<button class="editable-button" on:click={removeGroup(group)}>X</button>
+				<!-- todo: move group up or down -->
+				<button class="editable-button" on:click={swapGroups(groupIndex, true)}>^</button>
+				<button class="editable-button" on:click={swapGroups(groupIndex, false)}>v</button>
+				{group.name}
+			</div>
+			<div class="advanced-setting-list card">
+				{#each group.items as entry, entryIndex}
+					<div class="editable-entry">
+						<button on:click={removeEntry(entry, group)}>-</button>
+						<button on:click={swapEntry(entryIndex, group, true)}>^</button>
+						<button on:click={swapEntry(entryIndex, group, false)}>v</button>
+						{entry.name}
+					</div>
+				{/each}
+			</div>
+
+			<ComboBoxWithButton stringItems={allDefaultEntries}
+			                    onClick={addEntry(group)}></ComboBoxWithButton>
+
+		</div>
+	{/each}
+</div>
+
+<style>
+    .advanced-setting-list {
+        display: flex;
+        flex-direction: column;
+    }
+
+    :is(.dark .editable-entry > button),:is(.dark  .editable-button) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-primary));
+}
+
+    .editable-entry > button:disabled, .editable-button:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+    .editable-entry > button:disabled:hover, .editable-button:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .editable-entry > button:disabled:active, .editable-button:disabled:active {
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+    .editable-entry > button, .editable-button {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        border-radius: var(--theme-rounded-base);
+}
+
+    .editable-entry > button > :not([hidden]) ~ :not([hidden]), .editable-button > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .editable-entry > button:hover, .editable-button:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .editable-entry > button:active, .editable-button:active {
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-brightness: brightness(.9);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .editable-entry > button, .editable-button {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-primary));
+}
+
+    :is(.dark .editable-entry > button),:is(.dark  .editable-button) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-primary));
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.52",
+  "version": "2.4.53",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",

package/src/lib/components/combo_box/ComboBox.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-	import "./combo-box.postcss";
-
-	export let stringItems: string[] = ["Select item"];
-	export let selectedValue = "";
-	selectedValue = stringItems.length === 0 ? "" : stringItems[0];
-</script>
-
-<select bind:value={selectedValue} class="select">
-	{#each stringItems as item}
-		<option value={item}>{item}</option>
-	{/each}
-</select>
+<script lang="ts">
+	import "./combo-box.postcss";
+
+	export let stringItems: string[] = ["Select item"];
+	export let selectedValue = "";
+	selectedValue = stringItems.length === 0 ? "" : stringItems[0];
+</script>
+
+<select bind:value={selectedValue} class="select">
+	{#each stringItems as item}
+		<option value={item}>{item}</option>
+	{/each}
+</select>

package/src/lib/components/combo_box/ComboBoxWithButton.svelte

@@ -1,18 +1,18 @@
-<script lang="ts">
-	import ComboBox from "./ComboBox.svelte";
-	import "./combo-box.postcss";
-
-	export let selectedValue = "";
-	export let stringItems: string[] = [];
-	export let onClick: undefined | ((selected: string) => void) = undefined;
-
-	let onClickInternal = () => {
-		onClick?.(selectedValue);
-	};
-</script>
-
-<div class="combo-box-wrapper">
-	<button class="combo-box-side-button btn variant-filled-primary" on:click={onClickInternal}>+ Add entry</button>
-	<ComboBox bind:selectedValue={selectedValue}
-	          bind:stringItems={stringItems}></ComboBox>
-</div>
+<script lang="ts">
+	import ComboBox from "./ComboBox.svelte";
+	import "./combo-box.postcss";
+
+	export let selectedValue = "";
+	export let stringItems: string[] = [];
+	export let onClick: undefined | ((selected: string) => void) = undefined;
+
+	let onClickInternal = () => {
+		onClick?.(selectedValue);
+	};
+</script>
+
+<div class="combo-box-wrapper">
+	<button class="combo-box-side-button btn variant-filled-primary" on:click={onClickInternal}>+ Add entry</button>
+	<ComboBox bind:selectedValue={selectedValue}
+	          bind:stringItems={stringItems}></ComboBox>
+</div>

package/src/lib/components/combo_box/combo-box.postcss

@@ -1,22 +1,22 @@
-.combo-box-wrapper {
-    display: flex;
-}
-
-.select {
-    flex-grow: 1;
-    @apply variant-filled-primary;
-}
-
-.dark .select option {
-    background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-}
-
-.combo-box-side-button {
-    @apply btn variant-filled-primary;
-}
-
-.dark .option,
-.dark .select,
-.dark .combo-box-side-button {
-    color: var(--color-text-50);
-}
+.combo-box-wrapper {
+    display: flex;
+}
+
+.select {
+    flex-grow: 1;
+    @apply variant-filled-primary;
+}
+
+.dark .select option {
+    background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+}
+
+.combo-box-side-button {
+    @apply btn variant-filled-primary;
+}
+
+.dark .option,
+.dark .select,
+.dark .combo-box-side-button {
+    color: var(--color-text-50);
+}

package/src/lib/template/seaweed/RunChaos.ts

@@ -1,44 +1,44 @@
-const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
-
-export const runChaos = (node: Element) => {
-	// change all text content to gibberish
-	for (const child of Array.from(node.children)) {
-		if (child.nodeType === Node.ELEMENT_NODE) {
-			runChaos(child);
-			for (const childOfChild of child.childNodes) {
-				if (childOfChild.nodeType === Node.TEXT_NODE && childOfChild.textContent?.trim()) {
-					const max = childOfChild.textContent.length;
-					childOfChild.textContent = "";
-					while (childOfChild.textContent.length < max) {
-						childOfChild.textContent += (chaoticWordBank[Math.floor(Math.random() * chaoticWordBank.length)] + " ");
-					}
-				}
-			}
-
-			// change all links to crouton
-			if (child.hasAttribute("href")) {
-				child.setAttribute("href", "https://crouton.net/");
-			}
-
-			// change all images to niko if aria != hidden?
-			if (child.hasAttribute("src") && !child.hasAttribute("aria-hidden")) {
-				if (child.hasAttribute("alt")) {
-					child.setAttribute("src", "https://p.potaufeu.asahi.com/a2b9-p/picture/21583312/5c3310aec77068e24844c663aa62b37c.jpg");
-				} else {
-					child.setAttribute("src", "https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4");
-					child.setAttribute("muted", "true");
-				}
-			}
-			if (child.tagName.trim() === "VIDEO") {
-				child.setAttribute("src", "https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4");
-				child.setAttribute("muted", "true");
-			}
-
-			// change all button events
-			if (child.tagName.trim() === "BUTTON") {
-				// remove anon function: https://stackoverflow.com/a/41343451/17836168
-				child.setAttribute("disabled", "true");
-			}
-		}
-	}
-};
+const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
+
+export const runChaos = (node: Element) => {
+	// change all text content to gibberish
+	for (const child of Array.from(node.children)) {
+		if (child.nodeType === Node.ELEMENT_NODE) {
+			runChaos(child);
+			for (const childOfChild of child.childNodes) {
+				if (childOfChild.nodeType === Node.TEXT_NODE && childOfChild.textContent?.trim()) {
+					const max = childOfChild.textContent.length;
+					childOfChild.textContent = "";
+					while (childOfChild.textContent.length < max) {
+						childOfChild.textContent += (chaoticWordBank[Math.floor(Math.random() * chaoticWordBank.length)] + " ");
+					}
+				}
+			}
+
+			// change all links to crouton
+			if (child.hasAttribute("href")) {
+				child.setAttribute("href", "https://crouton.net/");
+			}
+
+			// change all images to niko if aria != hidden?
+			if (child.hasAttribute("src") && !child.hasAttribute("aria-hidden")) {
+				if (child.hasAttribute("alt")) {
+					child.setAttribute("src", "https://p.potaufeu.asahi.com/a2b9-p/picture/21583312/5c3310aec77068e24844c663aa62b37c.jpg");
+				} else {
+					child.setAttribute("src", "https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4");
+					child.setAttribute("muted", "true");
+				}
+			}
+			if (child.tagName.trim() === "VIDEO") {
+				child.setAttribute("src", "https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4");
+				child.setAttribute("muted", "true");
+			}
+
+			// change all button events
+			if (child.tagName.trim() === "BUTTON") {
+				// remove anon function: https://stackoverflow.com/a/41343451/17836168
+				child.setAttribute("disabled", "true");
+			}
+		}
+	}
+};

package/src/lib/template/seaweed/SeaweedTemplate.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { afterUpdate, type ComponentType, onMount } from "svelte";
+	import { type ComponentType, onMount, afterUpdate } from "svelte";
 	import EntryOrderConfig from "$pkg/template/seaweed/entry_order_config/EntryOrderConfig.svelte";
 	import { runChaos } from "$pkg/template/seaweed/RunChaos";
 	import SocialSection from "$pkg/components/SocialSection.svelte";
@@ -187,7 +187,13 @@
 		if (letChaos) {
 			runChaos(document.body);
 			chaosDone = true;
-		} else {
+		}
+	});
+
+	let isParsed = false;
+	afterUpdate(async () => {
+		if (!letChaos && !isParsed) {
+			isParsed = true;
 			await parseQTTerms();
 		}
 	});