Skip to content

Instantly share code, notes, and snippets.

@gushogg-blake
Last active December 12, 2021 13:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gushogg-blake/897a0f33b46cc934cd7efa5b16fd957d to your computer and use it in GitHub Desktop.
Save gushogg-blake/897a0f33b46cc934cd7efa5b16fd957d to your computer and use it in GitHub Desktop.

Open source project: Create Rollup plugin to generate static site from Svelte/Markdown files

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.

Deliverables

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment