sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
116 lines (95 loc) • 4.54 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Sparnatural !</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- YASGUI CSS -->
<link href="https://unpkg.com/@triply/yasgui/build/yasgui.min.css" rel="stylesheet" type="text/css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="fa/css/all.min.css" />
<!-- Sparnatural CSS -->
<link rel="stylesheet" href="sparnatural.css">
<!-- This page custom CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Hello Sparnatural !</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="https://sparnatural.eu">Sparnatural Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/sparna-git/Sparnatural">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.sparnatural.eu">Documentation</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container my-5">
<p>
<em>This is a simple page demonstrating Sparnatural integration. Please read the <a href="#">"Hello Sparnatural" documentation</a> for a complete tutorial based on this page.</em>
<br/>
<em>Sparnatural is not displayed below ? This is probably because <a href="http://docs.sparnatural.eu/OWL-based-configuration.html#enable-cors-for-local-files-in-your-browser">you should setup CORS loading of local files</a>.</em>
</p>
<h1>Hello, Sparnatural!</h1>
<div class="col-lg-12 px-0">
<p>Queries are sent to <a href="#" id="displayEndpoint">...</a></p>
<!-- uncomment to enable links to load sample queries
<p>
Load example queries :
<a href="#" onclick="document.querySelector('spar-natural').loadQuery(window['example_1']);return false;">example 1</a>
|
<a href="#" onclick="document.querySelector('spar-natural').loadQuery(window['example_2']);return false;">example 2</a>
</p>
-->
<!-- The sparnatural web component with config attributes. -->
<!-- See http://docs.sparnatural.eu/Javascript-integration.html#html-attributes-reference -->
<spar-natural
src="config.ttl"
endpoint="https://dbpedia.org/sparql"
lang="en"
defaultLang="en"
distinct="true"
limit="1000"
debug="true"
></spar-natural>
<span class="btn btn-primary" id="sparql-toggle">Toggle SPARQL query</span>
</div>
</div>
<!-- raw SPARQL query editor, yasQE -->
<!-- see https://triply.cc/docs/yasgui/ -->
<div class="container my-5">
<div id="yasqe" style="display:none; " />
</div>
<!-- SPARQL query results display, yasR -->
<!-- see https://triply.cc/docs/yasgui/ -->
<div class="container my-5">
<div id="yasr">
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- YASGUI JS -->
<script src="https://unpkg.com/@triply/yasgui/build/yasgui.min.js"></script>
<!-- Sparnatural JS -->
<script src="sparnatural.js"></script>
<!-- Sparnatural Custom YASR plugins -->
<script src="sparnatural-yasgui-plugins.js"></script>
<!-- File containing example queries -->
<script src="example-queries.js"></script>
<!-- This page custom JS -->
<script src="main.js"></script>
</body>
</html>