# @bentoproject/gist
> Creates an iframe and displays a GitHub Gist.
Latest version **1.2305051745.1** (published 2023-05-23) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @bentoproject/gist
pnpm add @bentoproject/gist
yarn add @bentoproject/gist
bun add @bentoproject/gist
```
## Health
**Score 40/100 (D)** — status: abandoned.
Positive: esm support; no vulnerabilities; high maintenance score; popular repo.
Warnings: low downloads; no types.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 1.2305051745.1 |
| Published | 2023-05-23 |
| First published | 2022-02-14 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14901 |
| Author | Bento Authors |
| Maintainers | bentoprojectbot, kristoferbaxter, esth |
## Links
- npm: https://www.npmjs.com/package/@bentoproject/gist
- Repository: https://github.com/ampproject/amphtml
- Homepage: https://github.com/ampproject/amphtml/tree/main/extensions/amp-gist/1.0
- Issues: https://github.com/ampproject/amphtml/issues
- npm.io page: https://npm.io/package/@bentoproject/gist
## Dependencies (1)
- [@bentoproject/core](https://npm.io/package/@bentoproject/core.md) 0.2305051745.1
## Recent versions
- 1.2305051745.1 (latest) — 2023-05-23
- 1.2305241828.0 (nightly) — 2023-05-25
- 1.2305232041.0 — 2023-05-24
- 1.2305221508.0 — 2023-05-23
- 1.2305182038.0 — 2023-05-19
- 1.2305152039.0 — 2023-05-16
- 1.2305051745.0 — 2023-05-06
- 1.2305022024.0 — 2023-05-03
- 1.2304262219.0 — 2023-04-27
- 1.2304241924.0 — 2023-04-25
- 1.2304212144.0 — 2023-04-22
- 1.2304132133.0 — 2023-04-14
- 1.2304122229.0 — 2023-04-13
- 1.2304062309.0 — 2023-04-07
- 1.2304040531.0 — 2023-04-04
- … 117 more at https://npm.io/package/@bentoproject/gist/versions
## README
# Bento Gist
Creates an iframe and displays a [GitHub Gist](https://docs.github.com/en/github/writing-on-github/creating-gists).
## Web Component
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](#layout-and-style).
### Import via npm
```sh
npm install @bentoproject/gist
```
```javascript
import {defineElement as defineBentoGist} from '@bentoproject/gist';
defineBentoGist();
```
### Include via `
```
### Example
```html
```
### Layout and style
Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
```html
```
Alternatively, you may also make the light-weight pre-upgrade styles available inline:
```html
```
#### 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):
```css
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 `