@studiocms/blog 0.1.0-beta.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Astrolicious - StudioCMS - Adam Matthiesen, Jacob Jenkins, Paul Valladares
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# StudioCMS - Blog Provider

package/index.ts

@@ -0,0 +1,65 @@
+import { defineStudioCMSPlugin } from '@studiocms/core/lib';
+import defineTheme from 'astro-theme-provider';
+import { name } from './package.json';
+import { studioCMSBlogSchema as schema } from './schema';
+
+const studioCMSBlogTheme = defineTheme({
+	name,
+	schema,
+});
+
+/**
+ * User definable options for the StudioCMS Blog Theme
+ */
+export type ATP_ThemeOptions = Parameters<typeof studioCMSBlogTheme>[0];
+
+/**
+ * # StudioCMS Blog Theme(Integration)
+ * #### Powered by [`astro-theme-provider`](https://github.com/astrolicious/astro-theme-provider) by [Bryce Russell](https://github.com/BryceRussell)
+ *
+ * This theme provides a Blog Index Page and RSS Feed for your StudioCMS Site as well as route handling for Blog Posts.
+ *
+ * @example
+ * import { defineConfig } from 'astro/config';
+ * import db from '@astrojs/db';
+ * import studioCMS from 'studiocms';
+ * import studioCMSBlog from '@studiocms/blog';
+ *
+ * // https://astro.build/config
+ * export default defineConfig({
+ *   site: "https://example.com",
+ *   output: "server",
+ *   adapter: ...
+ *   integrations: [
+ *     db(), // REQUIRED - `@astrojs/db` must be included in the integrations list
+ *     studioCMS(), // REQUIRED - StudioCMS must be included in the integrations list
+ *     studioCMSBlog({
+ *       config: {
+ *         title: "My StudioCMS Blog",
+ *         description: "A Simple Blog build with Astro, Astrojs/DB, and StudioCMS.".
+ *       },
+ *     }),
+ *   ],
+ * });
+ */
+export function studioCMSBlog(options: ATP_ThemeOptions) {
+	let slug: string;
+
+	if (typeof options?.pages?.['/blog'] === 'string') {
+		slug = options.pages['/blog'];
+	} else {
+		slug = 'blog/';
+	}
+
+	defineStudioCMSPlugin({
+		pkgname: name,
+		opts: {
+			pluginLabel: 'StudioCMS Blog',
+			navigationLinks: [{ text: 'Blog', slug: slug }],
+		},
+	});
+
+	return studioCMSBlogTheme(options);
+}
+
+export default studioCMSBlog;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@studiocms/blog",
+  "version": "0.1.0-beta.5",
+  "description": "Add a blog to your StudioCMS project with ease!",
+  "author": {
+    "name": "Adam Matthiesen | Jacob Jenkins | Paul Valladares",
+    "url": "https://astro-studiocms.xyz"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/astrolicious/studiocms.git"
+  },
+  "contributors": [
+    "Adammatthiesen",
+    "jdtjenkins",
+    "dreyfus92"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "astro",
+    "astrocms",
+    "astrodb",
+    "astrolicious",
+    "astrostudio",
+    "astro-integration",
+    "astro-studio",
+    "astro-studiocms",
+    "cms",
+    "studiocms",
+    "withastro",
+    "blog",
+    "studio-blog",
+    "astro-blog",
+    "astro-studio-blog",
+    "studiocms-blog",
+    "theme",
+    "astro-theme",
+    "studiocms-theme",
+    "astro-studiocms-theme"
+  ],
+  "homepage": "https://astro-studiocms.xyz",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "files": [
+    "index.ts",
+    "schema.ts",
+    "src"
+  ],
+  "exports": {
+    ".": "./index.ts",
+    "./schema": "./schema.ts"
+  },
+  "type": "module",
+  "dependencies": {
+    "@astrojs/rss": "^4.0.7",
+    "astro-theme-provider": "^0.6.1",
+    "@studiocms/core": "0.1.0-beta.5",
+    "@studiocms/frontend": "0.1.0-beta.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.11"
+  },
+  "peerDependencies": {
+    "astro": ">=4.15"
+  }
+}

package/schema.ts

@@ -0,0 +1,35 @@
+import { z } from 'astro/zod';
+
+/**
+ * StudioCMS Blog Schema
+ */
+export const studioCMSBlogSchema = z.object({
+	/**
+	 * Title to be used in the RSS Feed.
+	 */
+	title: z.string().optional(),
+	/**
+	 * Description to be used in the RSS Feed.
+	 */
+	description: z.string().optional(),
+	/**
+	 * Allows for the configuration of the Blog Index Page.
+	 */
+	blogIndex: z
+		.object({
+			/**
+			 * Title to use for the Blog Index Page.
+			 */
+			title: z.string().optional().default('Blog'),
+			/**
+			 * Whether to show the RSS Feed URL on the Blog Index Page.
+			 */
+			showRSSFeed: z.boolean().optional().default(true),
+		})
+		.optional(),
+});
+
+/**
+ * StudioCMS Blog Schema Type
+ */
+export type StudioCMSBlogSchema = z.infer<typeof studioCMSBlogSchema>;

package/src/components/PageList.astro

@@ -0,0 +1,131 @@
+---
+import { pages } from '@studiocms/blog:context';
+import { FormattedDate } from 'studiocms:components';
+import { pathWithBase } from 'studiocms:helpers';
+import type { pageDataReponse } from 'studiocms:helpers/contentHelper';
+import { CustomImage } from 'studiocms:imageHandler/components';
+
+const blogRouteFullPath = pages.get('/blog/[...slug]');
+
+function getBlogRoute(slug: string) {
+	if (blogRouteFullPath) {
+		return blogRouteFullPath.replace('[...slug]', slug);
+	}
+	return '#';
+}
+
+interface Props {
+	blogPageList: pageDataReponse[];
+}
+
+const { blogPageList } = Astro.props;
+---
+
+<ul>
+    { 
+       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}/>
+                   <div>
+                       <span class="title">{title}</span>
+                       <span class="date"> <FormattedDate date={publishedAt} /> </span>
+                   </div>
+                   
+                   <p class="description">
+                       {description}
+                   </p>
+               </a>
+           </li>
+       ))
+    }
+
+    { 
+       blogPageList.length === 0 && <li>No blog posts found</li> 
+    }
+</ul>
+
+<style>
+	ul {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 2rem;
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+	}
+	ul li {
+		width: calc(50% - 1rem);
+	}
+	ul li * {
+		text-decoration: none;
+		transition: 0.2s ease;
+	}
+	ul li:first-child {
+		width: 100%;
+		margin-bottom: 1rem;
+		text-align: center;
+	}
+	ul li:first-child img {
+		width: 100%;
+	}
+	ul li:first-child .title {
+		font-size: 2.369rem;
+	}
+	ul li img {
+		margin-bottom: 0.5rem;
+		border-radius: 12px;
+	}
+	ul li a {
+		display: block;
+	}
+	.title {
+		margin: 0;
+		color: rgb(var(--black));
+        font: bold;
+        font-weight: bold;
+		line-height: 1;
+        display: inline;
+	}
+	.date {
+		margin: 0;
+		color: rgb(var(--gray));
+        font: normal;
+        line-height: normal;
+        display: inline;
+	}
+	.description {
+		margin: 0;
+		color: rgb(var(--black));
+        width: 720px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+	}
+	ul li a:hover span,
+	ul li a:hover .date {
+		color: rgb(var(--accent));
+	}
+	ul a:hover img {
+		box-shadow: var(--box-shadow);
+	}
+	@media (max-width: 720px) {
+		ul {
+			gap: 0.5em;
+		}
+		ul li {
+			width: 100%;
+			text-align: center;
+		}
+		ul li:first-child {
+			margin-bottom: 0;
+		}
+		ul li:first-child .title {
+			font-size: 1.563em;
+		}
+        ul li:first-child .description {
+            width: 100%;
+        }
+	}
+</style>

package/src/components/PostHeader.astro

@@ -0,0 +1,46 @@
+---
+import { FormattedDate } from 'studiocms:components';
+import { CustomImage } from 'studiocms:imageHandler/components';
+
+interface Props {
+	title: string;
+	publishedAt: Date;
+	updatedAt?: Date | null;
+	heroImage: string;
+	description: string;
+}
+
+const { title, description, heroImage, publishedAt, updatedAt } = Astro.props;
+---
+<h1 class="title">{title}</h1>
+
+<div style="text-align: center;">
+	<CustomImage src={heroImage} 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>}
+	</div>
+	<p class="description">{description}</p>
+</div>
+
+<style>
+	.title {
+		margin: 0;
+		color: rgb(var(--black));
+        font: bold;
+        font-weight: bold;
+		line-height: 1;
+	}
+	.date {
+		margin: 0;
+		color: rgb(var(--gray));
+        font: normal;
+        line-height: normal;
+        display: inline;
+	}
+	.description {
+		margin: 0;
+		color: rgb(var(--gray));
+        width: 720px;
+	}
+</style>

package/src/components/RSSIcon.astro

@@ -0,0 +1,6 @@
+---
+const props = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" {...props}>
+	<path fill="currentColor" d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27zm0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93z" />
+</svg>

package/src/layouts/BlogLayout.astro

@@ -0,0 +1,39 @@
+---
+import config from '@studiocms/blog:config';
+import { Layout as FrontLayout } from '@studiocms/frontend/components';
+
+interface Props {
+	title: string;
+	description: string;
+	lang?: string | undefined;
+	heroImage?: string;
+	siteTitle?: string;
+	siteDescription?: string;
+	pageTitleDelimiter?: string;
+	pageDescriptionDelimiter?: string;
+}
+
+const {
+	title,
+	description,
+	heroImage,
+	lang,
+	pageDescriptionDelimiter,
+	pageTitleDelimiter,
+	siteDescription = config.description,
+	siteTitle,
+} = Astro.props;
+---
+
+<FrontLayout 
+    {title} 
+    {description} 
+    {siteTitle} 
+    {siteDescription}
+    {lang}
+    {heroImage} 
+    {pageDescriptionDelimiter} 
+    {pageTitleDelimiter} 
+    >
+    <slot />
+</FrontLayout>

package/src/pages/blog/[...slug].astro

@@ -0,0 +1,40 @@
+---
+import { PostHeader } from '@studiocms:blog/components';
+import { BlogLayout } from '@studiocms:blog/layouts';
+import { contentHelper } from 'studiocms:helpers/contentHelper';
+import { StudioCMSRenderer } from 'studiocms:renderer';
+import { name } from '../../../package.json';
+
+// Get the slug from the URL
+const { slug } = Astro.params;
+
+// If no slug is provided, redirect to 404
+if (!slug) {
+	return new Response(null, { status: 404 });
+}
+
+// Fetch the blog post content
+const { id, title, description, heroImage, publishedAt, updatedAt, content } = await contentHelper(
+	slug,
+	name
+);
+
+// If no content is found, redirect to 404
+if (!id) {
+	return new Response(null, { status: 404 });
+}
+---
+<BlogLayout {title} {description} {heroImage}>
+    <main>
+        <article>
+            <PostHeader {title} {description} {heroImage} {publishedAt} {updatedAt} />
+            <StudioCMSRenderer {content} />
+        </article>
+    </main>
+</BlogLayout>
+
+<style>
+	main {
+		width: 960px;
+	}
+</style>

package/src/pages/blog/index.astro

@@ -0,0 +1,38 @@
+---
+import config from '@studiocms/blog:config';
+import { pages } from '@studiocms/blog:context';
+import { PageList, RSSIcon } from '@studiocms:blog/components';
+import { BlogLayout } from '@studiocms:blog/layouts';
+import { getPageList } from 'studiocms:helpers/contentHelper';
+import { name } from '../../../package.json';
+
+// Set the title and description
+const { description: configDescription, blogIndex } = config;
+
+const title: string = blogIndex?.title || 'Blog';
+const description: string = configDescription || 'Blog Index';
+const showRSSFeed: boolean = blogIndex?.showRSSFeed || true;
+
+// Get all pages
+const pageList = await getPageList();
+
+// Get the RSS feed URL
+const rssPath = pages.get('/rss.xml');
+
+// Get all blog pages and sort by published date
+const blogPageList = pageList
+	.filter((page) => page.package === name)
+	.sort((a, b) => Date.parse(b.publishedAt.toString()) - Date.parse(a.publishedAt.toString()));
+---
+<BlogLayout {title} description={description} >
+    <main>
+        <h1>{title} {showRSSFeed && rssPath && <a href={rssPath}><RSSIcon /></a>}</h1>
+        <PageList {blogPageList} />
+    </main>
+</BlogLayout>
+
+<style>
+	main {
+		width: 960px;
+	}
+</style>

package/src/pages/rss.xml.ts

@@ -0,0 +1,60 @@
+import config from '@studiocms/blog:config';
+import { pages } from '@studiocms/blog:context';
+import { pathWithBase } from 'studiocms:helpers';
+import { contentHelper, getPageList, getSiteConfig } from 'studiocms:helpers/contentHelper';
+import { StudioCMSRenderer } from 'studiocms:renderer';
+import rss from '@astrojs/rss';
+import type { APIContext } from 'astro';
+import { name } from '../../package.json';
+
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+
+const blogRouteFullPath = pages.get('/blog/[...slug]');
+
+function getBlogRoute(slug: string) {
+	if (blogRouteFullPath) {
+		return blogRouteFullPath.replace('[...slug]', slug);
+	}
+	return '#';
+}
+
+export async function GET(context: APIContext) {
+	// Get Config from Studio Database
+	const studioCMSConfig = await getSiteConfig();
+
+	// Set Title, Description, and Site
+	const title = config.title ?? studioCMSConfig.title;
+	const description = config.description ?? studioCMSConfig.description;
+	const site = context.site ?? 'https://example.com';
+
+	// Get all Posts from Studio Database
+	const unorderedPosts = await getPageList();
+
+	// Order Posts by Published Date
+	const orderedPosts = unorderedPosts
+		.filter((page) => page.package === name)
+		.sort((a, b) => Date.parse(b.publishedAt.toString()) - Date.parse(a.publishedAt.toString()));
+
+	// Render Known Posts
+	const items = await Promise.all(
+		orderedPosts.map(async ({ slug, title, description, publishedAt: pubDate, package: pkg }) => {
+			const { content: fetchedContent } = await contentHelper(slug, pkg);
+			const container = await AstroContainer.create();
+			const renderedContent = await container.renderToString(StudioCMSRenderer, {
+				props: { content: fetchedContent },
+			});
+
+			const content = renderedContent
+				.replace(/<!DOCTYPE html>/, '')
+				.replace(/<html.*?>/, '')
+				.replace(/<\/html>/, '')
+				.trim();
+
+			const link = pathWithBase(getBlogRoute(slug));
+
+			return { title, description, pubDate, content, link };
+		})
+	);
+
+	return rss({ title, description, site, items });
+}