guardian/interactive-atom-mozambique
Type de record:
software
Créateur:
gua
Hôte:
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 …