fix: 🐛 Custom Code Component Swap is causing issues. (#112)

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

.changeset/spicy-stingrays-repeat.md

@@ -0,0 +1,11 @@
+---
+"@matthiesenxyz/astro-ghostcms-brutalbyelian": patch
+"@matthiesenxyz/astro-ghostcms-theme-default": patch
+"@matthiesenxyz/astro-ghostcms-catppuccin": patch
+"@matthiesenxyz/starlight-ghostcms": patch
+---
+
+fix:
+
+- Removed CodeSlot Component that sometimes would break with some <pre> components
+- Will be adding at a latter time a custom component to replace this, but at this time this is now fixed.

packages/astro-ghostcms-brutalbyelian/src/components/ghostrender/index.ts

@@ -4,6 +4,5 @@ export { default as H3 } from "./H3.astro";
 export { default as H4 } from "./H4.astro";
 export { default as H5 } from "./H5.astro";
 export { default as H6 } from "./H6.astro";
-export { default as CodeSlot } from "./CodeSlot.astro";
 export { default as Paragraph } from "./Paragraph.astro";
 export { default as astrocard } from "./astrocard.astro";

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

@@ -34,6 +34,7 @@ invariant(settings, "Settings are required");
       content={post.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'],
       }}
       components={{ 
         h1: C.H1,
@@ -42,7 +43,6 @@ invariant(settings, "Settings are required");
         h4: C.H4,
         h5: C.H5,
         h6: C.H6,
-        pre: C.CodeSlot,
         p: C.Paragraph,
         astrocard: C.astrocard,
       }}

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

@@ -4,7 +4,6 @@ import FeatureImage from "./FeatureImage.astro";
 import AuthorList from "./AuthorList.astro";
 import { formatDate } from "../utils";
 import { Markup } from 'astro-remote';
-import * as render from '../components/astro-remote';
 
 export type Props = {
   posts: Post[];
@@ -66,10 +65,7 @@ const latestFeatured = posts[0]
     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', 'getgist', 'getgistgroup', 'astrocard'],
-    }}
-    components={{
-      pre: render.CodeSlot
+      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'],
     }}
   /> }
       </section>

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

@@ -3,7 +3,6 @@ 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 * as render from '../components/astro-remote';
 
 export type Props = {
   post: Post;
@@ -34,9 +33,7 @@ invariant(settings, "Settings not found");
     content={post.html} 
     sanitize={{ 
       allowComponents: true,
-    }}
-    components={{
-      pre: render.CodeSlot
+      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'],
     }}
   />
 </div>

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

@@ -2,7 +2,7 @@
 import FeatureImage from "../components/FeatureImage.astro";
 import type { Settings, Page } from "@matthiesenxyz/astro-ghostcms/api";
 import { Markup } from 'astro-remote';
-import * as render from '../components/astro-remote';
+
 export type Props = {
   page: Page;
   settings: Settings;
@@ -27,13 +27,12 @@ const { page, settings, pageClass } = Astro.props as Props;
     <section class="gh-content gh-canvas">
       <h1 class="article-title">{page.title}</h1>
       <Markup 
-    content={page.html} 
-    sanitize={{ 
-      allowComponents: true, 
-    }}
-    components={{
-      pre: render.CodeSlot
-    }} />
+        content={page.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'],
+        }} 
+      />
     </section>
   </article>
 </main>

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

@@ -3,7 +3,7 @@ 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 * as render from '../components/astro-remote';
+
 export type Props = {
   post: Post;
   settings: Settings;
@@ -19,13 +19,12 @@ invariant(settings, "Settings not found");
     <PostHero post={post} settings={settings} />
     <section class="gh-content gh-canvas">
       <Markup 
-    content={post.html} 
-    sanitize={{ 
-      allowComponents: true,
-    }}
-    components={{
-      pre: render.CodeSlot
-    }} />
+        content={post.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'],
+        }}
+      />
     </section>
   </article>
   <PostFooter post={post} settings={settings} posts={posts} />

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

@@ -6,7 +6,6 @@ import { getPageProps } from '../utils/page';
 import { getAllPosts } from '../utils/api';
 import Metadata from '../components/Metadata.astro';
 import { Markup } from 'astro-remote';
-import * as render from '../components/astro-remote';
 import * as Gists from '@matthiesenxyz/astro-gists/components';
 
 export async function getStaticPaths() {
@@ -51,7 +50,6 @@ const pageProps = getPageProps(post.title)
         allowComponents: true,
       }}
       components={{
-        pre: render.CodeSlot,
         getgist: Gists.GetGist,
         getgistgroup: Gists.GetGistGroup,
       }}

packages/starlight-ghostcms/src/routes/about.astro

@@ -6,7 +6,6 @@ import Page from '../components/Page.astro'
 import { getPageProps } from '../utils/page'
 import { getSluggedPage } from '../utils/api'
 import { Markup } from 'astro-remote'
-import * as render from '../components/astro-remote';
 
 const aboutPage = await getSluggedPage("about");
 
@@ -26,9 +25,7 @@ const pageProps = getPageProps(aboutPage ? aboutPage.post.title : "")
         sanitize={{ 
           allowComponents: true, 
         }}
-        components={{
-          pre: render.CodeSlot
-        }} />
+      />
   }
   <footer class="not-content">
     <!--PrevNextLinks next={nextLink} prev={prevLink} /-->

playgrounds/astro-playground/astro.config.mjs

@@ -1,18 +1,18 @@
 import ghostcms from "@matthiesenxyz/astro-ghostcms";
 import { defineConfig } from "astro/config";
-///import tailwind from "@astrojs/tailwind";
+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(),
-		//UnoCSS({ injectReset: true }),
+		tailwind(),
+		// UnoCSS({ injectReset: true }),
 		ghostcms({
 			ghostURL: 'https://ghostdemo.matthiesen.xyz',
 			ThemeProvider: {
-				theme: "@matthiesenxyz/astro-ghostcms-theme-default",
+				theme: "@matthiesenxyz/astro-ghostcms-catppuccin",
 			},
 			verbose: true,
 		}),