{"id":19824551,"url":"https://github.com/kit-data-manager/pid-component","last_synced_at":"2026-04-17T11:01:53.418Z","repository":{"id":184397239,"uuid":"671492053","full_name":"kit-data-manager/pid-component","owner":"kit-data-manager","description":"The PID-Component is a web component that can be used to display PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types. ","archived":false,"fork":false,"pushed_at":"2026-04-16T16:23:30.000Z","size":1883,"stargazers_count":1,"open_issues_count":4,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-16T17:27:41.385Z","etag":null,"topics":["fair-data","fair-do","handle","pid","stenciljs","storybook","tailwindcss","typescript","web-component"],"latest_commit_sha":null,"homepage":"https://kit-data-manager.github.io/pid-component/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kit-data-manager.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":"codemeta.json","zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-07-27T12:47:42.000Z","updated_at":"2026-04-16T16:21:54.000Z","dependencies_parsed_at":"2023-12-10T13:27:11.094Z","dependency_job_id":"2f9eb781-33b9-42ed-bab4-f4bd1ec5b313","html_url":"https://github.com/kit-data-manager/pid-component","commit_stats":null,"previous_names":["maximilianikit/pid-component","kit-data-manager/pid-component"],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/kit-data-manager/pid-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kit-data-manager%2Fpid-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kit-data-manager%2Fpid-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kit-data-manager%2Fpid-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kit-data-manager%2Fpid-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kit-data-manager","download_url":"https://codeload.github.com/kit-data-manager/pid-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kit-data-manager%2Fpid-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31926260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T10:35:34.458Z","status":"ssl_error","status_checked_at":"2026-04-17T10:35:09.472Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["fair-data","fair-do","handle","pid","stenciljs","storybook","tailwindcss","typescript","web-component"],"created_at":"2024-11-12T11:04:26.990Z","updated_at":"2026-04-17T11:01:53.412Z","avatar_url":"https://github.com/kit-data-manager.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PID Component\n\n[![Build](https://github.com/kit-data-manager/pid-component/actions/workflows/npm-ci.yml/badge.svg?branch=main)](https://github.com/kit-data-manager/pid-component/actions/workflows/ci.yml)\n[![CodeQL](https://github.com/kit-data-manager/pid-component/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/kit-data-manager/pid-component/actions/workflows/github-code-scanning/codeql)\n[![DOI](https://zenodo.org/badge/DOI/10.5281/zenodo.13629109.svg)](https://doi.org/10.5281/zenodo.13629109)\n[![npm version](https://img.shields.io/npm/v/@kit-data-manager/pid-component.svg)](https://www.npmjs.com/package/@kit-data-manager/pid-component)\n[![npm downloads](https://img.shields.io/npm/dm/@kit-data-manager/pid-component.svg)](https://www.npmjs.com/package/@kit-data-manager/pid-component)\n[![License](https://img.shields.io/github/license/kit-data-manager/pid-component.svg)](https://spdx.org/licenses/Apache-2.0)\n[![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://kit-data-manager.github.io/pid-component)\n\nThe `pid-component` is an easily extensible web component that can be used to display PIDs, ORCiDs, and other\nidentifiers in a user-friendly way.\nIt is easily extensible to support other identifier types.\n\n\u003e A [React wrapper]() is also available\n\nThe `pid-component` dynamically renders a component based on the value of the `value` property.\nDepending on the value, it decides which component to render, what priority to give it, and what props to pass to it.\nIt also renders itself recursively for all its children when unfolded.\nYou can set the maximum depth of recursion with the `level-of-subcomponents` property.\nBy default, it is set to 1, which means that it will only render the first level of children, but not their children.\nYou can prohibit unfolding of the component by setting the `current-level-of-subcomponents` to the same value as\nthe `level-of-subcomponents` property.\n\nTo use the component, import the [npm-package](https://www.npmjs.com/package/@kit-data-manager/pid-component)\nvia [unpkg](https://unpkg.com/).\nNote that two scripts are provided: one for modern browsers (type=\"module\") and a fallback for older browsers (\nnomodule).\nInclude **both** scripts to ensure support for modern browsers (ESM) and legacy browsers:\n\n```html\n\n\u003chead\u003e\n  \u003cscript type=\"module\"\n          src=\"https://unpkg.com/@kit-data-manager/pid-component/dist/pid-component/pid-component.esm.js\"\u003e\u003c/script\u003e\n  \u003cscript nomodule src=\"https://unpkg.com/@kit-data-manager/pid-component/dist/pid-component/pid-component.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nAlternatively, you can install the package via npm:\n\n```bash\nnpm install @kit-data-manager/pid-component\n```\n\nThen, you can use this component like this:\n\n```html\n\u003cpid-component value=\"21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6\"\u003e\u003c/pid-component\u003e\n```\n\n\u003cdiv\u003e\n\u003caside\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/@kit-data-manager/pid-component/dist/pid-component/pid-component.esm.js\"\u003e\u003c/script\u003e\n\u003cscript nomodule src=\"https://unpkg.com/@kit-data-manager/pid-component/dist/pid-component/pid-component.js\"\u003e\u003c/script\u003e\n\u003cpid-component value=\"21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6\"\u003e\u003c/pid-component\u003e\n\u003c/aside\u003e\n\u003c/div\u003e\n\nYou can try this web component in the [demo](https://kit-data-manager.github.io/pid-component).\n\n**Only use the `pid-component` component! All the others are only for internal use and may change at any moment...**\n\nThere are detailed docs for the `pid-component` component\navailable [in the Storybook](https://kit-data-manager.github.io/pid-component) and in\nthe [source code](packages/stencil-library/src/components/pid-component/readme.md).\n\n**Please notice that you must use the hyphenated version of an attribute when using the component directly in HTML (\ne.g. `currentLevelOfSubcomponents` -\u003e `current-level-of-subcomponents`).\nWhen using inside Stencil or with JSX/TSX syntax, you must use the camelCase version.**\n\n## Supported Types\n\nThe component automatically detects and renders the following types:\n\n- **PIDs**: Resolvable via [handle.net](https://handle.net).\n- **DOIs**: With DataCite or CrossRef metadata; resolvable via [doi.org](https://doi.org). Supports various citation\n  styles.\n- **ORCiDs**: Resolvable via [orcid.org](https://orcid.org). Displays profile information, affiliations, works, etc.\n- **RORs**: Resolvable via [ror.org](https://ror.org). Displays organization details, hierarchies, and location.\n- **SPDX**: License identifiers and URLs.\n- **URLs**: Starting with http:// or https://.\n- **Email-addresses**: Individual or comma-separated lists.\n- **Dates**: Formatted date strings.\n- **JSON objects**: Rendered with syntax highlighting and tree view using `json-viewer`.\n- **Locales**: e.g., en-US, de-DE. Visualized with flags (if region is present).\n- **Fallback**: Everything else is rendered as a simple string.\n\n## Configuration \u0026 Settings\n\nYou can customize the behavior of specific renderers by passing a JSON configuration string to the `settings` property.\n\n### Available Settings\n\n**Global Settings**\n\n- `ttl` (number): Time-to-live in milliseconds for cached data (default: varies by type).\n\n**DOIType**\n\n- `citationStyle` (string): The citation style to use for the preview.\n  - Options: `APA`, `Chicago`, `IEEE`, `Harvard`, `Anglia Ruskin`.\n  - Default: `APA`.\n\n**ORCIDType**\n\n- `showAffiliation` (boolean): Whether to show the affiliation in the summary.\n  - Default: `true`.\n- `affiliationAt` (string/date as ms): The date for which the affiliation should be shown.\n  - Default: Current date.\n\n**JSONType**\n\n- `darkMode` (string): The theme for the JSON viewer.\n  - Options: `light`, `dark`, `system`.\n  - Default: `system`.\n\n### Example Configuration\n\n```html\n\n\u003cpid-component\n  value=\"https://orcid.org/0000-0000-0000-0000\"\n  settings='[{\"type\":\"ORCIDType\",\"values\":[{\"name\":\"showAffiliation\",\"value\":false}]}]'\n\u003e\u003c/pid-component\u003e\n```\n\n## PID Resolver\n\nThe `pid-component` package exports a useful helper class for resolving PIDs. These are `PID`, `PIDDataType` and `PIDRecord` and can be\nimported like this:\n\n```typescript\nimport { PID, PIDDataType, PIDRecord } from \"@kit-data-manager/pid-component\"\n\nconst pid = new PID(\"21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6\")\nconst pidRecord = await pid.resolve()\nconst pidDataType = await PIDDataType.resolveDataType(pid)\n```\n\nFurther documentation is available in the [source code](packages/stencil-library/src/rendererModules/Handle/PID.ts).\n\n## Monorepo\n\nThis is a monorepo containing the following packages:\n\n - stencil-library (@kit-data-manager/pid-component)\n - react-library (@kit-data-manager/react-pid-component)\n\n[Lerna](https://lerna.js.org) is used for managing and building the packages (but you can also do it manually). To use, install Lerna:\n\n    npm install --global lerna\n\nand then use it to build the packages:\n\n    lerna run build\n\nIt will make sure to build the packages in the correct order.\n\n## How to run when developing\n\n1. Clone the repo\n2. Run `npm install`\n\nFor running storybook in dev mode, navigate to `packages/stencil-library` and run these commands in separate terminals:\n\n- `npm run buildWatch`\n- `npm run storybook`\n\nAttention: Do **NOT** run `npm run start`. It will cause the storybook to not work properly.\nIf you did run `npm run start`, delete the following folders (in `packages/stencil-library`) and run `npm install` again:\n\n- `node_modules`\n- `www`\n- `dist`\n- `loader`\n- `.stencil`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkit-data-manager%2Fpid-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkit-data-manager%2Fpid-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkit-data-manager%2Fpid-component/lists"}