{"id":18439344,"url":"https://github.com/lisongx/wikidata-elements","last_synced_at":"2025-04-07T21:32:21.311Z","repository":{"id":41772849,"uuid":"205036432","full_name":"lisongx/wikidata-elements","owner":"lisongx","description":"Custom HTML elements to reuse Wikidata","archived":false,"fork":false,"pushed_at":"2023-01-06T02:06:58.000Z","size":2530,"stargazers_count":14,"open_issues_count":28,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-23T01:01:39.583Z","etag":null,"topics":["custom-elements","knowledge-base","open-data","wikidata"],"latest_commit_sha":null,"homepage":"https://wikidata-elements.js.org","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/lisongx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["lisongx"]}},"created_at":"2019-08-28T22:47:33.000Z","updated_at":"2020-10-31T09:36:23.000Z","dependencies_parsed_at":"2023-02-05T02:30:55.269Z","dependency_job_id":null,"html_url":"https://github.com/lisongx/wikidata-elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisongx%2Fwikidata-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisongx%2Fwikidata-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisongx%2Fwikidata-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisongx%2Fwikidata-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lisongx","download_url":"https://codeload.github.com/lisongx/wikidata-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247732674,"owners_count":20986900,"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":["custom-elements","knowledge-base","open-data","wikidata"],"created_at":"2024-11-06T06:24:25.544Z","updated_at":"2025-04-07T21:32:16.298Z","avatar_url":"https://github.com/lisongx.png","language":"JavaScript","funding_links":["https://github.com/sponsors/lisongx"],"categories":[],"sub_categories":[],"readme":"# wikidata-elements\n\n⚠️⚠️⚠️**This is still pretty much work in progress, API/naming will likely be changing very quickly**\n\n[![Build Status](https://travis-ci.org/lisongx/wikidata-elements.svg?branch=master)](https://travis-ci.org/lisongx/wikidata-elements)\n\n## Installation\n\nInstall via npm\n\n```\n$ npm install wikidata-elements\n```\n\nor just include the umd build using the CDN url\n\n```html\n\u003cscript src=\"https://unpkg.com/wikidata-elements@0.1.0/dist/wd-elements.umd.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nImport the package if you installed it from npm:\n\n```javascript\nimport 'wikidata-elements'\n```\n\n###  \\\u003cwd-entity\\\u003e\n\n* Render entity's label\n\n```html\n\u003cwd-entity entity-id=\"Q42\" label lang=\"en\"\u003e\n```\n\n=\u003e  ```Douglas Adams```\n\n* Render entity's description\n\n```html\n\u003cwd-entity entity-id=\"Q42\" description lang=\"en\"/\u003e\n```\n\n=\u003e ```British author and humorist```\n\n* Render entity's property\n\n```html\n\u003cwd-entity entity-id=\"Q42\" property=\"P345\" /\u003e\n```\n=\u003e  ```nm0010930```\n\n###  \\\u003ca is=\"wd-link\"\\\u003e\n\n`wd-entity` only render text content, what if you want render things a link of `P856` or one's twitter url? Don't worry, we got you covered 😀.\n\nSo We extend the built-in `a` tag to support this custom beahviour. All the [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes) for `a` would still work, you can continue use `target=\"_blank\"` to control in the link to be open in a new tab.\n\n\n* Render property url (like `P856`), by passing a P value to `property` attribute\n\n```html\n\u003ca is=\"wd-link\" entity-id=\"Q80\" property=\"P856\"\u003e\n  Tim Berners-Lee's website\n\u003c/a\u003e\n```\n\n:arrow_down:\n\n```html\n\u003ca\n  is=\"wd-link\" entity-id=\"Q80\" property=\"P856\"\n  href=\"http://www.w3.org/People/Berners-Lee/\"\n\u003e\n  Tim Berners-Lee's website\n\u003c/a\u003e\n```\n\n* Render external id as link(like twitter username `P2002` ), using the same `propery` attribute.\n\n```html\n\u003ca is=\"wd-link\" entity-id=\"Q80\" property=\"P2002\"\u003e\n  Tim on twitter\n\u003c/a\u003e\n```\n\n:arrow_down:\n\n```html\n\u003ca\n  is=\"wd-link\" entity-id=\"Q80\" property=\"P2002\"\n  href=\"https://twitter.com/timberners_lee\"\n\u003e\n  Tim on twitter\n\u003c/a\u003e\n```\n\n* Render wikimedia site link, by passing the sitename to the `site` attribute\n\n```html\n\u003ca is=\"wd-link\" entity-id=\"Q80\" site=\"jawiki\"\u003e\n  ティム\n\u003c/a\u003e\n```\n:arrow_down:\n\n```html\n\u003ca\n  is=\"wd-link\" entity-id=\"Q80\" site=\"jawiki\"\n  href=\"https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%A3%E3%83%A0%E3%83%BB%E3%83%90%E3%83%BC%E3%83%8A%E3%83%BC%E3%82%BA%EF%BC%9D%E3%83%AA%E3%83%BC\"\n\u003e\n  ティム\n\u003c/a\u003e\n```\n\nYou can also pass a comma separated list of sitename, this we will render the first one it's available in the same order.\n\n```html\n\u003ca is=\"wd-link\" entity-id=\"Q80\" site=\"zhwikiquote, enwikiquote\"\u003e\n  Tim's quote\n\u003c/a\u003e\n```\n:arrow_down:\n\n```html\n\u003ca\n  is=\"wd-link\" entity-id=\"Q80\" site=\"jawiki\"\n  href=\"https://en.wikiquote.org/wiki/Tim_Berners-Lee\"\n\u003e\n  Tim's quote\n\u003c/a\u003e\n```\n\n## 1st Example: Make your own wikipedia infobox\n\nSimple markup for access the data you need from **Wikidata**\n\n```html\n\u003csection id=\"douglas\"\u003e\n  \u003ch1\u003e\n    \u003cwd-entity entity-id=\"Q42\" label lang=\"en\"/\u003e\n  \u003c/h1\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProfession\u003c/td\u003e\n      \u003ctd\u003e\u003cwd-entity entity-id=\"Q42\" description lang=\"en\"/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth\u003ePlace of Birth\u003c/td\u003e\n      \u003ctd\u003e\u003cwd-entity entity-id=\"Q42\" property=\"P19\" lang=\"en\"/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth\u003eHeight\u003c/td\u003e\n      \u003ctd\u003e\u003cwd-entity entity-id=\"Q42\" property=\"P2048\" lang=\"en\"\u003e\u003c/wd-entity\u003em\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth\u003eWebsite\u003c/td\u003e\n      \u003ctd\u003e\u003cwd-entity entity-id=\"Q42\" property=\"P856\" lang=\"en\"/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/section\u003e\n```\n\nStyle it whatever you want it, using the tool you have\n\n```css\n  \u003cstyle\u003e\n    #douglas h1 {\n      color: #BF6766;\n    }\n    #douglas table {\n      text-align: center;\n      color: #e9e9e9;\n      background: #AF5F3C;\n    }\n    #douglas table th {\n      padding: 10px;\n      background-color: #F05E1C;\n    }\n\n  \u003c/style\u003e\n```\n\nThen you would have this not so bad infobox in the page, try this in [JSBin](https://jsbin.com/kazelaseya/edit?html,output) if you wanna play with it.\n\n\u003cimg width=\"331\" alt=\"Your infobox\" src=\"https://user-images.githubusercontent.com/349342/67250338-e35ce880-f462-11e9-9015-cc1e21f1a249.png\"\u003e\n\n## Tests\n\nWe're using [pollyjs](https://github.com/Netflix/pollyjs) to record and replay all the http requests to wikidata in the test suits, this make the test cases more reliable.\n\nTo run our tests locally, first start the pollyjs process to record network request\n\n```npm run listen-request```\n\nand then just run the normal\n\n```\nnpm run test\n```\n\n## See also\n\n* [qLabel](https://googleknowledge.github.io/qlabel/) is a jQuery plugin to translate labels in a Website based on translations from Wikidata\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flisongx%2Fwikidata-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flisongx%2Fwikidata-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flisongx%2Fwikidata-elements/lists"}