diff --git a/docs/README.md b/docs/README.md index ea6d3fc3eef..a85f621ba58 100644 --- a/docs/README.md +++ b/docs/README.md @@ -33,7 +33,7 @@ In the `.html` file, write the HTML and JavaScript constituting the example. * Do **not** use custom styles from your personal account. Use only the default `mapbox` account styles. * When embedding literal JSON (GeoJSON or Mapbox style snippets) into script code, double-quote property names and string values. Elsewhere, use single-quoted strings. -Every example **must** have an accompanying image: +Every example **must** have an accompanying image. To get an image, run the site locally and take a screenshot of the rendered map in the example: 1. Run `npm run create-image `. The script will take a screenshot of the map in the example and save it to `docs/img/src/`. Commit the image. 2. Run `npm run start-docs` to verify that your example image is loading as expected. diff --git a/docs/img/src/placeholder.png b/docs/img/src/placeholder.png new file mode 100644 index 00000000000..ac53333b1f3 Binary files /dev/null and b/docs/img/src/placeholder.png differ diff --git a/docs/pages/examples.js b/docs/pages/examples.js index 069290a17f4..9e4fd29c28e 100644 --- a/docs/pages/examples.js +++ b/docs/pages/examples.js @@ -14,7 +14,7 @@ import PageShell from '../components/page_shell'; import { tags } from '../data/tags.js'; import examples from '@mapbox/batfish/data/examples'; // eslint-disable-line import/no-unresolved import AppropriateImage from '../components/appropriate-image'; - +import imageConfig from '../img/dist/image.config.json'; // eslint-disable-line const meta = { title: 'Mapbox GL JS Examples', @@ -30,6 +30,8 @@ class ExamplesLandingPage extends React.PureComponent { .filter(example => example.tags.indexOf(topic) > -1) .map((example, index) => { const filename = example.pathname.split('/')[3]; + // set default if thumbnail doesn't exist yet + const imageId = imageConfig[filename] ? filename : 'placeholder'; return (