🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@bentoproject/gist

Package Overview
Dependencies
Maintainers
3
Versions
132
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bentoproject/gist

Creates an iframe and displays a GitHub Gist.

1.2305051745.1
latest
Source
npm
Version published
Weekly downloads
14
-88.89%
Maintainers
3
Weekly downloads
 
Created
Source

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

FAQs

Package last updated on 23 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts