• Stars
    star
    375
  • Rank 114,096 (Top 3 %)
  • Language Svelte
  • License
    MIT License
  • Created over 4 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Svelte starter template for projects

Svelte Starter

This starter template aims to quickly scaffold a SvelteKit project, designed around data-driven, visual stories at The Pudding.

Notes

  • Do not use or reproduce The Pudding logos or fonts without written permission.
  • Prettier Formatting: Disable any text editor Prettier extensions to take advantage of the built-in rules.

Features

  • Lucide Icons for simple/easy svg icons
  • ArchieML for micro-CMS powered by Google Docs and Sheets
  • Style Dictionary for CSS/JS style parity
  • CSV, JSON, and SVG imports
  • SSR static-hosted builds by default

Quickstart

From Scratch

  • Click the green Use this template button above.
  • Alternatively: npx degit the-pudding/svelte-starter my-project

Pre-existing Project

  • clone the repo

Installation

  • In your local repo run pnpm install or npm install

Development

npm run dev

Change the script in package.json to "dev": "svelte-kit dev --host" to test on your local network on a different device.

Deploy

npm run build

This generates a directory called build with the statically rendered app.

A shortcut for github pages:

make github

Deploying to Pudding AWS:

make pudding

Style

There are a few stylesheets included by default in src/styles. Refer to them in app.css, the place for applying global styles.

For variable parity in both CSS and JS, modify files in the properties folder using the Style Dictionary API.

Run npm run style to regenerate the style dictionary.

Some css utility classes in reset.css

  • .sr-only: makes content invisible available for screen reader
  • .text-outline: adds a psuedo stroke to text element

Custom Fonts

For locally hosted fonts, simply add the font to the static/assets folder and include a reference in src/styles/font.css, making sure the url starts with "assets/...".

Google Docs and Sheets

  • Create a Google Doc or Sheet
  • Click Share -> Advanced -> Change... -> Anyone with this link
  • In the address bar, grab the ID - eg. "...com/document/d/1IiA5a5iCjbjOYvZVgPcjGzMy5PyfCzpPF-LnQdCdFI0/edit"
  • paste in the ID above into google.config.js, and set the filepath to where you want the file saved
  • If you want to do a Google Sheet, be sure to include the gid value in the url as well

Running npm run gdoc at any point (even in new tab while server is running) will fetch the latest from all Docs and Sheets.

Structural Overview

Pages

The src/routes directory contains pages for your app. For a single-page app (most cases) you don't have to modify anything in here. +page.svelte represents the root page, think of it as the index.html file. It is prepopulated with a few things like metadata and font preloading. It also includes a reference to a blank slate component src/components/Index.svelte. This is the file you want to really start in for your app.

Embedding Data

For smaller datasets, it is often great to embed the data into the HTML file. If you want to use data as-is, you can use normal import syntax (e.g., import data from "$data/file.csv"). If you are working with data but you want to preserve the original or clean/parse just what you need to use in the browser to optimize the front-end payload, you can load it via +page.server.js, do some work on it, and return just what you need. This is passed automatically to +page.svelte and accessible in any component with getContext("data").

Pre-loaded helpers

Components

Located in src/components.

// Usage
import Example from "$components/Example.svelte";
  • Footer.svelte: Pudding recirculation and social links.
  • Header.svelte: Pudding masthead.

Helper Components

Located in src/components/helpers.

// Usage
import Example from "$components/helpers/Example.svelte";
  • ButtonSet.svelte: Accessible button group inputs.
  • Chunk.svelte: Split text into smaller dom element chunks.
  • Countdown.svelte: Countdown timer text.
  • Figure.svelte: A barebones chart figure component to handle slots.
  • MotionToggle.svelte: A toggle button to enable/disable front-end user motion preference.
  • Range.svelte: Customizable range slider.
  • Scrolly.svelte: Scrollytelling.
  • SortTable.svelte: Sortable semantic table with customizable props.
  • Slider.svelte (and Slider.Slide.svelte): A slider widget, especially useful for swipe/slide stories.
  • Tap.svelte: Edge-of-screen tapping library, designed to integrate with slider.
  • Tip.svelte: Button that links to Strip payment link.
  • Toggle.svelte: Accessible toggle inputs.
  • WIP.svelte: A sticky banner saying this project is a WIP.

Layercake Chart Components

Starter templates for various chart types to be used with LayerCake. Located in src/components/layercake.

// Usage
import Example from "$components/layercake/Example.svelte";

Actions

Located in src/actions.

// Usage
import example from "$actions/action.js";
  • canTab.js: enable/disable tabbing on child elements.
  • checkOverlap.js: Label overlapping detection. Loops through selection of nodes and adds a class to the ones that are overlapping. Once one is hidden it ignores it.
  • focusTrap.js: Enable a keyboard focus trap for modals and menus.
  • keepWithinBox.js: Offsets and element left/right to stay within parent.
  • inView.js: detect when an element enters or exits the viewport.
  • resize.js: detect when an element is resized.

Stores

These are located in src/stores. You can put custom ones in src/stores/misc.js or create unique files for more complex ones.

// Usage
import example from "$stores/example.js";
import { example } from "$stores/misc.js";
  • mq: returns an object of media queries booleans if they are enabled or not. You can modify them in the js file.
  • previous: returns the previous value of another store.
  • reducedMotion: returns a boolean of front-end user event to enable/disable motion preference.
  • scrollY: returns a number of window vertical scroll position. It is throttled using rAF for performance.
  • timer: returns an object { timer, elapsed }. timer has 5 methods (start, stop, toggle, set, reset) and elapsed is a store that is the number of ms.
  • viewport: returns an object { width, height } of the viewport dimensions. It is debounced for performance.

Utils

Located in src/utils/.

// Usage
import example from "$utils/example.js";
  • csvDownload.js: Converts a flat array of data to CSV content ready to be used as an href value for download.
  • generateId.js: Generate an alphanumeric id.
  • loadCsv.js: Loads and parses a CSV file.
  • loadImage.js: Loads an image.
  • loadJson.js: Loads and parses a JSON file.
  • loadPixels.js: Loads the pixel data of an image via an offscreen canvas.
  • localStorage.js: Read and write to local storage.
  • mapToArray.js: Convenience function to convert a map to an array.
  • move.js: transform translate function shorthand.
  • previous.js: keep track of the previous value of a store.
  • transformSvg.js: Custom transition lets you apply an svg transform property with the in/out svelte transition. Parameters (with defaults):
  • translate.js: Convenience function for transform translate css.
  • urlParams.js: Get and set url parameters.

More Repositories

1

data

Data sets created for stories on The Pudding, open to the public.
HTML
869
star
2

starter

A starter template for projects.
JavaScript
215
star
3

how-to-implement-scrollytelling

How to implement scrollytelling with six different libraries
HTML
94
star
4

website

The Pudding's website
Svelte
61
star
5

wiki-death-data

JavaScript
45
star
6

censorship

Svelte
44
star
7

blog_scrollytelling-sticky

JavaScript
39
star
8

song-repetition

Are Pop Lyrics Getting More Repetitive?
JavaScript
35
star
9

this-american-life

Jupyter Notebook
19
star
10

lenna

JavaScript
17
star
11

last-two-minute-report

JavaScript
16
star
12

eu-regions

CSS
15
star
13

puddingR

An R package for Pudding-styled analysis
R
13
star
14

svelte-templates

Svelte
12
star
15

lenna-data

Jupyter Notebook
10
star
16

the-svelte-way

Svelte
9
star
17

wiki-billboard-data

JavaScript
9
star
18

year-in-music-apple-music

JavaScript
9
star
19

bad-music-public

JavaScript
9
star
20

smoothing_tutorial

regional smoothing in r
HTML
8
star
21

wiki-death

JavaScript
7
star
22

falsetto-story

JavaScript
7
star
23

people-map

JavaScript
7
star
24

svelte-summit

Svelte
7
star
25

comics

HTML
7
star
26

banknotes

Svelte
7
star
27

nba-player-data

JavaScript
6
star
28

pass-the-mic

A browser extension to visualize how much each person is talking in Google Meet.
JavaScript
6
star
29

old-website

HTML
5
star
30

starter-cli

JavaScript
5
star
31

emo-rap

JavaScript
4
star
32

emotion-wheel

Svelte
4
star
33

song-decay-clean

JavaScript
4
star
34

instagram-comment-data

JavaScript
4
star
35

wiki-billboard

JavaScript
3
star
36

responsive-scrollytelling

JavaScript
3
star
37

nyt

Jupyter Notebook
3
star
38

pockets

JavaScript
3
star
39

yard-sale

Svelte
3
star
40

music-taste-2019

JavaScript
3
star
41

votes-for-women

JavaScript
3
star
42

hyphenated-names

HTML
3
star
43

birthday

JavaScript
3
star
44

blog-svelte-d3

HTML
3
star
45

wine-model

JavaScript
3
star
46

location-game

Svelte
3
star
47

word-game

Svelte
2
star
48

retraining

Jupyter Notebook
2
star
49

cough

Svelte
2
star
50

airports

JavaScript
2
star
51

cetaceans

JavaScript
2
star
52

sixty

Svelte
2
star
53

cities_interactive

JavaScript
2
star
54

summer-reading

JavaScript
2
star
55

people-map-uk

JavaScript
2
star
56

crossword-generator

JavaScript
2
star
57

songwriters

Svelte
2
star
58

clocks

Svelte
2
star
59

infinite-web

HTML
2
star
60

flooding

JavaScript
2
star
61

real-mvp

JavaScript
2
star
62

heat-records-map

Svelte
2
star
63

streaming

JavaScript
2
star
64

book-covers

JavaScript
2
star
65

kpop

kpop kontinentalist story
JavaScript
2
star
66

sleep-training

Svelte
2
star
67

campaign-colors

JavaScript
2
star
68

dress_codes

HTML
2
star
69

karen-viz

JavaScript
1
star
70

vogue

HTML
1
star
71

apology

JavaScript
1
star
72

new-slang

1
star
73

gendered-descriptions

JavaScript
1
star
74

hs-hype

JavaScript
1
star
75

wrestling

Svelte
1
star
76

earnings-call

HTML
1
star
77

3d-cities-story

JavaScript
1
star
78

kidz-bop-data

R
1
star
79

birth_control

HTML
1
star
80

pudding-cup-2019

JavaScript
1
star
81

falsetto-site

JavaScript
1
star
82

three-seconds-etc

JavaScript
1
star
83

outliers

Svelte
1
star
84

millennial_killers

JavaScript
1
star
85

localsandtourists

JavaScript
1
star
86

ig-links

HTML
1
star
87

women-in-headlines

JavaScript
1
star
88

covid-science

JavaScript
1
star
89

outliers-data

Jupyter Notebook
1
star
90

millennials

JavaScript
1
star
91

weather-temps

Svelte
1
star
92

generational-knowledge

JavaScript
1
star
93

how-to-make-dope-shit-part-3

JavaScript
1
star
94

pudding-awards-2018

JavaScript
1
star
95

author-locations

JavaScript
1
star
96

nba-top-plays-2018

JavaScript
1
star
97

predictive-text-twitter

JavaScript
1
star
98

sankey

JavaScript
1
star
99

karen-data

JavaScript
1
star
100

makeup-shades

JavaScript
1
star