editing dialogue
If you noticed a spelling error or grammatical issue in one of netnet's speech bubbles and you want to help fix it, then you're in the right place!
If you want a deeper dive into how these speech bubbles work refer to the netnet Dialogue System document.
The process goes like this...
- Fork the repository
- Find the dialogue you want to edit
- Edit the code for that dialogue
- Create a "pull request" to contribute your edit
If you haven't already created a "fork" of our repo, you'll need to do this first!
First, click on the Fork icon on the top-right hand corner of netnet's repo page, the fork icon should also be on the top-right corner of this page. This will create a linked copy (fork) of our repo onto your personal GitHub account. You can't edit our repo directly, but you will be able to edit your fork of our repo and later submit those edits via a "pull request" (more on that later).
For more information on forks click here!
The majority of netnet's dialogue can be found in the project's www/convos directory. There you'll find a list of directories named after their corresponding "widget" each with an index.js file containing the dialogue and related logic. Most of netnet's dialogue is associated with one widget or another.
For example, if you want to edit the dialogue triggered in the "student session" widget (as seen in the screenshot at the top of this doc), then this is where/how you'd find that text...
That text can be found in the /www/convos/student-session/index.js, specifically on line 266.
➡️ Helpful Tip: It's not always obvious which widget triggers the dialogue speech bubble you are looking for. If you ever get lost trying to find the text you're looking for, you can always use GitHub's repo search bar to find the file that contains the line of dialogue you're trying to edit. At the time of this writing GitHub does not let you search fork's, but you can use the search on our repo to find the file, then edit your forked version of that same file.
Once you've forked the netnet.studio repo and you've found the file containing the text you want to edit, next click on the pencil icon on the top-right of the file to start editing it.
➡️ Helpful Tip: After that you might also want to enable "Soft Wrap" so you don't need to keep horizontally scrolling through the file to read longer lines of dialogue.
NOTE: You will only see the edit/pencil icon if you are searching your fork of the repo. You are not be able to directly edit netizen.org's netnet repo.
Once you've found the text you want to edit, like a misspelled word for example, simply edit that word and then scroll down to the bottom of the page to "Commit" the "change". Leave a brief comment explaining what you changed (if there's lots to explain about the edit you made, you can optionally fill in the "extended description" below that) then click the green "commit change" button to save your edit to your fork.
For more information on commits click here!
The dialogue that appears inside of netnet's speech bubble will always be a string defined next to the content: property of a dialogue object, whereas any text appearing in the pink response bubbles below the speech bubble will be defined inside the options: object below it's corresponding content text.
Lines of dialogue exist as JavaScript strings, there are different ways to write JavaScript strings:
'like this' // classic single quote string
"like this" // classic double quote string
`like this` // template literal stringsTo keep things consistent (conforming to the standard JS style guide), we use single quotes to create strings, except where we need to pass special variables into the strings, in which case we use template literal strings.
For Example:
'hey, what\'s up?', notice the\before the apostrophe, that's how you "escape" characters in JavaScript strings, so that it's interpreted as an apostrophe character and not the JavaScript string syntax.
When editing template literal strings you do not need to escape any apostrophes or single quotes because they can just be written normally without the escape character.
Netnet's dialogue can also contain HTML.
For Example: This would be a
<b>bold</b>text, this would appear<i>italic</i>and this would be<a href="http://netizen.org" target="_blank">a link</a>.
Keep this in mind while searching the repo for text you're trying to edit. In netnet's speech bubble the code above would appear like this:
"This would be a bold text, this would appear italic and this would be a link"
If you search for "a bold text" it won't return any search results, because the actual code appears like a <b>bold</b> text.
If the text you're trying to edit is defined as a template literal string, instead of a single quote string, it means that somewhere in that string there is a variable being passed into it. A variable will look like ${this}.
For example:
content: `Every time you press <b>${hotkey}+S</b> I'll save the current status of the studio: the current layout, any code we've written in my editor and any opened widgets along with their positions. This way if you leave and comeback we can pick up where you last left off.`This is what the code for the dialogue example shown in the netnet screenshot above looks like. The ${hotkey} is a special variable that changes depending on the user's platform (CMD+S for Mac, CTRL+S for Windows and Linux), it's also between HTML <b> tags so as to appear bold.
🆗 That said, if you do happen to make a mistake it's not the end of the world. We will catch it during "code review" and let you know how to fix it, so don't be afraid to edit anything!
For more information on template literal strings click here!
Once you've edited and committed a change to your forked repo it's now time to make that an official contribution to netnet.studio by opening up a "pull request"! A pull request or "PR" is how you let us know that you've made an edit you think we should include in our repo.
Navigate to the Pull Request (PR) tab on either our repo's page or your forked repo's page. Click on the green "New pull request"
➡️ Helpful Tip: Make sure the request is going from the main branch of your form (the right side) into the main branch of the class repo (the left side). The arrow icon between the two conveys the direction of the pull request.
NOTE: If you don't see all the drop-down menus shown in the image below, you may first need to click on the "compare across forks" link.
The PR should automatically name this new request after the commit message you left, but if not make sure to give the pull request a name/title that generally explains any/all of the edits you made.
Once the PR has been opened, a page is created in the PR tab where a conversation about your contribution can take place. GitHub's PRs not only allow us to leave comments/feedback discussing your edits, but also enables us to reference specific lines of code from within the files you edited (like pull quotes). If we notice anything that needs addressing or changing before your contribution can be merged with our repo, we can start a "review" where we'll point out specific mistakes you might have made or changes we'd like you to consider.
If we do give you some feedback or request some changes, the PR will remain open and any future commits you make will automatically be registered in the PR page. Once everything looks good we'll "accept the pull request" which will "merge" your changes with our repo.
For more information on pull requests click here!
🎉 Congrats!! 🎉 You're now an official/credited contributor to netnet.studio and forever a part of the repository's git history!
If you want to learn even more about netnet's Dialogue System you can explore that doc.
If you want to make another contribution refer to our contributors guide to learn how to dive even deeper into the repo! NOTE If you plan to open another PR while your previous PR is still open, you'll need to make sure to do that on a separate "branch", you can read more about our "feature branch" workflow on our contributor workflow doc.