🏝 The joyful site generator ⚡ Partial hydration in Vite.js (Vue, Svelte, Preact, Solid) ✍️ By @maximomussini
- Tweets 111
- Following 19
- Followers 454
- Likes 85
îles retweeted
Islands of interactivity 🏝️
@ilesjs is a static-site generator by @maximomussini providing support for partial hydration! - madewithvuejs.com/iles
3
7
✨📖 New Examples in the @ilesjs docs
🐇 Fetch data from an API or CMS like @directus
🛣 Use that data to generate dynamic paths
🔍 Easily customize SEO tags using the data
iles-docs.netlify.app/guide/…
2
1
14
Cold starts in @ilesjs are now even faster thanks to the latest improvements in @vite_js 🔥
Automatic CSS splitting coming soon!
✨ vite@2.9.0 is out! vitejs.dev
🔥 Faster Cold Start!
🗺️ CSS Sourcemaps during dev
⚙️ Web Workers enhancements
🛠️ New tools for Plugin and Framework authors
🎁 And more! Check out the release notes at github.com/vitejs/vite/blob/…
1
1
28
📝 Built-in draft support for markdown pages in @ilesjs ✨
🖥 see in-progress work during development
🚀 drafts aren't published when building the site
🗃 automatically excluded from `useDocuments` for consistency
😃 friendly for non-technical users
iles.pages.dev/guide/markdow…
4
27
New @islands/images module to easily optimize images in @ilesjs sites!
🖼 define presets once, apply everywhere
🔗 use presets directly in img and source, and in markdown!
🖥 customize formats, srcset, & sizes
⚡️ on-demand in dev, cached at build time 📦
iles-docs.netlify.app/guide/…
1
1
11
Powered by vite-plugin-image-presets:
🖼 vite-plugin-image-presets ⚡️
Announcing a new @vite_js plugin for image processing powered by sharp!
🖼 define presets, apply everywhere
🖥 customize formats, srcset, & sizes
🔌 works in any @vite_js app
⚡️ on-demand in dev, cached at build time 📦
github.com/ElMassimo/vite-pl…
1
îles retweeted
Did you know that many services will automatically use your 404.html page for Not Found errors?
🚀 works out of the box in @github pages, @Netlify, @CloudflarePages, and many others!
🔍 in @ilesjs, use html, markdown, or Vue to render a custom 404
iles-docs.netlify.app/this-u…
1
1
3
Now you can select @vitest_dev when generating a new @ilesjs site with:
⌨️ npm init iles@next
A `test` shortcut and an example spec will be added when enabling @vitest_dev
Now that @vitest_dev is open, you can use this command to run tests for @ilesjs sites:
⌨️ iles test
13
Now using @vitest_dev for tests in @ilesjs!
The latest version of @ilesjs also adds an experimental command to run tests using @vitest_dev:
⌨️ iles test
Vitest is on closed beta, you can sponsor it to gain access
1
7
40
Now that @vitest_dev is open, you can use this command to run tests for @ilesjs sites:
⌨️ iles test
8
îles retweeted
After 500+ commits and 100 iterations, @vitest_dev is open to everyone 🎉
It is still in development. We don't recommend migrating your current testing setups yet. But you can give it a try in new projects. Join chat.vitest.dev and get involved 🙌
github.com/vitest-dev/vitest
7
155
555
New `useDocuments` API to improve glob imports ✨
⚡️ faster than using import.meta.globEager
📄 access frontmatter and page meta
🔗 can resolve aliases, no need for relative paths
🚀 hmr is fine-grained, including page addition/removal
iles-docs.netlify.app/guide/…
2
4
27
See an example where it's used to render:
🗃 index page
🔗 dynamic paths
📻 rss feeds
github.com/ElMassimo/iles/bl…
1
2
New experimental setting: `turbo`!
🚀 enables spa-like navigation, no page reloads
🪶 lightweight, less than 2kb
😃 use islands as usual, lifecycle just works
iles-docs.netlify.app/guide/…
1
3
32
In the meantime, you can already use it along with any of the hydration strategies and components of any of the supported frameworks.
See it in action in this replica of the official @vuejs blog, written in @ilesjs with only 2kb of turbo:
the-vue-point-with-iles.netl…
1
1
For a more interactive example, check the @ilesjs documentation site, which includes the following islands:
🔎 Search modal (Preact)
🌓 Dark mode switch (Vue)
⌚️ Last updated timestamps (hydrate when visible)
📱 Sidebar in mobile (hydrate on media query)
iles-docs.netlify.app/
1
4