Add demos to readme

README.md

@@ -2,6 +2,8 @@
 
 Yarn Loom is an editor for [yarn files](https://yarnspinner.dev/). It is a version of the [Yarn Editor](https://github.com/YarnSpinnerTool/YarnEditor) re-built from the ground up to integrate seamlessly with Visual Studio Code.
 
+![demo video](./images/demo.gif)
+
 - [Yarn Loom Visual Studio Code Extension](#yarn-loom-visual-studio-code-extension)
   - [Installing](#installing)
   - [Usage](#usage)
@@ -38,6 +40,11 @@ To edit a node, double click it. This will open the node up in a text editor nex
 
 Changes saved in this text editor will be reflected in the `.yarn` file editor. Saving the open `.yarn` file will persist changes to disk, and undo/redo can be used to move back and forth between edits to a node.
 
+<details>
+  <summary>Expand for demo of editing nodes</summary>
+  <img src="./images/editing-node.gif" alt="Demo of editing a node" />
+</details>
+
 ### Renaming nodes
 
 A node can be renamed by changing its `title` after opening it up in the text editor.
@@ -50,43 +57,87 @@ Tags can be added/removed by changing the `tags` of a node after opening it up i
 
 `tags` is a space-separated list of tags.
 
+<details>
+  <summary>Expand for demo of changing node tags</summary>
+  <img src="./images/editing-tags.gif" alt="Demo of editing a node's tags" />
+</details>
+
 ### Changing a node's color
 
 Node colors can be changed by clicking the color change icon (![color change icon](./loom-editor/src/icons/symbol-color.svg)).
 
 This will bring up a list of colors to choose from. The `colorID` that you see when opening a node in the text editor corresponds to a color in this list.
 
+<details>
+  <summary>Expand for demo of changing a node's color</summary>
+  <img src="./images/changing-color.gif" alt="Demo of editing a node's color" />
+</details>
+
 ### Changing a node's position
 
 A node's position can be changed by dragging it around in the graph view of the `.yarn` file.
 
+<details>
+  <summary>Expand for demo of changing a node's position</summary>
+  <img src="./images/moving-nodes.gif" alt="Demo of move nodes around in the graph editor" />
+</details>
+
 ### Adding new nodes
 
-New nodes are added automatically when you link to them.
+New nodes are added automatically when you link to them when editing node text.
+
+You can also add new nodes by opening up the node list, scrolling to the bottom, and clicking "Add new node".
+
+<details>
+  <summary>Expand for demo of adding a new node</summary>
+  <img src="./images/adding-new-node.gif" alt="Demo of adding a new node" />
+</details>
 
 ### Deleting nodes
 
 Nodes can be deleted by clicking the garbage can/trash icon in the their title (![garbage can icon](./loom-editor.loom-editor/src/icons/trash.svg)). A confirmation message will be displayed.
 
+<details>
+  <summary>Expand for demo of deleting a node</summary>
+  <img src="./images/deleting-node.gif" alt="Demo of deleting a node" />
+</details>
+
 ### Searching
 
 The search bar can be used to search for specific nodes.
 
-When searching, nodes that do not contain the search term will be dimmed. Node containing the search term will stay solid.
+When searching, nodes that do not contain the search term will be dimmed. Nodes containing the search term will stay opaque.
+
+The "Title", "Body", and "Tags" buttons in the search bar control whether or not to search within node titles, bodies, and tags, respectfully. This is an "or" search, so if searching in all three locations and one node has "Sally" in the title, one has "Sally" in the body, and one has a tag of "Sally", then all three will show up in the search. Note that turning off all three options effectively disables the search.
 
-The "Title", "Body", and "Tags" buttons in the search bar control whether or not to search within node titles, bodies, and tags, respectfully. This is an "or" search, so if searching in all three locations and one node has "Sally" in the title, one has "Sally" in the body, and one has a tag of "Sally", then all three will show up in the search.
+<details>
+  <summary>Expand for demo of searching for nodes</summary>
+  <img src="./images/searching.gif" alt="Demo of searching for nodes" />
+</details>
 
 #### Quick tag search
 
 To quickly search for a tag, you can either click on it in the footer of a node or expand the tag list and select it from there. This will automatically fill in the search box with the tag and limit the search to tags.
 
+<details>
+  <summary>Expand for demo of quick tag searching</summary>
+  <img src="./images/quick-tag-search.gif" alt="Demo of quickly searching for tags" />
+</details>
+
 ### Switching between the graph editor and a text editor
 
-By clicking the three dots in the top-right of the open editor window, you can select "Reopen Editor With..." and choose to re-open the `.yarn` file with the default text editor. By clicking the gear icon, you can also choose
+By clicking the three dots in the top-right of the open editor window, you can select "Reopen Editor With..." and choose to re-open the `.yarn` file with the default text editor.
+
+In this menu, clicking the gear icon will set an editor as the default editor for `.yarn` files. This is useful if you want Visual Studio Code to default to opening files with the text editor.
+
+<details>
+  <summary>Expand for demo of switching between the text editor and Yarn Loom</summary>
+  <img src="./images/reopen-with-text-editor.gif" alt="Demo of switching between Yarn Loom and a text editor" />
+</details>
 
 ## Contributing, Reporting Issues/Bugs, and Technical Details
 
-If you find any issues or bugs with this extension, [please open up a new issue on the GitHub repo](https://github.com/TranquilMarmot/YarnLoom/issues/new) with as much detail as possible!
+If you find any issues or bugs with this extension, [please open up a new issue on the GitHub repo](https://github.com/TranquilMarmot/YarnLoom/issues/new) and include as much detail as possible!
 
 For juicy in-depth technical details for how this works, and how to contribute to it yourself, see [CONTRIBUTING.md](./CONTRIBUTING.md).
 

package.json

@@ -5,7 +5,7 @@
   "description": "Root package for running scripts",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/TranquilMarmot/YarnLoom.git"
+    "url": "https://github.com/TranquilMarmot/YarnLoom.git"
   },
   "dependencies": {
     "loom-common": "file:loom-common/out",