guardian/interactive-atom-mozambique

Placeholder description: @blongden73 created this with repo-genesis # Interactive atom template ``` npm install ``` ### Running locally ``` npm start ``` Go to ### Deploying Fill out `config.json`: ```json { "title": "Title of your interactive", "docData": "Any associated external data", "path": "year/month/unique-title" } ``` Then run ``` npm run deploy ``` #### Checking the deploy You can check the deploy log by running ``` npm run log ``` NOTE: Updates can take up to 30 seconds to show in the logs #### Embedding into Composer Run the command below, copy the URL into Composer and click embed. ``` npm run url ``` ## Usage guide We use SASS for better CSS, Babel for next generation JavaScript and Rollup for bundling. Interactive atoms have three components: - CSS - `src/css/main.scss` - HTML - `src/render.js` should generate some HTML (by default returns the contents of `src/templates/main.html`) - JS - `src/js/main.js`, by default this simply loads `src/js/app.js` ### Loading resources (e.g. assets) Resources must be loaded with absolute paths, otherwise they won't work when deployed. Use the template string ` ` in any CSS, HTML or JS, it will be replaced with the correct absolute path. ```html /assets/image.png" /> ``` ```css .test { background-image: url(' /assets/image.png'); } ``` ```js var url = ' /assets/image.png'; ``` ### Atom size Interactive atoms are baked into the initial page response so you need to be careful about how much weight you are adding. While CSS and HTML are unlikely to ever be that large, you should worry about the size of your JS. The difference between `src/js/main.js` and `src/js/app.js` is that the former is baked into the page and the latter is not. Never load large libraries (such as d3) in `src/js/main.js`. In most cases, the majority of the work should happen in `src/js/app.js` and `src/js/main.js` should be reserved for simple initialisation. ### Loading JSON We have a ready-built component for loading JSON files. It uses the Fetch api and includes the necessary polyfills to wor …