@studiocms/blog 0.1.0-beta.9 → 0.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 StudioCMS - Adam Matthiesen, Jacob Jenkins, Paul Valladares
+Copyright (c) 2025-present StudioCMS - withstudiocms (https://github.com/withstudiocms)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1 +1,9 @@
-# StudioCMS - Blog Provider
+# StudioCMS - Blog Provider
+
+[![codecov](https://codecov.io/github/withstudiocms/studiocms/graph/badge.svg?token=RN8LT1O5E2&component=studiocms_blog)](https://codecov.io/github/withstudiocms/studiocms)
+
+For information and docs related to this package see [The StudioCMS Docs](https://docs.studiocms.dev/package-catalog/studiocms-plugins/studiocms-blog/)
+
+## License
+
+[MIT Licensed](./LICENSE).

package/dist/blog.d.ts

@@ -6,3 +6,16 @@ declare module 'studiocms:blog/config' {
 	};
 	export default config;
 }
+
+declare module 'studiocms:blog/frontend-config' {
+	const config: {
+		htmlDefaultLanguage: string;
+		htmlDefaultHead: {
+			tag: 'title' | 'base' | 'link' | 'style' | 'meta' | 'script' | 'noscript' | 'template';
+			attrs: Record<string, string | boolean | undefined>;
+			content: string;
+		}[];
+		favicon: string;
+	};
+	export default config;
+}

package/dist/components/BaseHead.astro

@@ -1,24 +1,25 @@
 ---
 import '../styles/base.css';
-import config from 'studiocms:config';
+import config from 'studiocms:blog/frontend-config';
 import {
+	createHead,
 	type HeadConfig,
 	type HeadConfigSchema,
 	type HeadUserConfig,
-	createHead,
 	headDefaults,
 } from 'studiocms:lib';
 import type { z } from 'astro/zod';
+import { getHeroImage } from './heroHelper.js';
 
 let htmlDefaultHead: HeadUserConfig = [];
 let favicon = '';
 
-if (config.defaultFrontEndConfig && typeof config.defaultFrontEndConfig === 'object') {
-	if (config.defaultFrontEndConfig.htmlDefaultHead) {
-		htmlDefaultHead.push(...config.defaultFrontEndConfig.htmlDefaultHead);
+if (config && typeof config === 'object') {
+	if (config.htmlDefaultHead) {
+		htmlDefaultHead.push(...config.htmlDefaultHead);
 	}
-	if (config.defaultFrontEndConfig.favicon) {
-		favicon = config.defaultFrontEndConfig.favicon;
+	if (config.favicon) {
+		favicon = config.favicon;
 	}
 }
 
@@ -26,19 +27,16 @@ interface Props {
 	title: string;
 	description: string;
 	lang?: string | undefined;
-	image?: string | undefined;
+	image?: string | null | undefined;
 }
 
 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 ogImage = getHeroImage(image, Astro);
 
-const makeHeader = headDefaults(title, description, lang, Astro, favicon, image, canonicalURL);
+const makeHeader = headDefaults(title, description, lang, Astro, favicon, ogImage, canonicalURL);
 
 const StudioCMSFrontEndHeads: z.input<ReturnType<typeof HeadConfigSchema>> = [
 	// Fonts

package/dist/components/Navigation.astro

@@ -1,8 +1,6 @@
 ---
-import { StudioCMSRoutes } from 'studiocms:lib';
 import './navigation.css';
 import { frontendNavigation } from 'studiocms:plugin-helpers';
-import studioCMS_SDK from 'studiocms:sdk/cache';
 
 type Props = {
 	topLevelLinkCount?: number;
@@ -10,12 +8,13 @@ type Props = {
 
 const { topLevelLinkCount = 3 } = Astro.props;
 
-const config = (await studioCMS_SDK.GET.siteConfig()).data;
+const config = Astro.locals.StudioCMS.siteConfig.data;
 
 const { title } = config || { title: 'StudioCMS' };
 const {
 	mainLinks: { baseSiteURL },
-} = StudioCMSRoutes;
+	authLinks: { loginURL },
+} = Astro.locals.StudioCMS.routeMap;
 
 type LinkProps = {
 	text: string;
@@ -45,7 +44,7 @@ const links: LinkProps[] = await frontendNavigation();
             )) 
         }
 
-<a class="avatar" href={StudioCMSRoutes.authLinks.loginURL}>Dashboard</a>
+<a class="avatar" href={loginURL}>Dashboard</a>
     </div> 
 ) }
 
@@ -78,6 +77,6 @@ const links: LinkProps[] = await frontendNavigation();
                 </div>
             </div>
 
-<a class="avatar" href={StudioCMSRoutes.authLinks.loginURL}>Dashboard</a>
+<a class="avatar" href={loginURL}>Dashboard</a>
     </div>
 ) }

package/dist/components/PageList.astro

@@ -3,7 +3,8 @@ import blogConfig from 'studiocms:blog/config';
 import { FormattedDate } from 'studiocms:components';
 import { CustomImage } from 'studiocms:imageHandler/components';
 import { pathWithBase } from 'studiocms:lib';
-import type { CombinedPageData } from 'studiocms:sdk/types';
+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 | null | undefined;
 	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/editor.astro

@@ -0,0 +1,8 @@
+---
+import MDEditor from '@studiocms/md/editor';
+import type { PluginPageTypeEditorProps } from 'studiocms/types';
+
+interface Props extends PluginPageTypeEditorProps {}
+const { content } = Astro.props;
+---
+<MDEditor {content} />

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 | null | 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/components/render.d.ts

@@ -0,0 +1,15 @@
+declare const renderer: {
+    name: string;
+    renderer: (content: string) => Promise<string>;
+    sanitizeOpts: {
+        allowElements?: string[] | undefined;
+        blockElements?: string[] | undefined;
+        dropElements?: string[] | undefined;
+        allowAttributes?: Record<string, string[]> | undefined;
+        dropAttributes?: Record<string, string[]> | undefined;
+        allowComponents?: boolean | undefined;
+        allowCustomElements?: boolean | undefined;
+        allowComments?: boolean | undefined;
+    } | undefined;
+};
+export default renderer;

package/dist/components/render.js

@@ -0,0 +1,10 @@
+import MDRenderer from "@studiocms/md/renderer";
+const renderer = {
+  name: "@studiocms/blog",
+  renderer: MDRenderer.renderer,
+  sanitizeOpts: MDRenderer.sanitizeOpts
+};
+var render_default = renderer;
+export {
+  render_default as default
+};

package/dist/index.d.ts

@@ -1,5 +1,7 @@
+import type { AstroIntegration } from 'astro';
 import { type StudioCMSPlugin } from 'studiocms/plugins';
-import type { StudioCMSBlogOptions } from './types.js';
+import { type StudioCMSBlogOptions } from './types.js';
+export declare function internalBlogIntegration(options?: StudioCMSBlogOptions): AstroIntegration;
 /**
  * Creates and configures the StudioCMS Blog plugin.
  *

package/dist/index.js

@@ -1,75 +1,120 @@
 import { addVirtualImports, createResolver } from "astro-integration-kit";
-import { pathWithBase } from "studiocms/lib/pathGenerators.js";
+import { pathWithBase } from "studiocms/lib/pathGenerators";
 import { definePlugin } from "studiocms/plugins";
+import { FrontEndConfigSchema } from "./types.js";
 const packageIdentifier = "@studiocms/blog";
-function studioCMSBlogPlugin(options) {
-  const title = options?.blog?.title || "Blog";
-  const enableRSS = options?.blog?.enableRSS || true;
-  const route = pathWithBase(options?.blog?.route || "/blog");
-  const sitemap = options?.sitemap ?? true;
-  const injectRoutes = options?.injectRoutes ?? true;
-  const { resolve } = createResolver(import.meta.url);
-  return definePlugin({
-    identifier: packageIdentifier,
-    name: "StudioCMS Blog",
-    // TODO: Update this to the correct version when the package is ready to be published
-    studiocmsMinimumVersion: "0.1.0-beta.7",
-    frontendNavigationLinks: [{ label: title, href: route }],
-    pageTypes: [{ identifier: packageIdentifier, label: "Blog Post (StudioCMS Blog)" }],
-    triggerSitemap: sitemap,
-    sitemaps: [
-      {
-        pluginName: packageIdentifier,
-        sitemapXMLEndpointPath: resolve("./routes/sitemap-posts.xml.js")
-      },
-      {
-        pluginName: "pages",
-        sitemapXMLEndpointPath: resolve("./routes/sitemap-md.xml.js")
-      }
-    ],
-    integration: {
-      name: packageIdentifier,
-      hooks: {
-        "astro:config:setup": async (params) => {
-          const { injectRoute } = params;
-          if (injectRoutes) {
-            injectRoute({
-              entrypoint: resolve("./routes/[...slug].astro"),
-              pattern: pathWithBase("[...slug]"),
-              prerender: false
-            });
-            injectRoute({
-              entrypoint: resolve("./routes/blog/index.astro"),
-              pattern: `${route}`,
-              prerender: false
-            });
+function internalBlogIntegration(options) {
+  const resolvedOptions = FrontEndConfigSchema.parse(options);
+  const {
+    blog: { title, enableRSS, route: orgRoute },
+    injectRoutes,
+    ...frontendConfig
+  } = resolvedOptions;
+  const route = pathWithBase(orgRoute);
+  const resEntrypoint = (path) => `@studiocms/blog/routes/${path}`;
+  return {
+    name: packageIdentifier,
+    hooks: {
+      /* v8 ignore start */
+      /* this is tested indirectly via the plugin tests */
+      "astro:config:setup": async (params) => {
+        const { injectRoute } = params;
+        if (injectRoutes) {
+          injectRoute({
+            entrypoint: resEntrypoint("[...slug].astro"),
+            pattern: pathWithBase("[...slug]"),
+            prerender: false
+          });
+          injectRoute({
+            entrypoint: resEntrypoint("blog/index.astro"),
+            pattern: `${route}`,
+            prerender: false
+          });
+          injectRoute({
+            entrypoint: resEntrypoint("blog/[...slug].astro"),
+            pattern: `${route}/[...slug]`,
+            prerender: false
+          });
+          if (enableRSS) {
             injectRoute({
-              entrypoint: resolve("./routes/blog/[...slug].astro"),
-              pattern: `${route}/[...slug]`,
+              entrypoint: resEntrypoint("rss.xml.js"),
+              pattern: pathWithBase("rss.xml"),
               prerender: false
             });
-            if (enableRSS) {
-              injectRoute({
-                entrypoint: resolve("./routes/rss.xml.js"),
-                pattern: pathWithBase("rss.xml"),
-                prerender: false
-              });
-            }
           }
-          addVirtualImports(params, {
-            name: packageIdentifier,
-            imports: {
-              "studiocms:blog/config": `
+        }
+        addVirtualImports(params, {
+          name: packageIdentifier,
+          imports: {
+            "studiocms:blog/config": `
 							const config = {
-								title: "${title}",
+								title: ${JSON.stringify(title)},
 								enableRSS: ${enableRSS},
-								route: "${route}"
+								route: ${JSON.stringify(route)}
 							}
 							export default config;
+						`,
+            "studiocms:blog/frontend-config": `
+							const config = ${JSON.stringify(frontendConfig)};
+							export default config;
 						`
+          }
+        });
+      }
+      /* v8 ignore stop */
+    }
+  };
+}
+function studioCMSBlogPlugin(options) {
+  const resolvedOptions = FrontEndConfigSchema.parse(options);
+  const {
+    blog: { title, route: orgRoute },
+    sitemap
+  } = resolvedOptions;
+  const route = pathWithBase(orgRoute);
+  const { resolve } = createResolver(import.meta.url);
+  const editor = resolve("./components/editor.astro");
+  const renderer = resolve("./components/render.js");
+  return definePlugin({
+    identifier: packageIdentifier,
+    name: "StudioCMS Blog",
+    studiocmsMinimumVersion: "0.1.0-beta.21",
+    requires: ["@studiocms/md"],
+    hooks: {
+      "studiocms:astro-config": ({ addIntegrations }) => {
+        addIntegrations(internalBlogIntegration(resolvedOptions));
+      },
+      "studiocms:frontend": ({ setFrontend }) => {
+        setFrontend({
+          frontendNavigationLinks: [{ label: title, href: route }]
+        });
+      },
+      "studiocms:rendering": ({ setRendering }) => {
+        setRendering({
+          pageTypes: [
+            {
+              identifier: packageIdentifier,
+              label: "Blog Post (StudioCMS Blog)",
+              pageContentComponent: editor,
+              rendererComponent: renderer
             }
-          });
-        }
+          ]
+        });
+      },
+      "studiocms:sitemap": ({ setSitemap }) => {
+        setSitemap({
+          triggerSitemap: sitemap,
+          sitemaps: [
+            {
+              pluginName: packageIdentifier,
+              sitemapXMLEndpointPath: resolve("./routes/sitemap-posts.xml.js")
+            },
+            {
+              pluginName: "pages",
+              sitemapXMLEndpointPath: resolve("./routes/sitemap-md.xml.js")
+            }
+          ]
+        });
       }
     }
   });
@@ -77,5 +122,6 @@ function studioCMSBlogPlugin(options) {
 var index_default = studioCMSBlogPlugin;
 export {
   index_default as default,
+  internalBlogIntegration,
   studioCMSBlogPlugin
 };

package/dist/layouts/Layout.astro

@@ -1,15 +1,10 @@
 ---
-import { defaultFrontEndConfig } from 'studiocms:config';
-import studioCMS_SDK from 'studiocms:sdk/cache';
+import defaultFrontEndConfig from 'studiocms:blog/frontend-config';
 import BaseHead from '../components/BaseHead.astro';
 import Footer from '../components/Footer.astro';
 import Navigation from '../components/Navigation.astro';
 
-const { title: SiteTitle, description: SiteDescription } = (await studioCMS_SDK.GET.siteConfig())
-	.data || {
-	title: 'StudioCMS - Database Unavailable',
-	description: 'StudioCMS - Database Unavailable',
-};
+const { title: SiteTitle, description: SiteDescription } = Astro.locals.StudioCMS.siteConfig.data;
 
 let htmlDefaultLanguage = 'en';
 
@@ -23,7 +18,7 @@ type Props = {
 	title: string;
 	description: string;
 	lang?: string | undefined;
-	heroImage?: string | undefined;
+	heroImage?: string | null | undefined;
 	siteTitle?: string | undefined;
 	siteDescription?: string | undefined;
 	pageTitleDelimiter?: string | undefined;

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

@@ -1,36 +1,25 @@
 ---
-import config from 'studiocms:config';
 import { StudioCMSRenderer } from 'studiocms:renderer';
-import studioCMS_SDK from 'studiocms:sdk';
-import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { runSDK, SDKCoreJs } from 'studiocms:sdk';
 import Layout from '../layouts/Layout.astro';
 
-// This is here to refresh the cache when needed
-const allPages = await studioCMS_SDK_Cache.GET.pages();
-
-if (config.dbStartPage) {
-	return Astro.redirect('/start');
-}
-
 let { slug } = Astro.params;
 
 if (!slug) {
 	slug = 'index';
 }
 
-const page = await studioCMS_SDK.GET.databaseEntry.pages.bySlug(slug);
+const page = await runSDK(SDKCoreJs.GET.page.bySlug(slug));
 
 if (!page) {
 	return new Response(null, { status: 404 });
 }
 
-const { title, description, heroImage, defaultContent } = page;
-
-const content = defaultContent?.content || '';
+const { title, description, heroImage } = page;
 ---
 
 <Layout title={title} description={description} heroImage={heroImage}>
 	<main>
-		<StudioCMSRenderer content={content} />
+		<StudioCMSRenderer data={page} />
 	</main>
-</Layout>
+</Layout>

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

@@ -1,13 +1,9 @@
 ---
 import { StudioCMSRenderer } from 'studiocms:renderer';
-import studioCMS_SDK from 'studiocms:sdk';
-import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { runSDK, SDKCoreJs } from 'studiocms:sdk';
 import PostHeader from '../../components/PostHeader.astro';
 import Layout from '../../layouts/Layout.astro';
 
-// This is here to refresh the cache when needed
-const allPages = await studioCMS_SDK_Cache.GET.pages();
-
 // Get the slug from the URL
 const { slug } = Astro.params;
 
@@ -18,27 +14,27 @@ if (!slug) {
 
 // Fetch the blog post content
 
-const post = await studioCMS_SDK.GET.databaseEntry.pages.bySlug(slug);
+const post = await runSDK(SDKCoreJs.GET.page.bySlug(slug));
 
 // If no content is found, redirect to 404
 if (!post) {
 	return new Response(null, { status: 404 });
 }
 
-const { title, description, heroImage, publishedAt, updatedAt, defaultContent } = post;
-
-// If no content is found, redirect to 404
-if (!defaultContent) {
-	return new Response(null, { status: 404 });
-}
-
-const content = defaultContent.content || '';
+const { title, description, heroImage, publishedAt, updatedAt } = post;
 ---
+
 <Layout {title} {description} {heroImage}>
     <main>
         <article>
-            <PostHeader {title} {description} {heroImage} {publishedAt} {updatedAt} />
-            <StudioCMSRenderer {content} />
+            <PostHeader
+                {title}
+                {description}
+                {heroImage}
+                {publishedAt}
+                {updatedAt}
+            />
+            <StudioCMSRenderer data={post} />
         </article>
     </main>
-</Layout>
+</Layout>

package/dist/routes/blog/index.astro

@@ -1,13 +1,11 @@
 ---
 import blogConfig from 'studiocms:blog/config';
-import studioCMS_SDK from 'studiocms:sdk/cache';
+import { runSDK, SDKCoreJs } from 'studiocms:sdk';
 import PageList from '../../components/PageList.astro';
 import RSSIcon from '../../components/RSSIcon.astro';
 import Layout from '../../layouts/Layout.astro';
 
-const config = (await studioCMS_SDK.GET.siteConfig()).data || {
-	description: 'StudioCMS - Database Unavailable',
-};
+const config = Astro.locals.StudioCMS.siteConfig.data;
 
 // Set the title and description
 const { description: configDescription } = config;
@@ -17,16 +15,26 @@ const description: string = configDescription || 'Blog Index';
 const showRSSFeed: boolean = blogConfig.enableRSS;
 
 // Get all pages
-const blogPageList = (await studioCMS_SDK.GET.pages())
-	.map(({ data }) => data)
-	.filter(({ package: pkg }) => pkg === '@studiocms/blog');
+const blogPageList = (await runSDK(SDKCoreJs.GET.pages())).filter(
+	({ package: pkg }) => pkg === '@studiocms/blog'
+);
 
 // Get the RSS feed URL
 const rssPath = '/rss.xml';
 ---
-<Layout {title} description={description} >
+
+<Layout {title} description={description}>
     <main>
-        <h1>{title} {showRSSFeed && rssPath && <a href={rssPath}><RSSIcon /></a>}</h1>
+        <h1>
+            {title}
+            {
+                showRSSFeed && rssPath && (
+                    <a href={rssPath}>
+                        <RSSIcon />
+                    </a>
+                )
+            }
+        </h1>
         <PageList {blogPageList} />
     </main>
-</Layout>
+</Layout>

package/dist/routes/rss.xml.d.ts

@@ -1,2 +1 @@
-import type { APIContext } from 'astro';
-export declare function GET(context: APIContext): Promise<Response>;
+export declare const GET: import("astro").APIRoute;