npm.io
4.1.1 • Published 2 years ago

remark-iframes

Licence
MIT
Version
4.1.1
Deps
1
Size
20 kB
Vulns
0
Weekly
0
Stars
236

remark-iframes Build Status Coverage Status

This plugin parses custom Markdown syntax to create iframes.

This creates a new MDAST element called "iframe"

If you are using rehype, the stringified HTML result will be a tag you can configure. Most of time you want iframe.

iframe node type

interface iframe <: Node {
  type: "iframe";
  url: string;
  provider: string;
  data: {
    hName: "iframe";
    hProperties: {
      src: string;
      width: 0 <= uint32;
      height: 0 <= uint32;
      allowfullscreen: boolean;
      frameborder: string;
    }
    thumbnail: string?;
  }
}

provider variable refers to the provider as configured in plugin options.

Syntax

!(https://www.youtube.com/watch?v=8TQIvdFl4aU)

Installation

npm:

npm install remark-iframes

Usage

Dependencies:

const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')

const remarkIframe = require('remark-iframes')

Usage:

unified()
  .use(remarkParse)
  .use(remarkIframe, {
    // this key corresponds to the hostname: !(http://hostname/foo)
    // the config associated to this hostname will apply to any iframe
    // with a matching hostname
   'www.youtube.com': {
      tag: 'iframe',
      width: 560,
      height: 315,
      disabled: false,
      replace: [
        ['watch?v=', 'embed/'],
        ['http://', 'https://'],
      ],
      thumbnail: {
        format: 'http://img.youtube.com/vi/{id}/0.jpg',
        id: '.+/(.+)

Configuration fields:

  • tag: HTML tag to use in rehype output, you most probably want iframe.
  • width and height: iframe size, set as width="" height="" HTML attributes.
  • disabled: Can be used to disable this provider. This is useful when you want to deal with multiple configurations from a common set of plugins.
  • replace: Rules passed to String.prototype.replace with the input_url. It's a list [[from, to]], rules are applied sequentially on the output of the previous rule. Each rule only replaces the first occurrence.
  • removeAfter: Truncates the URL after the first occurrence of char. For example http://dailymotion.com/video/?time=1&bla=2 will result in http://dailymotion.com/video/?time=1 if removeAfter is set to &.
  • append: Any string you want to append to the URL, for example an API key.
  • removeFileName: If set to true, removes the filename (i.e last fragment before query string) from URL.
  • match: a regular expression passed to String.prototype.test, used to validate the URL.
  • thumbnail: a way to retrieve a thumbnail. This param is an object with a format key of this type: 'http://url/{param1}/{param2}' you must then provide patterns param: 'pattern' to extract the value which will replace the corresponding {param} in the format URL.
  • droppedQueryParameters: a list of query parameters to remove from the iframe source URL.
  • oembed: an URL to the oEmbed API of the website you want to embed;
  • lazyLoad: tell browsers to lazy load the iframe whenever possible, using the HTML loading attribute.
oEmbed usage

When using the oembed configuration parameter, the other parameters are discarded, excepted for disabled, which can be used freely; you may use width and height if really needed, altough it is not recommended by the oEmbed specification.

The thumbnail is constructed from the oEmbed thumbnail_url response, so there is no need for providing any URL, and any configuration will not be taken into account.

Thumbnail construction

when you configure the thumbnail as part of a provider, the URL of the thumbnail is computed following this algorithm:

thumbnail_url_template = provider.thumbnail.format
for each property of provider.thumbnail
  if property is not "format":
    regexp_for_current_property = provider.thumbnail[property]
    extracted_value = video_url.search(regexp_for_current_property)[1]
    thumbnail_url_template = thumbnail_url_template.replace('{' + property + '}', extracted_value)

Example

Config:
{
    // Youtube RegEx example
    'www.youtube.com': {
      tag: 'iframe',
      width: 560,
      height: 315,
      disabled: false,
      replace: [
        ['watch?v=', 'embed/'],
        ['http://', 'https://'],
      ],
      thumbnail: {
        format: 'http://img.youtube.com/vi/{id}/0.jpg',
        id: '.+/(.+)
Input:
!(https://www.youtube.com/watch?v=8TQIvdFl4aU)
Resulting Node
{
    type: 'iframe',
    provider: 'www.youtube.com',
    data: {
        hName: 'iframe',
        hProperties: {
          src: 'https://www.youtube.com/embed/8TQIvdFl4aU',
          width: 560,
          height: 315,
          allowfullscreen: true,
          frameborder: '0'
        }
        thumbnail: 'https://image.youtube.com/8TQIvdFl4aU/0.jpg'
      }
}
Resulting HTML
<iframe src="https://www.youtube.com/embed/8TQIvdFl4aU" width="560" height="315"></iframe>

License

MIT Zeste de Savoir

}, removeAfter: '&' } }) .use(remark2rehype) .use(stringify)

Configuration fields:

  • __INLINE_CODE_2__: HTML tag to use in rehype output, you most probably want __INLINE_CODE_3__.
  • __INLINE_CODE_4__ and __INLINE_CODE_5__: iframe size, set as __INLINE_CODE_6__ HTML attributes.
  • __INLINE_CODE_7__: Can be used to disable this provider. This is useful when you want to deal with multiple configurations from a common set of plugins.
  • __INLINE_CODE_8__: Rules passed to __INLINE_CODE_9__ with the __INLINE_CODE_10__. It's a list __INLINE_CODE_11__, rules are applied sequentially on the output of the previous rule. Each rule only replaces the first occurrence.
  • __INLINE_CODE_12__: Truncates the URL after the first occurrence of char. For example __INLINE_CODE_13__ will result in __INLINE_CODE_14__ if __INLINE_CODE_15__ is set to __INLINE_CODE_16__.
  • __INLINE_CODE_17__: Any string you want to append to the URL, for example an API key.
  • __INLINE_CODE_18__: If set to __INLINE_CODE_19__, removes the filename (i.e last fragment before query string) from URL.
  • __INLINE_CODE_20__: a regular expression passed to __INLINE_CODE_21__, used to validate the URL.
  • __INLINE_CODE_22__: a way to retrieve a thumbnail. This param is an object with a __INLINE_CODE_23__ key of this type: __INLINE_CODE_24__ you must then provide patterns __INLINE_CODE_25__ to extract the value which will replace the corresponding __INLINE_CODE_26__ in the __INLINE_CODE_27__ URL.
  • __INLINE_CODE_28__: a list of query parameters to remove from the iframe source URL.
  • __INLINE_CODE_29__: an URL to the oEmbed API of the website you want to embed;
  • __INLINE_CODE_30__: tell browsers to lazy load the iframe whenever possible, using the HTML __INLINE_CODE_31__ attribute.
oEmbed usage

When using the __INLINE_CODE_32__ configuration parameter, the other parameters are discarded, excepted for __INLINE_CODE_33__, which can be used freely; you may use __INLINE_CODE_34__ and __INLINE_CODE_35__ if really needed, altough it is not recommended by the oEmbed specification.

The thumbnail is constructed from the oEmbed __INLINE_CODE_36__ response, so there is no need for providing any URL, and any configuration will not be taken into account.

Thumbnail construction

when you configure the __INLINE_CODE_37__ as part of a provider, the URL of the thumbnail is computed following this algorithm:

__CODE_BLOCK_5__

Example

Config:
__CODE_BLOCK_6__
Input:
__CODE_BLOCK_7__
Resulting Node
__CODE_BLOCK_8__
Resulting HTML
__CODE_BLOCK_9__

License

MIT Zeste de Savoir

}, removeAfter: '&' }, // Youtube oEmbed example 'youtu.be': { width: 560, height: 315, disabled: false, oembed: 'https://www.youtube.com/oembed' } }
Input:
__CODE_BLOCK_7__
Resulting Node
__CODE_BLOCK_8__
Resulting HTML
__CODE_BLOCK_9__

License

MIT Zeste de Savoir

}, removeAfter: '&' } }) .use(remark2rehype) .use(stringify)

Configuration fields:

  • __INLINE_CODE_2__: HTML tag to use in rehype output, you most probably want __INLINE_CODE_3__.
  • __INLINE_CODE_4__ and __INLINE_CODE_5__: iframe size, set as __INLINE_CODE_6__ HTML attributes.
  • __INLINE_CODE_7__: Can be used to disable this provider. This is useful when you want to deal with multiple configurations from a common set of plugins.
  • __INLINE_CODE_8__: Rules passed to __INLINE_CODE_9__ with the __INLINE_CODE_10__. It's a list __INLINE_CODE_11__, rules are applied sequentially on the output of the previous rule. Each rule only replaces the first occurrence.
  • __INLINE_CODE_12__: Truncates the URL after the first occurrence of char. For example __INLINE_CODE_13__ will result in __INLINE_CODE_14__ if __INLINE_CODE_15__ is set to __INLINE_CODE_16__.
  • __INLINE_CODE_17__: Any string you want to append to the URL, for example an API key.
  • __INLINE_CODE_18__: If set to __INLINE_CODE_19__, removes the filename (i.e last fragment before query string) from URL.
  • __INLINE_CODE_20__: a regular expression passed to __INLINE_CODE_21__, used to validate the URL.
  • __INLINE_CODE_22__: a way to retrieve a thumbnail. This param is an object with a __INLINE_CODE_23__ key of this type: __INLINE_CODE_24__ you must then provide patterns __INLINE_CODE_25__ to extract the value which will replace the corresponding __INLINE_CODE_26__ in the __INLINE_CODE_27__ URL.
  • __INLINE_CODE_28__: a list of query parameters to remove from the iframe source URL.
  • __INLINE_CODE_29__: an URL to the oEmbed API of the website you want to embed;
  • __INLINE_CODE_30__: tell browsers to lazy load the iframe whenever possible, using the HTML __INLINE_CODE_31__ attribute.
oEmbed usage

When using the __INLINE_CODE_32__ configuration parameter, the other parameters are discarded, excepted for __INLINE_CODE_33__, which can be used freely; you may use __INLINE_CODE_34__ and __INLINE_CODE_35__ if really needed, altough it is not recommended by the oEmbed specification.

The thumbnail is constructed from the oEmbed __INLINE_CODE_36__ response, so there is no need for providing any URL, and any configuration will not be taken into account.

Thumbnail construction

when you configure the __INLINE_CODE_37__ as part of a provider, the URL of the thumbnail is computed following this algorithm:

__CODE_BLOCK_5__

Example

Config:
__CODE_BLOCK_6__
Input:
__CODE_BLOCK_7__
Resulting Node
__CODE_BLOCK_8__
Resulting HTML
__CODE_BLOCK_9__

License

MIT Zeste de Savoir

Keywords