fix: 🐛 bug: ultrahtml does not handle all html strings. add switch to enable standard html fragment tag instead. (#115)

Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com>
Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>

.changeset/mean-drinks-heal.md

@@ -0,0 +1,8 @@
+---
+"@matthiesenxyz/astro-ghostcms-brutalbyelian": patch
+"@matthiesenxyz/astro-ghostcms-theme-default": patch
+"@matthiesenxyz/astro-ghostcms-catppuccin": patch
+"@matthiesenxyz/astro-ghostcms": patch
+---
+
+Adds a toggleswitch to allow users to disable astro-remote usage for rendering ghost-content

packages/astro-ghostcms-brutalbyelian/src/components/blog/FeatureImage.astro

@@ -2,6 +2,10 @@
 import { getGhostImgPath } from "../../utils";
 import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
 import { Markup } from 'astro-remote';
+import config from "virtual:@matthiesenxyz/astro-ghostcms/config";
+
+const useRemote = config.ThemeProvider.astroRemote.enable;
+
 export type Props = {
   image: string;
   alt?: string;
@@ -23,5 +27,8 @@ const { image, alt, caption = "", settings, transitionName } = Astro.props as Pr
     alt={alt}
     transition:name={transitionName}
   />
-  {caption && <figcaption class="text-ctp-overlay2"><Markup content={caption} /></figcaption>}
+  {caption && (
+    <figcaption class="text-ctp-overlay2">
+    {useRemote ? <Markup content={caption} /> : <Fragment set:html={caption} />}
+    </figcaption>)}
 </figure>

packages/astro-ghostcms-brutalbyelian/src/routes/[slug].astro

@@ -7,6 +7,9 @@ import BlogPostHeader from "../components/blog/BlogPostHeader.astro";
 import { Markup } from 'astro-remote';
 import * as C from "../components/ghostrender";
 import { Card } from "@eliancodes/brutal-ui";
+import config from "virtual:@matthiesenxyz/astro-ghostcms/config";
+
+const useRemote = config.ThemeProvider.astroRemote.enable;
 
 export async function getStaticPaths() {
   const [posts, pages, settings] = await Promise.all([getAllPosts(), await getAllPages(), await getSettings()]);
@@ -30,7 +33,7 @@ invariant(settings, "Settings are required");
 
   <div class="my-5"/>
   <div id="ghost">
-    <Markup 
+    {useRemote ? <Markup 
       content={post.html} 
       sanitize={{ 
         allowComponents: true,
@@ -46,7 +49,7 @@ invariant(settings, "Settings are required");
         p: C.Paragraph,
         astrocard: C.astrocard,
       }}
-    />
+    /> : <Fragment set:html={post.html} />}
   </div>
 
   </article>

packages/astro-ghostcms-catppuccin/src/components/FeaturedPost.astro

@@ -4,6 +4,9 @@ import FeatureImage from "./FeatureImage.astro";
 import AuthorList from "./AuthorList.astro";
 import { formatDate } from "../utils";
 import { Markup } from 'astro-remote';
+import config from "virtual:@matthiesenxyz/astro-ghostcms/config";
+
+const useRemote = config.ThemeProvider.astroRemote.enable;
 
 export type Props = {
   posts: Post[];
@@ -61,13 +64,15 @@ const latestFeatured = posts[0]
       </div>
       <div class="divider my-4"/>
       <section id="ghostimport" class="text-ctp-subtext1">
-        {latestFeatured && <Markup 
+
+  
+        {useRemote ? (latestFeatured && <Markup 
             content={latestFeatured.html} 
             sanitize={{ 
               allowComponents: true,
               allowElements: ['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'figure', 'figcaption', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'em', 'strong', 'del', 'hr', 'br', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'div', 'span', 'script', 'astrocard'],
             }}
-  /> }
+          />) : (latestFeatured && <Fragment set:html={latestFeatured.html} />) }
       </section>
     </div>
   </main>

packages/astro-ghostcms-catppuccin/src/components/Post.astro

@@ -3,6 +3,9 @@ import PostHero from "../components/PostHero.astro";
 import PostFooter from "../components/PostFooter.astro";
 import { getFeaturedPosts, invariant, type Post, type Settings } from "@matthiesenxyz/astro-ghostcms/api";
 import { Markup } from 'astro-remote';
+import config from "virtual:@matthiesenxyz/astro-ghostcms/config";
+
+const useRemote = config.ThemeProvider.astroRemote.enable;
 
 export type Props = {
   post: Post;
@@ -16,10 +19,10 @@ async function getPostsSet(){
   const featuredPosts = await getFeaturedPosts();
   const fposts = posts;
   if(featuredPosts.posts.length === 0){ return fposts } 
-  else {
+
   const featured = featuredPosts.posts[0]
   return fposts.filter((p: Post)=>p.id !== featured.id)
-  }
+
 }
 
 const mPosts = await getPostsSet()
@@ -29,6 +32,7 @@ invariant(settings, "Settings not found");
 
 <PostHero post={post} settings={settings} />
 <div id="ghostimport" class="mt-4 text-ctp-subtext1">
+  {useRemote ? (
     <Markup 
       content={post.html} 
       sanitize={{ 
@@ -36,6 +40,7 @@ invariant(settings, "Settings not found");
         allowElements: ['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'figure', 'figcaption', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'em', 'strong', 'del', 'hr', 'br', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'div', 'span', 'script', 'astrocard'],
       }}
     />
+  ) : <Fragment set:html={post.html} /> }
 </div>
 <PostFooter post={post} settings={settings} posts={mPosts} />
 

packages/astro-ghostcms-theme-default/src/components/Page.astro

@@ -2,6 +2,9 @@
 import FeatureImage from "../components/FeatureImage.astro";
 import type { Settings, Page } from "@matthiesenxyz/astro-ghostcms/api";
 import { Markup } from 'astro-remote';
+import config from "virtual:@matthiesenxyz/astro-ghostcms/config";
+
+const useRemote = config.ThemeProvider.astroRemote.enable;
 
 export type Props = {
   page: Page;
@@ -26,6 +29,7 @@ const { page, settings, pageClass } = Astro.props as Props;
 
     <section class="gh-content gh-canvas">
       <h1 class="article-title">{page.title}</h1>
+      {useRemote ? (
         <Markup 
           content={page.html} 
           sanitize={{ 
@@ -33,6 +37,7 @@ const { page, settings, pageClass } = Astro.props as Props;
             allowElements: ['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'figure', 'figcaption', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'em', 'strong', 'del', 'hr', 'br', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'div', 'span', 'script', 'astrocard'],
           }}
         />
+      ) : <Fragment set:html={page.html} /> }
     </section>
   </article>
 </main>

packages/astro-ghostcms-theme-default/src/components/Post.astro

@@ -3,6 +3,9 @@ import PostHero from "../components/PostHero.astro";
 import PostFooter from "../components/PostFooter.astro";
 import {invariant, type Post, type Settings } from "@matthiesenxyz/astro-ghostcms/api";
 import { Markup } from 'astro-remote';
+import config from "virtual:@matthiesenxyz/astro-ghostcms/config";
+
+const useRemote = config.ThemeProvider.astroRemote.enable;
 
 export type Props = {
   post: Post;
@@ -18,6 +21,7 @@ invariant(settings, "Settings not found");
   <article class={`article post ${postClass}`}>
     <PostHero post={post} settings={settings} />
     <section class="gh-content gh-canvas">
+      {useRemote ? (
         <Markup 
           content={post.html} 
           sanitize={{ 
@@ -25,6 +29,7 @@ invariant(settings, "Settings not found");
             allowElements: ['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'figure', 'figcaption', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'em', 'strong', 'del', 'hr', 'br', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'div', 'span', 'script', 'astrocard'],
           }}
         />
+      ) : <Fragment set:html={post.html} /> }
     </section>
   </article>
   <PostFooter post={post} settings={settings} posts={posts} />

packages/astro-ghostcms/README.md

@@ -66,6 +66,9 @@ export default defineConfig({
       ThemeProvider: { // Allows you to pass config options to our ThemeProvider if enabled.
         disableThemeProvider: false, // OPTIONAL - Default False
         theme: "@matthiesenxyz/astro-ghostcms-theme-default", // OPTIONAL - Default Theme shown.
+        astroRemote: {
+          enable: true // OPTIONAL - Default True, Allows the user to switch to standard <Fragment> html rendering if they are having issues with Astro-remote
+        }
       };
       disableDefault404: false, // Allows the user to disable the default `/404 page, to be able to create their own under `/src/pages/404.astro`.
       enableRSSFeed: true, // Allows the user to Enable or disable RSS Feed Generation. Default: true

packages/astro-ghostcms/src/schemas/userconfig.ts

@@ -17,22 +17,19 @@ export const GhostUserConfigSchema = z.object({
 	/** OPTIONAL - Configure the Theme Provider 
 	 * @ This option allows the user to configure the Theme Provider
 	 */
-	ThemeProvider: z
-		.object({
+	ThemeProvider: z.object({
 			/** OPTIONAL - Disable the theme provider
 			 * @default false
 			 */
-			disableThemeProvider: z.coerce.boolean(),
+			disableThemeProvider: z.coerce.boolean().default(false),
 			/** OPTIONAL - Set the theme you want to use
 			 * @default "@matthiesenxyz/astro-ghostcms-theme-default"
 			 */
-			theme: z.string(),
-		})
-		.optional()
-		.default({
-			disableThemeProvider: false,
-			theme: "@matthiesenxyz/astro-ghostcms-theme-default"
-		}),
+			theme: z.string().default("@matthiesenxyz/astro-ghostcms-theme-default"),
+			astroRemote: z.object({
+				enable: z.boolean().default(true),
+			}).optional().default({}),
+		}).optional().default({}),
 	/** Allows the user to disable the provided 404 page */
 	disableDefault404: z.coerce.boolean().optional(),
 	/** Allows the user to disable the provided RSS Feed */

playgrounds/astro-playground/astro.config.mjs

@@ -1,18 +1,21 @@
 import ghostcms from "@matthiesenxyz/astro-ghostcms";
 import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
-//import UnoCSS from "unocss/astro";
+// import tailwind from "@astrojs/tailwind";
+// import UnoCSS from "unocss/astro";
 
 // https://astro.build/config
 export default defineConfig({
 	site: "https://demo.astro-ghostcms.xyz/",
 	integrations: [
-		tailwind(),
+		//tailwind(),
 		// UnoCSS({ injectReset: true }),
 		ghostcms({
 			ghostURL: 'https://ghostdemo.matthiesen.xyz',
 			ThemeProvider: {
-				theme: "@matthiesenxyz/astro-ghostcms-catppuccin",
+				theme: "@matthiesenxyz/astro-ghostcms-theme-default",
+				astroRemote: {
+					enable: true,
+				},
 			},
 			verbose: true,
 		}),