svickars / mad-libs

Svelte Starter

This starter template aims for fast and easy web development with HMR, and pre-rendered HTML for optimal static hosting.

Please note: do not use or reproduce The Pudding logos or fonts without written permission.

Features

• HMR for lightning fast development
• Feather Icons for simple/easy svg icons
• ArchieML for micro-CMS powered by Google Docs
• LayerCake enabled by default for chart
• Water.css for default styling
• Includes csv, json, and svg imports by default
• Pre-renders HTML on deploy with content that is hydrated on load
• Configured to make easy deploment to Github Pages

Quickstart

New school: just click the Use this template button above.

Old school:

npx degit the-pudding/svelte-starter my-project

Then in your local repo:

npm install
npm run build

Development

To start the dev server:

npm run dev

Modify content in src and public/assets.

Deploy

npm run deploy

This generates a directory called ssr with the server-side rendered static-hostable app.

If deploying to github pages:

make github

Style

There are a few stylesheets included by default in template.html. Modify global.css variables to make changes to Water.css defaults.

You can use SCSS or another CSS preprocessor by installing the module (eg. node-sass) and including the property in the svelte-preprocess in the rollup config files.

Google Docs

• Create a Google Doc
• Click Share button -> advanced -> Change... -> to "Anyone with this link"
• In the address bar, grab the ID - eg. ...com/document/d/1IiA5a5iCjbjOYvZVgPcjGzMy5PyfCzpPF-LnQdCdFI0/edit
• paste in the ID above into config.json

Running npm run gdoc at any point (even in new tab while server is running) will pull down the latest, and output a file to src/data/copy.json (or customize in the config file).

Notes

Any @html tags, e.g., {@html user} must be the child of a dom element so they can be properly hydrated.