Creates an iframe and displays a GitHub Gist.
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.
npm install @bentoproject/gist
import {defineElement as defineBentoGist} from '@bentoproject/gist';
defineBentoGist();
<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">
<!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>
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>
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%;
}
The ID of the gist to embed.
If specified, display only one file in a gist.
Define a title
attribute for the component to propagate to the underlying <iframe>
element. The default value is "Github Gist"
.
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>;
}
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%;
}
The ID of the gist to embed.
If specified, display only one file in a gist.
Define a title
attribute for the component to propagate to the underlying <iframe>
element. The default value is "Github Gist"
.