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

ii-jj · 2024-03-10T15:09:23Z

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 · 2024-03-12T23:37:45Z

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 · 2024-03-12T23:43:21Z

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

Adammatthiesen · 2024-03-13T00:11:12Z

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

ii-jj · 2024-03-13T00:39:51Z

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

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

Adammatthiesen · 2024-03-13T00:41:06Z

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 · 2024-03-13T01:08:47Z

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

Adammatthiesen · 2024-03-13T01:11:23Z

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 · 2024-03-13T05:04:59Z

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 · 2024-03-13T05:42:23Z

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 · 2024-03-13T06:29:45Z

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 · 2024-03-13T14:33:27Z

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.

create-issue-branch bot mentioned this issue Mar 12, 2024

fix: 🐛 Custom Code Component Swap is causing issues. MatthiesenXYZ/astro-ghostcms#112

Merged

Adammatthiesen self-assigned this Mar 13, 2024

create-issue-branch bot mentioned this issue Mar 13, 2024

fix: 🐛 bug: ultrahtml does not handle all html strings. add switch to enable standard html fragment tag instead. MatthiesenXYZ/astro-ghostcms#115

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ii-jj commented Mar 10, 2024 •

edited

Loading

Adammatthiesen commented Mar 12, 2024 •

edited

Loading

Adammatthiesen commented Mar 12, 2024

Adammatthiesen commented Mar 13, 2024

ii-jj commented Mar 13, 2024

Adammatthiesen commented Mar 13, 2024 •

edited

Loading

ii-jj commented Mar 13, 2024

Adammatthiesen commented Mar 13, 2024 •

edited

Loading

ii-jj commented Mar 13, 2024

Adammatthiesen commented Mar 13, 2024

Adammatthiesen commented Mar 13, 2024 •

edited

Loading

ii-jj commented Mar 13, 2024

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

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

Comments

ii-jj commented Mar 10, 2024 • edited Loading

CodeSlot.astro

test-ghost.astro

Adammatthiesen commented Mar 12, 2024 • edited Loading

Adammatthiesen commented Mar 12, 2024

Adammatthiesen commented Mar 13, 2024

ii-jj commented Mar 13, 2024

Adammatthiesen commented Mar 13, 2024 • edited Loading

ii-jj commented Mar 13, 2024

Adammatthiesen commented Mar 13, 2024 • edited Loading

ii-jj commented Mar 13, 2024

Adammatthiesen commented Mar 13, 2024

Adammatthiesen commented Mar 13, 2024 • edited Loading

ii-jj commented Mar 13, 2024

ii-jj commented Mar 10, 2024 •

edited

Loading

Adammatthiesen commented Mar 12, 2024 •

edited

Loading

Adammatthiesen commented Mar 13, 2024 •

edited

Loading

Adammatthiesen commented Mar 13, 2024 •

edited

Loading

Adammatthiesen commented Mar 13, 2024 •

edited

Loading