Migrate theme-default to `astro-remote` from `Fragment`

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

@@ -11,7 +11,7 @@ const { children, attributes } = codetag
 const code = children[0].value
 const checkLang = attributes.class ? attributes.class.slice(9) : undefined
 
-const lang = checkLang ? checkLang : 'txt'
+const lang = checkLang ? checkLang : 'plaintxt'
 ---
 
 <Code code={code} lang={lang}/>

packages/astro-ghostcms-theme-default/package.json

@@ -47,11 +47,13 @@
     "typescript": "^5.4.2"
   },
   "peerDependencies": {
-    "astro": "^4.2.1"
+    "@matthiesenxyz/astro-ghostcms": ">=3.3.1",
+    "astro": ">=4.4.0"
   },
   "dependencies": {
-    "@matthiesenxyz/astro-ghostcms": "^3.3.1",
     "astro-font": "^0.0.77",
-    "sass": "^1.71.1"
+    "astro-remote": "^0.3.2",
+    "sass": "^1.71.1",
+    "ultrahtml": "^1.5.3"
   }
 }

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

@@ -1,6 +1,8 @@
 ---
 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;
@@ -24,7 +26,15 @@ const { page, settings, pageClass } = Astro.props as Props;
 
     <section class="gh-content gh-canvas">
       <h1 class="article-title">{page.title}</h1>
-      <Fragment set:html={page.html} />
+      <Markup 
+    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', 'getgist', 'getgistgroup', 'astrocard'],
+    }}
+    components={{
+      pre: render.CodeSlot
+    }} />
     </section>
   </article>
 </main>

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

@@ -2,6 +2,8 @@
 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;
@@ -16,7 +18,15 @@ invariant(settings, "Settings not found");
   <article class={`article post ${postClass}`}>
     <PostHero post={post} settings={settings} />
     <section class="gh-content gh-canvas">
-      <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
+    }} />
     </section>
   </article>
   <PostFooter post={post} settings={settings} posts={posts} />

packages/astro-ghostcms-theme-default/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 : 'plaintext'
+---
+
+<Code code={code} lang={lang}/>

packages/astro-ghostcms-theme-default/src/components/astro-remote/index.ts

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

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

pnpm-lock.yaml

@@ -107,7 +107,7 @@ importers:
         version: 0.58.5
       astro:
         specifier: '>=4.4.1'
-        version: 4.4.13(typescript@5.4.2)
+        version: 4.4.13(sass@1.71.1)(typescript@5.4.2)
       astro-font:
         specifier: ^0.0.77
         version: 0.0.77
@@ -162,7 +162,7 @@ importers:
         version: 0.5.10(tailwindcss@3.4.1)
       astro:
         specifier: '>=4.4.0'
-        version: 4.4.13(typescript@5.4.2)
+        version: 4.4.13(sass@1.71.1)(typescript@5.4.2)
       astro-navbar:
         specifier: ^2.3.1
         version: 2.3.1
@@ -190,26 +190,32 @@ importers:
     devDependencies:
       astro:
         specifier: 4.4.13
-        version: 4.4.13(typescript@5.4.2)
+        version: 4.4.13(sass@1.71.1)(typescript@5.4.2)
 
   packages/astro-ghostcms-theme-default:
     dependencies:
-      '@matthiesenxyz/astro-ghostcms':
-        specifier: ^3.3.1
-        version: link:../astro-ghostcms
       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(sass@1.71.1)(typescript@5.4.2)
       astro-font:
         specifier: ^0.0.77
         version: 0.0.77
+      astro-remote:
+        specifier: ^0.3.2
+        version: 0.3.2
       sass:
         specifier: ^1.71.1
         version: 1.71.1
+      ultrahtml:
+        specifier: ^1.5.3
+        version: 1.5.3
     devDependencies:
       '@astrojs/check':
         specifier: ^0.5.6
         version: 0.5.6(typescript@5.4.2)
+      '@matthiesenxyz/astro-ghostcms':
+        specifier: '*'
+        version: link:../astro-ghostcms
       typescript:
         specifier: ^5.4.2
         version: 5.4.2
@@ -283,7 +289,7 @@ importers:
         version: 0.21.1(astro@4.4.13)
       astro:
         specifier: ^4.4.13
-        version: 4.4.13(typescript@5.4.2)
+        version: 4.4.13(sass@1.71.1)(typescript@5.4.2)
       vitest:
         specifier: ^1.3.1
         version: 1.3.1(@vitest/ui@1.3.1)
@@ -313,7 +319,7 @@ importers:
         version: 0.58.5(vite@5.1.5)
       astro:
         specifier: ^4.4.13
-        version: 4.4.13(typescript@5.4.2)
+        version: 4.4.13(sass@1.71.1)(typescript@5.4.2)
       tailwindcss:
         specifier: ^3.3.5
         version: 3.4.1
@@ -338,7 +344,7 @@ importers:
         version: link:../../packages/starlight-ghostcms
       astro:
         specifier: ^4.4.13
-        version: 4.4.13(typescript@5.4.2)
+        version: 4.4.13(sass@1.71.1)(typescript@5.4.2)
       sharp:
         specifier: ^0.33.2
         version: 0.33.2
@@ -457,7 +463,7 @@ packages:
       '@astrojs/markdown-remark': 4.2.1
       '@mdx-js/mdx': 3.0.1
       acorn: 8.11.3
-      astro: 4.4.13(typescript@5.4.2)
+      astro: 4.4.13(sass@1.71.1)(typescript@5.4.2)
       es-module-lexer: 1.4.1
       estree-util-visit: 2.0.0
       github-slugger: 2.0.0
@@ -502,7 +508,7 @@ packages:
       '@pagefind/default-ui': 1.0.4
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.3
-      astro: 4.4.13(typescript@5.4.2)
+      astro: 4.4.13(sass@1.71.1)(typescript@5.4.2)
       astro-expressive-code: 0.33.4(astro@4.4.13)
       bcp-47: 2.1.0
       hast-util-from-html: 2.0.1
@@ -527,7 +533,7 @@ packages:
       astro: ^3.0.0 || ^4.0.0
       tailwindcss: ^3.0.24
     dependencies:
-      astro: 4.4.13(typescript@5.4.2)
+      astro: 4.4.13(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)
@@ -1724,7 +1730,7 @@ packages:
     dependencies:
       '@expressive-code/plugin-line-numbers': 0.33.4
       '@octokit/types': 12.6.0
-      astro: 4.4.13(typescript@5.4.2)
+      astro: 4.4.13(sass@1.71.1)(typescript@5.4.2)
       astro-integration-kit: 0.5.1(astro@4.4.13)
       expressive-code: 0.33.4
       hast-util-to-html: 8.0.4
@@ -3132,7 +3138,7 @@ packages:
     peerDependencies:
       astro: ^3.3.0 || ^4.0.0-beta
     dependencies:
-      astro: 4.4.13(typescript@5.4.2)
+      astro: 4.4.13(sass@1.71.1)(typescript@5.4.2)
       hast-util-to-html: 8.0.4
       remark-expressive-code: 0.33.4
 
@@ -3164,7 +3170,7 @@ packages:
       vue:
         optional: true
     dependencies:
-      astro: 4.4.13(typescript@5.4.2)
+      astro: 4.4.13(sass@1.71.1)(typescript@5.4.2)
       pathe: 1.1.2
       recast: 0.23.5
     dev: false
@@ -3230,91 +3236,7 @@ packages:
       - typescript
     dev: false
 
-  /astro@4.3.7(sass@1.71.1)(typescript@5.4.2):
+  /astro@4.4.13(sass@1.71.1)(typescript@5.4.2):
-    resolution: {integrity: sha512-spdl+Ae6WZjQ0w8VBPq8ulN1hdN0m4EWvKG7ecgHjPQIHidMnzWJoZLEFEeKASqCGB1fDibqr7RDHoHkhZbp2Q==}
-    engines: {node: '>=18.14.1', npm: '>=6.14.0'}
-    hasBin: true
-    dependencies:
-      '@astrojs/compiler': 2.5.3
-      '@astrojs/internal-helpers': 0.2.1
-      '@astrojs/markdown-remark': 4.2.1
-      '@astrojs/telemetry': 3.0.4
-      '@babel/core': 7.23.9
-      '@babel/generator': 7.23.6
-      '@babel/parser': 7.23.9
-      '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.9)
-      '@babel/traverse': 7.23.9
-      '@babel/types': 7.23.9
-      '@types/babel__core': 7.20.5
-      acorn: 8.11.3
-      aria-query: 5.3.0
-      axobject-query: 4.0.0
-      boxen: 7.1.1
-      chokidar: 3.6.0
-      ci-info: 4.0.0
-      clsx: 2.1.0
-      common-ancestor-path: 1.0.1
-      cookie: 0.6.0
-      cssesc: 3.0.0
-      debug: 4.3.4
-      deterministic-object-hash: 2.0.2
-      devalue: 4.3.2
-      diff: 5.2.0
-      dlv: 1.1.3
-      dset: 3.1.3
-      es-module-lexer: 1.4.1
-      esbuild: 0.19.12
-      estree-walker: 3.0.3
-      execa: 8.0.1
-      fast-glob: 3.3.2
-      flattie: 1.1.0
-      github-slugger: 2.0.0
-      gray-matter: 4.0.3
-      html-escaper: 3.0.3
-      http-cache-semantics: 4.1.1
-      js-yaml: 4.1.0
-      kleur: 4.1.5
-      magic-string: 0.30.7
-      mdast-util-to-hast: 13.0.2
-      mime: 3.0.0
-      ora: 7.0.1
-      p-limit: 5.0.0
-      p-queue: 8.0.1
-      path-to-regexp: 6.2.1
-      preferred-pm: 3.1.2
-      probe-image-size: 7.2.3
-      prompts: 2.4.2
-      rehype: 13.0.1
-      resolve: 1.22.8
-      semver: 7.6.0
-      server-destroy: 1.0.1
-      shikiji: 0.9.19
-      shikiji-core: 0.9.19
-      string-width: 7.1.0
-      strip-ansi: 7.1.0
-      tsconfck: 3.0.2(typescript@5.4.2)
-      unist-util-visit: 5.0.0
-      vfile: 6.0.1
-      vite: 5.1.5(sass@1.71.1)
-      vitefu: 0.2.5(vite@5.1.5)
-      which-pm: 2.1.1
-      yargs-parser: 21.1.1
-      zod: 3.22.4
-    optionalDependencies:
-      sharp: 0.32.6
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-    dev: false
-
-  /astro@4.4.13(typescript@5.4.2):
     resolution: {integrity: sha512-kx2k2DJd9Os15zJBo8fK01/2F7/4wH6sAKmlBHlkGHIFm6CKSSzWCK/IWQ0DybNWtthK9A3HDZ4VYWv0BJDOBg==}
     engines: {node: '>=18.14.1', npm: '>=6.14.0'}
     hasBin: true
@@ -4019,28 +3941,6 @@ packages:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
 
-  /debug@2.6.9:
-    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.0.0
-    dev: false
-
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: false
-
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -6530,10 +6430,6 @@ packages:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
 
-  /ms@2.0.0:
-    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
-    dev: false
-
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
@@ -6566,18 +6462,6 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
-  /needle@2.9.1:
-    resolution: {integrity: sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==}
-    engines: {node: '>= 4.4.x'}
-    hasBin: true
-    dependencies:
-      debug: 3.2.7
-      iconv-lite: 0.4.24
-      sax: 1.3.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /nlcst-to-string@3.1.1:
     resolution: {integrity: sha512-63mVyqaqt0cmn2VcI2aH6kxe1rLAmSROqHMA0i4qqg1tidkfExgpb0FGMikMCn86mw5dFtBtEANfmSSK7TjNHw==}
     dependencies:
@@ -7137,16 +7021,6 @@ packages:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
 
-  /probe-image-size@7.2.3:
-    resolution: {integrity: sha512-HubhG4Rb2UH8YtV4ba0Vp5bQ7L78RTONYu/ujmCu5nBI8wGv24s4E9xSKBi0N1MowRpxk76pFCpJtW0KPzOK0w==}
-    dependencies:
-      lodash.merge: 4.6.2
-      needle: 2.9.1
-      stream-parser: 0.3.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -7598,10 +7472,6 @@ packages:
     dependencies:
       lru-cache: 6.0.0
 
-  /server-destroy@1.0.1:
-    resolution: {integrity: sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ==}
-    dev: false
-
   /set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -7841,14 +7711,6 @@ packages:
     dependencies:
       bl: 5.1.0
 
-  /stream-parser@0.3.1:
-    resolution: {integrity: sha512-bJ/HgKq41nlKvlhccD5kaCr/P+Hu0wPNKPJOH7en+YrJu/9EgqUF+88w5Jb6KNcjOFMhfX4B2asfeAtIGuHObQ==}
-    dependencies:
-      debug: 2.6.9
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /stream-transform@2.1.3:
     resolution: {integrity: sha512-9GHUiM5hMiCi6Y03jD2ARC1ettBXkQBoQAe7nJsPknnI0ow10aXjTnew8QtYQmLjzn974BnmWEAJgCY6ZP1DeQ==}
     dependencies: