satnaing / astro-paper

A minimal, accessible and SEO-friendly Astro blog theme
https://astro-paper.pages.dev/
MIT License
2.12k stars 440 forks source link

Build failing when using this template with SolidJS #295

Open Bravilogy opened 2 months ago

Bravilogy commented 2 months ago

I found a strange issue when using SolidJS with this template.

git clone <this-template>
npm install
npx astro add solid
npm run build

results in:

23:41:00 λ src/pages/posts/[slug]/index.png.ts
23:41:00   ├─ /posts/adding-new-posts-in-astropaper-theme.pngCannot read properties of undefined (reading 'children')
Stack trace:
at n (file:///users/0xdev/code/blog/node_modules/satori/dist/index.js:3:55675)
at wl (file:///users/0xdev/code/blog/node_modules/satori/dist/index.js:6:27919)
at async Module.GET (file:///users/0xdev/code/blog/dist/chunks/pages/index_n3t3xXOT.mjs:70:47)
at async #tryRenderRoute (file:///users/0xdev/code/blog/node_modules/astro/dist/core/pipeline.js:119:16)
at async generatePath (file:///users/0xdev/code/blog/node_modules/astro/dist/core/build/generate.js:411:16)
at async generatePages (file:///users/0xdev/code/blog/node_modules/astro/dist/core/build/generate.js:156:9)
at async AstroBuilder.build (file:///users/0xdev/code/blog/node_modules/astro/dist/core/build/index.js:138:5)
at async build (file:///users/0xdev/code/blog/node_modules/astro/dist/core/build/index.js:47:3)
at async runCommand (file:///users/0xdev/code/blog/node_modules/astro/dist/cli/index.js:121:7)

Probably a long shot, but perhaps anyone has a solution?

Bravilogy commented 2 months ago

I think I actually found a solution, so I'll post it here just in case someone else stumbles upon the same thing. I replicated what this package does: https://github.com/ryoid/solid-satori/tree/main/packages/solid-satori

for example:

export async function renderToSvg(
  component: () => JSX.Element,
  options: SatoriOptions
) {
  const result = await renderToStringAsync(component);
  const markup = htmlToReactNode(result);
  return satori(markup, options);
}

export async function generateOgImageForPost(post: CollectionEntry<"blog">) {
  const svg = await renderToSvg(() => postOgImage(post), options);
  return svgBufferToPngBuffer(svg);
}

And obviously updated style props in postOgImage and siteOgImage to be strings.