kauhat / astro-cooklang-integration

Load Cooklang .cook files in Astro content collections.
https://astro-cooklang.kauh.at/
MIT License
3 stars 1 forks source link

Astro 4 Support #9

Closed caseywatts closed 3 months ago

caseywatts commented 6 months ago

I got this working locally, and it's so cool!

image

I think this plugin was designed for Astro 2, and we're on Astro 4 now. I looked through to see what if I could figure out what changes would be needed, and here are my notes 🤓

Everything works when I just do npm run serve, but I get some errors from npm run build -- it seems like it's running the getRenderModule block when I do a build, even though I never invoke <Content /> for these.

This seems to be the main change from 2 to 4 for us. It looks like entry isn't available for getRenderModule anymore. I see a property content that's seems like the raw file, but nothing called entry now, and nothing in a data structure like entry.data used to have.

I got npm run build working locally when I did these two changes:

I don't need to use the <Content /> feature for my use-case - I mostly just want to access the data myself in JSON, but manage it through collections. I think it would be easiest to remove <Content /> feature from this library, or make it a no-op. I imagine most users of this would like to customize the styling themselves (if they're like me!). Here's how I'm using it: https://github.com/caseywatts/caseywatts-blog/blob/recipes/src/pages/recipes/%5B...recipe%5D.astro (most of my display logic is in my svelte files)

I wanted to do a fuller PR, but after hitting some bumps with pnpm workspaces and typescript I've got to put this down for now. Just sharing my notes in case they help!

kauhat commented 6 months ago

Hi, thanks for looking at my project!

I was working on this back when the addContentEntryType hook was first added to Astro, and at one point most things seemed to work reasonably well. Then time moved on, the (private & experimental) API changed, and I broke some things around the project when trying to get it working again—which may explain some of the issues you ran into. I have been meaning to return and release a version 1.0 with the core features, but it's been a while.

The original idea for providing a <Content /> component was so that Cooklang and Markdown recipes could live in the same folder and work out of the box, but perhaps that wouldn't be worth the added complexity. This package would need to provide a basic template to render Cooklang recipe steps and a list of ingredients, ideally with some options to customize it. However, it would be easier to just provide a component that the user could import, like in your site.

Data collections didn't exist back when I started but have been around since v2.5.0. If recipes aren't displayed using <Content /> then potentially the addDataEntryType hook would be a better fit for this.

I really appreciate your notes. I'll try to get things working again from my side and tie up some loose ends.

caseywatts commented 3 months ago

@kauhat I noticed you worked on this a bunch, thank you! đź‘Ź

I'm happy to test this out! Once you have a tagged version published that I can/should test

kauhat commented 3 months ago

Hi @caseywatts, I've tidied up some things and published version 0.0.1 to npm.

There are still rough edges, but the core functionality seems to be working. The readme file in this repo should contain enough information to get started, and here's a bonus Astro + Vue site.

If you do have a look, please let me know how you get on. Thanks!

caseywatts commented 3 months ago

It works! 🎉 https://www.caseywatts.com/recipes/french-toast/

I didn't even have to change anything to my setup :) Thank you, @kauhat !

kauhat commented 2 months ago

Thanks for the update @caseywatts, that's really good to know. Your site looks great!