@turnipxenon/pineapple 1.1.2 → 2.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "1.1.2",
+  "version": "2.1.1",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build",
@@ -16,7 +16,6 @@
     "custom-check": "npx vite-node src/lib/scripts/util/ManualCheckRun.ts"
   },
   "devDependencies": {
-    "@skeletonlabs/skeleton": "^1.2.5",
     "@sveltejs/adapter-auto": "^3.1.1",
     "@sveltejs/kit": "^2.5.2",
     "@sveltejs/package": "^2.2.1",
@@ -41,14 +40,23 @@
   },
   "type": "module",
   "dependencies": {
-    "@sveltejs/kit": "^1.20.4",
-    "@types/node": "^20.1.0",
+    "@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",
+    "@types/node": "^20.11.25",
     "highlight.js": "^11.8.0",
+    "htmlparser2": "^9.1.0",
     "node-html-parser": "^6.1.5",
     "string-width": "^7.1.0",
-    "svelte": "^4.0.0",
+    "svelte": "^4.2.12",
     "ts-node": "^10.9.1"
   },
+  "resolutions": {
+    "string-width": "4.2.3"
+  },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -63,5 +71,6 @@
     "./dist"
   ],
   "repository": "https://github.com/TurnipXenon/pineapple",
-  "author": "turnipxenon <turnipxenon@gmail.com>"
+  "author": "turnipxenon <turnipxenon@gmail.com>",
+  "license": "MIT"
 }

package/src/lib/app.postcss

@@ -1,13 +1,52 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
+/* (all other styles below) */
+
 /*place global styles here */
 :root {
-	--default-card-max-width: calc(4rem + 4rem + 40rem);
+    --default-card-max-width: calc(4rem + 4rem + 40rem);
+}
+
+html, body {
+    @apply h-full overflow-hidden;
+    @apply bg-surface-400 dark:bg-surface-800;
+    background-color: transparent;
+}
+
+/* font color */
+html, body {
+    color: rgb(var(--theme-font-color-base));
+}
+
+.accordion-panel {
+    color: rgb(var(--color-primary-1000));
+}
+
+.dark body,
+.dark .variant-filled-primary,
+.dark .turnip-button,
+.dark .turnip-button > span,
+.dark .accordion-panel,
+.dark button.accordion-control,
+.chip, .dark .chip {
+    color: rgb(var(--theme-font-color-dark));
 }
 
-html,
-body {
-	@apply h-full overflow-hidden;
-	@apply bg-surface-400-500-token;
-	background-color: transparent;
+.turnip-button, .turnip-button > span, button.accordion-control {
+    font-weight: bold;
+    color: rgb(var(--theme-font-color-base));
+}
+
+/* todo: add some hues to the icon that should be in sync with primary and make them not pure darkness */
+.turnip-button > img {
+    filter: grayscale(100%) brightness(0%) invert(25%);
+}
+
+.dark .turnip-button > img {
+    filter: grayscale(100%) brightness(0%) invert(100%);
 }
 
 /*
@@ -23,72 +62,92 @@ body {
 }
 */
 
-.card {
-	--tw-ring-offset-color: rgb(var(--color-text-300));
-	--tw-ring-offset-width: var(--theme-border-base);
-}
-
-.dark .card {
-	--tw-ring-offset-color: rgb(var(--color-text-600));
-}
 
 .variant-ghost-primary {
-	background-color: rgb(var(--color-primary-500) / 0.8);
+    background-color: rgb(var(--color-primary-500) / 0.8);
 }
 
 .dark .variant-ghost-primary {
-	background-color: rgb(var(--color-primary-400) / 0.8);
+    background-color: rgb(var(--color-primary-400) / 0.8);
 }
 
 .default-card {
-	@apply variant-ghost-primary text-center p-16;
-	text-align: start;
-	padding-inline-end: clamp(0rem, 10vw, 8rem);
-	max-width: var(--default-card-max-width);
+    @apply variant-ghost-primary text-center p-16;
+    text-align: start;
+    padding-inline-end: clamp(0rem, 10vw, 8rem);
+    max-width: var(--default-card-max-width);
 }
 
 h1,
 h2,
 p {
-	margin-bottom: 0.5em;
+    margin-bottom: 0.5em;
 }
 
 ul {
-	list-style-type: circle;
-	padding-left: 1em;
-}
-
-a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(
-		a.card
-	):not(.list-nav a) {
-	color: rgb(var(--color-secondary-500) / var(--tw-text-opacity));
-}
-
-.dark
-	a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(
-		a.card
-	):not(.list-nav a) {
-	color: rgb(var(--color-secondary-700) / var(--tw-text-opacity));
+    list-style-type: circle;
+    padding-left: 1em;
 }
 
 .default-page-container {
-	@apply flex justify-center items-center;
-	margin-top: 4em;
-	margin-left: clamp(1em, 15vw, 10em);
-	margin-right: 1em;
-	flex-direction: column;
-	z-index: 0;
+    @apply flex justify-center items-center;
+    margin-top: 4em;
+    margin-left: clamp(1em, 15vw, 10em);
+    margin-right: 1em;
+    flex-direction: column;
+    z-index: 0;
 }
 
 .footer-space {
-	width: 100%;
-	height: calc(var(--dialog-box-height) + 4em);
+    width: 100%;
+    height: calc(var(--dialog-box-height) + 4em);
 }
 
 a.dialog-choice {
-    cursor: url("$lib/assets/icons/chat_cursor.svg"), auto;
+    cursor: url("$lib/assets/icons/chat-cursor.svg"), auto;
 }
 
 a.external-link {
-    cursor: url("$lib/assets/icons/external_link.svg"), auto;
-}
+    cursor: url("$lib/assets/icons/external-link.svg"), auto;
+}
+
+blockquote {
+    font-style: italic;
+    opacity: 60%;
+    font-weight: bold;
+}
+
+/* todo: add --tw-text-opacity division to add ambience based on bg better */
+a {
+    text-decoration: underline;
+    color: rgb(var(--color-secondary-500));
+}
+
+a:hover, a:hover:visited {
+    color: rgb(var(--color-secondary-400));
+}
+
+a:visited {
+    color: rgb(var(--color-secondary-800));
+}
+
+a:active {
+    color: rgb(var(--color-secondary-350));
+}
+
+.dark a {
+    text-decoration: underline;
+    color: rgb(var(--color-secondary-300));
+}
+
+.dark a:hover, .dark a:hover:visited {
+    color: rgb(var(--color-secondary-200));
+}
+
+.dark a:visited {
+    color: rgb(var(--color-secondary-350));
+}
+
+.dark a:active {
+    color: rgb(var(--color-secondary-100));
+}

package/src/lib/assets/icons/bitbucket-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x34_4-bitbucket"><g><path d="M40.929,49.178c-8.108-0.092-14.835,6.358-14.928,14.559c0,0.829,0.093,1.75,0.186,2.58    l62.566,379.735c1.566,9.582,9.86,16.68,19.627,16.77h300.118c7.281,0.093,13.546-5.159,14.745-12.347L485.81,66.409    c1.29-8.016-4.146-15.572-12.163-16.862c-0.829-0.091-1.658-0.184-2.578-0.184L40.929,49.178L40.929,49.178z M304.375,323.59    h-95.831l-25.895-135.456h144.945L304.375,323.59L304.375,323.59z" style="fill:#2684FF;"/></g></g><g id="Layer_1"/></svg>

package/src/lib/assets/icons/github-mark.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

package/src/lib/assets/icons/link-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>

package/src/lib/assets/icons/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>

package/src/lib/assets/icons/mail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>

package/src/lib/components/Card.svelte

@@ -0,0 +1,24 @@
+<script>
+	export let margin = "0";
+	export let marginBottom = "3em";
+	export let overrideStyle = "";
+
+	// warning: don't forget the semi-colon when adding new style!
+	const style = `
+		--turnip-card-margin: ${margin};
+		--turnip-card-margin-bottom: ${marginBottom};
+		${overrideStyle};
+	`;
+</script>
+
+<div class="card" style={style}>
+	<slot name="content" class="card" />
+</div>
+
+<style lang="postcss">
+    .card {
+		    @apply bg-surface-100 dark:bg-surface-900;
+        margin: var(--turnip-card-margin);
+        margin-bottom: var(--turnip-card-margin-bottom);
+    }
+</style>

package/src/lib/components/CarouselElement.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    export let activeGameIndex: number;
+    export let selfIndex: number;
+
+    import {fly, slide, scale} from "svelte/transition";
+
+</script>
+
+{#if (activeGameIndex === selfIndex)}
+	<!--todo: make section consistent size for all-->
+	<section class="game-showcase"
+	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
+		<slot/>
+	</section>
+{/if}
+
+<style>
+    .game-showcase {
+        @apply snap-center rounded-container-token;
+        margin: auto;
+        width: 100%;
+    }
+</style>

package/src/lib/components/Chip.svelte

@@ -0,0 +1,12 @@
+<span class="chip variant-filled-tertiary">
+<slot />
+</span>
+
+<style lang="postcss">
+    .chip {
+        border-radius: 1em;
+        margin: 0.25em;
+        font-weight: bold;
+        pointer-events: none;
+    }
+</style>

package/src/lib/components/ElementVisbilityDetector.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+
+    export let isVisible = true;
+
+    let stickyElem: HTMLElement;
+
+    let observer: undefined | IntersectionObserver;
+    onMount(() => {
+        observer = new IntersectionObserver(
+            ([e]) => {
+                isVisible = e.intersectionRatio >= 1;
+            },
+            {threshold: [1]}
+        );
+        observer.observe(stickyElem);
+    });
+</script>
+
+<span bind:this={stickyElem}>
+	<slot/>
+</span>

package/src/lib/components/OnElementVisbilityChanged.ts

@@ -0,0 +1 @@
+export type OnElementVisibilityChanged = (isVisible: boolean) => void;

package/src/lib/components/RandomizedBackground.svelte

@@ -33,8 +33,7 @@
 		return array;
 	};
 
-	let generatedImageList = [];
-	let component;
+	let generatedImageList: string[] = [];
 
 	for (let i = 0; i < 20; i++) {
 		shuffle(imageList);
@@ -54,6 +53,7 @@
 	/>
 </svelte:head>
 
+<!--todo: add a letterbox beyond 1960px + 16 rem-->
 {#if enable}
 	<div class="default-background" aria-hidden="true">
 		{#each generatedImageList as imageItem}
@@ -66,9 +66,11 @@
     .default-background {
         position: fixed;
         display: flex;
-        margin-top: -8rem;
-        margin-left: -8rem;
+        top: -8rem;
+        left: 50%;
+        transform: translate(-50%, 0);
         width: calc(100vw + 16rem);
+        max-width: 1960px;
         height: calc(100vh + 16rem);
         flex-wrap: wrap;
         overflow: hidden;

package/src/lib/components/RandomizedImage.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let src: URL;
+	import { modeCurrent } from "@skeletonlabs/skeleton";
+
+	export let src: string;
 	export let rng: () => number;
 	let rotateRandom = rng() * 90 - 45;
 
@@ -11,21 +13,28 @@
 <div
 	style="--paddingTop: {paddingTop}rem;
         --paddingLeft: {paddingLeft}rem;
-        --paddingRight: {paddingRight}rem;"
->
-	<img {src} aria-hidden="true" style="--rotateRandom:{rotateRandom}deg;" alt="" />
+        --paddingRight: {paddingRight}rem;">
+	<img {src} class="randomized-image-style"
+	     aria-hidden="true"
+	     style="--rotateRandom:{rotateRandom}deg;"
+	     alt=""
+	     class:darkMode={modeCurrent} />
 </div>
 
 <style>
-	div {
-		padding-top: var(--paddingTop);
-		padding-left: var(--paddingLeft);
-		padding-right: var(--paddingRight);
-	}
+    div {
+        padding-top: var(--paddingTop);
+        padding-left: var(--paddingLeft);
+        padding-right: var(--paddingRight);
+    }
+
+    img {
+        width: 8rem;
+        height: 8rem;
+        transform: rotate(var(--rotateRandom));
+    }
 
-	img {
-		width: 8rem;
-		height: 8rem;
-		transform: rotate(var(--rotateRandom));
-	}
+    .darkMode {
+        filter: brightness(50%);
+    }
 </style>

package/src/lib/components/StickyElement.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+    import {fly} from "svelte/transition";
+
+    export let isFirst = false;
+
+    let stickyElem: HTMLElement;
+    let isSticky = false;
+
+    let observer: undefined | IntersectionObserver;
+    onMount(() => {
+        observer = new IntersectionObserver(
+            ([e]) => {
+                isSticky = e.intersectionRatio < 1;
+            },
+            {threshold: [1]}
+        );
+        observer.observe(stickyElem);
+    });
+</script>
+
+<span transition:fly={{y: -100}}>
+{#if (isFirst && !isSticky)}
+	<!-- intentionally empty -->
+{:else if (isSticky)}
+	{" | "}
+{:else }
+	<br>
+{/if}
+	<span class="sticky-div" bind:this={stickyElem}>
+		<slot/>
+	</span>
+</span>
+
+<style>
+    .sticky-div {
+        position: sticky;
+        top: -1px;
+    }
+</style>

package/src/lib/components/ToggleableContent.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { ToggleableContentType } from "$pkg/components/ToggleableContentType";
+	import { afterUpdate, onMount } from "svelte";
+
+	export let toggle: ToggleableContentType = ToggleableContentType.Default;
+
+	enum GibberishState {
+		NonExistent,
+		CreatingParent,
+		Binded
+	}
+
+	let defaultSlot: HTMLDivElement | undefined = undefined;
+	let gibberishState: GibberishState = GibberishState.NonExistent;
+	let gibberishParent: HTMLDivElement | undefined;
+	let gibberishSlot: Node | undefined;
+
+	const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
+	const turnToGibberish = (node: Node) => {
+		for (const childNodes of node.childNodes) {
+			turnToGibberish(childNodes);
+		}
+
+		if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+			const max = node.textContent.length;
+			node.textContent = "";
+			while (node.textContent.length < max) {
+				node.textContent += (chaoticWordBank[Math.floor(Math.random() * chaoticWordBank.length)]) + " ";
+			}
+		}
+	};
+
+	const processDefaultSlot = (slot: HTMLDivElement | undefined) => {
+		if (!slot || toggle == ToggleableContentType.Default) {
+			return;
+		}
+
+		turnToGibberish(slot);
+	};
+
+	const attachGibberish = (parent: HTMLDivElement | undefined) => {
+		console.log("Help");
+		if (gibberishState !== GibberishState.CreatingParent && parent !== undefined) {
+			return;
+		}
+
+		console.log("Help1");
+		if (gibberishSlot === undefined) {
+			console.warn("Gibberish slot was not created");
+			return;
+		}
+
+		console.log("Help2");
+		if (gibberishParent === undefined) {
+			console.warn("Gibberish parent was not created");
+			return;
+		}
+
+		console.log("Help3");
+		gibberishParent.appendChild(gibberishSlot);
+		console.log(gibberishParent);
+		gibberishState = GibberishState.Binded;
+	};
+
+	onMount(() => {
+		processDefaultSlot(defaultSlot);
+	});
+
+	// afterUpdate(() => {
+	// 	console.log("after update:", gibberishState);
+	// 	console.log("after update:", gibberishParent);
+	// 	if (gibberishParent !== undefined && gibberishState === GibberishState.CreatingParent) {
+	// 		gibberishState = GibberishState.ParentCreated;
+	// 	}
+	// });
+
+	$: attachGibberish(gibberishParent);
+</script>
+
+{#if toggle === ToggleableContentType.Default}
+	<slot />
+{:else if (ToggleableContentType.Gibberish === toggle)}
+	<div bind:this={defaultSlot} style={`visibility: ${gibberishState === GibberishState.Binded}`}>
+		<slot />
+	</div>
+{/if}

package/src/lib/components/ToggleableContentType.ts

@@ -0,0 +1,4 @@
+export enum ToggleableContentType {
+	Default,
+	Gibberish,
+}

package/src/lib/components/layouts/LayoutConstants.ts

@@ -0,0 +1 @@
+export const AppShellBackground = "app-shell-token";