atom_editor.html 19 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]--><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Asciidoctor 1.5.4"><meta name="author" content="mitm"><title>Atom Editor for Wiki Editing</title><link rel="stylesheet" href="./asciidoctor.css">
  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  3. <link rel="stylesheet" href="./coderay-asciidoctor.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"></head><body class="article toc2 toc-left"><div id="header"><div id="toolbar"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/src/docs/asciidoc/wiki/atom_editor.adoc"><i class="fa fa-pencil-square" aria-hidden="true"></i></a><a href="https://github.com/jMonkeyEngine/wiki/new/master/src/docs/asciidoc/wiki/"><i class="fa fa-plus-square" aria-hidden="true"></i></a><input dir="auto" style="position: relative; vertical-align: top;" spellcheck="false" autocomplete="off" class="searchbox__input aa-input" id="doc-search" name="search" placeholder="Search in the doc" required="required" type="search"></div><h1>Atom Editor for Wiki Editing</h1><div class="details"><span class="author" id="author">mitm</span><br><span id="revnumber">version ,</span> <span id="revdate">2017-09-08T23:24:11.262Z</span></div><div id="toc" class="toc2"><div id="toctitle">Table of Contents</div><ul class="sectlevel1"><li><a href="#prerequisites">Prerequisites</a></li><li><a href="#downloading-the-sources">Downloading the Sources</a></li><li><a href="#updating-local-wiki-copies">Updating Local Wiki Copies</a></li><li><a href="#pushing-changes">Pushing Changes</a></li><li><a href="#wiki-template">Wiki Template</a></li><li><a href="#atom-snippets">Atom Snippets</a></li></ul></div></div><div id="content"><div id="preamble"><div class="sectionbody"><div class="paragraph"><p>Contributing to the Wiki is now easier than it ever has been. Using the Atom editor will give you an easy to use interface that is cross-platform, has code completion, syntax highlighting, instant AsciiDoctor page previewing, with an integrated GitHub client. The only thing it doesn&#8217;t do is write the page for you.</p></div></div></div>
  4. <div class="sect1"><h2 id="prerequisites">Prerequisites</h2><div class="sectionbody"><div class="olist arabic"><ol class="arabic"><li><p>Have a <a href="https://github.com/">GitHub account</a>.</p></li><li><p>Are a Wiki project member.</p></li></ol></div>
  5. <div class="paragraph"><p>If you are not a member, you fork the repository into your GitHub account and issue &#8220;Pull&#8221; requests to the Wiki repository from there.</p></div>
  6. <div class="paragraph"><p>To fork the Wiki repository into your GitHub Account:</p></div>
  7. <div class="olist arabic"><ol class="arabic"><li><p>Navigate to <a href="https://github.com/jMonkeyEngine/wiki">https://github.com/jMonkeyEngine/wiki</a>.</p></li><li><p>In the menu at the top of the page, select the <span class="icon"><i class="fa fa-code-fork"></i></span><strong>Fork</strong> button.</p></li></ol></div></div></div>
  8. <div class="sect1"><h2 id="downloading-the-sources">Downloading the Sources</h2><div class="sectionbody"><div class="olist arabic"><ol class="arabic"><li><p>Download and install the Atom editor - <a class="bare" href="https://atom.io/">https://atom.io/</a></p></li><li><p>After installation is complete, you can customize the editor by selecting the <code>Choose A Theme</code> panel followed by the <b class="button">Theme Picker</b> button.</p></li><li><p>Once you are satisfied with the customization of the editor, you will need to add several packages to make Atom AsciiDoctor compatible. Package installation is painless.</p><div class="olist loweralpha"><ol class="loweralpha" type="a"><li><p>From the <code>Install A Package</code> panel, select the <b class="button">Open Installer</b> button, or select <code><span class="menuseq"><span class="menu">Packages</span>&#160;&#9656; <span class="submenu">Settings View</span>&#160;&#9656; <span class="menuitem">Install Packages/Themes</span></span></code> from the file header.</p></li><li><p>Enter &#8220;asciidoc&#8221; in the search box and press the <b class="button">Packages</b> button.</p><div class="ulist"><div class="title">Add these packages:</div>
  9. <ul><li><p><strong>language-asciidoc</strong><br></p></li><li><p><strong>asciidoc-preview</strong><br></p></li><li><p><strong>autocomplete-asciidoc</strong></p><div class="admonitionblock tip"><table><tr><td class="icon"><i class="fa icon-tip" title="Tip"></i></td><td class="content">You can add more GitHub controls to the editor by adding the package <code><strong>git-plus</strong></code>.</td></tr></table></div></li></ul></div></li></ol></div></li><li><p>To edit the Wiki you will need to clone the wiki repository.</p><div class="olist loweralpha"><ol class="loweralpha" type="a"><li><p>From the <code>Command Palette</code> (<kbd>ctrl</kbd>+<kbd>shift</kbd> +<kbd>P</kbd> or <code><span class="menuseq"><span class="menu">Packages</span>&#160;&#9656; <span class="submenu">Command Palette</span>&#160;&#9656; <span class="menuitem">Toggle</span></span></code>), enter &#8220;git&#8221; into the search box.</p></li><li><p>Select <b class="button">GitHub: Clone</b>.</p></li><li><p>Paste the wiki the <abbr title="Uniform Resource Locator">URL</abbr> into the <code>Clone from</code> box.</p><div class="openblock"><div class="content"><div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>https://github.com/jMonkeyEngine/wiki</code></pre></div></div>
  10. <div class="paragraph"><p>The <code>To directory</code> will automatically update when you do.</p></div>
  11. <div class="admonitionblock important"><table><tr><td class="icon"><i class="fa icon-important" title="Important"></i></td><td class="content">Use the <abbr title="Uniform Resource Locator">URL</abbr> to your repository fork and clone your fork if a non-member.</td></tr></table></div></div></div></li><li><p>When you&#8217;re ready, press the <b class="button">Clone</b> button.</p><div class="paragraph"><p>The clone will take some time due to the size of the Wiki. Once cloned, a new <code>Project</code> tab will open on the left, and the <code>Git</code> and <code>GitHub Preview</code> tabs will open to the right. If they don&#8217;t, you can open the Git tab using <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>9</kbd> and the GitHub Preview tab using <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>8</kbd>. Alternatively, you can navigate the <code><span class="menuseq"><span class="menu">Packages</span>&#160;&#9656; <span class="menuitem">GitHub</span></span></code> menu. You will also notice in the lower right corner, on the <code>Status Bar</code>, you now have your GitHub control.</p></div></li></ol></div></li><li><p>Before you can commit any changes to the Wiki, you must configure at least the user.email and user.name variables for Git. You can do this via Git Bash, or manually, by following these instructions.</p><div class="ulist"><ul><li><p>Git Bash: <a href="https://help.github.com/articles/setting-your-commit-email-address-in-git/">Setting your commit email address in Git</a></p></li><li><p>Manually: <a href="https://help.github.com/articles/setting-your-commit-email-address-on-github/">Set your commit email address on GitHub</a></p><div class="olist loweralpha"><ol class="loweralpha" type="a"><li><p>Open your <code>.gitconfig</code> file (located in USER_HOME) and add:</p><div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>[user]
  12. name = yourname
  13. email = youremail</code></pre></div></div></li><li><p>To maintain your privacy, setup your email settings in your GitHub account and use the <code>users.noreply.github.com</code> email address.</p></li></ol></div></li></ul></div></li><li><p>Lastly, you will need to create a GitHub token. Follow the directions in the popup to enter the token.</p></li></ol></div>
  14. <div class="paragraph"><p>All Wiki documents live in the <code>asciidoc</code> folder, images in the <code>images</code> folder, and resources for your documents in the <code>resources</code> folder. Select an appropriate folder under each to store your new document, image or resource.</p></div>
  15. <div class="paragraph"><p>When you edit a Wiki page, the Git tab will show any unstaged changes. When you&#8217;re done making changes, you stage any or all changes, write your commit message, commit, and then push the changes.</p></div>
  16. <div class="paragraph"><p>You can preview your documents by selecting the document and using the keyboard shortcut <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>A</kbd> or by using the File header menu <span class="menuseq"><span class="menu">Packages</span>&#160;&#9656; <span class="submenu">AsciiDoc Preview</span>&#160;&#9656; <span class="menuitem">Toggle Preview</span></span>.</p></div></div></div>
  17. <div class="sect1"><h2 id="updating-local-wiki-copies">Updating Local Wiki Copies</h2><div class="sectionbody"><div class="paragraph"><p>It&#8217;s a good idea to update your local copy of the Wiki prior to commiting any changes.</p></div>
  18. <div class="paragraph"><div class="title">Members</div>
  19. <p>Update your local copy of the Wiki from the Atom Editor by issuing a Pull command prior to Commit/Push.</p></div>
  20. <div class="paragraph"><p>As a member, you issue Git commands from the Atom Editor.</p></div>
  21. <div class="paragraph"><div class="title">Non-Members</div>
  22. <p>Update your local copy of the Wiki by issuing a pull request from your forked repository to the Wiki repository prior to pushing your commit to your fork.</p></div>
  23. <div class="olist arabic"><ol class="arabic"><li><p>Go to your version of the repository on GitHub.</p></li><li><p>Click the <b class="button">New Pull Request</b> button at the top.</p><div class="admonitionblock note"><table><tr><td class="icon"><i class="fa icon-note" title="Note"></i></td><td class="content">The Wiki repository will be on the left and your repository will be on the right.</td></tr></table></div></li><li><p>Click the <b class="button">Base</b> button on the left and from the drop down list select your forked repository.</p></li><li><p>Click the &#8220;compare across forks&#8221; link.</p></li><li><p>Click the <b class="button">Head Fork</b> button and from the drop down list select the Wiki repository.</p></li><li><p>If the repositories are not identical, there will be green button <b class="button">Create pull request</b>. Click it to update your repository.</p></li><li><p>Update your local copy by doing a Pull request in Atom.</p></li></ol></div>
  24. <div class="admonitionblock important"><table><tr><td class="icon"><i class="fa icon-important" title="Important"></i></td><td class="content">As a non-member, when there is interaction between the Wiki repository and your fork, you issue commands online. When the interaction is between your forked repository and your local copy, you issue commands from Atom.</td></tr></table></div></div></div>
  25. <div class="sect1"><h2 id="pushing-changes">Pushing Changes</h2><div class="sectionbody"><div class="paragraph"><div class="title">Members</div>
  26. <p>As a member, you issue all Git commands from the Atom Editor.</p></div>
  27. <div class="paragraph"><div class="title">Non-Members</div>
  28. <p>To submit changes to the Wiki repository after pushing them to your fork:</p></div>
  29. <div class="olist arabic"><ol class="arabic"><li><p>Go to your version of the Wiki repository on GitHub.</p></li><li><p>Click the <b class="button">New Pull Request</b> button at the top.</p></li><li><p>Note that the jMonkeyEngine repository will be on the left and your repository will be on the right.</p></li><li><p>Click the green button <b class="button">Create pull request</b>. Give a succinct and informative title, in the comment field give a short explanation of the changes and click the green button <b class="button">Create pull request</b> again.</p></li></ol></div>
  30. <div class="admonitionblock important"><table><tr><td class="icon"><i class="fa icon-important" title="Important"></i></td><td class="content">As a non-member, when there is interaction between the Wiki repository and your fork, you issue commands online. When the interaction is between your forked repository and your local copy, you issue commands from Atom.</td></tr></table></div></div></div>
  31. <div class="sect1"><h2 id="wiki-template">Wiki Template</h2><div class="sectionbody"><div class="paragraph"><p>To make things even easier, you can create your own Wiki template for page creation. You must first have the <code><strong>file-templates</strong></code> package installed. You can find this package by selecting <code><span class="menuseq"><span class="menu">File</span>&#160;&#9656; <span class="submenu">Settings</span>&#160;&#9656; <span class="menuitem">Install</span></span></code> and typing &#8220;template&#8221; into the search box.</p></div>
  32. <div class="olist arabic"><ol class="arabic"><li><p>Once installed, from the <code>Command Palette</code> (<kbd>ctrl</kbd>+<kbd>shift</kbd> +<kbd>P</kbd> or <code><span class="menuseq"><span class="menu">Packages</span>&#160;&#9656; <span class="submenu">Command Palette</span>&#160;&#9656; <span class="menuitem">Toggle</span></span></code>) enter &#8220;file&#8221; into the search box.</p></li><li><p>Select <b class="button">File Templates: New Template</b>.</p></li><li><p>For <code>Template Name</code>, use <code>Jme3 Wiki Template</code>, and when ready select <b class="button">Create</b>.</p></li><li><p>From the <code>Command Palette</code>, enter &#8220;file&#8221; and select <b class="button">File Templates: Update Template</b>.</p></li><li><p>If this is the first template it will open automatically. If not, then select the <code>Jme3 Wiki Template</code> you just created and press the <b class="button">Edit Template</b> button.</p></li><li><p>Copy and paste the text below into the head of the document.</p><div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>= Enter Document Title Here
  33. :author: @author@
  34. :revnumber:
  35. :revdate: @timestamp@
  36. :relfileprefix: Enter path to asciidoc folder ../../
  37. :imagesdir: Enter path to images folder ../..
  38. :experimental:
  39. ifdef::env-github,env-browser[:outfilesuffix: .adoc]</code></pre></div></div></li><li><p>When done, close the document and when it asks you if you want to save it select <b class="button">Yes</b> .</p></li></ol></div>
  40. <div class="paragraph"><p>You can now use your template when creating new Wiki documents by opening the <code>Command Palette</code>, entering &#8220;file&#8221; into the search box, and selecting <b class="button">File Templates: New File</b>.</p></div>
  41. <div class="admonitionblock tip"><table><tr><td class="icon"><i class="fa icon-tip" title="Tip"></i></td><td class="content"><div class="paragraph"><p>To edit the template, from the <code>Command Palette</code> (<kbd>ctrl</kbd>+<kbd>shift</kbd> +<kbd>P</kbd>) type &#8220;file&#8221; into the search box and select:<br>
  42. <code><span class="menuseq"><span class="menu">File Templates: Update Template</span>&#160;&#9656; <span class="submenu">Jme3 Wiki Page</span>&#160;&#9656; <span class="menuitem">Edit Template</span></span></code></p></div>
  43. <div class="paragraph"><p>Save the edit when finished.</p></div></td></tr></table></div>
  44. <div class="paragraph"><p>See also:</p></div>
  45. <div class="paragraph"><p><a href="../wiki/wiki_header.html">Anatomy of a Wiki Header</a></p></div></div></div>
  46. <div class="sect1"><h2 id="atom-snippets">Atom Snippets</h2><div class="sectionbody"><div class="quoteblock"><blockquote>Snippets are an incredibly powerful way to quickly generate commonly needed code syntax from a shortcut.</blockquote><div class="attribution">&#8212; Atom Flight Manual: Snippets</div></div>
  47. <div class="paragraph"><p>One advantage of using Atom as an editor for the Wiki comes from the use of <a href="http://flight-manual.atom.io/using-atom/sections/snippets/">Snippets</a>. You can see a list of available snippets for your document by using the <code>Command Palette</code> (<kbd>ctrl</kbd>+<kbd>shift</kbd> +<kbd>P</kbd> or <code><span class="menuseq"><span class="menu">Packages</span>&#160;&#9656; <span class="submenu">Command Palette</span>&#160;&#9656; <span class="menuitem">Toggle</span></span></code>). Enter &#8220;snippets&#8221; into the search box and select <b class="button">Snippets: Available</b>.</p></div>
  48. <div class="paragraph"><p>The Atom AsciiDoc packages add great functionality to the editor, but they do not cover everything that&#8217;s possible when using AsciiDoctor syntax. You can customize the editor even further by adding your own snippets. I will get you started with your first snippet. Simply copy and paste the code below into your &#8220;snippets.cson&#8221; file and save. You can locate the file under <span class="menuseq"><span class="menu">File</span>&#160;&#9656; <span class="menuitem">Snippets</span></span>.</p></div>
  49. <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>'.source.asciidoc':
  50. 'Inter-Doc Cross Reference':
  51. 'prefix': 'xref'
  52. 'body': '&lt;&lt;${1:path/to/wiki/page}#,${2:custom label text}&gt;&gt;'</code></pre></div></div>
  53. <div class="paragraph"><p>Thereafter just type <kbd>xref</kbd> and hit <kbd>Tab</kbd> to insert an Inter-Document Cross Reference link. You can then use the <kbd>Tab</kbd> key to cycle through each tab stop when your ready.</p></div>
  54. <div class="paragraph"><p>You can help the jMonkey community by adding new snippets. Use your editor and edit the <a href="../wiki/atom_snippets.html">Atom Snippets</a> document. Make sure to announce any proposed changes on the <a href="https://hub.jmonkeyengine.org/">jMonkeyEngine Forum</a> under the topic &#8220;Documentation&#8221; first so others are aware and can test out your proposed change.</p></div>
  55. <hr>
  56. <div class="paragraph"><p>Next steps,</p></div>
  57. <div class="ulist"><ul><li><p>Read the Wiki <a href="https://github.com/jMonkeyEngine/wiki">README</a> page.</p></li><li><p>Add <a href="http://asciidoctor.org/docs/user-manual/#introduction-to-asciidoctor">Introduction to Asciidoctor</a> to your favorites, you will refer to it often.</p></li><li><p>Add the <a href="https://atom.io/docs">Atom Docs</a> to your favorites.</p></li><li><p>Add the <a href="http://flight-manual.atom.io/">Atom Flight Manual</a> to your favorites.</p></li><li><p>Add the <a href="http://rogerdudler.github.io/git-guide/">git - the simple guide</a> to your favorites.</p></li><li><p>Start contributing.</p></li></ul></div></div></div></div><div id="footer"><div id="footer-text">Version <br>Last updated 2018-02-04 12:04:19 +00:00</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script><script>docsearch({
  58. apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  59. indexName: 'jmonkeyengine',
  60. inputSelector: '#doc-search',
  61. debug: false // Set debug to true if you want to inspect the dropdown
  62. });</script></body></html>