Developers can use this HTTP API to search for data within projects of the Bibliotheca Hertziana. Check the
interactive documentation.
This API allows you to build fancy things using Hertziana data, like this search widget, in a few lines of
JavaScript with select2. Type something below.
View the source code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<div id="kg-lookup">
<select id="kg-kind"><option value="thing">everything</option></select>
<select id="kg-search"><option></option></select>
<p id="kg-chosen"></p>
</div>
<style>
#kg-lookup { display: flex; flex-wrap: wrap; gap: .5em; max-width: 40em; }
#kg-lookup .select2 { flex: 1; }
#kg-chosen { width: 100%; }
.kg-result { display: flex; align-items: baseline; gap: .5em; }
.kg-result .kind { flex: 1; font-size: .85em; opacity: .7; text-transform: capitalize; }
.kg-result .source { font-size: .8em; padding: .1em .6em; border-radius: 1em; background: #eef1f6; color: #345; }
</style>
<script type="module">
// A search box for the Bibliotheca Hertziana knowledge graph, using its Lookup API
// (documentation: https://data.biblhertz.it/api/doc/) and the select2 widget (https://select2.org)
const SITE = "https://data.biblhertz.it"; // the knowledge graph's website, with its API at /api
const NAMESPACE = "http://data.biblhertz.it/"; // the IRIs of the site's own entities, which are also their pages
// The kinds of entity to search for (person, work, place...) come from the API itself
$.getJSON(`${SITE}/api/_types`, kinds =>
$("#kg-kind").empty().append(kinds.map(k => new Option(k === "thing" ? "everything" : k, k))));
$("#kg-search").select2({
placeholder: "Search for a person, work, material...",
minimumInputLength: 3,
width: "auto",
ajax: {
delay: 300,
url: params => `${SITE}/api/${$("#kg-kind").val()}/search/${encodeURIComponent(params.term)}`,
processResults: results => ({ results }) // each result already has the "id" and "text" select2 needs
},
templateResult: show
});
// One result: its name, its kind, and on the right the datasets that describe it
function show(result) {
if (result.loading) return result.text;
return $('<div class="kg-result">').append(
$("<b>").text(result.name),
$('<span class="kind">').text(result.type),
result.sources.map(source => $('<span class="source">').text(source.split("/").pop())));
}
// Link the chosen entity to its page: the site's own entities at their IRI, any other through the site's ?uri=
$("#kg-search").on("select2:select", event => {
const { uri, name } = event.params.data;
const href = uri.startsWith(NAMESPACE) ? uri : `${SITE}/?uri=${encodeURIComponent(uri)}`;
$("#kg-chosen").empty().append($("<a>", { href, target: "_blank", text: `Open ${name}` }));
});
</script>