Slinkity

Slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them
GitHub
453
Created 2 years ago, last commit a year ago
19 contributors
538 commits
Stars added on GitHub, month by month
N/A
12
1
2
3
4
5
6
7
8
9
10
11
2022
2023
Stars added on GitHub, per day, on average
Yesterday
=
Last week
-0.3 /day
Last month
0.0 /day
Package on NPM
Monthly downloads on NPM
N/A
12
1
2
3
4
5
6
7
8
9
10
11
2022
2023
README

Slinkity - To eleventy and beyond

License: MIT Twitter: slinkitydotdev

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 .html or .liquid file into a .jsx file, 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:

  1. Eleventy: a static site generator with a rich feature set for fetching data, composing layouts, and inserting content with "shortcodes."
  2. 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 ✅
Plugin ecosystem for your favorite component framework (React, Vue, Svelte, etc) ✅
Component pages ✅
Component shortcodes ✅
SCSS and SASS ✅
PostCSS config (ex. Tailwind) ✅
CSS imports via ESM (including CSS modules) ✅
Shared state between any component shortcode ⏳
  • ✅ = Ready to use
  • ⏳ = In progress

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.