Skip to content

Instantly share code, notes, and snippets.

@cristianvasquez

cristianvasquez/example-alice.html

Created February 19, 2024 10:42
Show Gist options
  • Save cristianvasquez/fadf9331f6bc98d6d2d977b256626aac to your computer and use it in GitHub Desktop.
Save cristianvasquez/fadf9331f6bc98d6d2d977b256626aac to your computer and use it in GitHub Desktop.
Download ZIP
Alice HTML example
Raw
example-alice.html
<!DOCTYPE html>
<head>
<style>
body {
--border: #d1d1d1;
--metadata: #4f4f4f;
}
:host {
--border: #d1d1d1;
--metadata: #4f4f4f;
}
.entities {
display: flex;
flex-direction: column;
gap: 20px;
border-right: 1px solid var(--border);
}
.entity {
display: flex;
flex-direction: column;
border-left: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.entity-header > div {
margin: 10px;
}
.rows {
display: flex;
flex-direction: column;
}
/* Alternate highlighting */
.rows > :nth-child(1n) {
border-top: 1px solid var(--border);
}
/* Alternate highlighting */
.rows > :nth-child(2n) {
border-top: 1px solid var(--border);
background: rgba(0, 0, 0, 0.01);
}
.rows > .row {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.row > .property {
align-self: flex-start;
width: 35%;
word-break: break-all;
margin-left: 1%;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Values */
.row > .value {
wrap-option: wrap;
width: 65%;
word-break: break-all;
margin-left: 1rem;
margin-right: auto;
margin-top: 1rem;
margin-bottom: 1rem;
}
ul {
display: flex;
flex-direction: column;
list-style: none;
gap: 5px;
justify-content: center;
padding-left: 5px;
}
ol {
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
padding-left: 5px;
}
div .bring-down {
color: var(--metadata);
}
.vocab {
color: var(--metadata);
font-size: 0.7rem;
}
.vocab::after {
content: ':';
}
.language {
color: var(--metadata);
font-size: 0.7rem;
margin-left: 4px;
}
.datatype {
color: var(--metadata);
font-size: 0.5rem;
margin-left: 4px;
}
.img-container {
margin-left: auto;
margin-right: auto;
}
.img-container img {
max-width: 200px;
}
</style>
</head>
<body>
<!--lit-part 300Caz5OpOA=-->
<div class="entities">
<!--lit-part--><!--lit-part cX9Hcckjb6M=-->
<!--lit-node 0--><div id="http://example.org/Alice"
class="entity ">
<div class="rows">
<!--lit-part 0KhFUuCO2bs=-->
<div class="entity-header">
<div>
<!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="#http://example.org/Alice"
title="http://example.org/Alice"><!--lit-part-->Alice<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part-->
</div>
</div><!--/lit-part-->
<!--lit-part--><!--lit-part kfEHKSf/yyE=-->
<div class="row">
<!--lit-part twTnpWa67Bk=-->
<ul class="property">
<!--lit-part--><!--lit-part 83vL2TZWgro=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part aNTSJq1A6b0=--><span class="vocab"><!--lit-part-->rdf<!--/lit-part--></span><!--/lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="http://www.w3.org/1999/02/22-rdf-syntax-ns#type"
title="http://www.w3.org/1999/02/22-rdf-syntax-ns#type"><!--lit-part-->type<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
<!--lit-part 8IqrkWd5s3Y=-->
<ul class="value"><!--lit-part--><!--lit-part 86fxoDYHxzE=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part aNTSJq1A6b0=--><span class="vocab"><!--lit-part-->schema<!--/lit-part--></span><!--/lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="http://schema.org/Person"
title="http://schema.org/Person"><!--lit-part-->Person<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
</div><!--/lit-part--><!--lit-part kfEHKSf/yyE=-->
<div class="row">
<!--lit-part twTnpWa67Bk=-->
<ul class="property">
<!--lit-part--><!--lit-part 83vL2TZWgro=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part aNTSJq1A6b0=--><span class="vocab"><!--lit-part-->schema<!--/lit-part--></span><!--/lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="http://schema.org/name"
title="http://schema.org/name"><!--lit-part-->name<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
<!--lit-part 8IqrkWd5s3Y=-->
<ul class="value"><!--lit-part--><!--lit-part 86fxoDYHxzE=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part BRUAAAUVAAA=--><!--lit-part-->Alice<!--/lit-part--><?><!--/lit-part--><!--lit-part TNqEcYi1ATU=--><span class="datatype"><!--lit-part-->xsd<!--/lit-part-->
:<!--lit-part-->string<!--/lit-part--></span><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
</div><!--/lit-part--><!--lit-part kfEHKSf/yyE=-->
<div class="row">
<!--lit-part twTnpWa67Bk=-->
<ul class="property">
<!--lit-part--><!--lit-part 83vL2TZWgro=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part aNTSJq1A6b0=--><span class="vocab"><!--lit-part-->foaf<!--/lit-part--></span><!--/lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="http://xmlns.com/foaf/0.1/interest"
title="http://xmlns.com/foaf/0.1/interest"><!--lit-part-->interest<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
<!--lit-part 8IqrkWd5s3Y=-->
<ul class="value"><!--lit-part--><!--lit-part 86fxoDYHxzE=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="#http://example.org/IceCream"
title="http://example.org/IceCream"><!--lit-part-->Ice cream<!--/lit-part--></a><!--/lit-part--><!--lit-part WJ1cFjbGUs8=--><span class="language"><!--lit-part-->en<!--/lit-part--></span><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
</div><!--/lit-part--><!--/lit-part-->
</div>
</div><!--/lit-part--><!--lit-part cX9Hcckjb6M=-->
<!--lit-node 0--><div id="http://example.org/IceCream"
class="entity ">
<div class="rows">
<!--lit-part 0KhFUuCO2bs=-->
<div class="entity-header">
<div>
<!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="#http://example.org/IceCream"
title="http://example.org/IceCream"><!--lit-part-->Ice cream<!--/lit-part--></a><!--/lit-part--><!--lit-part WJ1cFjbGUs8=--><span class="language"><!--lit-part-->en<!--/lit-part--></span><!--/lit-part--><!--/lit-part--></div><!--/lit-part-->
</div>
</div><!--/lit-part-->
<!--lit-part--><!--lit-part kfEHKSf/yyE=-->
<div class="row">
<!--lit-part twTnpWa67Bk=-->
<ul class="property">
<!--lit-part--><!--lit-part 83vL2TZWgro=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part aNTSJq1A6b0=--><span class="vocab"><!--lit-part-->rdf<!--/lit-part--></span><!--/lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="http://www.w3.org/1999/02/22-rdf-syntax-ns#type"
title="http://www.w3.org/1999/02/22-rdf-syntax-ns#type"><!--lit-part-->type<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
<!--lit-part 8IqrkWd5s3Y=-->
<ul class="value"><!--lit-part--><!--lit-part 86fxoDYHxzE=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="http://publications.europa.eu/resource/authority/eurovoc/303"
title="http://publications.europa.eu/resource/authority/eurovoc/303"><!--lit-part-->303<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--lit-part 86fxoDYHxzE=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="http://aims.fao.org/aos/agrovoc/c_3784"
title="http://aims.fao.org/aos/agrovoc/c_3784"><!--lit-part-->c_3784<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--lit-part 86fxoDYHxzE=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="http://dbpedia.org/resource/Ice_cream"
title="http://dbpedia.org/resource/Ice_cream"><!--lit-part-->Ice_cream<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
</div><!--/lit-part--><!--lit-part kfEHKSf/yyE=-->
<div class="row">
<!--lit-part twTnpWa67Bk=-->
<ul class="property">
<!--lit-part--><!--lit-part 83vL2TZWgro=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part aNTSJq1A6b0=--><span class="vocab"><!--lit-part-->schema<!--/lit-part--></span><!--/lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="http://schema.org/name"
title="http://schema.org/name"><!--lit-part-->name<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
<!--lit-part 8IqrkWd5s3Y=-->
<ul class="value"><!--lit-part--><!--lit-part 86fxoDYHxzE=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part BRUAAAUVAAA=--><!--lit-part-->Ice cream<!--/lit-part--><?><!--/lit-part--><!--lit-part WJ1cFjbGUs8=--><span class="language"><!--lit-part-->en<!--/lit-part--></span><!--/lit-part--><!--lit-part TNqEcYi1ATU=--><span class="datatype"><!--lit-part-->rdf<!--/lit-part-->
:<!--lit-part-->langString<!--/lit-part--></span><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
</div><!--/lit-part--><!--lit-part kfEHKSf/yyE=-->
<div class="row">
<!--lit-part twTnpWa67Bk=-->
<ul class="property">
<!--lit-part--><!--lit-part 83vL2TZWgro=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part aNTSJq1A6b0=--><span class="vocab"><!--lit-part-->rdfs<!--/lit-part--></span><!--/lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="http://www.w3.org/2000/01/rdf-schema#seeAlso"
title="http://www.w3.org/2000/01/rdf-schema#seeAlso"><!--lit-part-->seeAlso<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
<!--lit-part 8IqrkWd5s3Y=-->
<ul class="value"><!--lit-part--><!--lit-part 86fxoDYHxzE=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="https://agrovoc.fao.org/browse/agrovoc/en/page/?clang=it&amp;uri=c_3784"
title="https://agrovoc.fao.org/browse/agrovoc/en/page/?clang=it&amp;uri=c_3784"><!--lit-part-->?clang=it&amp;uri=c_3784<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--lit-part 86fxoDYHxzE=-->
<li><!--lit-part c3yZ93Y7viA=-->
<div><!--lit-part--><!--lit-part SlVbKzaJDsw=--><!--lit-node 0--><a href="https://op.europa.eu/en/web/eu-vocabularies/concept/-/resource?uri=http://eurovoc.europa.eu/303"
title="https://op.europa.eu/en/web/eu-vocabularies/concept/-/resource?uri=http://eurovoc.europa.eu/303"><!--lit-part-->303<!--/lit-part--></a><!--/lit-part--><!--/lit-part--></div><!--/lit-part--></li><!--/lit-part--><!--/lit-part-->
</ul><!--/lit-part-->
</div><!--/lit-part--><!--/lit-part-->
</div>
</div><!--/lit-part--><!--/lit-part-->
</div>
<!--/lit-part-->
</body>
</html>
@cristianvasquez
Copy link
Author

Corresponding turtle:

@prefix schema: <http://schema.org/> .
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix ex: <http://example.org/> .
@prefix dbpedia: <http://dbpedia.org/resource/> .
@prefix eurovoc: <http://publications.europa.eu/resource/authority/eurovoc/> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix agrovoc: <http://aims.fao.org/aos/agrovoc/> .

ex:Alice a schema:Person ;
	schema:name "Alice" ;
	foaf:interest ex:IceCream .

ex:IceCream a eurovoc:303 ;
  a dbpedia:Ice_cream ;
  a agrovoc:c_3784 ;
  schema:name "Ice cream"@en ;
  rdfs:seeAlso <https://op.europa.eu/en/web/eu-vocabularies/concept/-/resource?uri=http://eurovoc.europa.eu/303> ;
  rdfs:seeAlso <https://agrovoc.fao.org/browse/agrovoc/en/page/?clang=it&uri=c_3784> .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment