@turnipxenon/pineapple 2.4.44 → 2.4.46

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

@@ -0,0 +1,209 @@
+<script>import {
+  GetAllEntryFromGlobal,
+  GetEntryFromGlobal,
+  seaweedTemplateData
+} from "../SeaweedTemplateData";
+import { removeProxyWrapperOnString } from "./EntryOrderConfig";
+import ComboBoxWithButton from "../../../components/combo_box/ComboBoxWithButton.svelte";
+export let seaweedEntries;
+export let orderUrl;
+export let updateUrl;
+const updateOrderQuery = () => {
+  orderUrl = "order=" + seaweedEntries.map((g) => {
+    const groupUrl = g.items.map(
+      (e) => removeProxyWrapperOnString(e.name)
+    ).join("|");
+    return `${g.name}:${groupUrl}:${g.gridClass}`;
+  }).join(",");
+  updateUrl(seaweedTemplateData);
+};
+const addEntry = (group) => {
+  return (selected) => {
+    const c = GetEntryFromGlobal(selected);
+    console.log(selected, c);
+    if (c) {
+      group.items.push(c);
+      seaweedEntries = seaweedEntries;
+      updateOrderQuery();
+    }
+  };
+};
+const swapEntry = (index, group, shouldDecrement) => {
+  return () => {
+    let newIndex = index;
+    if (shouldDecrement && index >= 1) {
+      newIndex--;
+    } else if (!shouldDecrement && index <= group.items.length - 2) {
+      newIndex++;
+    } else {
+      return;
+    }
+    console.log(index, newIndex);
+    const tempVar = group.items[newIndex];
+    group.items[newIndex] = group.items[index];
+    group.items[index] = tempVar;
+    seaweedEntries = seaweedEntries;
+    updateOrderQuery();
+  };
+};
+const swapGroups = (index, shouldDecrement) => {
+  return () => {
+    let newIndex = index;
+    if (shouldDecrement && index >= 1) {
+      newIndex--;
+    } else if (!shouldDecrement && index <= seaweedEntries.length - 2) {
+      newIndex++;
+    } else {
+      return;
+    }
+    const tempVar = seaweedEntries[newIndex];
+    seaweedEntries[newIndex] = seaweedEntries[index];
+    seaweedEntries[index] = tempVar;
+    seaweedEntries = seaweedEntries;
+    updateOrderQuery();
+  };
+};
+const removeGroup = (group) => {
+  return () => {
+    const index = seaweedEntries.indexOf(group);
+    if (index === -1) {
+      return;
+    }
+    seaweedEntries.splice(index, 1);
+    seaweedEntries = seaweedEntries;
+    updateOrderQuery();
+  };
+};
+const removeEntry = (entry, group) => {
+  return () => {
+    console.log("Clicked!");
+    for (let i = group.items.length - 1; i >= 0; i--) {
+      if (group.items[i].name === entry.name) {
+        console.log("Reduce");
+        group.items.splice(i, 1);
+        seaweedEntries = seaweedEntries;
+        updateOrderQuery();
+        break;
+      }
+    }
+  };
+};
+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>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type EntryGroup, type SeaweedTemplateData } from "../SeaweedTemplateData";
+declare const __propDef: {
+    props: {
+        seaweedEntries: EntryGroup[];
+        orderUrl: string;
+        updateUrl: (data: SeaweedTemplateData) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EntryOrderConfigProps = typeof __propDef.props;
+export type EntryOrderConfigEvents = typeof __propDef.events;
+export type EntryOrderConfigSlots = typeof __propDef.slots;
+export default class EntryOrderConfig extends SvelteComponent<EntryOrderConfigProps, EntryOrderConfigEvents, EntryOrderConfigSlots> {
+}
+export {};

package/docs/archive/MigrationToAzure.md

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.44",
+  "version": "2.4.46",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",
@@ -19,7 +19,7 @@
     "to-dev": "git checkout main && git pull origin main && git checkout -b turnip/dev"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.1.1",
+    "@sveltejs/adapter-node": "^5.0.1",
     "@sveltejs/kit": "^2.5.2",
     "@sveltejs/package": "^2.2.1",
     "@tailwindcss/forms": "^0.5.3",
@@ -44,7 +44,6 @@
   "dependencies": {
     "@skeletonlabs/skeleton": "^2.9.0",
     "@skeletonlabs/tw-plugin": "^0.3.1",
-    "@sveltejs/adapter-vercel": "^5.1.0",
     "@sveltejs/kit": "^2.5.2",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@types/htmlparser2": "^3.10.7",
@@ -72,6 +71,9 @@
     "./src/lib/app.postcss",
     "./src/lib/theme.postcss"
   ],
+  "resolutions": {
+    "**/@azure/msal-node": "2.3.0"
+  },
   "repository": "https://github.com/TurnipXenon/pineapple",
   "author": "turnipxenon <turnipxenon@gmail.com>",
   "license": "MIT",

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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);
+}

package/src/lib/index.ts

@@ -1,7 +1,7 @@
 // noinspection JSUnusedGlobalSymbols
 
 export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
-export { default as SeaweedTemplate } from "./template/Seaweed/SeaweedTemplate.svelte";
+export { default as SeaweedTemplate } from "$pkg/template/seaweed/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as SocialSection } from "./components/SocialSection.svelte";

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

@@ -0,0 +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");
+			}
+		}
+	}
+};