Skip to content

Commit

Permalink
Get extension ready for release
Browse files Browse the repository at this point in the history
- Set package version to 1.0.0 everywhere
- Rename loom-extension package to yarn-spinner-loom
- Add README.md to loom-extension folder
- Flesh out extension package manifest
- Add CI badge to root README.md
- Add MIT LICENSE.md file
  • Loading branch information
TranquilMarmot committed Jul 20, 2020
1 parent 712f83f commit c435b5d
Show file tree
Hide file tree
Showing 10 changed files with 200 additions and 21 deletions.
2 changes: 2 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ See [Available scripts](#available-scripts) below for commands to run tests.

To contribute to this repo, [fork it](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo), make changes and open up a pull request against the `main` branch.

**Note:** There are two nearly identical `README.md` files in this repo; [one at the root](./README.md) and [one in the `loom-extension` directory](./loom-extension/README.md). The one at the root is mainly for showing on GitHub; the one in the `loom-extension` directory is for the Visual Studio Code marketplace. All images in the `loom-extension`'s `README.md` must be direct links to the image on GitHub and not a relative path, otherwise they will not properly work.

### Available scripts

All scripts **must** be run at the root of the repo.
Expand Down
9 changes: 9 additions & 0 deletions LICENSE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
MIT License

Copyright (c) 2020 Nathaniel Moore and Yarn Spinner Contributors

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.
8 changes: 5 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
# Yarn Loom Visual Studio Code Extension
# Yarn Spinner Loom Visual Studio Code Extension

<p align="center">
<img src="./images/logo.svg" alt="Yarn Loom Logo" />
<img src="./images/logo.svg" alt="Yarn Loom Logo" height="256px" />
</P>

Yarn Loom is a Visual Studio Code extension for editing [yarn files](https://yarnspinner.dev/). It is a re-imagining of the [Yarn Editor](https://github.com/YarnSpinnerTool/YarnEditor) 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)
![Continuous Integration](https://github.com/TranquilMarmot/YarnLoom/workflows/Continuous%20Integration/badge.svg)

- [Yarn Spinner Loom Visual Studio Code Extension](#yarn-spinner-loom-visual-studio-code-extension)
- [Installing](#installing)
- [Usage](#usage)
- [Reporting Issues/Bugs, Contributing, and Technical Details](#reporting-issuesbugs-contributing-and-technical-details)
Expand Down
2 changes: 1 addition & 1 deletion lerna.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"packages": ["loom-common", "loom-editor", "loom-extension"],
"version": "0.1.0"
"version": "1.0.0"
}
2 changes: 1 addition & 1 deletion loom-editor/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion loom-editor/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "loom-editor",
"version": "0.1.0",
"version": "1.0.0",
"private": true,
"dependencies": {
"@emotion/core": "^10.0.28",
Expand Down
151 changes: 151 additions & 0 deletions loom-extension/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
# Yarn Spinner Loom

<p align="center">
<img src="./icon.png" alt="Yarn Loom Logo" />
</P>

Yarn Loom is a Visual Studio Code extension for editing [yarn files](https://yarnspinner.dev/). It is a re-imagining of the [Yarn Editor](https://github.com/YarnSpinnerTool/YarnEditor) built from the ground up to integrate seamlessly with Visual Studio Code.

![demo video](https://github.com/TranquilMarmot/YarnLoom/raw/main/images/demo.gif)

- [Yarn Spinner Loom](#yarn-spinner-loom)
- [Usage](#usage)
- [Reporting Issues/Bugs](#reporting-issuesbugs)
- [How To](#how-to)
- [Editing nodes](#editing-nodes)
- [Renaming nodes](#renaming-nodes)
- [Changing node tags](#changing-node-tags)
- [Changing a node's color](#changing-a-nodes-color)
- [Changing a node's position](#changing-a-nodes-position)
- [Adding new nodes](#adding-new-nodes)
- [Deleting nodes](#deleting-nodes)
- [Searching](#searching)
- [Quick tag search](#quick-tag-search)
- [Switching between the graph editor and a text editor](#switching-between-the-graph-editor-and-a-text-editor)
- [Special Thanks](#special-thanks)

## Usage

Once the extension is installed, simply open up a `.yarn` or a `.yarn.txt` file to use it!

## Reporting Issues/Bugs

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/choose) and include as much detail as possible!

## How To

Each of the examples below has an expandable gif that shows the editor in action.

### Editing nodes

To edit a node, double click it. This will open the node up in a text editor next to the open `.yarn` file.

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="https://github.com/TranquilMarmot/YarnLoom/raw/main/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.

Note that when renaming a node that has incoming links, it will automatically be re-created when renamed since the editor will auto-create linked nodes. To rename a node with incoming links, you must rename the outgoing links to the desired name and then delete the existing node. A future update will make this easier.

<details>
<summary>Expand for demo of renaming a node</summary>
<img src="https://github.com/TranquilMarmot/YarnLoom/raw/main/images/rename-node.gif" alt="Demo of renaming a node" />
</details>

### Changing node tags

Tags can be added/removed by changing the `tags` value in the header of a node after opening it up in the text editor.

`tags` is a space-separated list of strings.

<details>
<summary>Expand for demo of changing node tags</summary>
<img src="https://github.com/TranquilMarmot/YarnLoom/raw/main/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.

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="https://github.com/TranquilMarmot/YarnLoom/raw/main/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="https://github.com/TranquilMarmot/YarnLoom/raw/main/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 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="https://github.com/TranquilMarmot/YarnLoom/raw/main/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. A confirmation message will be displayed.

<details>
<summary>Expand for demo of deleting a node</summary>
<img src="https://github.com/TranquilMarmot/YarnLoom/raw/main/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. 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.

<details>
<summary>Expand for demo of searching for nodes</summary>
<img src="https://github.com/TranquilMarmot/YarnLoom/raw/main/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="https://github.com/TranquilMarmot/YarnLoom/raw/main/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.

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="https://github.com/TranquilMarmot/YarnLoom/raw/main/images/reopen-with-text-editor.gif" alt="Demo of switching between Yarn Loom and a text editor" />
</details>

## Special Thanks

The syntax highlighting portion of this extension was copied over from the [Yarn VSCode Extension](https://github.com/YarnSpinnerTool/VSCodeExtension) and all credit for it goes to [@desplesda](https://github.com/desplesda).

Portions of Yarn file parsing and in-editor highlighting were copied over from the [Yarn Editor](https://github.com/YarnSpinnerTool/YarnEditor) and all credit for it goes to the Yarn Editor contributors, but especially [@blurymind](https://github.com/blurymind).

The original [Yarn Spinner logo](https://yarnspinner.dev/img/YarnSpinnerLogo.png) was made by [Cecile Richard](https://www.cecile-richard.com/) and was remixed to create the logo for this extension.
4 changes: 2 additions & 2 deletions loom-extension/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 24 additions & 9 deletions loom-extension/package.json
Original file line number Diff line number Diff line change
@@ -1,38 +1,53 @@
{
"name": "loom-extension",
"displayName": "Yarn Loom",
"description": "Adds support for the Yarn Spinner dialogue language.",
"version": "1.2.0",
"homepage": "https://yarnspinner.dev",
"name": "yarn-spinner-loom",
"displayName": "Yarn Spinner Loom",
"description": "Visual editor for the Yarn Spinner dialogue language.",
"version": "1.0.0",
"homepage": "https://github.com/TranquilMarmot/YarnLoom",
"repository": {
"type": "git",
"url": "https://github.com/TranquilMarmot/YarnLoom"
},
"bugs": {
"url": "https://github.com/TranquilMarmot/YarnLoom/issues/new/choose",
"email": "nate@moore.codes"
},
"license": "MIT",
"keywords": [
"yarn spinner",
"yarnspinner",
"yarn",
"game writing",
"game development",
"gaming",
"narrative",
"tree",
"branch",
"branching",
"graph",
"dialog",
"dialogue"
],
"qna": false,
"qna": "https://github.com/TranquilMarmot/YarnLoom/issues",
"publisher": "TranquilMarmot",
"icon": "icon.png",
"galleryBanner": {
"color": "#C5E29B",
"theme": "light"
"color": "#37895F",
"theme": "dark"
},
"badges": [
{
"description": "Continuous Integration",
"href": "https://github.com/TranquilMarmot/YarnLoom/actions?query=workflow%3A%22Continuous+Integration%22",
"url": "https://github.com/TranquilMarmot/YarnLoom/workflows/Continuous%20Integration/badge.svg"
}
],
"engines": {
"vscode": "^1.44.0"
},
"categories": [
"Programming Languages"
"Programming Languages",
"Visualization"
],
"activationEvents": [
"onCustomEditor:yarnLoom.editor"
Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,17 @@
"install": "lerna exec -- npm install && lerna bootstrap",
"build:common": "lerna run --scope loom-common build",
"build:editor": "lerna run --scope loom-editor build",
"build:extension": "lerna run --scope loom-extension build",
"build:extension": "lerna run --scope yarn-spinner-loom build",
"build": "npm run build:common && npm run build:editor && npm run build:extension",
"test:common": "lerna run --scope loom-common test",
"test:extension": "lerna run --scope loom-extension test",
"test:extension": "lerna run --scope yarn-spinner-loom test",
"test:editor": "cross-env CI=true lerna run --scope loom-editor test",
"test": "cross-env CI=true lerna run test",
"package": "lerna run --scope loom-extension package",
"package": "lerna run --scope yarn-spinner-loom package",
"prettier": "prettier --write **/*.{js,ts,tsx,md,json}",
"lint:common": "lerna run --scope loom-common lint",
"lint:editor": "lerna run --scope loom-editor lint",
"lint:extension": "lerna run --scope loom-extension lint",
"lint:extension": "lerna run --scope yarn-spinner-loom lint",
"lint": "prettier --check **/*.{js,ts,tsx,md,json} && lerna run lint"
},
"devDependencies": {
Expand Down

0 comments on commit c435b5d

Please sign in to comment.