Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oliverjam/eleventy-plugin-svelte
https://github.com/oliverjam/eleventy-plugin-svelte
Last synced: 13 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/oliverjam/eleventy-plugin-svelte
- Owner: oliverjam
- Created: 2020-08-15T17:21:47.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-08-15T18:34:30.000Z (over 4 years ago)
- Last Synced: 2024-10-31T11:51:34.457Z (20 days ago)
- Language: JavaScript
- Size: 42 KB
- Stars: 24
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Eleventy Plugin Svelte
Use Svelte to write Eleventy templates. Get all the benefits of Svelte's great developer-experience, including a nice templating language and same-file scoped CSS, but for your static websites.
⚠️ **Very much a work in progress** ⚠️
## Installation
```sh
npm install @oliverjam/eleventy-plugin-svelte
```
- Requires Eleventy `0.11.0` or newer
- Requires `ELEVENTY_EXPERIMENTAL=true` to be set before you run the `eleventy` build (so we can use [Custom File Extension Handlers](https://github.com/11ty/eleventy/issues/117))
## Usage
See the `example/` directory for a full code sample.
First add install this plugin, then import it and add it to your config in `.eleventy.js`.
```js
const pluginSvelte = require("@oliverjam/eleventy-plugin-svelte");
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(pluginSvelte);
};
```
Write your page templates as Svelte components. Whatever HTML the component renders will be used as the contents of the template.
Set Eleventy data (e.g. layouts) using [Svelte's ``](https://github.com/11ty/eleventy/issues/117).
```svelte
<!-- index.svelte -->
<script context="module">
export const data = { layout: "layouts/base.njk" };
Hello world
```
This plugin will extract any CSS from the component's `` tags and any head contents from its `<svelte:head>` tags. These are made available for you to use in layouts via Eleventy filters named: `getSvelteCssForPage` and `getSvelteHeadForPage`. For example:
```njk
<!-- _includes/layouts/base.njk -->
<!doctype html>
<html>
<head>
<style>
{{page.url | getSvelteCssForPage}}
{{page.url | getSvelteHeadForPage | safe}}
{{content | safe}}