Merge pull request #39 from zazuko:BenjaminHofstetter/issue38

VSCode Extension Doc

.gitignore

@@ -28,3 +28,7 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+
+.vscode
+
+src-vscode/media/

package.json

@@ -23,6 +23,7 @@
     "elkjs": "^0.9.3",
     "primeicons": "^7.0.0",
     "primevue": "^4.2.1",
+    "util": "^0.12.5",
     "vue": "^3.5.12"
   },
   "devDependencies": {
@@ -44,4 +45,4 @@
     "vite-plugin-pwa": "^0.21.0",
     "vue-tsc": "^2.1.10"
   }
-}
+}

src-vscode/LICENSE.md

@@ -0,0 +1,9 @@
+# License
+The MIT License (MIT)
+Copyright © 2024 Zazuko GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

src-vscode/README.md

@@ -1,71 +1,44 @@
-# rdf-sketch README
+# VSCode RDF Sketch
 
-This is the README for your extension "rdf-sketch". After writing up a brief description, we recommend including the following sections.
+This extension provides a way to visualize RDF data in [Visual Studio Code](https://code.visualstudio.com).
 
-## Features
-
-Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
-
-For example if there is an image subfolder under your extension project workspace:
-
-\!\[feature X\]\(images/feature-x.png\)
-
-> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
-
-## Requirements
-
-If you have any requirements or dependencies, add a section describing those and how to install and configure them.
-
-## Extension Settings
-
-Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
+This extension is based on our [Zazuko Sketch](https://sketch.zazuko.com/) web app. Code is available [here](https://github.com/zazuko/rdf-sketch).
 
-For example:
-
-This extension contributes the following settings:
-
-* `myExtension.enable`: Enable/disable this extension.
-* `myExtension.thing`: Set to `blah` to do something.
-
-## Known Issues
-
-Calling out known issues can help limit users opening duplicate issues against your extension.
-
-## Release Notes
-
-Users appreciate release notes as you update your extension.
-
-### 1.0.0
-
-Initial release of ...
+## Features
 
-### 1.0.1
+* Visualize RDF data in a separate Visual Studio Code tab
+* Auto-layout & zoom
+* Search for nodes
+* Move nodes around
+* Navigate to the source node by clicking on the edge
+* Navigate to the destination node by clicking Object in the triple
 
-Fixed issue #.
+## Installation
 
-### 1.1.0
+You can install it directly from the Visual Studio Code Extension tab. It is available on the [Marketplace](https://marketplace.visualstudio.com/items?itemName=Zazuko.vscode-rdf-sketch)
 
-Added features X, Y, and Z.
+## Usage
 
----
+1. Open an RDF file in Visual Studio Code
+2. Then click the preview icon on the top right corner of the editor ![Preview Button](images/preview-button.png)
+3. A new tab will open with the visualization 
 
-## Following extension guidelines
+# Demo
 
-Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
 
-* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
 
-## Working with Markdown
 
-You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
+### Limitations
 
-* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
-* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
-* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
+* Currently, it only supports N3/Turtle RDF serializations.
+* While you can move around boxes, the layout will not persist. Every time something in the data changes, it will auto-layout again and discard what you did before.
+* [YMMV](https://www.urbandictionary.com/define.php?term=ymmv) regarding how much data and what kind of graph you can visualize in a useful way.
 
-## For more information
+## Development
 
-* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
-* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
+To start the extension from this repository:
 
-**Enjoy!**
+- Open Visual Studio Code for this repository
+- Open debug panel
+- Hit *Run extension* on the upper right corner
+- To open dev tools: `Ctrl+P` and toggle developer tools