keystatic icon indicating copy to clipboard operation
keystatic copied to clipboard

Docs: Add "how to add images" to the Astro starter

Open jasikpark opened this issue 2 years ago • 5 comments

https://github.com/Thinkmill/keystatic/blob/main/docs/src/content/pages/installation-astro.mdoc

^ It'd be great to include "how to add images and ensure they're resolved" to the astro docs, since there seems to be some awkwardness with how the paths are generated:

with src/content/posts/first-post.mdoc in the starter, uploading an image from the ui adds src/content/posts/first-post/content/image.jpeg and links ![](image.jpeg) in src/content/posts/first-post.mdoc, which Astro ends up not resolving.

Maybe worth changing the config / reccomending changing the config for a blog w/ images or improving the path generation code?

Changing keystatic.config.ts to path: "src/content/posts/*/" doesn't seem to help, since then the image is still referenced as ![](image.jpeg) when it's in the ./content/ directory

jasikpark avatar Sep 05 '23 01:09 jasikpark

May be that https://github.com/Thinkmill/keystatic/blob/main/packages/keystatic/src/form/fields/document/DocumentEditor/image.tsx needs to generate the relative slug differently? Does Next.JS glob for the images?

jasikpark avatar Sep 05 '23 01:09 jasikpark

Hey! Good catch — we need to support the proper Astro way to handle images with Astro assets.

I've opened a PR that will update the template to do just that — if you want to keep working on your existing project, you can copy the config chages from that PR 👍

https://github.com/Thinkmill/keystatic/blob/094f890504553fc85754523bca86d560aeee779a/templates/astro/keystatic.config.ts#L20-L23

simonswiss avatar Sep 05 '23 07:09 simonswiss

😓 I've somehow run into an issue where that resolves for me in the editor, but not when astro renders the markdoc... I'll have to investigate into it more...

jasikpark avatar Sep 06 '23 02:09 jasikpark

@simonswiss I created a new setup following your video yesterday but it looks like the changes you made in https://github.com/Thinkmill/keystatic/pull/621 are not released, yet?

On a side note, I tried to wrap my head around how to figure out what is released, but given the different changelogs and packages and the way the changelog-UI works (eg without dates in the changelog) that is not quite easy. I found that in https://github.com/Thinkmill/keystatic/blob/7d67aa3286ed7326975740177f1fd3883ed45547/templates/astro/CHANGELOG.md?plain=1#L14 your change was added, so that should be released, right?


Q: How to setup a posts/images folder structure that stores the images next to the post?

In #621 you stored the images away from the posts. However, this will be messy once I delete a post and cannot find the corresponding images. I suggest to create the default config in a way to store the posts and images next to eachother…

(Btw, Astro has no recommendations on this in their docs, eg not in https://docs.astro.build/en/core-concepts/project-structure/ nor in the images section.)

/posts/slug1/index.astro
/posts/slug1/foobar.png
/posts/slug2/index.astro
/posts/slug3/index.astro
/posts/slug3/foo.jpg
/posts/slug3/bar.gif

tordans avatar Oct 25 '23 05:10 tordans

😓 I've somehow run into an issue where that resolves for me in the editor, but not when astro renders the markdoc... I'll have to investigate into it more...

this also prevented me from resolving the editor image in Next.js. should I open another github issue?

rabelais88 avatar Nov 22 '23 02:11 rabelais88