Update settings with correct link to the documentation

Closes #44

docs/Features/Filtering.md

@@ -17,6 +17,12 @@ The syntax of this simulates [the search syntax in Obsidian](https://help.obsidi
 - `class:`: Search based on [[CSS Styling#Classes|CSS class]].
 - `raw:`: Search using a [[CSS Styling#Selectors|CSS selector]].
 
+## Tips
+- Hiding **attachments**: `-class:file`
+- Hiding **images**: `-class:image`
+- Hiding **dangling nodes**:  `-class:dangling`
+- You can add those filters to the [[Style Pane]] to quickly hide and unhide them
+
 ## Limitations
 Regex does not work, nor do  the `section:`, `line:` and `block:` operators. 
 

docs/Features/Juggl code fence.md

@@ -19,7 +19,7 @@ will display when using Juggl as:
 The code fence is in the familiar YAML syntax. 
 
 ## Creating a Juggl code fence
-
+The code fence requires one of currently two **modes**. You can use
 
 --- 
 #feature

docs/Features/Local Graph mode.md

@@ -0,0 +1,11 @@
+---
+aliases: []
+---
+
+The local graph mode simulates the local graph of [[Obsidian]]. It will display the currently active note and the notes around it. 
+
+I'm planning to implement a depth-slider for this later!
+
+--- 
+#feature 
+- author [[Emile van Krieken]]

docs/Features/Styling/CSS Styling.md

@@ -13,6 +13,8 @@ This document acts as an overview of common and useful options for Juggl. For do
 
 We will first discuss how to [[#Selectors|select certain objects]], then discuss common [[#Properties|properties]] you might want to change, then finally show a couple of [[#Snippets|snippets]] to get started. 
 
+If you prefer to start off with examples, I'd recommend immediately jumping to [[#Snippets]]. 
+
 If you need more help, feel free to join the [[Discord]] where help is provided for all your styling questions!
 
 # Selectors
@@ -24,6 +26,7 @@ Classes can be selected using `.class`. Available classes that are useful to sty
 - Any class in the `cssclass` property in your [[YAML Styling|YAML]] frontmatter is also available on that node.
 - `.dangling`: Targets dangling nodes (nodes that aren't created as a file)
 - `.image`: Targets all nodes that are rendered as images. This is image files, but also notes that are styled with the `image` [[YAML Styling|YAML]] property. Similar for `.audio`, `.video` and `.pdf`.
+- `.file`: Targets all attachments (everything that does not have the `.md` extension)
 - `.note`: Targets all nodes that represent `.md` files.
 - `.global-3`: Targets nodes in the **fourth** global [[Style Pane|style group]](note: zero-based indexing!)
 - `.local-5`: Targets nodes in the fifth local style group
@@ -84,7 +87,7 @@ Useful common properties are listed as following. See [this link](https://js.cyt
 - `background-image`: URL to the background image. See [this link](https://js.cytoscape.org/#style/background-image) and [[YAML Styling]] for nuances
 	- There is a significant amount of options for dealing with images, such as how it is contained in the node, smoothing, opacity, offset, etc. See [this link](https://js.cytoscape.org/#style/background-image).
 - `label`: The text on the node, usually the name of a note. 
-	- Many standard options for styling this are avabile, see [this link](https://js.cytoscape.org/#style/labels). You can for example change the positioning of the text to be inside the node.
+	- Many standard options for styling this are available like the `font-family`, see [this link](https://js.cytoscape.org/#style/labels). You can for example change the positioning of the text to be inside the node. The 
 - `display`: Set to none to not display the element.
 
 ## Edges
@@ -94,6 +97,7 @@ Edges can also be completely styled. See [this link](https://js.cytoscape.org/#s
 - `line-color`: Color of the edge
 - `line-style`: Choose from `solid, dotted, dashed`
 - `line-opacity`: Opacity of the edge. 
+- `label`: The text on the node
 # Snippets
 **Style [[Link Types]]**: Color links with the `author` type red.
 ```css
@@ -101,9 +105,53 @@ Edges can also be completely styled. See [this link](https://js.cytoscape.org/#s
 	line-color: red;
 }
 ```
+
+**Map cooking time to colour**: Changes from the color blue to red depending on how long it takes to cook a meal:
+```css
+node[cooking-time] {
+    background-color: mapData(cooking-time, 1, 120, blue, red);
+}
+```
+
+**Change opacity and width of a line**, depending on how many connections (from 1 to 15) there are from one node to the other:
+```css
+edge[edgeCount] {
+    width: mapData(edgeCount, 1, 15, 0.5, 3);
+	line-opacity: mapData(edgeCount, 1, 15, 0.5, 0.9);
+}
+```
+
+**Display the context of a link**: This will display the sentences around where the link appears. This can be a bit messy!
+```css
+edge.inline {
+   label: data(context);
+   text-opacity: 0.8;
+   font-size: 2;
+   text-wrap: ellipsis;
+   text-max-width: 100px;
+}
+```
+
+![[Pasted image 20210414175943.png|500]]
+
+**Text in a box**: One styling I love is to have rectangle nodes that contain some text. This can be achieved (imperfectly!) using
+```css
+.tag-paper {
+    shape: rectangle;
+    width: 50px;
+    height: 45px;
+    font-size: 5;
+    text-valign: center;
+    text-max-width: 45px;
+    text-opacity: 1;
+}
+```
+
+![[Pasted image 20210414182140.png|400]]
+
 # Current limitations
 - CSS variables like `var(--background-primary)` will not be recognized. If this is something you need, please add a pull request.
-- `not()` does not seem to work
+- `not()` does not seem to work.
 
 
 --- 

docs/Features/Styling/Style Pane.md

@@ -4,7 +4,11 @@ aliases: [style group]
 
 ![[style_pane.gif|400]]
 
-The easiest way to [[Styling|style]] a group of nodes is the Style Pane. You can style nodes using a simple user interface that already provides a large amount of options. The style pane is a separate view which opens by default in the right sidebar of [[Obsidian]]. 
+The easiest way to [[Styling|style]] a group of nodes is the Style Pane. You can style nodes using a simple user interface that already provides a large amount of options. 
+
+The style pane is a separate view which opens by default in the right sidebar of [[Obsidian]]: 
+
+![[Screen Recording 2021-04-14 at 17.29.09.mp4]]
 
 A group of nodes is chosen using a [[Filtering|Filter]]. The styling options for each group of nodes are
 - Show or hide the group

docs/Features/Workspace mode/Workspace mode.md

@@ -27,6 +27,7 @@ While holding shift, you can click and drag around the screen to select a group
 
 Selected nodes can be interacted with through the [[#Toolbar]]. 
 
+### Radial context menu
 To interact with a single node, click and hold on that node to open the **radial context menu**: 
 ![[Screen Recording 2021-04-03 at 13.58.20.mp4]]
 
@@ -54,7 +55,8 @@ Filters the node from the view. You can add the node back again using the [[Node
 ![[Pasted image 20210403143207.png|200]]
 
 Focus on the selected nodes and its neighbors, and zoom the view to fit on its neighborhood.
-## Toolbar
+
+### Toolbar
 The toolbar is the set of buttons on the top of the Juggl view, with the following functions: 
 ![[Pasted image 20210402162157.png]]
 

docs/Installing Juggl.md

@@ -9,16 +9,16 @@ Installing Juggl is as easy as downloading and installing it from the 'Community
 4. Click on the 'install' button. This might take a while, Juggl is 12+mb.
 5. Activate the plugin ![[Pasted image 20210320161754.png]]
 
-# Pre-relase versions
-Pre-release versions of [[Juggl]] are available [from this link](https://www.dropbox.com/s/i285vzhqrax8pdv/v0.3.0%20rc1.zip?dl=0).
+# Pre-release versions
+There are currently no pre-release versions.
 
-## Installation instructions
-Unzip the downloaded file in `.obsidian/plugins/neo4j-graph-view/`. The easiest way to find this folder is to follow these steps:
+## Installation instructions for pre-release versions
+Unzip the downloaded file in `.obsidian/plugins/juggl/`. The easiest way to find this folder is to follow these steps:
 - Open the settings in Obsidian
 - Go to the 'Community plugins' tab
 - Make sure you deactivated safe mode
 - Click on the Open Plugins Folder icon: ![[Pasted image 20210320161536.png]]
-- In the resulting folder, create the neo4j-graph-view folder if you haven't already, then extract the downloaded file in there.
+- In the resulting folder, create the `juggl` folder if you haven't already, then extract the downloaded file in there.
 - Activate the plugin ![[Pasted image 20210320161754.png]]
 
 --- 

docs/Juggl.md

@@ -6,25 +6,28 @@ Welcome to the documentation of Juggl, now available on the [[Obsidian]] communi
 
 Juggl is the next generation of PKM-focused graph views! 
 
+- **Code** is on Github: https://github.com/HEmile/juggl
+- **Support the development** of Juggl:
+	- Buy me a kofi: https://ko-fi.com/Emile
+	- Sponsor me on Github: https://github.com/sponsors/HEmile
+	- Paypal.me: https://paypal.me/EvanKrieken
+
 # Features
 Juggl is a new graph view with many more features than the original [[Obsidian]] graph view. 
 ![[juggl trailer.gif]]
 ## Styling
-[[Styling|Style]] the graph in many ways:
-1.  Using a special [[Style Pane]] that is very easy to use
-2.  Using [[CSS Styling|CSS]]
-3.  Using [[YAML Styling|YAML]]
+With Juggl you have completely control over the [[Styling|Style]] of your graph. You can use a special [[Style Pane]] that is very easy to use. For more advanced styling, you can use [[CSS Styling|CSS]] and [[YAML Styling|YAML]].
 
 ## Workspace mode
 A very extensive new [[Workspace mode]] designed for keeping the focus on just the right notes. 
-**Interactivity**: You can control the highly interactive graph using a special **radial context menu** and the toolbar.
+**Interactivity**: You can control the highly interactive graph using a special **[[Workspace mode#Radial context menu|radial context menu]]** and the [[Workspace mode#Toolbar|toolbar]].
 - Select, expand and collapse nodes
 - Pin nodes in place
 - Hide and filter nodes from view
 
-**Save and load graphs** so you can always continue your work from where you left it.
+**[[Workspace mode#Saving and loading|Save and load graphs]]** so you can always continue your work from where you left it.
 
-You can choose from **four layout options**:
+You can choose from **four [[Layouts|layout]] options**:
 1. Force-directed
 2. Circle
 3. Grid
@@ -37,6 +40,7 @@ You can use "[[Juggl code fence|code fence]]s" to embed graphs within your Obsid
 - **Mobile ready!** While still buggy, the graph works on mobile
 - Has a **navigation element** that keeps an overview of the total graph
 - Supports stylable [[Link Types]]. You can use this to add labels to edges, for example
+- Supports a [[Global Graph mode|global graph]] for small vaults, and an Obsidian-like [[Local Graph mode|local graph]].
 - Ready to be extended by other plugins through the [[Juggl API]]
 
 # Implementations and licensing

docs/Roadmap.md

@@ -4,10 +4,11 @@ aliases: []
 
 
 # Juggl
-## First release
-The [[Style Pane]] will be made available in the next test release.
-
 ## Planned
+### [[Neo4j Stream]]
+A new plugin that will upload your vault to [[Neo4j Desktop]]. This feature was present in [[Neo4j Graph View Plugin]], but not in [[Juggl]]. It'll be a separate plugin to ensure non-advanced users will not have to deal with installing Neo4j, and that this is completely optional for advanced users.
+
+This plugin will not require installing Python, and will allow for [[Cypher]] querying in [[Juggl]]. 
 
 ### [[Link Types]]
 Add better support for creating and maintaining link types. Also provide new syntax for inline link types and properties on links. A discussion on syntax is in [[Link Types]].
@@ -16,6 +17,9 @@ Add better support for creating and maintaining link types. Also provide new syn
 - Preview typed links using templates
 - Autocomplete typed links
 
+### [[Style Pane]] for edges
+Makes it easier to style typed links.
+
 ### [[Juggl API]]
 It is easy using [[Cytoscape.js]] to create an API for other plugin developers to use, to interact with [[Juggl]]. This could allow extending the graph view with eg automatically adding data from external sources, such as citation graphs, or with a different syntax for creating graphs. ^82c7c4
 
@@ -30,6 +34,7 @@ The outline of a note is essentially a tree. As it is completely hierarchical wr
 
 ![](https://cdn.discordapp.com/attachments/794501737062203422/798921299404652574/JfMR9BuCHr.gif)__
 
+### Compound nodes to represent hierachies
 
 
 --- 

juggl/settings.ts

@@ -238,7 +238,7 @@ export class JugglGraphSettingsTab extends PluginSettingTab {
       new KoFi({target: containerEl});
 
       const doc_link = document.createElement('a');
-      doc_link.href = 'https://publish.obsidian.md/semantic-obsidian/Neo4j+Graph+View+Plugin';
+      doc_link.href = 'https://juggl.io';
       doc_link.target = '_blank';
       doc_link.innerHTML = 'the documentation';
 

juggl/viz/stylesheet.ts

@@ -274,7 +274,6 @@ edge:selected {
 
 :loop {
   display: none;
-  width: mapData(edgeCount, 1, 30, 0.1, 1);
 }
 
 edge[type] {