1.2305051745.1 • Published 12 months ago

@bentoproject/gist v1.2305051745.1

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
12 months ago

Bento Gist

Creates an iframe and displays a GitHub Gist.

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.

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

@bentoproject/core
@infinitebrahmanuniverse/nolb-_ben@everything-registry/sub-chunk-121@zalastax/nolb-_ben
1.2305051745.1

12 months ago

1.2305051745.0

1 year ago

1.2305152039.0

12 months ago

1.2305022024.0

1 year ago

1.2305232041.0

12 months ago

1.2305241828.0

12 months ago

1.2305182038.0

12 months ago

1.2305221508.0

12 months ago

1.2304212144.0

1 year ago

1.2304262219.0

1 year ago

1.2304122229.0

1 year ago

1.2304241924.0

1 year ago

1.2304132133.0

1 year ago

1.2302171719.0

1 year ago

1.2303231800.0

1 year ago

1.2303151621.0

1 year ago

1.2304062309.0

1 year ago

1.2302271541.0

1 year ago

1.2303151529.0

1 year ago

1.2304040531.0

1 year ago

1.2302031721.0

1 year ago

1.2301301810.0

1 year ago

1.2301041800.0

1 year ago

1.2301112346.0

1 year ago

1.2302021743.0

1 year ago

1.2301031703.0

1 year ago

1.2301181928.0

1 year ago

1.2301032153.0

1 year ago

1.2301261900.0

1 year ago

1.2301100345.0

1 year ago

1.2302012254.0

1 year ago

1.2212151632.2

1 year ago

1.2211042305.0

2 years ago

1.2211111611.0

1 year ago

1.2211060024.0

2 years ago

1.2210191347.0

2 years ago

1.2211302304.0

1 year ago

1.2211302304.2

1 year ago

1.2211302304.1

1 year ago

1.2211151402.0

1 year ago

1.2210251605.0

2 years ago

1.2210272257.0

2 years ago

1.2211182146.0

1 year ago

1.2211250451.0

1 year ago

1.2210172057.0

2 years ago

1.2212092023.0

1 year ago

1.2212151632.1

1 year ago

1.2210211855.0

2 years ago

1.2212151632.0

1 year ago

1.2212071834.0

1 year ago

1.2210112333.0

2 years ago

1.2210142102.0

2 years ago

1.2210052034.0

2 years ago

1.2210010655.0

2 years ago

1.2210071758.0

2 years ago

1.2210041838.0

2 years ago

1.2208242209.0

2 years ago

1.2208242209.1

2 years ago

1.2209142312.0

2 years ago

1.2209072154.0

2 years ago

1.2209131909.0

2 years ago

1.2208172101.0

2 years ago

1.2208112015.0

2 years ago

1.2207201724.0

2 years ago

1.2206082301.0

2 years ago

1.2208081650.0

2 years ago

1.2205270638.4

2 years ago

1.2206071918.0

2 years ago

1.2206071918.1

2 years ago

1.2205120110.1

2 years ago

1.2205270638.0

2 years ago

1.2206131450.0

2 years ago

1.2208092047.0

2 years ago

1.2207071723.0

2 years ago

1.2208121708.0

2 years ago

1.2208021808.0

2 years ago

1.2206291614.0

2 years ago

1.2207181727.0

2 years ago

1.2206221455.0

2 years ago

1.2207221643.0

2 years ago

1.2208042017.0

2 years ago

1.2205232225.0

2 years ago

1.2208051912.0

2 years ago

1.2208051912.1

2 years ago

1.2206072228.0

2 years ago

1.2207281718.2

2 years ago

1.2207281718.1

2 years ago

1.2207281718.0

2 years ago

1.2207261725.0

2 years ago

1.2206101637.0

2 years ago

1.2205251942.0

2 years ago

1.2206162023.0

2 years ago

1.2205031420.0

2 years ago

1.2205181800.0

2 years ago

1.2204281949.0

2 years ago

1.2205120110.0

2 years ago

1.2204252045.0

2 years ago

1.2205161914.0

2 years ago

1.2205051832.0

2 years ago

1.2205191749.0

2 years ago

1.2204292129.0

2 years ago

1.2204272205.0

2 years ago

1.2205090810.0

2 years ago

1.2205101904.0

2 years ago

1.2205041533.0

2 years ago

1.2204142048.0

2 years ago

1.2204211736.0

2 years ago

1.2203101844.0

2 years ago

1.2204182206.0

2 years ago

1.2203151539.0

2 years ago

1.2203041950.0

2 years ago

1.2203281422.0

2 years ago

1.2204122000.0

2 years ago

1.2203221937.0

2 years ago

1.2204221712.0

2 years ago

1.2203231914.0

2 years ago

1.2204160405.0

2 years ago

1.2204121632.0

2 years ago

1.2203172113.0

2 years ago

1.2204132005.0

2 years ago

1.2204191429.0

2 years ago

1.2202241911.0

2 years ago

1.2202252101.0

2 years ago

1.2202230359.1

2 years ago

1.2202232232.0

2 years ago

1.2202230359.0

2 years ago

1.2202180255.0

2 years ago

1.2202162256.0

2 years ago

1.2202152253.0

2 years ago

1.2202042210.1

2 years ago

1.2202142035.0

2 years ago

1.2202112230.0

2 years ago