Hi! The goal of this project is to create a static site generator system based on Rollup and Svelte - like Jekyll but for the JS ecosystem.
I'm looking for someone with significant experience developing Rollup plugins and working with Svelte, or frontend experience and an ability to quickly get up to speed with both of these.
Similar to how Jekyll and other static site generators work, this plugin(s) will take a bunch of pages as input and create a ready-to-serve folder of HTML, JavaScript, and CSS files as output.
The project should integrate nicely with the existing Svelte and Rollup ecosystem - $ rollup -c
should compile everything for prod and $ rollup -cw
should compile for dev with the ability to use rollup-plugin-live-reload
etc. Prod and dev files should be output to separate dirs.
The goal is to be able to write pages as a combination of Svelte and Markdown (with YAML front matter). There should be a layout
option to specify a Svelte component to use as the layout. This can be implemented in a quick-and-dirty way by e.g. inserting import Layout from "./Layout.svelte";
after the first instance of <script>
in the file and then inserting <Layout>
after the style/script elements and </Layout>
at the end. For example:
---
title: "My blog post"
layout: "Layout"
publishOn: "2021-12-10"
---
<script>
import Widget from "./components/Widget.svelte";
</script>
<style lang="scss">
// ...
</style>
My blog post
===
Lorem ipsum dolor sit amet
- list item 1
- list item 2
<Widget/>
etc
This will require pre-parsing the Svelte file with a Markdown parser, so there'll need to be a plugin that parses Markdown before the Svelte plugin - perhaps https://github.com/jackfranklin/rollup-plugin-markdown.
Pages should be rendered with SSR and hydration, so the plugin will need to actually load and call the Svelte component to generate the static HTML as part of the build process.
I wrote https://github.com/gushogg-blake/svelte-view-engine to solve a similar problem but for Express as opposed to static files - it might be useful to have a look at it for reference.
I've sketched out a possible way of interfacing with the project in the following repo. Feel free to deviate from this if you have a better idea: https://github.com/gushogg-blake/svelte-static-example. Note the example Rollup config would create a single instance of rollup-plugin-svelte for DOM use - this project would also require some way of passing config for a separate SSR build.
Code (full or partial implementation) for the project as described, either as a link (e.g. to a public GitHub repo) or as a zip file (in which case I will host the project publicly).
Copyright & licensing: the project must be licensed under the MIT licence. You will keep all copyright to your contributions.