@turnipxenon/pineapple 4.2.2 → 4.3.0

package/dist/modules/overrideable_meta/OverridableMeta.svelte

@@ -1,6 +1,8 @@
 <!--
-OverridableMeta is convenient Svelte component allowing each page to override the head meta values
+@component OverridableMeta is convenient Svelte component allowing each page to override the head meta values
 based on their +page.ts.
+@deprecated Pass in meta: PinyaHead in page.server.ts instead
+ref: https://github.com/sveltejs/kit/issues/1540#issuecomment-2029016082
 
 For example:
 <code>
@@ -17,6 +19,7 @@ export const load = async (): Promise<OverridableMetaProps> => {
 -->
 
 <script lang="ts">
+	import { page } from "$app/state";
 	import { pinyaHead } from "../../ui/templates/runes.svelte";
 
 	interface Props {
@@ -32,7 +35,7 @@ export const load = async (): Promise<OverridableMetaProps> => {
 		title = undefined,
 		ogTitle = undefined,
 		ogDescription = undefined,
-		ogImage = undefined
+		ogImage = []
 	}: Props = $props();
 
 	if (rootUrl) {
@@ -48,6 +51,12 @@ export const load = async (): Promise<OverridableMetaProps> => {
 		pinyaHead.ogDescription = ogDescription;
 	}
 	if (ogImage) {
-		pinyaHead.ogImage = ogImage;
+		pinyaHead.ogImage = ogImage.map(img => {
+			if (img.startsWith('/')) {
+				return `${pinyaHead.rootUrl}${img}`
+			}
+
+			return img;
+		});
 	}
 </script>

package/dist/modules/overrideable_meta/OverridableMeta.svelte.d.ts

@@ -5,6 +5,25 @@ interface Props {
     ogDescription?: string;
     ogImage?: string[];
 }
+/**
+ * OverridableMeta is convenient Svelte component allowing each page to override the head meta values
+ * based on their +page.ts.
+ * @deprecated Pass in meta: PinyaHead in page.server.ts instead
+ * ref: https://github.com/sveltejs/kit/issues/1540#issuecomment-2029016082
+ *
+ * For example:
+ * <code>
+ * // +page.ts
+ *
+ * import type { OverridableMetaProps } from "../..";
+ *
+ * export const load = async (): Promise<OverridableMetaProps> => {
+ * return {
+ * 	title: "CustomTitle",
+ * };
+ * };
+ * </code>
+ */
 declare const OverridableMeta: import("svelte").Component<Props, {}, "">;
 type OverridableMeta = ReturnType<typeof OverridableMeta>;
 export default OverridableMeta;

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

@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { OverridableMeta } from "../../overrideable_meta/index";
 	import type { PageMeta } from "../../../ui/modules/NavigationMenu/PageMeta";
-	import { getCmsBaseUrl } from "../../../util/env-getter";
+	import BlogTemplate from "../../../ui/templates/blog_template/BlogTemplate.svelte";
 	import ParsnipBlockChildren from "../ParsnipBlockChildren.svelte";
 	import type { ParsnipEntry } from "../ParsnipEntry";
-	import BlogTemplate from "../../../ui/templates/blog_template/BlogTemplate.svelte";
 
 	const { parsnipEntry }: { parsnipEntry: ParsnipEntry } = $props();
 
@@ -18,13 +16,6 @@
 	});
 </script>
 
-<OverridableMeta
-	title={parsnipEntry.basename}
-	ogTitle={parsnipEntry.basename}
-	ogDescription={parsnipEntry.tagline}
-	ogImage={[`${getCmsBaseUrl()}/${parsnipEntry.preview}`]}
-/>
-
 <BlogTemplate pageMeta={pageMeta}>
 	<ParsnipBlockChildren blockChildren={parsnipEntry.ast.ast.children} />
 </BlogTemplate>

package/dist/modules/parsnip/route-util/slugPageServerLoad.d.ts

@@ -1,8 +1,10 @@
 import type { ParsnipEntry } from "../ParsnipEntry";
+import type { PinyaHead } from "../../../ui/templates/runes.svelte";
 export declare const slugPageServerLoad: ({ params }: {
     params: {
         slug: string;
     };
 }) => Promise<{
     parsnipEntry: ParsnipEntry;
+    meta: PinyaHead;
 }>;

package/dist/modules/parsnip/route-util/slugPageServerLoad.js

@@ -18,7 +18,15 @@ export const slugPageServerLoad = async ({ params }) => {
     if (!entryResponse.ok) {
         error(400, "Not found");
     }
+    const parsnipEntry = await entryResponse.json();
+    const meta = {
+        title: parsnipEntry.basename,
+        ogTitle: parsnipEntry.basename,
+        ogDescription: parsnipEntry.tagline,
+        ogImage: parsnipEntry.preview ? [`${baseUrl}/${parsnipEntry.preview}`] : undefined
+    };
     return {
-        parsnipEntry: await entryResponse.json()
+        parsnipEntry,
+        meta
     };
 };

package/dist/ui/templates/PinyaBase.svelte

@@ -1,35 +1,36 @@
 <script lang="ts">
-	import { pinyaHead } from "./runes.svelte";
-	import { ModeWatcher } from "mode-watcher";
-	import { Modals } from "svelte-modals";
 	import { page } from "$app/state";
 	import { locales, localizeHref } from "../../paraglide/runtime";
 	import "../../styles/global.css";
-
-	import "../../styles/app.css";
+	import WebThumbnailImage from "../../assets/placeholder/placeholder_circle.png";
+	import type { PinyaHead } from "./runes.svelte";
 	import { ToastProvider } from "@skeletonlabs/skeleton-svelte";
+	import { ModeWatcher } from "mode-watcher";
+	import "../../styles/app.css";
+	import { Modals } from "svelte-modals";
 
 	let { children } = $props();
 
-	const ogUrl = $derived(`${pinyaHead.rootUrl}${page.url.pathname}`);
-</script>
+	// https://github.com/sveltejs/kit/issues/1540#issuecomment-2029016082
+	const meta: PinyaHead = ({
+		rootUrl: "http://localhost:5173",
+		title: "Welcome to my portfolio",
+		ogTitle: "Turnip time!",
+		ogDescription: "Welcome to Turnip's test portfolio",
+		ogImage: [WebThumbnailImage],
+		...(page.data?.meta ?? []) // override
+	});
 
-<svelte:head>
-	<meta charset="utf-8" />
-	<title>{pinyaHead.title}</title>
-	<meta property="og:url" content={ogUrl} />
-	<meta property="og:site_name" content={pinyaHead.ogTitle} />
-	<meta property="og:title" content={pinyaHead.ogTitle} />
-	<meta property="twitter:title" content={pinyaHead.ogTitle} />
-	<meta property="description" content={pinyaHead.ogDescription} />
-	<meta property="og:description" content={pinyaHead.ogDescription} />
-	<meta property="twitter:description" content={pinyaHead.ogDescription} />
-	<meta property="twitter:card" content="summary">
-	{#each pinyaHead.ogImage ?? [] as imgUrl, idx (`${idx}_${imgUrl}`)}
-		<meta property="og:image" content={imgUrl} />
-		<meta property="twitter:image" content={imgUrl} />
-	{/each}
-</svelte:head>
+	const ogUrl = $derived(`${meta?.rootUrl}${page.url.pathname}`);
+
+	const imageList = $derived.by(() => meta?.ogImage?.map(img => {
+		if (img.startsWith("/")) {
+			return `${meta?.rootUrl}${img}`;
+		}
+
+		return img;
+	}) ?? []);
+</script>
 
 <Modals>
 	<!-- shown when any modal is opened -->
@@ -54,6 +55,23 @@
 	{/each}
 </div>
 
+<svelte:head>
+	<meta charset="utf-8" />
+	<title>{meta?.title ?? page.url.hostname}</title>
+	<meta property="og:url" content={ogUrl} />
+	<meta property="og:site_name" content={meta?.ogTitle ?? 'Home'} />
+	<meta property="og:title" content={meta?.ogTitle ?? 'Home'} />
+	<meta property="twitter:title" content={meta?.ogTitle ?? 'Home'} />
+	<meta property="description" content={meta?.ogDescription ?? ''} />
+	<meta property="og:description" content={meta?.ogDescription ?? ''} />
+	<meta property="twitter:description" content={meta?.ogDescription ?? ''} />
+	<meta property="twitter:card" content="summary">
+	{#each imageList as imgUrl, idx (`${idx}_${imgUrl}`)}
+		<meta property="og:image" content={imgUrl} />
+		<meta property="twitter:image" content={imgUrl} />
+	{/each}
+</svelte:head>
+
 <style>
     .backdrop {
         position: fixed;

package/package.json

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