slinkity

    0.2.0 • Public • Published

    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 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:

    1. Start up 11ty in --watch mode to listen for file changes
    2. 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.

    Install

    npm i slinkity

    Homepage

    slinkity.dev

    DownloadsWeekly Downloads

    125

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    639 kB

    Total Files

    63

    Last publish

    Collaborators

    • bholmesdev