Cannot read properties of undefined (reading 'name') render Ghost CMS pages

ii-jj commented 8 months ago

CodeSlot.astro

---
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}/>

test-ghost.astro

---
import { Markup } from "astro-remote";
import CodeSlot from "../components/CodeSlot.astro";

const example = "<p>使用ChatGPT非常简单,现在市面上有很多相关的桌面应用、浏览器插件、手机App，通过API接口进行调用，只需要输入问题或者对话内容，ChatGPT就可以生成回复。</p><pre><code>你：嗨 ChatGPT：嗨 \n你：今天天气怎么样？ ChatGPT：今天很晴朗\n</code></pre>\n<p>当然，这只是最基本的例子。ChatGPT还可以做更多有趣和复杂的事情。比如说：</p>\n<pre><code>你：请告诉我关于太阳系最有趣的事情 \nChatGPT：太阳系最有趣的事情之一是，在木星上下雨时不下水而下钻石。 \n你：真的吗？ \nChatGPT：真的。因为木星上气压很高，在云层中形成了碳化物颗粒，在下降过程中被压缩成钻石。 你：哇！那太酷了！\n</code></pre>\n<p>除了回答问题外，ChatGPT还可以根据提示生成创意内容。比如说：</p>\n<pre><code>你：请用五行诗描述春天\n\nChatGPT：\n\n春风送暖花开放\n蝴蝶飞舞鸟儿唱\n草色青青河水清\n人们赏景心欢畅\n春天来了万物新\n</code></pre>\n<h2 id=\"chatgpt-%E7%9A%84%E4%BC%98%E5%8A%BF%E5%92%8C%E5%BA%94%E7%94%A8%E5%89%8D%E6%99%AF\">ChatGPT 的优势和应用前景</h2>"

---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <div class="markup">
      <h1>html generated by Ghost</h1>
      <Markup
        content={example}
        sanitize={{
            allowComponents: true,
          }}
          components={{
            pre: CodeSlot,
          }}
      />
    </div>

  </body>
</html>

Adammatthiesen commented 8 months ago

This is not an astro-remote related issue. this issue is from Astro-ghostcms and how it is currently processing the way it sees code tags, please submit an issue there instead.

Adammatthiesen commented 8 months ago

In fact, I just opened an issue calling it a astro-ghostcms bug: https://github.com/MatthiesenXYZ/astro-ghostcms/issues/111

Adammatthiesen commented 8 months ago

Update: This has been fixed in Astro-GhostCMS. That broken component was removed.

ii-jj commented 8 months ago

Update: This has been fixed in Astro-GhostCMS. That broken component was removed.

I updated to the latest version, but the issue persists.

Adammatthiesen commented 8 months ago

Update: This has been fixed in Astro-GhostCMS. That broken component was removed.

I updated to the latest version, but the issue persists.

are you using one of the Extra themes? or the default theme? those would also need to be updated as that is where the update was.

To be clear, The component as it was written does not work correctly, and should not be used and was removed due to this so if you have copied that code component locally it will never work properly as I had designed it to only handle 1 type of Ghosts <pre> tags. but forgot that Ghost can output many types of these components over its HTML

So in your example, Astro-GhostCMS now internally handles it as such

---
import { Markup } from "astro-remote";
import CodeSlot from "../components/CodeSlot.astro";

const example = "<p>使用ChatGPT非常简单,现在市面上有很多相关的桌面应用、浏览器插件、手机App，通过API接口进行调用，只需要输入问题或者对话内容，ChatGPT就可以生成回复。</p><pre><code>你：嗨 ChatGPT：嗨 \n你：今天天气怎么样？ ChatGPT：今天很晴朗\n</code></pre>\n<p>当然，这只是最基本的例子。ChatGPT还可以做更多有趣和复杂的事情。比如说：</p>\n<pre><code>你：请告诉我关于太阳系最有趣的事情 \nChatGPT：太阳系最有趣的事情之一是，在木星上下雨时不下水而下钻石。 \n你：真的吗？ \nChatGPT：真的。因为木星上气压很高，在云层中形成了碳化物颗粒，在下降过程中被压缩成钻石。 你：哇！那太酷了！\n</code></pre>\n<p>除了回答问题外，ChatGPT还可以根据提示生成创意内容。比如说：</p>\n<pre><code>你：请用五行诗描述春天\n\nChatGPT：\n\n春风送暖花开放\n蝴蝶飞舞鸟儿唱\n草色青青河水清\n人们赏景心欢畅\n春天来了万物新\n</code></pre>\n<h2 id=\"chatgpt-%E7%9A%84%E4%BC%98%E5%8A%BF%E5%92%8C%E5%BA%94%E7%94%A8%E5%89%8D%E6%99%AF\">ChatGPT 的优势和应用前景</h2>"

---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <div class="markup">
      <h1>html generated by Ghost</h1>
      <Markup
        content={example}
        sanitize={{
            allowComponents: true,
          }}
      />
    </div>

  </body>
</html>

ii-jj commented 8 months ago

I tested it with astro-ghostcms playground, using the default theme. @Adammatthiesen

Adammatthiesen commented 8 months ago

Yeah I have removed the Component since it was broken. so all you have to do is remove the section below

- components={{
-     pre: CodeSlot,
- }}

ii-jj commented 8 months ago

To clarify, I tested it using the astro-playground inside the astro-ghostcms repo.

Here's a demo for reproducing the issue:

Visit the demo branch on GitHub: https://github.com/Jungley8/astro-ghostcms/tree/demo

Run it and access the demo in your web browser at http://localhost:4321/test

Adammatthiesen commented 8 months ago

Oh, This might be a bigger issue @natemoo-re After doing some tests this might be an ultrahtml parsing issue... After doing some further tests I can confirm this is ultrahtml causing this issue. I can add a patch to astro-ghostcms to switch to not use the Astro-remote system for now, until a fix can be done. But apparently ultra-html and well as some of the HTML parsers that i ran the string through really didnt like it. BUT the standard astro <Fragment> tag worked. so Ill add a config option to swap it.

Adammatthiesen commented 8 months ago

Okay new update is out for Astro-GhostCMS now has a switch to allow users to swap from astro-remote to Astro's <Fragment set:html /> Utility

ii-jj commented 8 months ago

Okay new update is out for Astro-GhostCMS now has a switch to allow users to swap from astro-remote to Astro's <Fragment set:html /> Utility

Thanks, this solved my problem.

natemoo-re / astro-remote

Cannot read properties of undefined (reading 'name') render Ghost CMS pages #26

CodeSlot.astro

test-ghost.astro