https://github.com/lisongx/wikidata-elements
Custom HTML elements to reuse Wikidata
https://github.com/lisongx/wikidata-elements
custom-elements knowledge-base open-data wikidata
Last synced: 7 months ago
JSON representation
Custom HTML elements to reuse Wikidata
- Host: GitHub
- URL: https://github.com/lisongx/wikidata-elements
- Owner: lisongx
- License: mit
- Created: 2019-08-28T22:47:33.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:06:58.000Z (almost 3 years ago)
- Last Synced: 2025-03-23T01:01:39.583Z (7 months ago)
- Topics: custom-elements, knowledge-base, open-data, wikidata
- Language: JavaScript
- Homepage: https://wikidata-elements.js.org
- Size: 2.41 MB
- Stars: 14
- Watchers: 4
- Forks: 2
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# wikidata-elements
⚠️⚠️⚠️**This is still pretty much work in progress, API/naming will likely be changing very quickly**
[](https://travis-ci.org/lisongx/wikidata-elements)
## Installation
Install via npm
```
$ npm install wikidata-elements
```
or just include the umd build using the CDN url
```html
```
## Usage
Import the package if you installed it from npm:
```javascript
import 'wikidata-elements'
```
### \
* Render entity's label
```html
```
=> ```Douglas Adams```
* Render entity's description
```html
```
=> ```British author and humorist```
* Render entity's property
```html
```
=> ```nm0010930```
`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 😀.
So 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.
* Render property url (like `P856`), by passing a P value to `property` attribute
```html
Tim Berners-Lee's website
```
:arrow_down:
```html
Tim Berners-Lee's website
```
* Render external id as link(like twitter username `P2002` ), using the same `propery` attribute.
```html
Tim on twitter
```
:arrow_down:
```html
Tim on twitter
```
* Render wikimedia site link, by passing the sitename to the `site` attribute
```html
ティム
```
:arrow_down:
```html
ティム
```
You can also pass a comma separated list of sitename, this we will render the first one it's available in the same order.
```html
Tim's quote
```
:arrow_down:
```html
Tim's quote
```
## 1st Example: Make your own wikipedia infobox
Simple markup for access the data you need from **Wikidata**
```html
Profession
Place of Birth
Height
m
Website
```
Style it whatever you want it, using the tool you have
```css
#douglas h1 {
color: #BF6766;
}
#douglas table {
text-align: center;
color: #e9e9e9;
background: #AF5F3C;
}
#douglas table th {
padding: 10px;
background-color: #F05E1C;
}
```
Then 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.
## Tests
We'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.
To run our tests locally, first start the pollyjs process to record network request
```npm run listen-request```
and then just run the normal
```
npm run test
```
## See also
* [qLabel](https://googleknowledge.github.io/qlabel/) is a jQuery plugin to translate labels in a Website based on translations from Wikidata
## Contributing
Bug reports and pull requests are welcome on GitHub.