{"id":13738711,"url":"https://github.com/goblindegook/littlefoot","last_synced_at":"2025-05-15T13:06:00.239Z","repository":{"id":37405654,"uuid":"52560024","full_name":"goblindegook/littlefoot","owner":"goblindegook","description":"Footnotes without the footprint.","archived":false,"fork":false,"pushed_at":"2025-05-12T23:21:43.000Z","size":10703,"stargazers_count":239,"open_issues_count":10,"forks_count":31,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-13T00:26:04.145Z","etag":null,"topics":["bigfoot","dom","footnotes","javascript","markdown","markdown-html","ui"],"latest_commit_sha":null,"homepage":"https://littlefoot.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/goblindegook.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-02-25T22:01:32.000Z","updated_at":"2025-05-12T23:21:16.000Z","dependencies_parsed_at":"2023-10-14T22:03:59.972Z","dependency_job_id":"efcc6db4-ad34-46dc-b974-3941a86ac8f2","html_url":"https://github.com/goblindegook/littlefoot","commit_stats":{"total_commits":2066,"total_committers":13,"mean_commits":"158.92307692307693","dds":0.4123910939012585,"last_synced_commit":"0ccf9ba8ca7b0e10f92ea7aea71b874e1a7127b1"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goblindegook%2Flittlefoot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goblindegook%2Flittlefoot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goblindegook%2Flittlefoot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goblindegook%2Flittlefoot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goblindegook","download_url":"https://codeload.github.com/goblindegook/littlefoot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253851074,"owners_count":21973674,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bigfoot","dom","footnotes","javascript","markdown","markdown-html","ui"],"created_at":"2024-08-03T03:02:34.193Z","updated_at":"2025-05-15T13:06:00.217Z","avatar_url":"https://github.com/goblindegook.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","[Vanilla JavaScript](https://plainjs.com/) plugins"],"sub_categories":[],"readme":"# littlefoot.js\n\n![version](https://badgen.net/npm/v/littlefoot)\n![minified + gzip](https://badgen.net/bundlephobia/minzip/littlefoot)\n[![codecov](https://codecov.io/gh/goblindegook/littlefoot/branch/main/graph/badge.svg)](https://codecov.io/gh/goblindegook/littlefoot)\n[![Code Climate](https://codeclimate.com/github/goblindegook/littlefoot/badges/gpa.svg)](https://codeclimate.com/github/goblindegook/littlefoot)\n\nlittlefoot is a lightweight JavaScript library that creates exceptional footnotes.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/littlefoot-demo.gif\" alt=\"Screen recording of littlefoot in action\"\u003e\n\u003c/div\u003e\n\nSimply include the code on your pages and footnotes will be detected automatically and improved in the following ways:\n\n- Links to footnotes will be replaced with clickable/tappable buttons, making them substantially easier to hit.\n\n- 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.\n\n- 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.\n\n- Supports the markup generated by MultiMarkdown by default.\n\nThis 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.\n\nlittlefoot was forked from [Bigfoot.js](https://github.com/lemonmade/bigfoot/) by [Chris Sauvé](https://github.com/lemonmade). Unlike Bigfoot.js, littlefoot does not require jQuery.\n\n## Installation\n\nInstall using NPM:\n\n```shell\nnpm install --save littlefoot\n```\n\nInstall using Yarn:\n\n```shell\nyarn add littlefoot\n```\n\n## Usage\n\nThe 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:\n\n```html\n\u003c!-- Links --\u003e\n\u003cp\u003e\n  \u003csup id=\"fnref:1\"\u003e\n    \u003ca href=\"#fn:1\"\u003e1\u003c/a\u003e\n  \u003c/sup\u003e\n\u003c/p\u003e\n\n\u003c!-- Footnote List --\u003e\n\u003cdiv class=\"footnotes\"\u003e\n  \u003col\u003e\n    \u003cli class=\"footnote\" id=\"fn:1\"\u003e\n      \u003cp\u003efootnote. \u003ca href=\"#fnref:1\" title=\"return to article\"\u003e ↩\u003c/a\u003e\u003c/p\u003e\n      \u003cp\u003e\u003c/p\u003e\n    \u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/div\u003e\n```\n\nOnce you've set up the appropriate markup, all you need to do is include the following in your code:\n\n```javascript\nconst { littlefoot } = require('littlefoot')\n\nlittlefoot()\n```\n\nYou 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:\n\n```javascript\nconst { littlefoot } = require('littlefoot')\n\nconst lf = littlefoot({\n  activateOnHover: true,\n  hoverDelay: 250,\n})\n```\n\nYou'll also want to include styles for the button and popovers, a number of which come with the script.\n\n### Usage with [WordPress](https://www.wordpress.org/)\n\nInstall the [Littlefoot for Footnotes](https://github.com/s3rgiosan/littlefoot) plugin by following the provided instructions.\n\n### Usage with [Gatsby](https://www.gatsbyjs.org/)\n\n1. [Install littlefoot](#installation) as a dependency in your Gatsby project.\n\n2. 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:\n\n   ```js\n   import littlefoot from 'littlefoot'\n   import 'littlefoot/dist/littlefoot.css'\n\n   export function onRouteUpdate() {\n     littlefoot() // Pass any littlefoot settings here.\n   }\n   ```\n\n### Usage from a CDN\n\nFollow these steps to add littlefoot to a plain HTML document without package\nmanagement support. While this method is simpler to use, bear in mind that\nincluding files from external sources will slightly degrade the page's loading\nperformance.\n\n1. Add the required footnote stylesheet at the top of your HTML file, inside the\n   `\u003chead\u003e` tag:\n\n   ```html\n   \u003clink\n     rel=\"stylesheet\"\n     href=\"https://unpkg.com/littlefoot/dist/littlefoot.css\"\n   /\u003e\n   ```\n\n2. Add the following script tags at the end of the document, just before the\n   closing `\u003c/body\u003e` tag:\n\n   ```html\n   \u003cscript\n     src=\"https://unpkg.com/littlefoot/dist/littlefoot.js\"\n     type=\"application/javascript\"\n   \u003e\u003c/script\u003e\n   \u003cscript type=\"application/javascript\"\u003e\n     littlefoot.littlefoot() // Pass any littlefoot settings here.\n   \u003c/script\u003e\n   ```\n\nSee [an example on CodePen](https://codepen.io/goblindegook/pen/oPNzGE).\n\n## Options\n\nThe 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.\n\n### `activateCallback`\n\nSpecifies 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.\n\nDefault: `undefined`\n\n### `dismissCallback`\n\nSpecifies 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.\n\nDefault: `undefined`\n\n### `activateDelay`\n\nSets a delay between the activation of the footnote button and the activation of the actual footnote content.\n\nDefault: `100`\n\n### `activateOnHover`\n\nSpecifies whether or not the footnote content will be activated when the associated button is hovered over.\n\nDefault: `false`\n\n### `allowDuplicates`\n\nDetermines whether or not a footnote can be used as the content for multiple footnote buttons. Many content management systems will, on a blog's main page, load every article chronologically without any adjustments to the article markup. This can cause issues if multiple footnotes have the same ID: the footnote content is identified by the fragment identifier in the `href` attribute of the footnote link, so multiple identical IDs can result in the same footnote content being used for different footnote links. This option prevents this by using a footnote as the content for at most one footnote button.\n\nDefault: `true`\n\n### `allowMultiple`\n\nSpecifies whether or not multiple footnote popovers can be active simultaneously.\n\nDefault: `false`\n\n### `anchorPattern`\n\nSpecifies the pattern that must be matched by the anchor element's `href` attribute for it to be considered a footnote link. This is used in filtering all links down to just those with a footnote.\n\nDefault: `/(fn|footnote|note)[:\\-_\\d]/gi`\n\n### `anchorParentSelector`\n\nThe selector for the parent of the footnote link. This is really only necessary when you want to get rid of that element --- for instance, when the link is inside a `sup` tag. This tag and the link itself will be joined together for attribute from which you can drawn in your markup for footnotes/buttons.\n\nDefault: `sup`\n\n### `dismissDelay`\n\nWhen the footnote content is being removed this option specifies how long after the active class is removed from the footnote before the element is actually removed from the DOM.\n\nDefault: `500`\n\n### `dismissOnDocumentTouch`\n\nDetermines whether touching the document will dimiss all active footnotes. When `false`, footnotes can be dismissed by touching the button again.\n\nDefault: `true`\n\n### `dismissOnUnhover`\n\nDetermines whether footnotes that were presented when hovering on a footnote button are dismissed once the footnote button or footnote popover is un-hovered.\n\nDefault: `false`\n\n### `footnoteSelector`\n\nThe element that contains the footnote content. This element will be hidden and given a `littlefoot--print` class once littlefoot has finished with it.\n\nDefault: `'li'`\n\n### `hoverDelay`\n\nIf `dismissOnUnhover` is true, this specifies the amount of time (in milliseconds) that must pass after the footnote button/content is un-hovered before the footnote is dismissed.\n\nDefault: `250`\n\n### `numberResetSelector`\n\nA string representing the selector at which you would like the numbering of footnotes to restart at 1. For example, you may be using the numbered style of footnote and wish to have the numbers restart for each `\u003carticle\u003e` on your main page with a class of `'article-container'` In this case, you would set this option to `'article.article-container'` (or an equivalent CSS selector). Leaving the option undefined will simply number all footnotes on a given page sequentially.\n\nDefault: `undefined`\n\n### `scope`\n\nIf any truthy value is provided, only the footnotes within the scope you define will be affected by the script. The scope should be a selector string, as you would typically use in jQuery. For example, setting a scope of `'.littlefoot-active'` would work only on those elements with an ancestor that has a class of `littlefoot-active`.\n\nDefault: `undefined`\n\n### `contentTemplate`\n\nA template for the markup of the footnote content popovers. It's best not to change this too much; the library relies on the class names and hierarchy of the default markup to do its work. However, you can add information to the rendered markup by adding string literals or one or more of the following variables:\n\n- `content`: The HTML markup of the original footnote.\n- `number`: The footnote number (sequential ordering of all footnotes within an element matching the `numberResetSelector` option).\n- `id`: The footnote identifier (sequential ordering of all footnotes on the page, starting from 1).\n\nVariables should be added between interpolation delimiters. For example, `\u003c% content %\u003e`.\n\nDefault:\n\n```html\n\u003caside\n  alt=\"Footnote \u003c% number %\u003e\"\n  class=\"littlefoot__popover\"\n  id=\"fncontent:\u003c% id %\u003e\"\n\u003e\n  \u003cdiv class=\"littlefoot__wrapper\"\u003e\n    \u003cdiv class=\"littlefoot__content\"\u003e\u003c% content %\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"littlefoot__tooltip\"\u003e\u003c/div\u003e\n\u003c/aside\u003e\n```\n\n### `buttonTemplate`\n\nA template for the markup of the footnote button. Again, try not to remove any elements from the markup, but add as much as you like.\n\n- `content`: The escaped HTML markup of the original footnote.\n- `id`: The footnote identifier (sequential ordering of all footnotes on the page, starting from 1).\n- `number`: The footnote number (sequential ordering of all footnotes within an element matching the `numberResetSelector` option).\n- `reference`: The footnote reference used to populate the ID attribute.\n\nVariables should be added between interpolation delimiters. For example, `\u003c% content %\u003e`.\n\nDefault:\n\n```html\n\u003cbutton\n  class=\"littlefoot__button\"\n  id=\"\u003c% reference %\u003e\"\n  title=\"See Footnote \u003c% number %\u003e\"\n\u003e\n  \u003csvg\n    role=\"img\"\n    aria-labelledby=\"title-\u003c% reference %\u003e\"\n    viewbox=\"0 0 31 6\"\n    preserveAspectRatio=\"xMidYMid\"\n  \u003e\n    \u003ctitle id=\"title-\u003c% reference %\u003e\"\u003eFootnote \u003c% number %\u003e\u003c/title\u003e\n    \u003ccircle r=\"3\" cx=\"3\" cy=\"3\" fill=\"white\"\u003e\u003c/circle\u003e\n    \u003ccircle r=\"3\" cx=\"15\" cy=\"3\" fill=\"white\"\u003e\u003c/circle\u003e\n    \u003ccircle r=\"3\" cx=\"27\" cy=\"3\" fill=\"white\"\u003e\u003c/circle\u003e\n  \u003c/svg\u003e\n\u003c/button\u003e\n```\n\n#### Numerical footnotes\n\nTo display the footnote number instead of an ellipsis, provide the following `buttonTemplate` instead:\n\n```html\n\u003cbutton\n  aria-label=\"Footnote \u003c% number %\u003e\"\n  class=\"littlefoot__button\"\n  id=\"\u003c% reference %\u003e\"\n  title=\"See Footnote \u003c% number %\u003e\"\n/\u003e\n  \u003c% number %\u003e\n\u003c/button\u003e\n```\n\n## Methods\n\nRunning the function will return an object that can be stored and used to manipulate the footnote buttons/content. The following methods are available in this return object:\n\n### `dismiss([footnoteId[, timeout]])`\n\nThis function will close the popover matching the footnote ID. If omitted, all popovers are dismissed. `timeout` specifies the amount of time after the footnote's active class is removed before the element itself is removed. If excluded, `timeout` will default to the `dismissDelay` option.\n\n### `activate(footnoteId[, timeout])`\n\nThis will activate the footnote button (and its associated popover) matching the\nfootnote ID. `timeout` specifies the amount of time before the footnote's active\nclass is applied. If excluded, `timeout` will default to the `activateDelay`\noption.\n\n### `getSetting(key)`\n\nReturns the instance setting matching the provided string key.\n\n### `updateSetting(key, value)`\n\nUpdates the littlefoot instance settings for the provided string key with a new\nvalue.\n\n### `unmount()`\n\nThis will disable littlefoot and restore the document to its original structure,\nclearing event handlers. Once `unmount()` is called, all other methods provided\nin the littlefoot instance will stop working, requiring you to call the\n`littlefoot()` function again.\n\n## Theming\n\nlittlefoot supports theming through [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). The following custom properties are available in browsers or [CSS precompilation tools](https://preset-env.cssdb.org/) that support them, and are scoped to the `.littlefoot` class.\n\n### Example\n\nCustomise littlefoot's appearance by overriding its custom properties in your site's CSS, like so:\n\n```css\n.littlefoot {\n  --button-active-background-color: #d2b450;\n  --button-text-color: #fff;\n}\n```\n\n### Buttons\n\n| Button properties                  | Default value                                   | Purpose                         |\n| :--------------------------------- | :---------------------------------------------- | :------------------------------ |\n| `--button-background-color`        | `#949494`                                       | Button background color.        |\n| `--button-active-background-color` | `#4c4c4c`                                       | Active button background color. |\n| `--button-border-radius`           | `0.5rem`                                        | Button border radius.           |\n| `--button-active-text-color`       | `#fafafa`                                       | Active button text color.       |\n| `--button-height`                  | `1rem`                                          | Button height.                  |\n| `--button-margin`                  | `0 0.1rem`                                      | Button margin.                  |\n| `--button-padding`                 | `0 0.6rem`                                      | Button padding                  |\n| `--button-text-color`              | `#fafafa`                                       | Button text color.              |\n| `--button-transition`              | `background-color 0.25s ease, color 0.25s ease` | Button transition animation.    |\n\n### Popovers\n\n| Popover properties                 | Default value                              | Purpose                         |\n| :--------------------------------- | :----------------------------------------- | :------------------------------ |\n| `--popover-background-color`       | `#f5f5f5`                                  | Popover background color.       |\n| `--popover-border-radius`          | `0.5rem`                                   | Popover border radius.          |\n| `--popover-border`                 | `1px solid #949494`                        | Popover border.                 |\n| `--popover-font-family`            | `initial`                                  | Popover text font family.       |\n| `--popover-font-size`              | `initial`                                  | Popover text font size.         |\n| `--popover-font-style`             | `initial`                                  | Popover text font style.        |\n| `--popover-font-weight`            | `initial`                                  | Popover text font weight.       |\n| `--popover-horizontal-padding`     | `1.4rem`                                   | Popover horizontal padding.     |\n| `--popover-line-height`            | `normal`                                   | Popover text line height.       |\n| `--popover-max-height`             | `15em`                                     | Maximum popover height.         |\n| `--popover-max-width`              | `90%`                                      | Maximum popover width.          |\n| `--popover-scroll-indicator-color` | `#4c4c4c`                                  | Popover scroll indicator color. |\n| `--popover-shadow`                 | `0 0 8px rgba(0, 0, 0, 0.3)`               | Popover drop shadow.            |\n| `--popover-text-color`             | `#111`                                     | Popover text color.             |\n| `--popover-tooltip-size`           | `0.5rem`                                   | Popover tooltip size.           |\n| `--popover-transform-origin`       | `50% 0`                                    | Popover transform origin.       |\n| `--popover-transform`              | `scale(0.1) translateZ(0)`                 | Initial popover transform.      |\n| `--popover-active-transform`       | `scale(1) translateZ(0)`                   | Activated popover transform.    |\n| `--popover-transition`             | `opacity 0.25s ease, transform 0.25s ease` | Popover transition animation.   |\n| `--popover-vertical-padding`       | `0.6rem`                                   | Popover vertical padding.       |\n| `--popover-width`                  | `22em`                                     | Popover width.                  |\n\n### Backwards compatibility\n\nBrowsers that don't support CSS custom properties will receive the default values. The appearance of elements may still be overridden through normal CSS definitions as in previous versions of littlefoot.\n\n## Changes from Bigfoot.js\n\nConsult the [changelog](CHANGELOG.md#differences-from-bigfootjs).\n\n## License\n\nMIT © [Chris Sauvé](https://github.com/lemonmade) and [Luís Rodrigues](https://goblindegook.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoblindegook%2Flittlefoot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoblindegook%2Flittlefoot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoblindegook%2Flittlefoot/lists"}