@turnipxenon/pineapple 4.1.4 → 4.2.1

package/dist/modules/overrideable_meta/OverridableMeta.svelte

@@ -17,50 +17,37 @@ export const load = async (): Promise<OverridableMetaProps> => {
 -->
 
 <script lang="ts">
-	import WebThumbnailImage from "../../assets/placeholder/placeholder_circle.png";
+	import { pinyaHead } from "../../ui/templates/runes.svelte";
 
-
-	import { page } from "$app/stores";
-	import type { OverridableMetaProps } from "./OverridableMetaProps";
 	interface Props {
 		rootUrl?: string;
 		title?: string;
 		ogTitle?: string;
 		ogDescription?: string;
-		ogImage?: any;
+		ogImage?: string[];
 	}
 
 	let {
-		rootUrl = "http://localhost:5173",
-		title = "Welcome to my portfolio",
-		ogTitle = "Turnip time!",
-		ogDescription = "Welcome to Turnip's test portfolio",
-		ogImage = WebThumbnailImage
+		rootUrl = undefined,
+		title = undefined,
+		ogTitle = undefined,
+		ogDescription = undefined,
+		ogImage = undefined
 	}: Props = $props();
 
-	const data: OverridableMetaProps = $state({
-		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;
-	});
+	if (rootUrl) {
+		pinyaHead.rootUrl = rootUrl;
+	}
+	if (title) {
+		pinyaHead.title = title;
+	}
+	if (ogTitle) {
+		pinyaHead.ogTitle = ogTitle;
+	}
+	if (ogDescription) {
+		pinyaHead.ogDescription = ogDescription;
+	}
+	if (ogImage) {
+		pinyaHead.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/dist/modules/overrideable_meta/OverridableMeta.svelte.d.ts

@@ -3,7 +3,7 @@ interface Props {
     title?: string;
     ogTitle?: string;
     ogDescription?: string;
-    ogImage?: any;
+    ogImage?: string[];
 }
 declare const OverridableMeta: import("svelte").Component<Props, {}, "">;
 type OverridableMeta = ReturnType<typeof OverridableMeta>;

package/dist/modules/parsnip/route-util/ParsnipBlog.svelte

@@ -22,7 +22,7 @@
 	title={parsnipEntry.basename}
 	ogTitle={parsnipEntry.basename}
 	ogDescription={parsnipEntry.tagline}
-	ogImage={`${getCmsBaseUrl()}/${parsnipEntry.preview}`}
+	ogImage={[`${getCmsBaseUrl()}/${parsnipEntry.preview}`]}
 />
 
 <BlogTemplate pageMeta={pageMeta}>

package/dist/ui/templates/PinyaBase.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pinyaHead } from "./runes.svelte";
 	import { ModeWatcher } from "mode-watcher";
 	import { Modals } from "svelte-modals";
 	import { page } from "$app/state";
@@ -9,8 +10,21 @@
 	import { ToastProvider } from "@skeletonlabs/skeleton-svelte";
 
 	let { children } = $props();
+
+	const ogUrl = $derived(`${pinyaHead.rootUrl}${page.url.pathname}`);
 </script>
 
+<svelte:head>
+	<meta charset="utf-8" />
+	<title>{pinyaHead.title}</title>
+	<meta property="og:url" content={ogUrl} />
+	<meta property="og:title" content={pinyaHead.ogTitle} />
+	<meta property="og:description" content={pinyaHead.ogDescription} />
+	{#each pinyaHead.ogImage ?? [] as imgUrl, idx (`${idx}_${imgUrl}`)}
+		<meta property="og:image" content={imgUrl} />
+	{/each}
+</svelte:head>
+
 <Modals>
 	<!-- shown when any modal is opened -->
 	{#snippet backdrop({ close })}
@@ -45,4 +59,4 @@
         background: rgba(0, 0, 0, 0.50);
         backdrop-filter: blur(4px);
     }
-</style>
+</style>

package/dist/ui/templates/runes.svelte.d.ts

@@ -0,0 +1,8 @@
+export interface PinyaHead {
+    rootUrl?: string;
+    title?: string;
+    ogTitle?: string;
+    ogDescription?: string;
+    ogImage?: string[];
+}
+export declare const pinyaHead: PinyaHead;

package/dist/ui/templates/runes.svelte.js

@@ -0,0 +1,9 @@
+import WebThumbnailImage from "../../assets/placeholder/placeholder_circle.png";
+const defaultData = {
+    rootUrl: "http://localhost:5173",
+    title: "Welcome to my portfolio",
+    ogTitle: "Turnip time!",
+    ogDescription: "Welcome to Turnip's test portfolio",
+    ogImage: [WebThumbnailImage]
+};
+export const pinyaHead = $state({ ...defaultData });

package/package.json

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