Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frontend-layers/get-details
Get package information directly on your web page without import and install
https://github.com/frontend-layers/get-details
Last synced: 3 days ago
JSON representation
Get package information directly on your web page without import and install
- Host: GitHub
- URL: https://github.com/frontend-layers/get-details
- Owner: Frontend-Layers
- License: mit
- Created: 2025-01-09T00:49:04.000Z (15 days ago)
- Default Branch: main
- Last Pushed: 2025-01-09T00:54:05.000Z (15 days ago)
- Last Synced: 2025-01-09T01:55:29.776Z (15 days ago)
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Get Details
Fetch package information directly on your web page in an aesthetic manner
---
## Features
- Runs instantly via CDN `` tag
- Config through a single `data-get-details` attribute
- Supports multiple elements
- Available as ES6 module
- Return JSON without DOM manipulation
- Supports NPM (default), GitHub and PyPI
- Custom format reports
---
## Usage
```html
<p class="current-version"></p>
<script src="https://cdn.jsdelivr.net/npm/get-details" data-get-details="package_name">
```
## Extended Configuration
```html
```
**Parameters:**
`data-get-details="[package-name][,][target-element][,][source],[{format}]"`
- **1st parameter** (required): Package name to fetch data for.
- **2nd parameter** (optional): Target element selector where the data will be inserted. If not provided, defaults to `#package-version`, `.current-version` or any element with the data-get-details attribute.
- **3rd parameter** (optional): The data source (default: `npm`). Can be `npm`, `github` or `pypi`.
- **4th parameter** (optional): Custom format, specified within `{}` for personalized reporting.
### ES6 Module Usage
Please install npm package
```shell
npm i get-details --save-dev
```
Import and initialize in your JavaScript:
```javascript
import getDetails from 'get-details/es.js';
getDetails();
```
It still works with `data-*` but you can add parameters by functions argument
```javascript
getDetails({ packageName: 'package-name', target: 'target-element', format: '{ %string }' });
```
### Get JSON data only
Please add parameter `str = true`
```javascript
const str = getDetails({ packageName: 'package-name', target: 'target-element', format: '{ %string }', str: true });
console.log(str);
```
### Skypack CDN Usage
You can try to import ES6 module directly from CDN:
```javascript
import getDetails from 'https://cdn.skypack.dev/get-details/es6.js?min';
getDetails();
```
---
## Custom Format
You can customize the format of the fetched package information by passing a specific format string in the `data-get-details` attribute. This format string can include placeholders that will be dynamically replaced with package data.
** Placeholders:**
| key | description |
|------------------|----------------------------------------|
| %year | The current year. |
| %copy | The copyright symbol (©). |
| %name | The package name. |
| %version | The package version. |
| %description | The package description. |
| %homepage | The homepage URL of the package. |
| %author | The author's name. |
| %license | The license information. |
| %last-update | The last update date of the package. |
| %stars | The number of stars (for GitHub). |
| %forks | The number of forks (for GitHub). |
| %language | The programming language (for GitHub). |
| %repository | The repository URL. |
| %maintainers | The names of maintainers. |
| %downloads | The download count for the package. |
| %release-date | The release date of the package. |
| %release-notes | The release notes for the latest version. |
| %owner | The owner of the repository. |
| %requires | Whether the package requires Python (for PyPI). |
Example of custom format:
```html