Get Footer

Fetch package information from npm registry and display it as a customizable footer on your web page.

---

Features

• Runs instantly via CDN <script> tag
• Config through a single data-get-footer attribute
• Multiple footer styles out of the box
• Supports multiple elements
• Custom format templates
• Caches package data to reduce API calls
• Downloads statistics support

---

Usage

<footer>
  <div class="copy" data-get-footer="package_name"></div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/get-footer"></script>

Configuration

<div data-get-footer="package_name[,][target-element|template][,][template][,]{format}"></div>

Parameters:

data-get-footer="[package-name][,][target-element|template][,][template][,]{format}"

• 1st parameter (required): Package name to fetch data for
• 2nd parameter (optional): Can be either:
  • Target element selector (starts with # or .) where the footer will be inserted
  • Template name (see Templates section below)
• 3rd parameter (optional): Template name (if 2nd parameter is a target element)
• Format (optional): Custom format, specified within {} for personalized footer

Built-in Templates

Template	Description
modern	Modern style with emojis (default)
classic	Traditional copyright style
minimal	Simple package name and version
boxed	Boxed style with emoji
extended	Extended info with last update date
corporate	Corporate style with full copyright notice
full	Complete package information display

Custom Format

You can customize the footer format using placeholders that will be replaced with package data.

Available Placeholders:

Key	Description
%name	Package name
%version	Package version
%description	Package description
%lastUpdate	Last update date
%author	Author's name
%license	License information
%homepage	Homepage URL
%repository	Repository URL
%maintainers	Names of maintainers
%totalDownloads	Total downloads (last month)
%npmURL	NPM package URL
%copy	Copyright symbol (©)
%year	Current year

Example of custom format:

<div data-get-footer="webpack, { <a href='%npmURL'>%name</a> %copy %year | Version: %version | Updated: %lastUpdate | Downloads: %totalDownloads }"></div>

Examples

<!-- Default modern template -->
<div data-get-footer="express, modern"></div>

<!-- Custom target element -->
<div id="custom-footer"></div>
<div data-get-footer="jest, #custom-footer, modern"></div>

<!-- Custom format -->
<div data-get-footer="webpack, { <a href='%npmURL'>%name</a> %copy %year | Version: %version }"></div>

Contributing

Contributions welcome!

License

MIT License