Creating samples

The components section of the bridge catalog app consists of usage samples for each component. These samples are created using a GitHub Gist running in gist.run.

When you create a sample, you actually create a Gist.

In the top right corner of the example you find a "Play" button. When you click the "Play" button, a gist.run instance will open in a new tab. A very convenient feature of gist.run is the ability to create a fork. A fork is basically a copy of the current gist with a new ID.

Creating a new sample

Probably the easiest way to crate a new sample is to fork an existing one.

Assign a meaningful name to the gist (to better find it later) and click the button "fork to public gist"

Adding the sample to the catalog

The components and gist IDs of the catalog app are stored in a file names components.json.

The button configuration in this file looks like this:

"Button": {
      "status": "done",
      "samples": {
        "basic-use": {
          "default": true,
          "gist": "09534739133e8f53bbf5ad3fff6fa75a"
        },
        "fab": "8c5bcfc325dcced715e2ea5d70ff1b44",
        "fab-fixed": "94c6cf6fd564e68dc2cac0952261b320",
        "fab-fixed-toolbar": "1dd0131d47642edadf583e946e256f0b"
      }
    },

Note there's a samples property with a default entry basic-use and three other properties which have gist IDs as their value.

To add a sample here, create a new property as a child of the samples property and copy the ID of your gist from the previous section here.

If you refresh your catalog fork now, you should see a new entry on the buttons component page and when you click on it the app should load your gist along with its source files.