migrate catpuccin theme from `Fragment` component to `astro-remote`

packages/astro-ghostcms-brutalbyelian/src/components/ghostrender/CodeSlot.astro

@@ -6,7 +6,12 @@ import { querySelector } from "ultrahtml/selector"
 const html = await Astro.slots.render("default")
 const ast = await parse(html)
 const codetag = querySelector(ast,'code')
-const { children } = codetag
+const { children, attributes } = codetag
+
 const code = children[0].value
+const checkLang = attributes.class ? attributes.class.slice(9) : undefined
+
+const lang = checkLang ? checkLang : 'plaintxt'
 ---
-<Code code={code} lang={"sh"} theme={"monokai"}/>
+
+<Code code={code} lang={lang}/>

packages/astro-ghostcms-catppuccin/package.json

@@ -50,7 +50,8 @@
   },
   "scripts": {},
   "peerDependencies": {
-    "astro": "^4.2.1"
+    "@matthiesenxyz/astro-ghostcms": ">=3.3.1",
+    "astro": ">=4.4.0"
   },
   "devDependencies": {
     "@matthiesenxyz/astro-ghostcms": "workspace:*"
@@ -61,8 +62,10 @@
     "@fontsource-variable/inter": "^5.0.17",
     "@matthiesenxyz/astro-ghostcms": "^3.3.1",
     "@tailwindcss/typography": "^0.5.10",
-    "tailwindcss": "^3.3.5",
     "astro-navbar": "^2.3.1",
-    "astro-seo": "^0.8.3"
+    "astro-remote": "^0.3.2",
+    "astro-seo": "^0.8.3",
+    "tailwindcss": "^3.3.5",
+    "ultrahtml": "1.5.3"
   }
 }

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

@@ -3,6 +3,9 @@ import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
 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[];
   settings: Settings;
@@ -59,7 +62,16 @@ const latestFeatured = posts[0]
       </div>
       <div class="divider my-4"/>
       <section id="ghostimport" class="text-ctp-subtext1">
-        {latestFeatured && <Fragment set:html={latestFeatured.html} />}
+        {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', 'getgist', 'getgistgroup', 'astrocard'],
+    }}
+    components={{
+      pre: render.CodeSlot
+    }}
+  /> }
       </section>
     </div>
   </main>

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

@@ -2,6 +2,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 * as render from '../components/astro-remote';
+
 export type Props = {
   post: Post;
   settings: Settings;
@@ -27,7 +30,16 @@ invariant(settings, "Settings not found");
 
 <PostHero post={post} settings={settings} />
 <div id="ghostimport" class="mt-4 text-ctp-subtext1">
-  <Fragment set:html={post.html} />
+  <Markup 
+    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', 'getgist', 'getgistgroup', 'astrocard'],
+    }}
+    components={{
+      pre: render.CodeSlot
+    }}
+  />
 </div>
 <PostFooter post={post} settings={settings} posts={mPosts} />
 

packages/astro-ghostcms-catppuccin/src/components/astro-remote/CodeSlot.astro

@@ -0,0 +1,17 @@
+---
+import { Code } from "astro/components"
+import { parse } from "ultrahtml"
+import { querySelector } from "ultrahtml/selector"
+
+const html = await Astro.slots.render("default")
+const ast = await parse(html)
+const codetag = querySelector(ast,'code')
+const { children, attributes } = codetag
+
+const code = children[0].value
+const checkLang = attributes.class ? attributes.class.slice(9) : undefined
+
+const lang = checkLang ? checkLang : 'txt'
+---
+
+<Code code={code} lang={lang}/>

packages/astro-ghostcms-catppuccin/src/components/astro-remote/index.ts

@@ -0,0 +1 @@
+export { default as CodeSlot } from "./CodeSlot.astro";

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

@@ -49,7 +49,7 @@ const pageProps = getPageProps(post.title)
       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', 'getgist', 'getgistgroup'],
+        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,

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";
+//import UnoCSS from "unocss/astro";
 
 // https://astro.build/config
 export default defineConfig({
 	site: "https://demo.astro-ghostcms.xyz/",
 	integrations: [
-		//tailwind(),
+		tailwind(),
-		UnoCSS({ injectReset: true }),
+		//UnoCSS({ injectReset: true }),
 		ghostcms({
 			ghostURL: 'https://ghostdemo.matthiesen.xyz',
 			ThemeProvider: {
-				theme: "@matthiesenxyz/astro-ghostcms-brutalbyelian",
+				theme: "@matthiesenxyz/astro-ghostcms-catppuccin",
 			},
 			verbose: true,
 		}),

playgrounds/astro-playground/package.json

@@ -14,6 +14,7 @@
     "astro": "^4.4.13",
     "@matthiesenxyz/astro-ghostcms": "workspace:*",
     "@matthiesenxyz/astro-ghostcms-theme-default": "workspace:*",
+    "@matthiesenxyz/astro-ghostcms-catppuccin": "workspace:*",
     "@matthiesenxyz/astro-ghostcms-brutalbyelian": "workspace:*",
     "@astrojs/tailwind": "^5.1.0",
     "@unocss/astro": "^0.58.5",

pnpm-lock.yaml

@@ -147,7 +147,7 @@ importers:
     dependencies:
       '@astrojs/tailwind':
         specifier: ^5.1.0
-        version: 5.1.0(astro@4.3.7)(tailwindcss@3.4.1)
+        version: 5.1.0(astro@4.4.13)(tailwindcss@3.4.1)
       '@catppuccin/tailwindcss':
         specifier: 0.1.6
         version: 0.1.6(tailwindcss@3.4.1)
@@ -161,17 +161,23 @@ importers:
         specifier: ^0.5.10
         version: 0.5.10(tailwindcss@3.4.1)
       astro:
-        specifier: ^4.2.1
+        specifier: '>=4.4.0'
-        version: 4.3.7(sass@1.71.1)(typescript@5.4.2)
+        version: 4.4.13(typescript@5.4.2)
       astro-navbar:
         specifier: ^2.3.1
         version: 2.3.1
+      astro-remote:
+        specifier: ^0.3.2
+        version: 0.3.2
       astro-seo:
         specifier: ^0.8.3
         version: 0.8.3(typescript@5.4.2)
       tailwindcss:
         specifier: ^3.3.5
         version: 3.4.1
+      ultrahtml:
+        specifier: 1.5.3
+        version: 1.5.3
 
   packages/astro-ghostcms-rendercontent:
     dependencies:
@@ -296,6 +302,9 @@ importers:
       '@matthiesenxyz/astro-ghostcms-brutalbyelian':
         specifier: workspace:*
         version: link:../../packages/astro-ghostcms-brutalbyelian
+      '@matthiesenxyz/astro-ghostcms-catppuccin':
+        specifier: workspace:*
+        version: link:../../packages/astro-ghostcms-catppuccin
       '@matthiesenxyz/astro-ghostcms-theme-default':
         specifier: workspace:*
         version: link:../../packages/astro-ghostcms-theme-default
@@ -512,21 +521,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@astrojs/tailwind@5.1.0(astro@4.3.7)(tailwindcss@3.4.1):
-    resolution: {integrity: sha512-BJoCDKuWhU9FT2qYg+fr6Nfb3qP4ShtyjXGHKA/4mHN94z7BGcmauQK23iy+YH5qWvTnhqkd6mQPQ1yTZTe9Ig==}
-    peerDependencies:
-      astro: ^3.0.0 || ^4.0.0
-      tailwindcss: ^3.0.24
-    dependencies:
-      astro: 4.3.7(sass@1.71.1)(typescript@5.4.2)
-      autoprefixer: 10.4.17(postcss@8.4.35)
-      postcss: 8.4.35
-      postcss-load-config: 4.0.2(postcss@8.4.35)
-      tailwindcss: 3.4.1
-    transitivePeerDependencies:
-      - ts-node
-    dev: false
-
   /@astrojs/tailwind@5.1.0(astro@4.4.13)(tailwindcss@3.4.1):
     resolution: {integrity: sha512-BJoCDKuWhU9FT2qYg+fr6Nfb3qP4ShtyjXGHKA/4mHN94z7BGcmauQK23iy+YH5qWvTnhqkd6mQPQ1yTZTe9Ig==}
     peerDependencies: