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

package/dist/styles/base.css

@@ -0,0 +1,245 @@
+:root {
+  --accent: #2337ff;
+  --accent-dark: #000d8a;
+  --black:
+    15,
+    18,
+    25;
+  --gray:
+    96,
+    115,
+    159;
+  --gray-light:
+    229,
+    233,
+    240;
+  --gray-dark:
+    34,
+    41,
+    57;
+  --gray-gradient: rgba(var(--gray-light), 50%), #fff;
+  --box-shadow:
+    0 2px 6px rgba(var(--gray), 25%),
+    0 8px 24px rgba(var(--gray), 33%),
+    0 16px 32px rgba(var(--gray), 33%);
+}
+body {
+  font-family: "Atkinson Hyperlegible", sans-serif;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  background: linear-gradient(var(--gray-gradient)) no-repeat;
+  background-size: 100% 600px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  color: rgb(var(--gray-dark));
+  font-size: 20px;
+  line-height: 1.7;
+}
+main {
+  width: 960px;
+  max-width: calc(100% - 2em);
+  margin: auto;
+  padding: 3em 1em;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 0.5rem 0;
+  color: rgb(var(--black));
+  line-height: 1.2;
+}
+h1 {
+  font-size: 3.052em;
+}
+h2 {
+  font-size: 2.441em;
+}
+h3 {
+  font-size: 1.953em;
+}
+h4 {
+  font-size: 1.563em;
+}
+h5 {
+  font-size: 1.25em;
+}
+strong,
+b {
+  font-weight: 700;
+}
+a {
+  color: var(--accent);
+}
+a:hover {
+  color: var(--accent);
+}
+p {
+  margin-bottom: 1em;
+}
+.prose p {
+  margin-bottom: 2em;
+}
+textarea {
+  width: 100%;
+  font-size: 16px;
+}
+input {
+  font-size: 16px;
+}
+table {
+  width: 100%;
+}
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+code {
+  padding: 2px 5px;
+  background-color: rgb(var(--gray-light));
+  border-radius: 2px;
+}
+pre {
+  padding: 1.5em;
+  border-radius: 8px;
+}
+pre > code {
+  all: unset;
+}
+blockquote {
+  border-left: 4px solid var(--accent);
+  padding: 0 0 0 20px;
+  margin: 0px;
+  font-size: 1.333em;
+}
+hr {
+  border: none;
+  border-top: 1px solid rgb(var(--gray-light));
+}
+@media (max-width: 720px) {
+  body {
+    font-size: 18px;
+  }
+  main {
+    padding: 1em;
+  }
+}
+footer {
+  padding: 2em 1em 6em 1em;
+  background: linear-gradient(var(--gray-gradient)) no-repeat;
+  color: rgb(var(--gray));
+  text-align: center;
+}
+.social-links {
+  display: flex;
+  justify-content: center;
+  gap: 1em;
+  margin-top: 1em;
+}
+.social-links a {
+  text-decoration: none;
+  color: rgb(var(--gray));
+}
+.social-links a:hover {
+  color: rgb(var(--gray-dark));
+}
+.sr-only {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+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;
+  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%;
+  }
+}

package/dist/types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Options for configuring the StudioCMS Blog.
+ */
+export interface StudioCMSBlogOptions {
+    /**
+     * Enable sitemap generation
+     * @default true
+     */
+    sitemap?: boolean;
+    /**
+     * Inject routes
+     * @default true
+     */
+    injectRoutes?: boolean;
+    /**
+     * The configuration for the blog
+     */
+    blog?: {
+        /**
+         * The title of the blog
+         */
+        title?: string;
+        /**
+         * Enable RSS feed
+         */
+        enableRSS?: boolean;
+        /**
+         * The route for the blog
+         * @default '/blog'
+         * @example '/news'
+         */
+        route?: string;
+    };
+}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@studiocms/blog",
-  "version": "0.1.0-beta.7",
+  "version": "0.1.0-beta.8",
   "description": "Add a blog to your StudioCMS project with ease!",
   "author": {
     "name": "Adam Matthiesen | Jacob Jenkins | Paul Valladares",
-    "url": "https://studiocms.xyz"
+    "url": "https://studiocms.dev"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/astrolicious/studiocms.git"
+    "url": "git+https://github.com/withstudiocms/studiocms.git",
+    "directory": "packages/studiocms_blog"
   },
   "contributors": [
     "Adammatthiesen",
@@ -20,7 +21,6 @@
     "astro",
     "astrocms",
     "astrodb",
-    "astrolicious",
     "astrostudio",
     "astro-integration",
     "astro-studio",
@@ -33,36 +33,39 @@
     "astro-blog",
     "astro-studio-blog",
     "studiocms-blog",
-    "theme",
-    "astro-theme",
-    "studiocms-theme",
-    "astro-studiocms-theme"
+    "plugin",
+    "studiocms-plugin"
   ],
-  "homepage": "https://studiocms.xyz",
+  "homepage": "https://studiocms.dev",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "sideEffects": false,
   "files": [
-    "index.ts",
-    "schema.ts",
-    "src"
+    "dist"
   ],
   "exports": {
-    ".": "./index.ts",
-    "./schema": "./schema.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
   },
   "type": "module",
   "dependencies": {
-    "@astrojs/rss": "^4.0.7",
-    "astro-theme-provider": "^0.6.1",
-    "@studiocms/core": "0.1.0-beta.7",
-    "@studiocms/frontend": "0.1.0-beta.7"
+    "@astrojs/rss": "^4.0.11",
+    "astro-integration-kit": "^0.18"
   },
   "devDependencies": {
     "@types/node": "^20.14.11"
   },
   "peerDependencies": {
-    "astro": ">=4.15"
+    "astro": "^5.4.0",
+    "vite": "^6.2.0",
+    "studiocms": "0.1.0-beta.8"
+  },
+  "scripts": {
+    "build": "build-scripts build 'src/**/*.{ts,css}'",
+    "dev": "build-scripts dev 'src/**/*.{ts,css}'"
   }
 }

package/index.ts

@@ -1,65 +0,0 @@
-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/schema.ts

@@ -1,35 +0,0 @@
-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

@@ -1,131 +0,0 @@
----
-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/layouts/BlogLayout.astro

@@ -1,39 +0,0 @@
----
-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

@@ -1,40 +0,0 @@
----
-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

@@ -1,38 +0,0 @@
----
-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>