get-footer v1.0.0

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

Custom Format

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

Available Placeholders:

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