@studiocms/blog 0.1.0-beta.7 → 0.1.0-beta.9

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Astrolicious - StudioCMS - Adam Matthiesen, Jacob Jenkins, Paul Valladares
+Copyright (c) 2024 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

package/dist/blog.d.ts

@@ -0,0 +1,8 @@
+declare module 'studiocms:blog/config' {
+	const config: {
+		title: string;
+		enableRSS: boolean;
+		route: string;
+	};
+	export default config;
+}

package/dist/components/BaseHead.astro

@@ -0,0 +1,73 @@
+---
+import '../styles/base.css';
+import config from 'studiocms:config';
+import {
+	type HeadConfig,
+	type HeadConfigSchema,
+	type HeadUserConfig,
+	createHead,
+	headDefaults,
+} from 'studiocms:lib';
+import type { z } from 'astro/zod';
+
+let htmlDefaultHead: HeadUserConfig = [];
+let favicon = '';
+
+if (config.defaultFrontEndConfig && typeof config.defaultFrontEndConfig === 'object') {
+	if (config.defaultFrontEndConfig.htmlDefaultHead) {
+		htmlDefaultHead.push(...config.defaultFrontEndConfig.htmlDefaultHead);
+	}
+	if (config.defaultFrontEndConfig.favicon) {
+		favicon = config.defaultFrontEndConfig.favicon;
+	}
+}
+
+interface Props {
+	title: string;
+	description: string;
+	lang?: string | undefined;
+	image?: string | 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 makeHeader = headDefaults(title, description, lang, Astro, favicon, image, canonicalURL);
+
+const StudioCMSFrontEndHeads: z.input<ReturnType<typeof HeadConfigSchema>> = [
+	// Fonts
+	{ tag: 'link', attrs: { rel: 'preconnect', href: 'https://fonts.googleapis.com' } },
+	{ tag: 'link', attrs: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' } },
+	{
+		tag: 'link',
+		attrs: {
+			href: 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap',
+			rel: 'stylesheet',
+		},
+	},
+];
+
+makeHeader.push(...StudioCMSFrontEndHeads);
+
+// TODO: Setup Sitemap integration
+// Link to sitemap, but only when `site` is set.
+// if (Astro.site) {
+// 	makeHeader.push({
+// 		tag: 'link',
+// 		attrs: {
+// 			rel: 'sitemap',
+// 			href: fileWithBase('/sitemap-index.xml'),
+// 		},
+// 	});
+// }
+
+const head = createHead(makeHeader, htmlDefaultHead as HeadConfig);
+---
+
+{head.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}

package/dist/components/Footer.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+	siteTitle: string;
+}
+
+const { siteTitle } = Astro.props;
+const today = new Date();
+---
+
+<footer>
+	&copy; <span id="footer-year">{today.getFullYear()}</span> {siteTitle}. All rights reserved.
+</footer>
+
+<script is:inline>
+	const footerYear = document.getElementById('footer-year');
+	footerYear.textContent = new Date().getFullYear();
+</script>
+
+<style>
+	footer {
+		padding: 2em 1em 6em 1em;
+		background: linear-gradient(var(--gray-gradient)) no-repeat;
+		color: rgb(var(--gray));
+		text-align: center;
+	}
+</style>

package/dist/components/Navigation.astro

@@ -0,0 +1,83 @@
+---
+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;
+};
+
+const { topLevelLinkCount = 3 } = Astro.props;
+
+const config = (await studioCMS_SDK.GET.siteConfig()).data;
+
+const { title } = config || { title: 'StudioCMS' };
+const {
+	mainLinks: { baseSiteURL },
+} = StudioCMSRoutes;
+
+type LinkProps = {
+	text: string;
+	href: string;
+};
+
+const links: LinkProps[] = await frontendNavigation();
+---
+
+<!-- If no dropdown items -->
+{ ( links.length < topLevelLinkCount || links.length === topLevelLinkCount ) && (
+    <div class="navigation">
+        <div class="title"><a href={baseSiteURL}>{title}</a></div>
+        <div class="mini-nav">
+            <button>Menu</button>
+            <div class="mini-nav-content">
+            { 
+                links.map(({ text, href }) => (
+                    <a {href}>{text}</a>
+                )) 
+            }
+            </div>
+        </div>
+        { 
+            links.map(({ text, href }) => (
+                <a class="links" {href}>{text}</a>
+            )) 
+        }
+
+<a class="avatar" href={StudioCMSRoutes.authLinks.loginURL}>Dashboard</a>
+    </div> 
+) }
+
+<!-- If dropdown items -->
+{ links.length > topLevelLinkCount && (
+    <div class="navigation">
+        <div class="title"><a href={baseSiteURL}>{title}</a></div>
+
+        <div class="mini-nav">
+            <button>Menu</button>
+            <div class="mini-nav-content">
+            { 
+                links.map(({ text, href }) => (
+                    <a {href}>{text}</a>
+                )) 
+            }
+            </div>
+        </div>
+        { 
+            links.slice(0, topLevelLinkCount).map(({ text, href }) => (
+                    <a class="links" {href}>{text}</a>
+            ))
+        }
+            <div class="dropdown">
+                <button>More ▼</button>
+                <div class="dropdown-content">
+                    { links.slice(topLevelLinkCount).map(({ text, href }) => (
+                        <a {href}>{text}</a>
+                    )) }
+                </div>
+            </div>
+
+<a class="avatar" href={StudioCMSRoutes.authLinks.loginURL}>Dashboard</a>
+    </div>
+) }

package/dist/components/PageList.astro

@@ -0,0 +1,46 @@
+---
+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';
+
+const blogRouteFullPath = `${blogConfig.route}/[...slug]`;
+
+function getBlogRoute(slug: string) {
+	if (blogRouteFullPath) {
+		return blogRouteFullPath.replace('[...slug]', slug);
+	}
+	return '#';
+}
+
+interface Props {
+	blogPageList: CombinedPageData[];
+}
+
+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>

package/{src → dist}/components/PostHeader.astro

@@ -21,26 +21,4 @@ const { title, description, heroImage, publishedAt, updatedAt } = Astro.props;
 		{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>
+</div>

package/dist/components/navigation.css

@@ -0,0 +1,155 @@
+.navigation {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  height: 60px;
+  align-items: center;
+  background-color: hsl(0, 0%, 95%);
+  padding: 10px 20px;
+  box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.2);
+}
+.navigation .title {
+  font-size: xx-large;
+  color: black;
+  text-decoration: none;
+  position: absolute;
+  left: 20px;
+}
+.navigation .title a {
+  font-weight: bold;
+}
+.navigation .mini-nav {
+  display: hidden;
+  visibility: hidden;
+}
+.navigation .mini-nav button {
+  background-color: hsl(0, 0%, 95%);
+  color: back;
+  font-size: larger;
+  font-weight: 500;
+  border: none;
+  padding: 10px 15px;
+  cursor: pointer;
+  display: hidden;
+  visibility: hidden;
+}
+.navigation .mini-nav a {
+  display: block;
+  padding: 10px 15px;
+  text-decoration: none;
+  color: black;
+}
+.navigation .mini-nav-content {
+  display: none;
+  position: absolute;
+  background-color: hsl(0, 0%, 90%);
+  min-width: 160px;
+  box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.8);
+}
+.navigation .mini-nav:hover .mini-nav-content {
+  display: block;
+}
+.navigation .mini-nav:hover button {
+  background-color: hsl(0, 0%, 80%);
+}
+@media (max-width: 720px) {
+  .navigation .mini-nav {
+    display: inline-block;
+    visibility: visible;
+  }
+  .navigation .mini-nav button {
+    display: inline-block;
+    visibility: visible;
+  }
+  .navigation .links {
+    display: none;
+  }
+  .navigation .title {
+    position: absolute;
+    padding-left: 0;
+    left: -2rem;
+    scale: 0.5;
+  }
+  .navigation .avatar {
+    position: absolute;
+    padding-right: -4rem;
+    right: 0;
+    scale: 0.8;
+  }
+}
+@media (max-width: 400px) {
+  .navigation {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: auto;
+  }
+  .navigation .title {
+    display: flex;
+    position: relative;
+    justify-self: center;
+  }
+  .navigation .mini-nav {
+    display: flex;
+    position: relative;
+  }
+  .navigation .mini-nav button {
+    display: flex;
+    position: relative;
+  }
+  .navigation .avatar {
+    display: flex;
+    position: relative;
+    justify-self: center;
+  }
+}
+.navigation .avatar {
+  font-size: large;
+  font-weight: 500;
+  color: black;
+  text-decoration: none;
+  position: absolute;
+  right: 20px;
+  top: 10px;
+}
+.navigation a {
+  font-size: larger;
+  font-weight: 500;
+  text-decoration: none;
+  color: black;
+  padding: 10px 15px;
+}
+.navigation a:hover {
+  background-color: hsl(0, 0%, 90%);
+}
+.navigation .dropdown {
+  display: inline-block;
+}
+.navigation .dropdown button {
+  background-color: hsl(0, 0%, 95%);
+  color: back;
+  font-size: larger;
+  font-weight: 500;
+  border: none;
+  padding: 10px 15px;
+  cursor: pointer;
+}
+.navigation .dropdown a {
+  display: block;
+  padding: 10px 15px;
+  text-decoration: none;
+  color: black;
+}
+.navigation .dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: hsl(0, 0%, 90%);
+  min-width: 160px;
+  box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.8);
+}
+.navigation .dropdown:hover .dropdown-content {
+  display: block;
+}
+.navigation .dropdown:hover button {
+  background-color: hsl(0, 0%, 80%);
+}

package/dist/components.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="astro/client" />
+
+declare module 'studiocms:components' {
+	export const Avatar: typeof import('studiocms/components/Avatar.astro').default;
+	export const FormattedDate: typeof import('studiocms/components/FormattedDate.astro').default;
+	export const GenericHeader: typeof import('studiocms/components/GenericHeader.astro').default;
+	export const Navigation: typeof import('studiocms/components/Navigation.astro').default;
+	export const Generator: typeof import('studiocms/components/Generator.astro').default;
+}
+
+declare module 'studiocms:imageHandler/components' {
+	export const CustomImage: typeof import('studiocms/components/image/CustomImage.astro').default;
+}

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import { type StudioCMSPlugin } from 'studiocms/plugins';
+import type { StudioCMSBlogOptions } from './types.js';
+/**
+ * Creates and configures the StudioCMS Blog plugin.
+ *
+ * @param {StudioCMSBlogOptions} [options] - Optional configuration options for the blog plugin.
+ * @returns {StudioCMSPlugin} The configured StudioCMS plugin.
+ *
+ * @remarks
+ * This function sets up the StudioCMS Blog plugin with the provided options or default values.
+ * It configures the plugin's identifier, name, minimum version, frontend navigation links, page types,
+ * sitemap settings, and integration hooks.
+ *
+ * @example
+ * ```typescript
+ * const blogPlugin = studioCMSBlogPlugin({
+ *   blog: {
+ *     title: 'My Blog',
+ *     enableRSS: true,
+ *     route: '/my-blog'
+ *   },
+ *   sitemap: true,
+ *   injectRoutes: true
+ * });
+ * ```
+ *
+ * @param {StudioCMSBlogOptions} [options.blog] - Blog-specific options.
+ * @param {string} [options.blog.title] - The title of the blog. Defaults to 'Blog'.
+ * @param {boolean} [options.blog.enableRSS] - Whether to enable RSS feed. Defaults to true.
+ * @param {string} [options.blog.route] - The route for the blog. Defaults to '/blog'.
+ * @param {boolean} [options.sitemap] - Whether to trigger sitemap generation. Defaults to true.
+ * @param {boolean} [options.injectRoutes] - Whether to inject routes for the blog. Defaults to true.
+ */
+export declare function studioCMSBlogPlugin(options?: StudioCMSBlogOptions): StudioCMSPlugin;
+export default studioCMSBlogPlugin;

package/dist/index.js

@@ -0,0 +1,81 @@
+import { addVirtualImports, createResolver } from "astro-integration-kit";
+import { pathWithBase } from "studiocms/lib/pathGenerators.js";
+import { definePlugin } from "studiocms/plugins";
+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
+            });
+            injectRoute({
+              entrypoint: resolve("./routes/blog/[...slug].astro"),
+              pattern: `${route}/[...slug]`,
+              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": `
+							const config = {
+								title: "${title}",
+								enableRSS: ${enableRSS},
+								route: "${route}"
+							}
+							export default config;
+						`
+            }
+          });
+        }
+      }
+    }
+  });
+}
+var index_default = studioCMSBlogPlugin;
+export {
+  index_default as default,
+  studioCMSBlogPlugin
+};

package/dist/layouts/Layout.astro

@@ -0,0 +1,60 @@
+---
+import { defaultFrontEndConfig } from 'studiocms:config';
+import studioCMS_SDK from 'studiocms:sdk/cache';
+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',
+};
+
+let htmlDefaultLanguage = 'en';
+
+if (defaultFrontEndConfig) {
+	if (typeof defaultFrontEndConfig === 'object' && defaultFrontEndConfig.htmlDefaultLanguage) {
+		htmlDefaultLanguage = defaultFrontEndConfig.htmlDefaultLanguage;
+	}
+}
+
+type Props = {
+	title: string;
+	description: string;
+	lang?: string | undefined;
+	heroImage?: string | undefined;
+	siteTitle?: string | undefined;
+	siteDescription?: string | undefined;
+	pageTitleDelimiter?: string | undefined;
+	pageDescriptionDelimiter?: string | undefined;
+};
+
+const {
+	title,
+	description,
+	heroImage,
+	lang = htmlDefaultLanguage || 'en',
+	siteTitle = SiteTitle,
+	siteDescription = SiteDescription,
+	pageTitleDelimiter = '|',
+	pageDescriptionDelimiter = '-',
+} = Astro.props;
+
+const pageDescription = `${description} ${pageDescriptionDelimiter} ${siteDescription}`;
+const pageTitle = `${title} ${pageTitleDelimiter} ${siteTitle}`;
+---
+
+<!doctype html>
+<html {lang}>
+	<head>
+		<BaseHead title={pageTitle} description={pageDescription} image={heroImage} lang={lang}/>
+	</head>
+	<body>
+		<Navigation />
+		
+		<slot />
+
+		<Footer {siteTitle} />
+	</body>
+</html>