-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
executable file
·206 lines (172 loc) · 10.3 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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!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>YASHE</title>
<link rel="icon" type="image/png" href="doc/imgs/favicon.png">
<link href="dist/yashe.min.css" rel="stylesheet" type="text/css" />
<link href="doc/doc.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
<a href="https://github.com/weso/YASHE" 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="#">YASHE</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="doc/index.html">Documentation</a></li>
<li><a target="_blank" href="http://www.weso.es/shex-author/">ShExAuthor</a></li>
<li><a target="_blank" href="https://www.linkedin.com/in/pablo-men%C3%A9ndez-106262a7/">About me</a></li>
<li><a target="_blank" href="http://yasqe.yasgui.org/">Original YASQE</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container logoCont" role="main" >
<img src="doc/imgs/yashe_logo.png"></img>
</div>
<div class="container" role="main">
<div class="row" id="aboutYQuery">
<div class="col-md-12">
<h1>About YASHE</h1>
YASHE is a <a target="_blank" href='http://shex.io/shex-semantics/'>ShEx</a> editor which started as a fork of <a target="_blank" href='https://yasqe.yasgui.org/'>YASQE</a> (which is based on SPARQL)
This tool performs lexical and syntactic analysis of the content of the editor, thus offering the user a realtime syntactic error detector.
It has features like: syntax highlighting, visual aid elements (tooltips) and autocomplete mechanisms. In addition, it offers a simple way of integrating into other projects.
<div class="selectors">
<select id="rdfBookSelector" class="exSelector form-control">
<option value="" disabled selected>Validating RDF Data Book Examples</option>
</select>
<select id="wikiSelector" class="wikiSelector form-control js-example-basic-single" >
<option value="" disabled selected>Wikidata Schemas</option>
</select>
<select id="othersSelector" class="form-control">
<option value="" disabled selected>Other Examples</option>
<option value="japan">Japan Sarch Metadata</option>
<option value="wikibase">Wikibase Instances Autocomple and Tooltip</option>
<option value="pretty">Pretty Print</option>
</select>
</div>
<div id="showcase"></div>
<code>var yashe = YASHE(document.getElementById("showcase"));</code> <br>
(or, if you would like to instantiate YASHE from an existing text area, use <code>var yashe = YASHE.fromTextArea(document.getElementById('textAreaItem'));</code>
</div>
</div>
<div class="row" id="features">
<div class="col-md-12">
<h1>Features</h1>
YASHE features:
<ul>
<li>Completely client-side</li>
<li>ShEx syntax highlighting and error checking </li>
<li>Light and Dark modes</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>
<li>Prefix definition autocompletion (using <a href="http://prefix.cc" target="_blank">prefix.cc</a>)</li>
<li>Prefix and ShEx keywords autocompletion</li>
<li>Wikidata property and entity autocompletion (using the <a href="https://www.mediawiki.org/wiki/API:Main_page" target="_blank">MediaWiki API</a>)</li>
<img style="float: right;" src="doc/imgs/Wikidata_stamp.png" width="300" height="200">
<li>Information tooltip when hovering over wikidata properties and entities (using the <a href="https://www.mediawiki.org/wiki/API:Main_page" target="_blank">MediaWiki API</a>)</li>
<li>Handy <a href="doc/#keyboardShortcuts">keyboard shortcuts</a></li>
<li>Integrated buttons that alows to:</li>
<ul>
<li>Upload ShEx files</li>
<li>Download the editor content as a ShEx file</li>
<li>Copy the editor content to the clipboard</li>
<li>Delete all the editor content</li>
<li>Change between light and dark mode</li>
<li>FullScreen Mode (F11 shortcut too!)</li>
</ul>
</ul>
</div>
</div>
<h1>Download the latest release</h1>
<p>We provide the following options to download YASHE and use it in your own projects:</p>
<div id="downloads">
<div class="row">
<div id="cdnDownload" class="row">
<div class="well col-md-12" style="margin-bottom: 0px">
<h3><img style="margin-top: -3%; " src="doc/imgs/JsDelivr_logo.png"></h3>
<p>The YASHE files are hosted via <a href="http://www.jsdelivr.com/package/npm/yashe" target="_blank">JsDelivr</a>. This CDN is the easiest way to include YASHE in your website.</p>
<strong>CSS</strong>
<div><code id="yasheCss"></code></div>
<strong>JS</strong>
<div><code id="yasheJsBundled"></code></div>
</div>
</div>
<div class="row">
<div class="well col-md-6">
<h3><img style="height: 40px; width:150px;" src="doc/imgs/github_logo.png"></h3>
<p>Visit the GitHub repository to download the YASHE .css and .js files (find them in the <code>dist</code> directory).</p>
<a class="btn btn-large btn-info" href="https://github.com/weso/YASHE" 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: 42px;" src="doc/imgs/npm_logo.png"></h3>
<p>YASHE is registered as a node package as well, so you'll be able to use the node package manager to keep your version of YASHE up to date.</p>
<a class="btn btn-large btn-info" href="https://www.npmjs.org/package/yashe" target="_blank">Show NPM Package</a>
</div>
</div>
</div>
</div>
<div class="row" id="used">
<div class="col-md-12">
<h1>Used by</h1>
<ul>
<li><a href="https://www.weso.es/shex-author/" target="_blank">ShexAuthor</a>: Shape Expressions (ShEx) graphic assistant</li>
<li><a href="http://rdfshape.weso.es/" target="_blank">RDFShape</a>: RDF data tool (RDF conversion, validation using ShEx and SHACL, querying using SPARQL)</li>
<li><a href="http://wikishape.weso.es/" target="_blank">WikiShape</a>: Shape Expressions (ShEx) playground customized for Wikidata</li>
<li><a href="http://shexml.herminiogarcia.com/" target="_blank">ShExML: </a> Playground to convert ShExML to RDF and RML offering diferent syntaxes</li>
</ul>
</div>
</div>
<div class="row" id="forked">
<div class="col-md-12">
<h1>Forked by</h1>
<ul>
<li><a href="http://shexml.herminiogarcia.com/editor/" target="_blank">ShExML Editor</a> ShExML is a language based on ShEx to map and merge heterogeneous data sources. It is designed with usability in mind trying to make the script creation easier to the users.</li>
</ul>
</div>
</div>
<div class="row" id="thanks">
<div class="col-md-12">
<h1>Thanks!</h1>
A big thanks goes out to:
<ul>
<li>Laurens Rietveld for his great work on the <a href="http://yasqe.yasgui.org/" target="_blank">YASQE library</a></li>
<li>Maxime Lefrançois for his tips at the beginning of the project and
for his work on the <a href="https://perfectkb.github.io/yate/" target="_blank">YATE library</a> in which I could be inspired</li>
</ul>
A big thanks transitively goes out to:
<ul>
<li>The people behind the <a href="https://www.mediawiki.org/wiki/API:Main_pager" target="_blank">MediaWiki API</a> which I use for autocompleting Wikidata entities and properties.</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>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>
<script src="dist/yashe.bundled.min.js"></script>
<script src="doc/doc.min.js"></script>
<script type="text/javascript">
var yashe = YASHE(document.getElementById('showcase'), {
persistent:null
});
yashe.setSize(1135,400);
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
</body>
</html>