Setup Website

[farskid]

Fixes: https://github.com/farskid/xstate.tips/issues/2

The tech

• Sapper (SSR Svelte Framework) with being able to export as static website
• Markdown to write tips
• Programmatically compile markdowns to a JSON file consumed by the website

How it works

This setup has a single static index page routes/index.svelte. Each .svelte file is considered a page that should be accompanied by a .json.js file responsible to export a get controller for data fetching. this data will be passed as props to the rendered page by Sapper.

Sapper will also generate a .json file based on the data that Get controller returns to be able to prefetch the data of any page in static export.

yarn export is the command we need to build our website. before running that, we'd need yarn compile-tips to run and prepare data/_tips.json by compiling markdown files.

Quoting Sapper docs:

When you run sapper export, Sapper first builds a production version of your app, as though you had run sapper build, and copies the contents of your static folder to the destination. It then starts the server, and navigates to the root of your app. From there, it follows any elements it finds, and captures any data served by the app. Because of this, any pages you want to be included in the exported site must either be reachable by elements or added to the --entry option of the sapper export command. Additionally, any non-page routes should be requested in preload, not in onMount or elsewhere.