<commit_before># littlefoot.js

![version](https://badgen.net/npm/v/littlefoot)
![minified + gzip](https://badgen.net/bundlephobia/minzip/littlefoot)
[![Build Status](https://travis-ci.org/goblindegook/littlefoot.svg?branch=master)](https://travis-ci.org/goblindegook/littlefoot)
[![Code Climate](https://codeclimate.com/github/goblindegook/littlefoot/badges/gpa.svg)](https://codeclimate.com/github/goblindegook/littlefoot)
[![Dependency Status](https://david-dm.org/goblindegook/littlefoot.svg)](https://david-dm.org/goblindegook/littlefoot)
[![devDependency Status](https://david-dm.org/goblindegook/littlefoot/dev-status.svg)](https://david-dm.org/goblindegook/littlefoot#info=devDependencies)

littlefoot is a lightweight JavaScript library that creates exceptional footnotes. It was forked from [Bigfoot.js](https://github.com/lemonmade/bigfoot/) by [<NAME>](https://github.com/lemonmade) and does not require jQuery.

Simply include the code on your pages and footnotes will be detected automatically and improved in the following ways:

- Links to footnotes will be replaced with clickable/tappable buttons, making them substantially easier to hit.

- Footnote content will appear in a popover directly beside the footnote button when it is clicked/tapped, which cuts out the annoying bouncing around the page that footnotes typically result in.

- The active popovers will be resized and repositioned to ensure that they continue to be completely visible on-screen and aesthetically pleasing: this makes it perfect for mobile devices and responsive designs.

- Supports the markup generated by MultiMarkdown by default.

This project includes the script itself and a default style to apply to the footnote buttons and popovers that are eventually generated. There are also a variety of additional styles that illustrate some of the possibilities for styling these components.

## Installation

Install using NPM:

```shell
$ npm install --save littlefoot
```

Install using Yarn:

```shell
$ yarn add littlefoot
```

## Usage

The script will work with a wide array of markup, but you will need to make sure that your footnote content/link markup at least resembles the markup shown below, which is the format generated by MultiMarkdown:

```html
<!-- Links -->
<p>
  <sup id="fnref:1">
    <a href="#fn:1">1</a>
  </sup>
</p>

<!-- Footnote List -->
<div class="footnotes">
  <ol>
    <li class="footnote" id="fn:1">
      <p>footnote. <a href="#fnref:1" title="return to article"> ↩</a></p>
      <p></p>
    </li>
  </ol>
</div>
```

Once you've set up the appropriate markup, all you need to do is include the following in your code:

```javascript
const { littlefoot } = require('littlefoot')

littlefoot()
```

You can also configure the available options by passing an object literal, and you can store the return object to make use of some of the methods it makes available:

```javascript
const { littlefoot } = require('littlefoot')

const lf = littlefoot({
  activateOnHover: true,
  hoverDelay: 250,
})
```

You'll also want to include styles for the button and popovers, a number of which come with the script.

### Usage with [Gatsby](https://www.gatsbyjs.org/)

1. [Install littlefoot](#installation) as a dependency in your Gatsby project.

2. At the root of the site's project, create or edit a [`gatsby-browser.js`](https://www.gatsbyjs.org/docs/gatsby-project-structure/#files) file and add the following:

   ```js
   import littlefoot from 'littlefoot'
   import 'littlefoot/dist/littlefoot.css'

   export function onRouteUpdate() {
     littlefoot() // Pass any littlefoot settings here.
   }
   ```

### Usage from a CDN

Follow these steps to add littlefoot to a plain HTML document without package
management support. While this method is simpler to use, bear in mind that
including files from external sources will slightly degrade the page's loading
performance.

1. Add the required footnote stylesheet at the top of your HTML file, inside the
   `<head>` tag:

   ```html
   <link
     rel="stylesheet"
     href="https://unpkg.com/littlefoot/dist/littlefoot.css"
   />
   ```

2. Add the following script tags at the end of the document, just before the
   closing `</body>` tag:

   ```html
   <script
     src="https://unpkg.com/littlefoot/dist/littlefoot.js"
     type="application/javascript"
   ></script>
   <script type="application/javascript">
     littlefoot.default()
   </script>
   ```

See [an example on CodePen](https://codepen.io/goblindegook/pen/oPNzGE).

## Options

The script has many configurable options from having popovers instantiated on hover, to allowing multiple active footnotes, to setting specific timeouts for popover activation and dismissal. It also returns an object that allows you to activate and dismiss popovers.

### `activateCallback`

Specifies a function to call on a footnote popover that is being activated (after it is added to the DOM). The function will be passed two arguments: the `popover` DOM element, and the `button` that was activated to show the popover. This option can be useful for adding classes or styling information on the popover.

Default: `undefined`

### `dismissCallback`

Specifies a function to call on a footnote popover that is being dismissed (just before it is removed from the DOM). The function will be passed two arguments: the `popover` DOM element, and the related `button`. This option can be useful for removing classes on the popover.
<commit_msg>docs: add instructions to customize via CDN (#445)<commit_after># littlefoot.js

![version](https://badgen.net/npm/v/littlefoot)
![minified + gzip](https://badgen.net/bundlephobia/minzip/littlefoot)
[![Build Status](https://travis-ci.org/goblindegook/littlefoot.svg?branch=master)](https://travis-ci.org/goblindegook/littlefoot)
[![Code Climate](https://codeclimate.com/github/goblindegook/littlefoot/badges/gpa.svg)](https://codeclimate.com/github/goblindegook/littlefoot)
[![Dependency Status](https://david-dm.org/goblindegook/littlefoot.svg)](https://david-dm.org/goblindegook/littlefoot)
[![devDependency Status](https://david-dm.org/goblindegook/littlefoot/dev-status.svg)](https://david-dm.org/goblindegook/littlefoot#info=devDependencies)

littlefoot is a lightweight JavaScript library that creates exceptional footnotes. It was forked from [Bigfoot.js](https://github.com/lemonmade/bigfoot/) by [<NAME>](https://github.com/lemonmade) and does not require jQuery.

Simply include the code on your pages and footnotes will be detected automatically and improved in the following ways:

- Links to footnotes will be replaced with clickable/tappable buttons, making them substantially easier to hit.

- Footnote content will appear in a popover directly beside the footnote button when it is clicked/tapped, which cuts out the annoying bouncing around the page that footnotes typically result in.

- The active popovers will be resized and repositioned to ensure that they continue to be completely visible on-screen and aesthetically pleasing: this makes it perfect for mobile devices and responsive designs.

- Supports the markup generated by MultiMarkdown by default.

This project includes the script itself and a default style to apply to the footnote buttons and popovers that are eventually generated. There are also a variety of additional styles that illustrate some of the possibilities for styling these components.

## Installation

Install using NPM:

```shell
$ npm install --save littlefoot
```

Install using Yarn:

```shell
$ yarn add littlefoot
```

## Usage

The script will work with a wide array of markup, but you will need to make sure that your footnote content/link markup at least resembles the markup shown below, which is the format generated by MultiMarkdown:

```html
<!-- Links -->
<p>
  <sup id="fnref:1">
    <a href="#fn:1">1</a>
  </sup>
</p>

<!-- Footnote List -->
<div class="footnotes">
  <ol>
    <li class="footnote" id="fn:1">
      <p>footnote. <a href="#fnref:1" title="return to article"> ↩</a></p>
      <p></p>
    </li>
  </ol>
</div>
```

Once you've set up the appropriate markup, all you need to do is include the following in your code:

```javascript
const { littlefoot } = require('littlefoot')

littlefoot()
```

You can also configure the available options by passing an object literal, and you can store the return object to make use of some of the methods it makes available:

```javascript
const { littlefoot } = require('littlefoot')

const lf = littlefoot({
  activateOnHover: true,
  hoverDelay: 250,
})
```

You'll also want to include styles for the button and popovers, a number of which come with the script.

### Usage with [Gatsby](https://www.gatsbyjs.org/)

1. [Install littlefoot](#installation) as a dependency in your Gatsby project.

2. At the root of the site's project, create or edit a [`gatsby-browser.js`](https://www.gatsbyjs.org/docs/gatsby-project-structure/#files) file and add the following:

   ```js
   import littlefoot from 'littlefoot'
   import 'littlefoot/dist/littlefoot.css'

   export function onRouteUpdate() {
     littlefoot() // Pass any littlefoot settings here.
   }
   ```

### Usage from a CDN

Follow these steps to add littlefoot to a plain HTML document without package
management support. While this method is simpler to use, bear in mind that
including files from external sources will slightly degrade the page's loading
performance.

1. Add the required footnote stylesheet at the top of your HTML file, inside the
   `<head>` tag:

   ```html
   <link
     rel="stylesheet"
     href="https://unpkg.com/littlefoot/dist/littlefoot.css"
   />
   ```

2. Add the following script tags at the end of the document, just before the
   closing `</body>` tag:

   ```html
   <script
     src="https://unpkg.com/littlefoot/dist/littlefoot.js"
     type="application/javascript"
   ></script>
   <script type="application/javascript">
     littlefoot.littlefoot()  // Pass any littlefoot settings here.
   </script>
   ```

See [an example on CodePen](https://codepen.io/goblindegook/pen/oPNzGE).

## Options

The script has many configurable options from having popovers instantiated on hover, to allowing multiple active footnotes, to setting specific timeouts for popover activation and dismissal. It also returns an object that allows you to activate and dismiss popovers.

### `activateCallback`

Specifies a function to call on a footnote popover that is being activated (after it is added to the DOM). The function will be passed two arguments: the `popover` DOM element, and the `button` that was activated to show the popover. This option can be useful for adding classes or styling information on the popover.

Default: `undefined`

### `dismissCallback`

Specifies a function to call on a footnote popover that is being dismissed (just before it is removed from the DOM). The function will be passed two arguments: the `popover` DOM element, and the related `button`. This option can be useful for removing classes on the popover.

{'fraction_non_alphanumeric': 0.09901079952808785, 'fraction_numerical': 0.002450313095562211, 'mean_word_length': 4.386119257086999, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 59, 'https://': 34, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '842358', 'n_tokens_mistral': 3223, 'n_tokens_neox': 3038, 'n_words': 1274}