@turnipxenon/pineapple 4.1.3 → 4.2.0

package/dist/modules/overrideable_meta/OverridableMeta.svelte

@@ -17,50 +17,38 @@ 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) {
+		console.log('setting titel', 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/ParsnipBlockChildren.svelte

@@ -20,6 +20,8 @@
 		{/if}
 	{:else if child.type === 'heading'}
 		<ParsnipHeading heading={child} />
+	{:else if child.type === 'thematicBreak'}
+		<hr>
 	{:else if child.type === 'blockquote'}
 		<!-- todo: do advanced things like callout blocks -->
 		<blockquote>

package/dist/modules/parsnip/ParsnipOverall.d.ts

@@ -12,6 +12,8 @@ export interface SimplifiedEntry {
      * url of preview image relative to base blog path
      */
     preview?: string;
+    previewAlt?: string;
+    tagline?: string;
 }
 export interface ParsnipEntrySummary extends SimplifiedEntry {
     /**

package/dist/modules/parsnip/ParsnipPhrasingChildren.svelte

@@ -16,6 +16,10 @@
 		</strong>
 	{:else if child.type === 'inlineCode'}
 		<code class="inline-code">{child.value}</code>
+	{:else if child.type === 'link'}
+		<a href={child.url}>
+			<Self phrasingChildren={child.children} />
+		</a>
 	{:else if child.type === 'embedWikilink'}
 		<ParsnipEmbedWikilink wikilink={child} />
 	{:else if child.type === 'wikilink'}

package/dist/modules/parsnip/ParsnipWikilink.svelte

@@ -17,4 +17,4 @@
 
 <!-- todo(turnip): determine appropriate media -->
 <!-- todo(turnip): add alt text -->
-<a href={`${getWebBaseUrl()}/${wikilink.fileAccessor.slug}`}>{wikilink.fileAccessor.target}</a>
+<a href={`${getWebBaseUrl()}/${wikilink.fileAccessor.slug}`} data-sveltekit-reload>{wikilink.fileAccessor.target}</a>

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

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

package/dist/ui/modules/NavigationMenu/NavigationMenu.svelte

@@ -40,7 +40,7 @@
 		pageSize = $bindable(5),
 		currentIndex = $bindable(0),
 		parsnipOverall = undefined,
-		parsnipBasePath = '',
+		parsnipBasePath = ""
 	}: Props = $props();
 
 	const fileBasedList = parsePageMeta(fileList, jsonList, imageMap, compareFn);
@@ -51,8 +51,10 @@
 			relativeLink: `${parsnipBasePath}${pf.slug}`,
 			tags: pf.tags,
 			imageUrl: pf.preview ? `${parsnipOverall.baseUrl}/${pf.preview}` : undefined,
+			imageAlt: pf.previewAlt,
 			datePublished: pf.stat.ctime ? new Date(pf.stat.ctime).toISOString().split("T")[0] : undefined,
-			lastUpdated: pf.stat.mtime ? new Date(pf.stat.mtime).toISOString().split("T")[0] : undefined
+			lastUpdated: pf.stat.mtime ? new Date(pf.stat.mtime).toISOString().split("T")[0] : undefined,
+			description: pf.tagline
 		};
 		return meta;
 	}) ?? [];

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.3",
+  "version": "4.2.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",