You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style.

Import via npm

npm install @bentoproject/gist

import {defineElement as defineBentoGist} from '@bentoproject/gist';
defineBentoGist();

Include via `<script>`

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-gist-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-gist-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-gist-1.0.css" crossorigin="anonymous">

Example

<!DOCTYPE html>
<html>
  <head>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-gist-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-gist-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-gist-1.0.css"
    />
    <style>
      bento-gist {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <bento-gist
      id="my-track"
      data-gistid="a19e811dcd7df10c4da0931641538497"
    ></bento-gist>
  </body>
</html>

Layout and style

Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-gist-1.0.css"
/>

Alternatively, you may also make the light-weight pre-upgrade styles available inline:

<style>
  bento-gist {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

Container type

The bento-gist component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties):

bento-gist {
  height: 100px;
  width: 100%;
}

Attributes

data-gistid

The ID of the gist to embed.

data-file (optional)

If specified, display only one file in a gist.

title (optional)

Define a title attribute for the component to propagate to the underlying <iframe> element. The default value is "Github Gist".

Preact/React Component

Import via npm

npm install @bentoproject/gist

import React from 'react';
import {BentoGist} from '@bentoproject/gist/react';
import '@bentoproject/gist/styles.css';

function App() {
  return <BentoGist gistId="a19e811dcd7df10c4da0931641538497"></BentoGist>;
}

Layout and style

Container type

The BentoGist component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties). These can be applied inline:

<BentoGist
  style={{height: 500}}
  gistId="a19e811dcd7df10c4da0931641538497"
  file="index.js"
></BentoGist>

Or via className:

<BentoGist
  className="custom-styles"
  gistId="a19e811dcd7df10c4da0931641538497"
  file="index.js"
></BentoGist>

.custom-styles {
  height: 100px;
  width: 100%;
}

Props

gistId

The ID of the gist to embed.

file (optional)

If specified, display only one file in a gist.

title (optional)

Define a title attribute for the component to propagate to the underlying <iframe> element. The default value is "Github Gist".