forked from Triply-Dev/YASGUI.YASQE-deprecated
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (163 loc) · 9.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>YASQE</title>
<link rel="icon" type="image/png" href="doc/imgs/favicon.png">
<link href="dist/yasqe.min.css" rel="stylesheet" type="text/css" />
<link href="doc/doc.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="https://github.com/YASGUI/YASQE" target="_blank"><img style="z-index: 1; position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<!-- Fixed navbar -->
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">YASQE</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">About</a></li>
<li><a href="doc/">Documentation</a></li>
<li><a target="_blank" href="http://laurensrietveld.nl">About me</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container" role="main">
<div class="jumbotron ">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="doc/imgs/yasqe.png">
</div>
<div class="col-md-9">
<h1>Yet Another Sparql Query Editor</h1>
<div style="text-align:right">Maintained by <a href="http://triply.cc" target="_blank"><img width="20%" src="doc/imgs/triply.svg"></a></div>
</div>
</div>
</div>
<div class="row" id="aboutYQuery">
<div class="col-md-12">
<h1>About YASQE</h1>
YASQE is part of the regular <a target="_blank" href='http://about.yasgui.org'>YASGUI</a> web application. YASQE provides a simple syntax highlighted text area, bundled with features such as autocompletion, and the option to query SPARQL endpoints.
<div id="showcase"></div>
<code>var yasqe = YASQE(document.getElementById("showcase"));</code> <br>
(or, if you would like to instantiate YASQE from an existing text area, use <code>var yasqe = YASQE.fromTextArea(document.getElementById('textAreaItem'));</code>
</div>
</div>
<div class="row" id="features">
<div class="col-md-12">
<h1>Features</h1>
YASQE features:
<ul>
<li>Completely client-side</li>
<li>SPARQL syntax highlighting and error checking </li>
<li>Extremely customizable: All functions and handlers from the <a href="http://codemirror.net" target="_blank">CodeMirror library</a> are accessible</li>
<li>Persistent values (optional): your query is stored for easier reuse between browser sessions
<li>Prefix autocompletion (using <a href="http://prefix.cc" target="_blank">prefix.cc</a>)</li>
<li>Property and class autocompletion (using the <a href="http://lov.okfn.org/" target="_blank">Linked Open Vocabularies API</a>)</li>
<li>Easily add your own property and class autocompletions if you have them</li>
<li>Handy <a href="doc/#keyboardShortcuts">keyboard shortcuts</a></li>
<li>Possible to execute the query directly</li>
</ul>
Combining YASQE with the YASR library (which visualizes SPARQL results) is easy: all you need to do is define YASR as a handler to the YASQE query method.
See <a href="https://gist.github.com/LaurensRietveld/7d8beca5dbeb6b909b6f" target="_blank">this example gist</a>.
</div>
</div>
<div class="row" id="releases">
<div class="col-md-12">
<h1>Download the latest release</h1>
<p>We provide a <i>bundled</i> release containing all external dependencies, and we provide a release containing just the YASQE core. If you choose to use the regular release, make sure to include <a href="http://jquery.com" target="_blank">jQuery</a> and <a href="http://codemirror.net" target="_blank">CodeMirror</a> in your page as well.</p>
</div>
</div>
<div id="downloads">
<div class="row">
<div id="cdnDownload" class="row">
<div class="well col-md-12" style="margin-bottom: 0px">
<h3>CDN</h3>
<p>The YASQE files are hosted via <a href="http://www.jsdelivr.com/#!yasqe" target="_blank">JsDelivr</a>. This CDN is the easiest way to include YASQE in your website.</p>
<strong>CSS</strong>
<div><code id="yasqeCss"></code></div>
<strong>JS</strong> <small>Choose either the bundled or the core version</small>
<div><code id="yasqeJsBundled"></code></div>
<div><code id="yasqeJs"></code></div>
</div>
</div>
<div class="row">
<div class="well col-md-6">
<h3>GitHub</h3>
<p>Visit the GitHub repository to download the YASQE .css and .js files (find them in the <code>dist</code> directory).</p>
<a class="btn btn-large btn-info" href="https://github.com/YASGUI/YASQE" target="_blank">Download latest release from GitHub <img style="height: 22px;" src="doc/imgs/blacktocat.png"></a>
</div>
<div class="well col-md-6">
<h3><img style="height: 26px;" src="doc/imgs/npm.png"></h3>
<p>YASQE is registered as a node package as well, so you'll be able to use the node package manager to keep your version of YASQE up to date.</p>
<a class="btn btn-large btn-info" href="https://www.npmjs.org/package/yasgui-yasqe" target="_blank">Show NPM Package</a>
</div>
</div>
</div>
</div>
<div class="row" id="used">
<div class="col-md-12">
<h1>Used by</h1>
<p><a href="http://doc.yasgui.org" target="_blank">YASGUI</a> (or one of its components, <a href="http://yasqe.yasgui.org" target="_blank">YASQE</a>/<a href="http://yasr.yasgui.org" target="_blank">YASR</a>) is integrated in common triple-stores such as <a href="https://jena.apache.org/" target="_blank">Apache Jena</a>
, <a href="http://rdf4j.org/" target="_blank">OpenRDF Sesame</a>
and <a href="http://www.swi-prolog.org/web/ClioPatria/" target="_blank">ClioPatria</a>.
</p>
<p>It has seen uptake in Linked Data tools as well, including</p>
<ul>
<li><a href="https://github.com/scampi/gosparqled" target="_blank">Gosparqled</a> <small>(<a href="http://scampi.github.io/gosparqled/" target="_blank">demo</a>)</small>, an extension of YASQE providing context-dependent property and class autocompletions</li>
<li><a href="https://github.com/jiemakel/snapper" target="_blank">Snapper</a> <small>(<a href="http://jiemakel.github.io/snapper/#/" target="_blank">demo</a>)</small>, a browser based Turtle editor</li>
<li><a href="https://github.com/jiemakel/visu" target="_blank">Visu</a> <small>(<a href="http://demo.seco.tkk.fi/visu/" target="_blank">demo</a>)</small>, the first library to extend YASR with Google Chart functionality</li>
<li><a href="https://github.com/Data2Semantics/brwsr" target="_blank">Brwsr</a>, a Linked Data browser</li>
<li><a href="https://github.com/zazukoians/trifid-ld" target="_blank">Trifid-LD</a>, a lightweight Linked Data server and proxy</li>
</ul>
<p>Publishers are using as well, such as
<a href="http://www.healthdata.gov/sparql/" target="_blank">HealthData.gov</a>
, <a href="http://americanart.si.edu/collections/search/lod/about/sparql.cfm" target="_blank">the Smithsonian American Art museum</a>
,<a href="http://zbw.eu/labs/en/blog/publishing-sparql-queries-live" target="_blank">the German National Library of Economics (ZWB)</a>
, <a href="http://lov.okfn.org/dataset/lov/sparql" target="_blank">Linked Open Vocabularies</a>
, the <a href="http://lodlaundromat.org/sparql/" target="_blank">LOD Laundromat</a>
, <a href="http://doc.metalex.eu/query" target="_blank">MetaLex</a>
, <a href="http://http://linkedarc.net/" target="_blank">linkedArc</a>
and the <a href="http://lod.cedar-project.nl/cedar/data.html" target="_blank">CEDAR project</a>.
</p>
</div>
</div>
<div class="row" id="thanks">
<div class="col-md-12">
<h1>Thanks!</h1>
A big thanks goes out to:
<ul>
<li>The people behind the <a href="http://openuplabs.tso.co.uk/demos/sparqleditor" target="_blank">Flint SPARQL editor</a> for publishing the javascript SPARQL grammar</li>
<li>Marijn Haverbeke for his great work on the <a href="http://codemirror.net" target="_blank">CodeMirror library</a> syntax highlighting library</li>
<li>Pierre-Yves Vandenbussche and Bernard Vatant for their useful <a href='http://lov.okfn.org/' target="_blank">Linked Open Vocabularies service</a>, of which I use the <a target="_blank" href="lov.okfn.org/dataset/lov/apidoc/">API</a> to autocomplete properties and classes
<li>Richard Cyganiak for his simple but effective <a href='http://prefix.cc' target="_blank">Prefix.cc</a> service, which I use for autocompleting prefixes.
</ul>
</div>
</div>
</div> <!-- /container -->
<script src="dist/yasqe.bundled.min.js"></script>
<script src="doc/doc.min.js"></script>
<script type="text/javascript">
var yasqe = YASQE(document.getElementById("showcase"), {
sparql: {
showQueryButton: true,
callbacks:{
success: function(data){
console.log("success", data);
}
}
}
});
</script>
</body>
</html>