Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@ajuvercr
ajuvercr committed Dec 24, 2024
1 parent 978baab commit d11b0cb
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 28 deletions.
Binary file renamed 3a92030bfd4821326413.wasm → 698c0509cb7358b24b16.wasm
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion app.bundle.js
View file

Large diffs are not rendered by default.

155 changes: 129 additions & 26 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,129 @@ a:visited {
color: silver;
}

#side_panel {
z-index: 2;
position: fixed;
top: 0;
left: 0;
background-color: rgba(51, 51, 51, 0.9);
color: white;
height: 100vh;
display: flex;
padding: 0 5%;
flex-direction: column;
justify-content: center;
gap: 20px;
max-width: 22vw;
/* overflow-x: auto; */
/* overflow-y: visible; */

transition-duration: 0.4s;
transition-property: transform;
transition-timing-function: ease-out;
}

#side_panel.hidden {
transform: translateX(-90%);
}


#side_panel>button {
background-color: #555;
color: #fff;
border: none;
font-size: 2rem;
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#side_panel>button:hover {
background-color: #444;
}

#side_panel>button {
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
}

#side_panel ul {
list-style: none;
padding: 0;
}

#side_panel li {
margin-bottom: 8px;
font-size: 1em;
}

.key {
display: inline-block;
background-color: #f0f0f0;
color: #000;
padding: 3px 5px;
margin: 0 2px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: monospace;
font-size: 0.9em;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.key.small {
padding: 1px 2px;
}

.lit {
color: orange;
font-family: monospace;
padding: 1px 2px;
/* font-size: 0.9em; */
border: 1px solid #ccc;
}

.behaviour h3 {
margin: 4px 0;
font-size: 0.9rem;
color: orange;
font-weight: bold;
}

section + section {
margin-top: 8px;
}
.behaviour + .behaviour {
margin-top: 16px;
}

.name {
text-align: right;
font-size: smaller;
vertical-align: bottom;
}

body, html {
body,
html {
/* background-color: black; */
/* color: white; */
margin: 0;
}

div[id="wrapper"], div[id="wrapper2"] {
div[id="wrapper"],
div[id="wrapper2"] {
height: 100vh;
display: flex;
justify-items: center;
}

div[id=container2] {
div[id="container2"] {
display: grid;
width: 85%;
height: 90%;
Expand All @@ -35,28 +139,27 @@ div[id=container2] {
margin: auto;
}

div[id=container] {
div[id="container"] {
display: grid;
width: 75%;
height: 95%;
min-width: 800px;
min-height: 600px;
grid-template-rows: auto auto auto minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: auto;
padding-bottom: 20px;

}

h1[id=title] {
h1[id="title"] {
grid-column: 1 / 3;
grid-row: 1;
font-family: monospace;
font-size: 2em;
}

p[id=synopsis] {
p[id="synopsis"] {
color: #333;
grid-column: 1 / 3;
grid-row: 2;
Expand All @@ -66,9 +169,9 @@ p[id=synopsis] {
line-height: 1.5em;
}

p[id=features] {
p[id="features"] {
grid-column: 1 / 3;
grid-row: 3;
grid-row: 2;
text-align: center;
font-family: sans-serif;
font-style: italic;
Expand All @@ -77,25 +180,24 @@ p[id=features] {
color: #333;
}


div[id=cell-editor] {
div[id="cell-editor"] {
grid-column: 1 / 2;
grid-row: 4;
grid-row: 3;
}

div[id=cell-editor2] {
div[id="cell-editor2"] {
grid-column: 2 / 3;
grid-row: 4;
grid-row: 3;
}

div[id=cell-editor3] {
div[id="cell-editor3"] {
grid-column: 1 / 2;
grid-row: 5;
grid-row: 4;
}

div[id=cell-editor4] {
div[id="cell-editor4"] {
grid-column: 2 / 3;
grid-row: 5;
grid-row: 4;
}

.cell-editor .editor {
Expand All @@ -109,39 +211,40 @@ div[id=cell-editor4] {
align-items: flex-end;
}

div[id=cell-syntax] {
div[id="cell-syntax"] {
grid-column: 1 / 3;
grid-row: 4;
}

div[id=container2] textarea {
div[id="container2"] textarea {
height: 100%;
}

[id=container] label {
[id="container"] label {
font-family: monospace;
font-size: 14pt;
}

div[id=cell-console] {
div[id="cell-console"] {
grid-column: 1 / 3;
grid-row: 1;
overflow: hidden;
}

div[id=cell-client] {
div[id="cell-client"] {
grid-column: 1 / 3;
grid-row: 2;
overflow: hidden;
}

div[id=cell-server] {
div[id="cell-server"] {
grid-column: 1 / 3;
grid-row: 3;
overflow: hidden;
}

div[id=container] textarea, div[id=container2] textarea {
div[id="container"] textarea,
div[id="container2"] textarea {
display: block;
box-sizing: border-box;
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>tower-lsp web demo</title><link rel="stylesheet" href="./assets/css/main.css"/><script type="module" src="app.bundle.js"></script><script type="module" src="editor.worker.bundle.js"></script></head><body><div id="wrapper" class="wrapper"><div id="container"><h1 id="title">Semantic Web Language Server Demonstrator</h1><p id="synopsis">This app demos an editor with language smarts (for JavaScript) by hosting the <a href="https://microsoft.github.io/monaco-editor/">Monaco</a> widget with an <a href="https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/">LSP</a> server implemented via <a href="https://github.com/ebkalderon/tower-lsp">tower-lsp</a> and <a href="https://github.com/tree-sitter/tree-sitter">tree-sitter</a>. Everything is compiled to WASM and run client-side directly in the browser; there are no separate sever-side processes or web workers used by the app code. (Monaco itself does use web workers, however).</p><p id="features"><strong>features</strong>: ⇧⌘O (macos) or ⇧⌃O (windows) opens symbol view; the <strong>syntax</strong> area shows the JavaScript syntax tree (green for valid; red for errors) parsed from <strong>editor</strong></p><div id="cell-editor" class="cell-editor"><label for="editor">Data <span class="name">turtle.ttl</span></label><div id="editor" class="editor"></div></div><div id="cell-editor2" class="cell-editor"><label for="editor2">SPARQL <span class="name">query.sq</span></label><div id="editor2" class="editor"></div></div><div id="cell-editor3" class="cell-editor"><label for="editor3">Ontology <span class="name">owl.ttl</span></label><div id="editor3" class="editor"></div></div><div id="cell-editor4" class="cell-editor"><label for="editor4">Shapes <span class="name">shacl.ttl</span></label><div id="editor4" class="editor"></div></div></div></div><div id="wrapper2"><div id="container2"><div id="cell-console"><label for="channel-console">console</label> <textarea id="channel-console" autocomplete="off" spellcheck="off" wrap="off" readonly="readonly" rows="3"></textarea></div><div id="cell-client"><label for="channel-client">message trace (client ⇒ server)</label> <textarea id="channel-client" autocomplete="off" spellcheck="off" wrap="off" readonly="readonly" rows="4"></textarea></div><div id="cell-server"><label for="channel-server">message trace (client ⇐ server)</label> <textarea id="channel-server" autocomplete="off" spellcheck="off" wrap="off" readonly="readonly" rows="4"></textarea></div><div id="cell-syntax"><label for="channel-syntax">syntax</label> <textarea id="channel-syntax" autocomplete="off" spellcheck="off" wrap="off" readonly="readonly"></textarea></div></div></div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>tower-lsp web demo</title><link rel="stylesheet" href="./assets/css/main.css"/><script type="module" src="app.bundle.js"></script><script type="module" src="editor.worker.bundle.js"></script></head><body><div id="side_panel" class="hidden"><div><h3>Keyboard Actions</h3><ul><li><span class="key">Ctrl</span> + <span class="key">Shift</span> + <span class="key">i</span> : Format</li><li><span class="key">Ctrl</span> + <span class="key">Space</span> : Complete</li><li><span class="key">Ctrl</span> + <span class="key">K</span> : Rename</li></ul></div><div><h3>Expected behaviour</h3><div class="behaviour"><h3>Autocomplete prefixes:</h3><section>Type <span class="lit">foa</span>, trigger complete, hit <span class="key small">Enter</span>.</section><section>Completed to <span class="lit">foaf:</span> and a prefix statement.</section></div><div class="behaviour"><h3>Autocomplete property:</h3><section>At predicate location, type <span class="lit">ed:</span> , trigger complete, hit <span class="key small">Enter</span>.</section><section>Complete to <span class="lit">ed:completesProperties</span> (property is defined in ontology and imported).</section></div><div class="behaviour"><h3>Autocomplete class:</h3><section>At object location with <span class="lit">rdf:type</span> as predicate type <span class="lit">ed:</span> , trigger complete, hit <span class="key small">Enter</span>.</section><section>Complete to <span class="lit">ed:Completion</span> (class is defined in ontology and imported).</section></div><div class="behaviour"><h3>Shacl shape validation:</h3><section>Two seconds after an edit, the language server is notified of a <span>save</span>. This triggers shape validations.</section><section>An <span class="lit">ed:LanguageServer</span> needs at least three features, and all features need to be <span class="lit">ed:isCool</span>.</section></div></div><div><h3>Peculiarities</h3><div class="behaviour">SWLS doesn't support the entire <span class="lit">SPARQL</span> syntax yet. It also doesn't support formatting for it.</div></div><button id="toggle">&#9776;</button></div><div id="wrapper" class="wrapper"><div id="container"><h1 id="title">Semantic Web Language Server Demonstrator</h1><p id="synopsis">This app demos an editor with language smarts (for JavaScript) by hosting the <a href="https://microsoft.github.io/monaco-editor/">Monaco</a> widget with an <a href="https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/">LSP</a> server implemented via <a href="https://github.com/ebkalderon/tower-lsp">tower-lsp</a> and <a href="https://github.com/tree-sitter/tree-sitter">tree-sitter</a>. Everything is compiled to WASM and run client-side directly in the browser; there are no separate sever-side processes or web workers used by the app code. (Monaco itself does use web workers, however).</p><div id="cell-editor" class="cell-editor"><label for="editor">Data <span class="name">turtle.ttl</span></label><div id="editor" class="editor"></div></div><div id="cell-editor2" class="cell-editor"><label for="editor2">SPARQL <span class="name">query.sq</span></label><div id="editor2" class="editor"></div></div><div id="cell-editor3" class="cell-editor"><label for="editor3">Ontology <span class="name">owl.ttl</span></label><div id="editor3" class="editor"></div></div><div id="cell-editor4" class="cell-editor"><label for="editor4">Shapes <span class="name">shacl.ttl</span></label><div id="editor4" class="editor"></div></div></div></div><div id="wrapper2"><div id="container2"></div></div></body></html>

0 comments on commit d11b0cb

Please sign in to comment.