Examples

Using Wikxhibit you display information or data about Wikidata items from other websites. For example, if you want to build a web page about Lady Gaga property="SpotifyArtist". This property will contains an object of different information about Lady Gaga from Spotify (e.g. album and track).

How it works

Get Started

<head>
  <link rel="stylesheet" href="https://get.mavo.io/stable/mavo.css">
  <script src="https://get.mavo.io/stable/mavo.js"></script>
  <script type="module" src="https://shapir.org/mavo-shapir.js"></script>
</head>

<body mv-app mv-bar="none" mv-source="wikxhibit" mv-source-service="wikidata">
    <!-- add your HTML code here -->
</body>

Note

In order to use Mavo, you first need to download or link to its JS and CSS files and include them in your page. If you have never done this before, you could put both in the <head> section. In addition, in the <body>you will need to define the Mavo application, like this:

Display Author's Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<body mv-app mv-bar="none" mv-source="wikxhibit" mv-source-service="wikidata"
    mv-source-language="en" mv-source-id="Q318429">

  <img property="image" />
  <h1 property="label"></h1>
  <p property="description"></p>
  <time property="dateOfBirth"></time>

</body>

Display Multiple Authors from United Kingdom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<div mv-app mv-bar="none" mv-source="wikxhibit" mv-source-service="wikidata"
  mv-source-occupation="writer"
  mv-source-country-of-citizenship="United Kingdom"
  mv-source-numberOfItems="3">

<div property="items" mv-multiple>
  <img property="image" />
  <h1 property="label"></h1>
  <p property="description"></p>
  <time property="dateOfBirth"></time>
</div>

</div>

Omnis fugiat ea explicabo sunt

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<div mv-app="main" mv-source="shapir" mv-source-service="wikidata"
  mv-source-occupation="writer"
  mv-source-country-of-citizenship="United Kingdom"
  mv-source-numberOfItems="3">

<div property="items" mv-multiple>
    <img property="image" />
    <h1 property="label"></h1>
    <p property="description"></p>
    <time property="dateOfBirth"></time>
    <div property="countryOfCitizenship">
        <p property="label"></p>
    </div>
</div>

</div>