Package Exports
- slinkity
- slinkity/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (slinkity) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Slinkity
🚧 This project is heavily under construction! 🚧 As excited as you may be, we don't recommend this early alpha for production use. Still, give it a try if you want to have some fun and don't mind logging bugs along the way :)
Slinkity is the simplest way to handle styles and component frameworks on your 11ty site. Once installed, this:
- 🚀 Unlocks component frameworks like React for writing page templates and layout templates. Turn an existing
.htmlor.liquidfile into a.jsxfile, and you're off to the componentized races. - 🔖 Includes powerful shortcodes to insert components into existing pages. Add a line like this to your markdown, HTML, Nunjucks, etc, and watch the magic happen:
{% react 'path/to/component' %} - 💧 Hydrates these components when and how you want. Use component frameworks as a static template to start, and opt-in to shipping JS as needed with our partial hydration helpers.
- 💅 Bundles all your resources with the power of Vite. Use your favorite CSS preprocessor, JS minifier, and more with minimal config.
📣 Find our full announcement post here →
Technologies used
Slinkity stands on the shoulders of giants. You can think of Slinkity as the "glue" binding 2 tools together:
- Eleventy: a static site generator with a rich feature set for fetching data, composing layouts, and inserting content with "shortcodes."
- Vite: a bundler that takes the boilerplate out of your set up. It'll compile JS component frameworks, handle CSS preprocessors with little-to-no config (say, SCSS and PostCSS), and show dev changes on-the-fly using hot module replacement (HMR).
Getting started
Use our handy CLI command to spin up a Slinkity site: npm init slinkity. This demos our core functionality while staying as lean as possible, making it the perfect launchpad for new projects 🚀
To learn more, and explore adding Slinkity to existing 11ty projects...
🐣 See our "quick start" guide →
Feature set
This project is still in early alpha, so we have many features soon to come! This demo covers a majority of features we support today. For reference, here's our complete roadmap of current and upcoming features:
| Feature | Status |
|---|---|
| CLI to run 11ty and Vite simultaneously | ✅ |
| React component pages & layouts | ✅ |
| React component shortcodes | ✅ |
| SCSS and SASS | ✅ |
| PostCSS config (ex. Tailwind) | ✅ |
| CSS imports via ESM (including CSS modules) * | ⏺ |
| Plugin ecosystem for your favorite component framework | |
| (Vue, Svelte, Solid, etc) | ⏳ |
| Eleventy serverless compatibility | ❌ |
| Shared state between component shortcodes | ❌ |
| Styled components & Emotion | ❌ |
*CSS imports will work today, but with one caveat: stylesheets will bleed to other routes on your site. We're actively working on a fix!
- ✅ = Ready to use
- ⏺ = Partial support
- ⏳ = In progress
- ❌ = Not started, but on roadmap
Have an idea? Notice a bug?
We'd love to hear your feedback! Feel free to log an issue on our GitHub issues page. If your question is more personal, our Twitter DMs are always open as well.