{"id":24461308,"url":"https://github.com/frontend-layers/get-details","last_synced_at":"2026-02-14T04:34:25.037Z","repository":{"id":271640821,"uuid":"914105653","full_name":"Frontend-Layers/get-details","owner":"Frontend-Layers","description":"Get package information directly on your web page without import and install","archived":false,"fork":false,"pushed_at":"2025-01-12T16:44:24.000Z","size":71,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T04:33:10.766Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://frontend-layers.github.io/get-details/","language":"JavaScript","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/Frontend-Layers.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}},"created_at":"2025-01-09T00:49:04.000Z","updated_at":"2025-01-12T16:44:27.000Z","dependencies_parsed_at":"2025-01-09T01:55:31.788Z","dependency_job_id":"3434e95a-b736-46cc-ad6c-d48c4934da9d","html_url":"https://github.com/Frontend-Layers/get-details","commit_stats":null,"previous_names":["frontend-layers/get-details"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fget-details","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fget-details/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fget-details/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fget-details/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Frontend-Layers","download_url":"https://codeload.github.com/Frontend-Layers/get-details/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670508,"owners_count":21142897,"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":[],"created_at":"2025-01-21T04:18:56.269Z","updated_at":"2026-02-14T04:34:20.009Z","avatar_url":"https://github.com/Frontend-Layers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Get Details\n\nFetch package information directly on your web page in an aesthetic manner\n\n---\n## Features\n\n- Runs instantly via CDN `\u003cscript\u003e` tag\n- Config through a single `data-get-details` attribute\n- Supports multiple elements\n- Available as ES6 module\n- Return JSON without DOM manipulation\n- Supports NPM (default), GitHub and PyPI\n- Custom format reports\n\n---\n\n## Usage\n\n```html\n\u003cp class=\"current-version\"\u003e\u003c/p\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/get-details\" data-get-details=\"package_name\"\u003e\u003c/script\u003e\n```\n\n## Extended Configuration\n\n```html\n\u003cdiv data-get-details=\"package_name, html element, package source, {%report %format}\"\u003e\u003c/div\u003e\n```\n\n**Parameters:**\n\n`data-get-details=\"[package-name][,][target-element][,][source],[{format}]\"`\n\n- **1st parameter** (required): Package name to fetch data for.\n- **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.\n- **3rd parameter** (optional): The data source (default: `npm`). Can be `npm`, `github` or `pypi`.\n- **4th parameter** (optional): Custom format, specified within `{}` for personalized reporting.\n\n### ES6 Module Usage\n\nPlease install npm package\n\n```shell\nnpm i get-details --save-dev\n```\n\nImport and initialize in your JavaScript:\n\n```javascript\n  import getDetails from 'get-details/es.js';\n  getDetails();\n```\n\nIt still works with `data-*` but you can add parameters by functions argument\n\n```javascript\ngetDetails({ packageName: 'package-name', target: 'target-element', format: '{ %string }' });\n```\n\n### Get JSON data only\n\nPlease add parameter `str = true`\n\n```javascript\nconst str = getDetails({ packageName: 'package-name', target: 'target-element', format: '{ %string }', str: true });\nconsole.log(str);\n```\n\n### Skypack CDN Usage\n\nYou can try to import ES6 module directly from CDN:\n\n```javascript\n  import getDetails from 'https://cdn.skypack.dev/get-details/es6.js?min';\n  getDetails();\n```\n\n\n---\n\n## Custom Format\n\nYou 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.\n\n** Placeholders:**\n\n| key              | description                            |\n|------------------|----------------------------------------|\n| %year            | The current year.                      |\n| %copy            | The copyright symbol (©).              |\n| %name            | The package name.                      |\n| %version         | The package version.                   |\n| %description     | The package description.               |\n| %homepage        | The homepage URL of the package.       |\n| %author          | The author's name.                     |\n| %license         | The license information.               |\n| %last-update     | The last update date of the package.   |\n| %stars           | The number of stars (for GitHub).      |\n| %forks           | The number of forks (for GitHub).      |\n| %language        | The programming language (for GitHub). |\n| %repository      | The repository URL.                    |\n| %maintainers     | The names of maintainers.              |\n| %downloads       | The download count for the package.    |\n| %release-date    | The release date of the package.       |\n| %release-notes   | The release notes for the latest version. |\n| %owner           | The owner of the repository.           |\n| %requires        | Whether the package requires Python (for PyPI). |\n\nExample of custom format:\n\n```html\n  \u003cfooter class=\"footer\"\u003e\n    \u003cp class=\"copy\"\u003e\u003c/p\u003e\n  \u003c/footer\u003e\n\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/get-details\" data-get-details=\"get-details,.copy,npm,{'%year %copy %name %version - (%license)'}\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Supported Sources\n\nCurrently supports fetching data from `NPM`, `GitHub`, `PyPI` and `GitLab`.\n\n## Supported CDN\n\n| Service          | URL                                      |\n|------------------|------------------------------------------|\n| jsDelivr         | https://cdn.jsdelivr.net/npm/get-details |\n| UNPKG            | https://www.unpkg.com/get-details        |\n| Skypack          | https://cdn.skypack.dev/get-details      |\n\n## Contributing\n\nContributions welcome! Feel free to:\n\n- Fork the repository\n- Submit pull requests\n- File issues\n- Suggest improvements\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-layers%2Fget-details","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontend-layers%2Fget-details","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-layers%2Fget-details/lists"}