Populating the preview with static data
As you create data files, the keys correspond to placeholders in the template, and Brightspot injects the values into the placeholders.
Populating static text
The following snippets illustrate how Brightspot injects static text from the data file into the Styleguide preview.
{ "_template": "static.hbs", "text": "Deadly Gamma Ray Burst Headed for Manny's Pizzeria" 1 }
Text injected into the |

Populating static images
The following snippets illustrate how Brightspot injects static images from the data file into the Styleguide preview.
{ "_template": "static.hbs", "remoteImage": "https://www.nps.gov/grca/planyourvisit/images/agrca0643.jpg" 1 "localImage": "/styleguide/assets/Las_Meninas.jpg" 2 }
URL of remote image injected into the | |
Path to local image injected into the |
<body> <h1>Remote image</h1> <img src="{{remoteImage}}" > 1 <h1>Local image</h1> <img src="{{localImage}}" > 2 <body>

Populating static video and audio
The following snippets illustrate how Brightspot injects static video from the data file into the Styleguide preview. The technique is similar for static audio files.
{ "_template": "static.hbs", "remoteVideo": "https://www.jpl.nasa.gov/videos/mer/mer20101222/sunset20101222-640-i.ogv" 1 "localVideo": "/styleguide/assets/liftoff.mp4" 2 }
URL of remote video injected into the | |
Path to local video injected into the |
<body> <h1>Remote video</h1> <video> <source src="{{remoteVideo}}" type="video/ogg"> 1 </video> <h1>Local video</h1> <video> <source src="{{localVideo}}" type="video/ogg"> 2 </video> <body>

Using local media in data files
You can use local media (images, audio, video) or binary files in data files. These files appear in the Styleguide preview. To use local media, you need to place them in the directory /styleguide/assets/
.
theme/ ├── _build/ | ├── article/ | │ ├── Article.hbs | │ └── Article.json │ └── styleguide/ │ └── assets/ 1 │ └── mona-lisa.jpg └── styleguide/ ├── article/ │ ├── Article.hbs │ └── Article.json └── assets/ 2 └── mona-lisa.jpg
When you start the Styleguide server (yarn server:styleguide), the script copies files from /styleguide/assets/
to /_build/styleguide/assets/
. You can then reference the media in your data files using absolute or relative paths.
{ "_template": "static.hbs", "localImageAbs": "/styleguide/assets/mona-lisa.jpg", "localImageRel": "../styleguide/assets/mona-lisa.jpg" }
Brightspot moves the media to the directory /_build/styleguide/assets/
only when the Styleguide server starts. If you want to add additional media, you need to restart the Styleguide server.