vscode-front-matter VS vite-imagetools

FrontMatter

One of the nicest things about static site generators is that Github is offering a fully integrated solution for free. They manage your files using Git, will build your website using ANY static site generator with Github Actions, and allow you to host the output on Github Pages. When you use Frontmatter.codes in Visual Studio Code you will even get a fully featured (and free) CMS.

But what if I tell you that there is a CMS that will transform your Visual Studio Code into a proper CMS with content and media management, taxonomies, and more? Say hello to Front Matter CMS.

But, when your CMS is based on Markdown files, you can use whatever editor you want. For example, if you use Nuxt as your CMS, everyone can choose which editor they prefer. It can be Visual Studio Code, FrontMatter CMS, or maybe Nuxt Studio. Everyone can pick the app they like the most.

GitHub: https://github.com/estruyf/vscode-front-matter Website: https://frontmatter.codes

vite-imagetools is more low-level to build your own solution, while ResponsiveImage also provides an image component for an end to end solution, so you don't have to figure out writing the HTML markup. Also supports Low Quality Image Placeholders and remote images (Image CDNs).

The first thing is to install vite-imagetools from https://github.com/JonasKruckenberg/imagetools

Automatic image optimization via vite-imagetools.

The closest solution I’ve found is hacking something together yourself with vite-imagetools

The projects this solutions works with are customised Sveltekit projects I made. It has everything: markdown parser using Mdsvex, image converting tool using vite-imagetools, it has toml parser, and of course live preview and lots of other smaller things like markdown directives.

#2 - I'm not sure about the performance and/or resource usage implication around importing over 100 images like this. Would all of these images get bundled and included in the production build? The upside here is that something like vite-imagetools could be used if/when needed.

Hello HN,

I had some christmas free time over the last two weeks (Merry Christmas btw ;-)) and used that time to completely recreate the website of my app[1]. I used all the fancy new tools. I didn't know some of them when I started.

What was my goal?

* Pretty website

* Blazing fast

* Mobile first

* SSR

* Webp support

* Generally all the best website practices (high lighthouse score)

What did I use?

* Tailwindcss (https://tailwindcss.com/)

* Tailwind Components (https://tailwindui.com/)

* React (https://reactjs.org/)

* ViteJs (https://vitejs.dev/)

* Kubernetes (https://kubernetes.io/)

Well what can I say. I hate creating websites, but this was an awesome experience. Never have I created a website more efficiently. Tailwindcss + Components is just the best. ViteJS is so so so much easier to setup compared to webpack and has SSR support on top of it. React has been around somewhat longer and I did a lot of projects with it, so that was a nobrainer. Special thanks to all the people who created these awesome tools.

PS: If you work with lots of images, do yourself a favor and use something like https://github.com/JonasKruckenberg/imagetools. It saved me hours of dreadful work.

[1] https://stockevents.app

Spent the better part of today attempting to find a working alternative to svelte-images, which I had been using in Sapper, but found was not working in SvelteKit. Was referred to [vite-imagetools](https://github.com/JonasKruckenberg/vite-imagetools) on discord, which is a vite plugin that dynamically import and transform images (srcset). Here are the steps required to integrate vite-imagetools with SvelteKit: