@turnipxenon/pineapple 2.4.25 → 2.4.26

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

@@ -368,42 +368,43 @@
 			<GameSection email={email}></GameSection>
 		{/if}
 
-		<div aria-hidden="true" style="height: 25vh" />
-
-		<Card>
-			<div slot="content" class="default-card advanced-setting">
-				<h1>Advanced settings</h1>
-				<p>This one is for those curious how I customize this page.</p>
-				<SlideToggle name="advanced-setting-slider" bind:checked={isAdvanceSettingOn}>
-					Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
-				</SlideToggle>
-				{#if (isAdvanceSettingOn)}
-					<SlideToggle name="game-section-slider" bind:checked={gameSectionFirst}>
-						Should game section appear first over projects: {gameSectionFirst ? "On" : "Off"}
-					</SlideToggle>
-
-					<h3>Query terms to bold</h3>
-					<div class="query-term-grid">
-						{#each qtMap.entries() as [term, shouldBold]}
-							<!--{@const shouldBold = false}-->
-							<button
-								class="chip {shouldBold ? 'variant-filled-tertiary' : 'variant-soft-tertiary'}"
-								on:click={() => {toggleTerm(term)}}
-							>
-								<!-- todo: change shouldBold -->
-								{#if (shouldBold)}&check;{/if}
-								{term}
-							</button>
-						{/each}
-					</div>
-
-					<br>
-					<p>Copy the url below and open a new page with it</p>
-					<CodeBlock language="url" code={advancedUrl}></CodeBlock>
-				{/if}
-			</div>
-		</Card>
+		{#if (!letChaos)}
+			<div aria-hidden="true" style="height: 25vh" />
 
+			<Card>
+				<div slot="content" class="default-card advanced-setting">
+					<h1>Advanced settings</h1>
+					<p>This one is for those curious how I customize this page.</p>
+					<SlideToggle name="advanced-setting-slider" bind:checked={isAdvanceSettingOn}>
+						Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
+					</SlideToggle>
+					{#if (isAdvanceSettingOn)}
+						<SlideToggle name="game-section-slider" bind:checked={gameSectionFirst}>
+							Should game section appear first over projects: {gameSectionFirst ? "On" : "Off"}
+						</SlideToggle>
+
+						<h3>Query terms to bold</h3>
+						<div class="query-term-grid">
+							{#each qtMap.entries() as [term, shouldBold]}
+								<!--{@const shouldBold = false}-->
+								<button
+									class="chip {shouldBold ? 'variant-filled-tertiary' : 'variant-soft-tertiary'}"
+									on:click={() => {toggleTerm(term)}}
+								>
+									<!-- todo: change shouldBold -->
+									{#if (shouldBold)}&check;{/if}
+									{term}
+								</button>
+							{/each}
+						</div>
+
+						<br>
+						<p>Copy the url below and open a new page with it</p>
+						<CodeBlock language="url" code={advancedUrl}></CodeBlock>
+					{/if}
+				</div>
+			</Card>
+		{/if}
 	</main>
 
 	<SocialSection slot="extraLeadingIcons"

package/src/lib/template/Seaweed/seaweed.postcss

@@ -1,133 +1,133 @@
-main {
-    width: 100%;
-    overflow: visible;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-h1 {
-    font-size: 2em;
-}
-
-h2 {
-    font-size: 1.5em;
-}
-
-.section-card {
-    padding: 3em;
-    max-width: 800px;
-}
-
-.game-card, .project-card {
-    width: 100vw;
-    max-width: 36em;
-    margin-bottom: 3em;
-}
-
-.game-card > video {
-    border-top-left-radius: 1em;
-    border-top-right-radius: 1em;
-    max-height: 24em;
-    width: 100%;
-    object-fit: cover;
-}
-
-#migrante-alberta, .game-card > img, .project-card > img {
-    border-top-left-radius: 1em;
-    border-top-right-radius: 1em;
-}
-
-#migrante-alberta {
-    width: 100%;
-    object-fit: cover;
-}
-
-.game-button {
-    @apply btn variant-filled-primary;
-}
-
-.game-button > img {
-    max-height: 1lh;
-    /* todo: consider night mode day mode */
-}
-
-.two-column-separated {
-    display: flex;
-    justify-content: space-between;
-}
-
-.more-section {
-    padding: 1em;
-}
-
-.greater-about-div {
-    display: flex;
-    flex-direction: column;
-    max-width: 36em;
-}
-
-.experience-and-about-div {
-    display: flex;
-    gap: 2em;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: flex-start;
-}
-
-.game-card-body, .project-card-body {
-    padding: 1em;
-}
-
-.game-card-body > blockquote {
-    margin-bottom: 0.7lh;
-}
-
-.game-card-body > h1, .project-card-body > h2 {
-    text-align: center;
-}
-
-.game-link-section {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 1em;
-    margin-top: 1em;
-}
-
-.games-section, .projects-section {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2em;
-    justify-content: center;
-}
-
-.projects-section {
-    align-items: flex-start;
-    /*justify-content: flex-start;*/
-}
-
-.long-btn-image {
-    max-height: 1lh;
-}
-
-.itch-promo {
-    padding: 4em;
-}
-
-#hepcat-video {
-    object-position: 0 0;
-}
-
-.title-card {
-    width: clamp(360px, 80vw, 800px);
-}
-
-[class*='qt-'] {
-    font-weight: var(--qt-font-weight);
-}
-
-.accordion-header {
-    margin-top: 0.25em;
-}
+main {
+    width: 100%;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
+.section-card {
+    padding: 3em;
+    max-width: 800px;
+}
+
+.game-card, .project-card {
+    width: 100vw;
+    max-width: 36em;
+    margin-bottom: 3em;
+}
+
+.game-card > video {
+    border-top-left-radius: 1em;
+    border-top-right-radius: 1em;
+    max-height: 24em;
+    width: 100%;
+    object-fit: cover;
+}
+
+#migrante-alberta, .game-card > img, .project-card > img {
+    border-top-left-radius: 1em;
+    border-top-right-radius: 1em;
+}
+
+#migrante-alberta {
+    width: 100%;
+    object-fit: cover;
+}
+
+.game-button {
+    @apply btn variant-filled-primary;
+}
+
+.game-button > img {
+    max-height: 1lh;
+    /* todo: consider night mode day mode */
+}
+
+.two-column-separated {
+    display: flex;
+    justify-content: space-between;
+}
+
+.more-section {
+    padding: 1em;
+}
+
+.greater-about-div {
+    display: flex;
+    flex-direction: column;
+    max-width: 36em;
+}
+
+.experience-and-about-div {
+    display: flex;
+    gap: 2em;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.game-card-body, .project-card-body {
+    padding: 1em;
+}
+
+.game-card-body > blockquote {
+    margin-bottom: 0.7lh;
+}
+
+.game-card-body > h1, .project-card-body > h2 {
+    text-align: center;
+}
+
+.game-link-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 1em;
+    margin-top: 1em;
+}
+
+.games-section, .projects-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2em;
+    justify-content: center;
+}
+
+.projects-section {
+    align-items: flex-start;
+    /*justify-content: flex-start;*/
+}
+
+.long-btn-image {
+    max-height: 1lh;
+}
+
+.itch-promo {
+    padding: 4em;
+}
+
+#hepcat-video {
+    object-position: 0 0;
+}
+
+.title-card {
+    width: clamp(360px, 80vw, 800px);
+}
+
+[class*='qt-'] {
+    font-weight: var(--qt-font-weight);
+}
+
+.accordion-header {
+    margin-top: 0.25em;
+}

package/src/lib/util/util.ts

@@ -1,38 +1,38 @@
-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;
-	};
-};
-
-export const createGoToFunction = (path: string): (() => void) => {
-	return (() => {
-		location.href = path;
-	});
-};
-
-export interface ExternalLinkWarningArgs {
-	href: string;
-}
-
-export const createExternalLinkWarningFunction = (args: ExternalLinkWarningArgs): (() => void) => {
-	return (() => {
-		// todo: https://github.com/TurnipXenon/pineapple/issues/99
-		//  add the warning here for future functions
-		location.href = args.href;
-	});
-};
-
-export interface RawGlob {
-	default: string;
-}
+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;
+	};
+};
+
+export const createGoToFunction = (path: string): (() => void) => {
+	return (() => {
+		location.href = path;
+	});
+};
+
+export interface ExternalLinkWarningArgs {
+	href: string;
+}
+
+export const createExternalLinkWarningFunction = (args: ExternalLinkWarningArgs): (() => void) => {
+	return (() => {
+		// todo: https://github.com/TurnipXenon/pineapple/issues/99
+		//  add the warning here for future functions
+		location.href = args.href;
+	});
+};
+
+export interface RawGlob {
+	default: string;
+}

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

@@ -1,22 +1,7 @@
 <script lang="ts">
 	import PinyaBaseLayout from "$pkg/components/pineapple/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>

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

@@ -1,20 +1,8 @@
 <script>
-	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
-
-
 	import { createGoToFunction } from "$pkg/util/util";
 	import { Card } from "$pkg";
 </script>
 
-<svelte:head>
-	<title>Welcome to {PUBLIC_CRINGE_USERNAME}'s Home</title>
-	<meta content="Welcome to {PUBLIC_CRINGE_USERNAME}'s Home" name="og:title" />
-	<meta
-		content="Welcome to {PUBLIC_CRINGE_USERNAME}'s home! It's a neat place to be at if you're feeling lost. Come hang around!"
-		name="og:description"
-	/>
-</svelte:head>
-
 <Card>
 	<div slot="content" class="content">
 		<h1 class="mb-8" style="font-weight: bolder">Directory</h1>

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
 	import { showComponentInToast, showTextInToast } from "$pkg/components/pineapple/toast/Toast";
 	import TestCard from "$pkg/components/pineapple/toast/custom-toast/TestCustomToast.svelte";
 	import TestDialogYarn from "./TestDialog.yarn?raw";
@@ -27,15 +26,6 @@
 	};
 </script>
 
-<svelte:head>
-	<title>Welcome to {PUBLIC_CRINGE_USERNAME}'s Home</title>
-	<meta content="Welcome to {PUBLIC_CRINGE_USERNAME}'s Home" name="og:title" />
-	<meta
-		content="Welcome to {PUBLIC_CRINGE_USERNAME}'s home! It's a neat place to be at if you're feeling lost. Come hang around!"
-		name="og:description"
-	/>
-</svelte:head>
-
 <Card>
 	<div slot="content" class="default-card">
 		<button

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

@@ -0,0 +1,8 @@
+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.svelte

@@ -1,20 +1,9 @@
 <script>
 	import SeaweedTemplate from "$pkg/template/Seaweed/SeaweedTemplate.svelte";
-	import WebThumbnailImage from "$pkg/assets/placeholder/placeholder_circle.png";
 
 	export let metaWebsite = "https://www.crouton.com/test/portfolio-base-layout";
 
 </script>
 
-<svelte:head>
-	<meta charset="utf-8" />
-	<title>Welcome to my portfolio</title>
-	<meta name="twitter:card" content="summary" />
-	<meta property="og:url" content={metaWebsite} />
-	<meta property="og:title" content="Turnip" />
-	<meta property="og:description" content="Welcome to Turnip's test portfolio website" />
-	<meta property="og:image" content={WebThumbnailImage} />
-</svelte:head>
-
 <!--todo: maybe add check that this is always false? -->
 <SeaweedTemplate letChaos={true}></SeaweedTemplate>

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

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

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

@@ -0,0 +1,8 @@
+import type { OverridableMetaProps } from "$pkg/components/overrideable_meta/OverridableMetaProps";
+
+export const load = async (): Promise<OverridableMetaProps> => {
+	return {
+		title: "Welcome to Allan's portfolio page!",
+		ogTitle: "Welcome to Allan's portfolio page!"
+	};
+};

package/src/routes/+layout.svelte

@@ -9,15 +9,14 @@
 	import "$lib/styles/global.css";
 
 	// region Skeleton Store
-
 	// endregion Skeleton Store
-
 	// region highlightjs
 	import { initializeStores, storeHighlightJs } from "@skeletonlabs/skeleton";
 	import "highlight.js/styles/github-dark.css";
 
 	import xml from "highlight.js/lib/languages/xml"; // for HTML
 	import hljs from "highlight.js/lib/core";
+	import OverrideableMeta from "$pkg/components/overrideable_meta/OverridableMeta.svelte";
 
 	initializeStores();
 
@@ -27,4 +26,8 @@
 	// endregion highlightjs
 </script>
 
+<OverrideableMeta
+	rootUrl={import.meta.env.PROD ? "https://pineapple-gamma-blush.vercel.app" : "http://localhost:5173"}>
+</OverrideableMeta>
+
 <slot />