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 a tool for bringing dynamic, clientside interactions to your static 11ty site. Once installed, this:
๐ Unlocks component frameworks (like React) for writing page templates and layout templates. So, you can turn an existing.html
or.liquid
file into a.jsx
file, and immediately start building routes using React.๐ 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.jsx' %}
๐ง Hydrates these component-driven pages on the client. In other words, all your dynamic state management will work in development and production with 0 extra setup.
๐ฃ Find our full announcement post here โ
Quick start
All you need is an empty directory to get started! But if you prefer a starter project with some pre-populated content, you can use the lovely guide + community resources over on the 11ty docs.
Installation
First, install Slinkity + the latest 11ty into your project repo like so:
npm i --save-dev slinkity @11ty/eleventy@beta
Slinkity relies on 11ty's latest 1.0 beta build to work properly. Yes, this could involve some gotchas with existing 11ty plugins! If anything unexpected happens, let us know on our GitHub issues page.
...and run our CLI command to spin up the dev server:
npx slinkity --serve
# Also consider the --incremental flag
# for faster builds during development
Now you're off to the races! This command will:
- Start up 11ty in
--watch
mode to listen for file changes - Start up a Vite server pointed at your 11ty build. This helps us process all sorts of file types, including SASS styles, React components, and more
๐
When you're ready for a production build, just run:
npx slinkity
...and your shiny new site will appear in the _site
folder (or wherever you tell 11ty to build your site).
๐ Dive in to the docs here โ
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 plan to support. For reference, here's our tentative roadmap to version 1.0:
Feature | Status |
---|---|
CLI to run 11ty and Vite simultaneously | |
React component pages & layouts | |
React component shortcodes | |
SASS support | |
CSS module support* | |
First-class page transition library | |
Single page app capabilities | |
Vue component pages, layouts and shortcodes | |
Svelte component pages, layouts and shortcodes | |
Tailwind support | |
Styled components & Emotion support |
*CSS modules will work with JavaScript enabled. However, disabling JavaScript or rendering your components as "static" will break this behavior.
โ = 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.