@studiocms/blog 0.1.0-beta.25 → 0.1.0-beta.26

package/dist/components/BaseHead.astro

@@ -9,6 +9,7 @@ import {
 	headDefaults,
 } from 'studiocms:lib';
 import type { z } from 'astro/zod';
+import { getHeroImage } from './heroHelper.js';
 
 let htmlDefaultHead: HeadUserConfig = [];
 let favicon = '';
@@ -31,14 +32,11 @@ interface Props {
 
 const canonicalURL = Astro.url;
 
-const {
-	title,
-	description,
-	lang = 'en',
-	image = 'https://images.unsplash.com/photo-1707343843982-f8275f3994c5?q=80&w=1032&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-} = Astro.props;
+const { title, description, lang = 'en', image } = Astro.props;
 
-const makeHeader = headDefaults(title, description, lang, Astro, favicon, image, canonicalURL);
+const ogImage = getHeroImage(image, Astro);
+
+const makeHeader = headDefaults(title, description, lang, Astro, favicon, ogImage, canonicalURL);
 
 const StudioCMSFrontEndHeads: z.input<ReturnType<typeof HeadConfigSchema>> = [
 	// Fonts

package/dist/components/PageList.astro

@@ -4,6 +4,7 @@ import { FormattedDate } from 'studiocms:components';
 import { CustomImage } from 'studiocms:imageHandler/components';
 import { pathWithBase } from 'studiocms:lib';
 import type { CombinedPageData } from 'studiocms:sdk/types';
+import { getHeroImage } from './heroHelper.js';
 
 const blogRouteFullPath = `${blogConfig.route}/[...slug]`;
 
@@ -26,7 +27,7 @@ const { blogPageList } = Astro.props;
        blogPageList.length > 0 && blogPageList.map(({slug, heroImage, title, description, publishedAt}) => (
            <li>
                <a href={pathWithBase(getBlogRoute(slug))}>
-                   <CustomImage src={heroImage} alt={title} width={720} height={360}/>
+                   <CustomImage src={getHeroImage(heroImage, Astro)} alt={title} width={720} height={360}/>
                    <div>
                        <span class="title">{title}</span>
                        <span class="date"> <FormattedDate date={publishedAt} /> </span>

package/dist/components/PostHeader.astro

@@ -1,21 +1,24 @@
 ---
 import { FormattedDate } from 'studiocms:components';
 import { CustomImage } from 'studiocms:imageHandler/components';
+import { getHeroImage } from './heroHelper.js';
 
 interface Props {
 	title: string;
 	publishedAt: Date;
 	updatedAt?: Date | null;
-	heroImage: string;
+	heroImage?: string;
 	description: string;
 }
 
 const { title, description, heroImage, publishedAt, updatedAt } = Astro.props;
+
+const heroImageToUse = getHeroImage(heroImage, Astro);
 ---
 <h1 class="title">{title}</h1>
 
 <div style="text-align: center;">
-	<CustomImage src={heroImage} alt={title} width={720} height={360}/>
+	<CustomImage src={heroImageToUse} alt={title} width={720} height={360}/>
 	<div>
 		<p class="date">Published: <FormattedDate date={publishedAt}/></p>
 		{updatedAt && <p class="date"> | Last Updated: <FormattedDate date={updatedAt}/></p>}

package/dist/components/consts.d.ts

@@ -0,0 +1 @@
+export declare const FALLBACK_OG_IMAGE = "https://images.unsplash.com/photo-1707343843982-f8275f3994c5?q=80&w=1032&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";

package/dist/components/consts.js

@@ -0,0 +1,4 @@
+const FALLBACK_OG_IMAGE = "https://images.unsplash.com/photo-1707343843982-f8275f3994c5?q=80&w=1032&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+export {
+  FALLBACK_OG_IMAGE
+};

package/dist/components/heroHelper.d.ts

@@ -0,0 +1,22 @@
+import type { AstroGlobal } from 'astro';
+/**
+ * Trims leading and trailing whitespace from the given input string.
+ *
+ * @param input - The string to trim. Can be `string`, `null`, or `undefined`.
+ * @returns The trimmed string, or `undefined` if the input is `null` or `undefined`.
+ */
+export declare function trimInput(input: string | null | undefined): string | undefined;
+/**
+ * Retrieves the appropriate hero image URL based on the provided `hero` string,
+ * the site's default OG image, or a fallback image.
+ *
+ * The function checks the following, in order:
+ * 1. If a valid `hero` image URL is provided, it returns that.
+ * 2. If not, it attempts to use the site's default OG image from the Astro global context.
+ * 3. If neither is available, it returns a constant fallback image URL.
+ *
+ * @param hero - The primary hero image URL, or `undefined` if not provided.
+ * @param Astro - The Astro global context, used to access site configuration.
+ * @returns The resolved hero image URL as a string.
+ */
+export declare function getHeroImage(hero: string | undefined, Astro: AstroGlobal): string;

package/dist/components/heroHelper.js

@@ -0,0 +1,17 @@
+import { FALLBACK_OG_IMAGE } from "./consts.js";
+function trimInput(input) {
+  if (input == null) return void 0;
+  const trimmed = input.trim();
+  return trimmed.length > 0 ? trimmed : void 0;
+}
+function getHeroImage(hero, Astro) {
+  const primary = trimInput(hero);
+  const siteFallback = trimInput(Astro.locals?.StudioCMS?.siteConfig?.data?.defaultOgImage);
+  if (primary) return primary;
+  if (siteFallback) return siteFallback;
+  return FALLBACK_OG_IMAGE;
+}
+export {
+  getHeroImage,
+  trimInput
+};

package/dist/routes/[...slug].astro

@@ -9,12 +9,14 @@ if (!slug) {
 	slug = 'index';
 }
 
-const { data: page } = await runSDK(SDKCoreJs.GET.page.bySlug(slug));
+const fullPageData = await runSDK(SDKCoreJs.GET.page.bySlug(slug));
 
-if (!page) {
+if (!fullPageData) {
 	return new Response(null, { status: 404 });
 }
 
+const page = fullPageData.data;
+
 const { title, description, heroImage } = page;
 ---
 

package/dist/routes/blog/[...slug].astro

@@ -14,13 +14,15 @@ if (!slug) {
 
 // Fetch the blog post content
 
-const { data: post } = await runSDK(SDKCoreJs.GET.page.bySlug(slug));
+const fullPageData = await runSDK(SDKCoreJs.GET.page.bySlug(slug));
 
 // If no content is found, redirect to 404
-if (!post) {
+if (!fullPageData) {
 	return new Response(null, { status: 404 });
 }
 
+const post = fullPageData.data;
+
 const { title, description, heroImage, publishedAt, updatedAt } = post;
 ---
 

package/dist/types.d.ts

@@ -19,13 +19,13 @@ export declare const FrontEndConfigSchema: z.ZodDefault<z.ZodOptional<z.ZodObjec
         attrs: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodString, z.ZodBoolean, z.ZodUndefined]>>>;
         content: z.ZodDefault<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        tag: "title" | "link" | "base" | "meta" | "noscript" | "script" | "style" | "template";
-        content: string;
+        tag: "title" | "base" | "link" | "style" | "meta" | "script" | "noscript" | "template";
         attrs: Record<string, string | boolean | undefined>;
+        content: string;
     }, {
-        tag: "title" | "link" | "base" | "meta" | "noscript" | "script" | "style" | "template";
-        content?: string | undefined;
+        tag: "title" | "base" | "link" | "style" | "meta" | "script" | "noscript" | "template";
         attrs?: Record<string, string | boolean | undefined> | undefined;
+        content?: string | undefined;
     }>, "many">>;
     /**
      * Favicon Configuration - The default favicon configuration for the Frontend
@@ -71,9 +71,9 @@ export declare const FrontEndConfigSchema: z.ZodDefault<z.ZodOptional<z.ZodObjec
 }, "strip", z.ZodTypeAny, {
     htmlDefaultLanguage: string;
     htmlDefaultHead: {
-        tag: "title" | "link" | "base" | "meta" | "noscript" | "script" | "style" | "template";
-        content: string;
+        tag: "title" | "base" | "link" | "style" | "meta" | "script" | "noscript" | "template";
         attrs: Record<string, string | boolean | undefined>;
+        content: string;
     }[];
     favicon: string;
     sitemap: boolean;
@@ -86,9 +86,9 @@ export declare const FrontEndConfigSchema: z.ZodDefault<z.ZodOptional<z.ZodObjec
 }, {
     htmlDefaultLanguage?: string | undefined;
     htmlDefaultHead?: {
-        tag: "title" | "link" | "base" | "meta" | "noscript" | "script" | "style" | "template";
-        content?: string | undefined;
+        tag: "title" | "base" | "link" | "style" | "meta" | "script" | "noscript" | "template";
         attrs?: Record<string, string | boolean | undefined> | undefined;
+        content?: string | undefined;
     }[] | undefined;
     favicon?: string | undefined;
     sitemap?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/blog",
-  "version": "0.1.0-beta.25",
+  "version": "0.1.0-beta.26",
   "description": "Add a blog to your StudioCMS project with ease!",
   "author": {
     "name": "withstudiocms",
@@ -60,10 +60,10 @@
   },
   "peerDependencies": {
     "astro": "^5.12.9",
-    "effect": "^3.17.9",
+    "effect": "^3.17.13",
     "vite": "^6.3.4",
-    "@studiocms/md": "0.1.0-beta.25",
-    "studiocms": "0.1.0-beta.25"
+    "@studiocms/md": "0.1.0-beta.26",
+    "studiocms": "0.1.0-beta.26"
   },
   "scripts": {
     "build": "buildkit build 'src/**/*.{ts,astro,css,json,png,d.ts}'",