Sanity improvements

[leerob]

Following up from https://github.com/leerob/leerob.io/pull/496.

• Switch back to pnpm once https://github.com/sanity-io/sanity/issues/3336 is resolved.
• Figure out inline images (and remove the rest of the images from the public folder
• Get Preview Mode working with v3
• Get on-demand ISR working

[alex289]

Hey, I have a question about your switch to Sanity. How do you handle blog images? You removed them from your repo but in the build output on Vercel I can see they are still loaded. How does this work? 😅

[XahidEx]

Same question + I use different image components. How It will be for me. I also want to know. I used Notion as CMS before. Sanity is quite nice. But don't know how to handle everything at all. 🥲

[leerob]

I'm currently using images inside Sanity for the cover image. Images nested inside of a post are still being hosted in public until I move them over (part of this issue 😄).

[alex289]

Hey leerob, thanks for helping me with your repo. I hope I can help you with this issue here.

• You can switch back to pnpm since https://github.com/sanity-io/sanity/issues/3336 is solved
• To use inline images I recommend using https://www.sanity.io/plugins/sanity-plugin-media
• I dont know what problem u have with preview mode. Maybe it got fixed or at least I have no problem with it at all.
• To use on-demand ISR with the sanity webhook you need to follow the tutorial by sanity: https://github.com/sanity-io/webhook-toolkit#usage-with-nextjs

I really hope this was helpful in any way. Have a good day :D

[ShubhamVerma1811]

Hey @leerob, My website has a very similar setup with Blogs hosted on sanity and the blog body as Markdown string.

I have faced the same issue on how to use inline images inside the blog body using Next/Image.

I think I have figured out a solution for myself and it is working pretty well. I have created a rehype plugin called rehype-image-resize that let's you add dimensions to your images like Obsidian.

I've created a blog demonstrating that this approach is working for me! https://shubhamverma.me/blog/resizing-images-in-markdown-and-using-it-in-next-js-with-image-component

This is how I am using the library in my code. https://github.com/ShubhamVerma1811/Website/pull/58

Do let me know if you find this approach interesting and if it might work for you.

Happy to help!

[XahidEx]

I've found a solution that you might like. You can host all of your images on Cloudinary. And It'll fetch images from there. You'll just use the publicid of the image. I'm already using it for months. <CloudinaryImg mdx publicId='xahidex/blog/*****_y9uirh' alt='*******"' width={1200} height={800} />

(next/future/image also works)

[leerob]

FYI I'm moving back to local MDX with Contentlayer (what I had before) in my new version of the site. Sanity is still cool! But using Markdown is just easier for me and or folks cloning the repository. Was a fun experiment 😄

[XahidEx]

FYI I'm moving back to local MDX with Contentlayer (what I had before) in my new version of the site. Sanity is still cool! But using Markdown is just easier for me and or folks cloning the repository. Was a fun experiment smile

Hey Lee, Did you face any problems or disadvantage using Sanity? Because I really liked it so much. And I was also able to find the solution for image. (Using Cloudinary) But If you come back to non-sanity version, I'll be huge again.

[leerob]

^ If you want to keep using Sanity, go for it! I just wanted to use local Markdown again.

[XahidEx]

^ If you want to keep using Sanity, go for it! I just wanted to use local Markdown again.

Yeah :)