Sveleventybook
An Eleventy starter project featuring Svelte and Storybook.js. Extreme static #nojs.
Sveleventybook
An Eleventy starter project featuring Svelte and Storybook
Currently doesn't support client-side Javascript, but who needs that anyway! 😅
This starter project uses Svelte.js as a server-side templating engine for Eleventy. Svelte allows us to leverage SFC's (single file components) to build (extremely) static content-only websites. Storybook is used as a component workbench that allows you to work on individual components in isolation.
This example features a few layouts to showcase a homepage, a blog index and a blog post.
How does this work?
This project tries to stick to as many Eleventy and Storybook defaults as possible.
- All pages are routed to the
_includes/svelte.11ty.jslayout via this hack in_data/layout.js. - Broadly, the
svelte.11ty.jslayout does two things:- It compiles a Svelte template with data from the markdown files.
- It chains the compiled Svelte HTML and CSS into another layout,
_includes/base.njk, where the Svelte HTML is injected into the<body>and the CSS is inlined in the<head>.
A few more details
- Prettier is used to format the Svelte-compiled HTML (and optionally everything else via an
npm run lintcommand) because if you care enough about HTML to use a template like this, you probably want it to look good. - A global CSS file is included in
_includes/styles/global.cssto provide some consistant typography (from Typebase.less ). Since Svelte localizes all CSS by default, you may want a globl CSS file for variables or typography or stuff like that. - You can specify which Svelte layout you want by adding the
_layoutkey to the front-matter of a file e.g. a file with_layout: Post.sveltewill be rendered with the following layout_includes/layouts/Post.svelte.
Inspiration
Huge shout-outs go to Marcus oberlehner for his Preact + Eleventy post, on which this approach is largely based.
TODO
- Figure out partial hydration and client-side JS in Svelte.
