Set default thumbnail for examples page for development (#8025)

* Set default thumbnail

* Add a little guidance about creating example images

* creates placeholder.png

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 <example-file-name> <mapbox-access-token>`. 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.

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 (
                         <Card
                             key={index}
@@ -38,7 +40,7 @@ class ExamplesLandingPage extends React.PureComponent {
                             path={example.path}
                             thumbnail={
                                 <AppropriateImage
-                                    imageId={filename}
+                                    imageId={imageId}
                                     style={{ borderRadius: '4px' }}
                                     background={true}
                                 />