A Svelte template built with newsroom CMS's in mind

Overview

CMSvelte

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.

Previously known as tiny-svelte.

Local env requirements

Useful docs to features

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!

Directly import csv's into your .svelte file via @rollup/plugin-dsv

import data from '$lib/data/data.csv'

npm run fetch:copy

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.

htmlparser2 and html-entities act as a middle man to catch various tags like , ,

    and more.

    Import copy into your package like any JSON file

    import copy from '$lib/data/copy.json'

    Development

    nvm use
    npm install
    npm run dev

    Modify content in src.

    Adding and removing graphics

    CMSvelte's power is dynamic placement unrestrained by content. After build, you can place the

    elements anywhere in the CMS and they will load.

    To place graphics, edit index.html by adding or removing figures such as this:

    .

    Then, in src/main.js, import your wrapper component up top and add the applicable data to the component array. Every object in this array should have 1) a matching

    element in index.html and 2) an imported component:

    const components = [
    	{
    		chartID: 'CHART-ID',
    		Component: ImportedComponent,
    		props: {}
    	},
    	{
    		chartID: 'CHART-ID2',
    		Component: ImportedComponent2,
    		props: {}
    	},
    	{
    		chartID: 'CHART-ID3',
    		Component: ImportedComponent3,
    		props: {}
    	},
    ];

    Notes:

    • High-level props can be passed down here as well using the props: {} object passed in MountComponent.

    Writing styles

    It's recommended to include the CMS's styles in a development environment and defer to them for fonts and classes to reduce the shipped CSS. This can be done by adding objects to a cmsFiles array in main.js. This appends any tag and it's listed attributes to the while in dev mode. These are not included in production.

    Otherwise, this template uses Tailwind for out-of-the-box classes that we don't have to think about. By default, these classes are prefixed with cmsvelte- to prevent clashing with CMS classes. This can be changed in tailwind.config.cjs.

    Write global styles in app.postcss. Otherwise, use Svelte's built-in scroped styling syntax.

    Asset management

    For image optimization see vite-imagetools or sharp.

    Vite's Static Asset Handling lets us import image and SVG files with several options.

    As files

    Imports the hashed file name for the asset. For example, imgUrl will be /img.png during development, and become /assets/img.2d8efhg.png in the production build.

    import imgUrl from '$lib/assets/img.png'

    As strings

    Import raw strings by appending ?raw at the end. This is useful for SVG files.

    import imgUrl from '$lib/assets/img.svg?raw'

    Useful libs

    • body-scroll-lock - Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).
    • focus-trap - Trap focus within a DOM node.
    • fullpage.js - Create fullscreen scrolling websites.
    • gsap - Professional-grade animation for the modern web.
    • journalize - A collection of functions useful for making prose reader friendly.
    • lodash - Various helper functions.
    • slugify - Easily slug a string.
    • @sveltejs/svelte-scroller - Svelte-y scrollytelling
    • svelte-select - A select/autocomplete component for Svelte apps. With support for grouping, filtering, async and more.
    • swiper - Modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

    Deployment

    npm run build

    In the project root the command generates a directory called build. The built files have names without hashing thanks to Rollup's config options. You only need to embed once as the graphics are generated client-side.

    The generated files will likely live in an S3 bucket or other storage site. Update the base url in vite.config.js to match the final URL of the files. A script to facilitate file uploading to S3 or another service can be easily written in the scripts folder.

    base: mode === 'production' ? link : '/',

    The resulting build/index.html file is what can be embedded. It should look something like this, with a

    element for each graphic, as well as
    ">
    <script type="module" crossorigin src="https://www.site.com/path/to/index.js">script>
    <link rel="modulepreload" href="https://www.site.com/path/to/vendor.js">
    <link rel="stylesheet" href="https://www.site.com/path/to/vendor.css">
    <link rel="stylesheet" href="https://www.site.com/path/to/index.css">
    
    <figure data-chart="castle-img">figure>
    <figure data-chart="bar-chart">figure>
    <figure data-chart="ai2html">figure>

    Scripts and styles should be embedded once anywhere in the CMS. The

    elements can be moved around as needed and do not need to live side-by-side. The index.js script will generate the graphics accordingly based on the data-chart attribute.

You might also like...

A simple Vue3, Nuxt3 and Tailwind3 Starter Template

Nuxt 3 + Tailwind CSS 3 Starter This is a minimal starter template for Nuxt 3 projects with Tailwind CSS 3. It includes a simple template pages/index.

Feb 11, 2022

Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.

Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.

Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.

Feb 22, 2022

Opinionated SvelteKit Template for building web applications.

Opinionated SvelteKit Template for building web applications.

Jan 1, 2023

@code-collabo's node-mongo API boilerplate template (typescript)

@code-collabo's node-mongo API boilerplate template (typescript) This is the manual download option for the API boilerplate template generated by @cod

May 31, 2022

Nestjs boilerplate template (mongodb, typeorm, graphql - code first, i18n, global exception handling etc.)

Description City-Library-Demo project for boilerplate. (node version: 16.14.0, npm version: 8.5.2) First Steps Create .env file in root directory. (Th

Nov 21, 2022

An embedded app starter template with all the required stuff hooked up.

Shopify Node.js x Express.js x React.js Boilerplate An embedded app starter template to get up and ready with Shopify app development with JavaScript.

Dec 25, 2022

This repo conatain all the template of Dev.UI

Dev.Ui Templates This repo conatain all the template of Dev.Ui 🛠 Development Clone the repository git clone https://github.com/kumard3/dev-ui-templat

Nov 26, 2022

A Node template that follows the Clean Architecture principles and encourages established practices.

Clean Architecture Template A Node template that follows the Clean Architecture principles and encourages established practices. Features TypeScript f

Dec 25, 2022

An embedded app starter template with all the required stuff hooked up.

Shopify Node.js x Express.js x React.js Boilerplate An embedded app starter template to get up and ready with Shopify app development with JavaScript.

May 25, 2022
Comments
  • convert lazy load to module in component

    convert lazy load to module in component

    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)

    opened by sawyerclick 0
Owner
Sawyer Click
data viz developer
Sawyer Click
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.5k Dec 26, 2022
The next small thing in web development, powered by Svelte

sapper The next small thing in web development, powered by Svelte. What is Sapper? Sapper is a framework for building high-performance universal web a

Svelte 7.1k Jan 2, 2023
Node Express Template (NET.ts) - a small template project which help you to speed up the process of building RESTful API

Node Express Template (NET.ts) - a small template project which help you to speed up the process of building RESTful API

Przemek Nowicki 26 Jan 4, 2023
A professional front-end template for building fast, robust, and adaptable web apps or sites.

HTML5 Boilerplate HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. This project is t

H5BP 53.8k Dec 28, 2022
DEPRECATED - A front-end template that helps you build fast, modern mobile web apps.

Deprecation Note Mobile Boilerplate is no longer maintained. Please use HTML5 Boilerplate as a decent starting point for your project. Mobile Boilerpl

H5BP 3.9k Dec 14, 2022
A cli tool to generate cra-template from current create-react-app project.

Create Cra Template A cli tool to generate cra-template from current create-react-app project. Create Cra Template Templates cra-template-popular cra-

Yoki 23 Aug 18, 2022
A generic template for starting Web3 Projects

Redwood WARNING: RedwoodJS software has not reached a stable version 1.0 and should not be considered suitable for production use. In the "make it wor

Dennison Bertram 18 Jun 28, 2022
Template repo for any node.js project

App Name The project uses: ESLint для линтинга кода, используется свой styleguide основанный на airbnb стандарте. prettier для форматирования кода. hu

Konstantin Aleksandrov 1 Dec 20, 2021
This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the back end implementation and there is the React implementation as the front end

Versão em português MERN stack This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the

Douglas Samuel Gonçalves 2 Jan 22, 2022
👩🏻‍💻 Developer Ready: A comprehensive template. Works out of the box for most Node.js projects.

node-typescript-boilerplate ????‍?? Developer Ready: A comprehensive template. Works out of the box for most Node.js projects. ???? Instant Value: All

IAD S.r.l. 6 Dec 15, 2022