Support and Documentation

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
}

1

Text injected into the {{text}} placeholder.

<body>
    <h1>Static text</h1>
    <p>{{text}}</p> 1
</body>

1

{{text}} placeholder.

static-text.png
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
}

1

URL of remote image injected into the {{remoteImage}} placeholder.

2

Path to local image injected into the {{localImage}} placeholder. For information about using local images in data files, see Using local media in data files.

<body>
    <h1>Remote image</h1>
    <img src="{{remoteImage}}" > 1  
    <h1>Local image</h1>
    <img src="{{localImage}}" > 2  
<body>

1

{{remoteImage}} placeholder.

2

{{localImage}} placeholder.

static-image.png
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
}

1

URL of remote video injected into the {{remoteVideo}} placeholder.

2

Path to local video injected into the {{localVideo}} placeholder. For information about using local video or audio files in data files, see Using local media in data files.

<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>

1

{{remoteVideo}} placeholder.

2

{{localVideo}} placeholder.

static-video.png
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

1

Run-time directory for media.

2

Source directory for media.

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.