A Svelte starter template built with newsroom CMS's in mind. Dynamically create inline graphics based on the placement of figure elements with defined data-chart attributes.
Inspired by graphics rigs at Bloomberg, The Pudding, and The Wall Street Journal. Created with the help of Kazi Awal.
vite-imagetools for transforming images on the fly in Vite using Sharp
svelte-lazy-loader for effortless lazy loading (created by Sawyer Click, author of CMSvelte)
Quickstart
Use degit to create a new repo using this one as a template.
npx degit sawyerclick/cmsvelte my-cmsvelte
Scripts
npm run fetch:sheet
This template has out-of-the-box features to help with consuming data from google sheets. Tag the Google Sheet for your graphic in ./config.json and make sure you have the ID and sheet ID (gid) filled out correctly. Make sure the share permissions on the sheet are set up so that it is viewable by anyone with the share link. Note: Don't make it available to edit by anybody!
Like a lot of newsrooms, this uses a Google Doc and ArchieMl approach to make copy content management easier. The setup is similar to using Sheets data. Make sure the share permissions on the doc are set up so that it is viewable by anyone with the share link. Grab the document ID from the address bar — ...com/document/d/1IiA5a5iCjbjOYvZVgPcjGzMy5PyfCzpPF-LnQdCdFI0/edit — and paste it into the respective property in ./config.json.
Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.
It makes more sense to have our lazyloader live as a module in the component per the Svelte tutorial. This creates on IntersectionObserver instance that watches all elements, rather than creating a new observer for every component instance.
I added jsdoc types to each prop, as well as changed how some work, and added a new one (👋 srcset)