Merge pull request #192 from jahn96/documentation

Update documentation

Author: kpinnipa

Design/add_custom_snippet.png

@@ -7,7 +7,7 @@ Directories
 Code Snippets: ``snippets/``
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-This comprises the predefined code snippets for the extension. Refer to
+This comprises the sample code snippets for the extension. Refer to
 `Code Snippet Metadata`_ to learn more about the content of each code
 snippet.
 
@@ -16,11 +16,11 @@ Binder setup: ``binder/``
 This contains an environment specification for ``repo2docker`` which
 allows the repository to be tested on `mybinder.org`_. This
 specification is developer focused. For a more user-focused binder see
-the `JupyterLab demo`_
+the `JupyterLab demo`_.
 
-Test: ``test/``
-^^^^^^^^^^^^^^^
-This contains test scripts that test our codebase using jest.
+Test: ``test/`` ``cypress/``
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+``test/`` contains unit test scripts using jest. And, ``cypress/`` contains integration test scripts using Cypress.
 
 Design: ``design/``
 ^^^^^^^^^^^^^^^^^^^
@@ -41,30 +41,25 @@ Description of each file in ``src/``
 
 -  CodeSnippetContentsService.ts: this contains a wrapper class that
    uses the functions defined in @jupyterlab/contentsSerivce.
--  CodeSnippetDisplay.tsx: this contains a React component that renders
+-  CodeSnippetDisplay.tsx: this contains a major React component that defines key code snippets UI and renders
    code snippets.
 -  CodeSnippetEditor.tsx : this contains a React component that creates
    an editor for each code snippet.
 -  CodeSnippetEditorTags.tsx: this contains a React component that
    renders code snippet tags in code snippet editor.
--  CodeSnippetForm.tsx: this contains a Lumino widget that creates a
-   input form to create a new code snippet as a modal window.
--  CodeSnippetInputDialog.ts: this contains a Lumino widget that defines
+-  CodeSnippetFilterTools.tsx: this contains a react component that renders a
+   search bar and filter box.
+-  CodeSnippetInputDialog.ts: this contains a class that defines
    the content of the custom code snippet form.
 -  CodeSnippetLanguages.ts: this contains a list of supported languages
    and their corresponding icons.
--  CodeSnippetWidget.tsx: this contains a Lumino react widget that acts
-   as a container of code snippets.
--  CodeSnippetWidgetModel.ts: this contains a code snippet model that
-   keeps track of a list of code snippets being used in the extension.
--  ConfirmMessage.ts: this contains a luminio widget that creates
-   confirmation dialog as a modal window after snippet creation.
--  FilterTools.tsx: this contains a react component that renders a
-   search bar and filter box.
 -  CodeSnippetMenu.ts: this contains a lumino widget that creates dropdown
    dialog when three dots icon is clicked.
--  PreviewSnippet.ts: this contains a lumino widget used to create
-   preview minimap.
+-  CodeSnippetMessage.ts: this contains a class that creates a message as a modal window after creating, copying, or downloading snippet.
+-  CodeSnippetPreview.ts: this contains a lumino widget that creates a preview minimap.
+-  CodeSnippetService.ts: this contains a wrapper class that handles the backend storage of the code snippets in JupyterLab Settings API.
+-  CodeSnippetUtilities.ts: this contains a few utility functions that are used across the codebase.
+-  CodeSnippetWidget.tsx: this contains a Lumino react widget that acts as a container of code snippets.
 -  index.ts: this contains the activation of our extension.
 
 .. _Code Snippet Metadata: https://jupyterlab-code-snippets-documentation.readthedocs.io/en/latest/contributor/snippet_metadata.html

Design/add_snippet.png

@@ -9,6 +9,9 @@ v2.1.0
 * Improved search : can search for code, language, and name in search bar.
 * Expanded tags : now can filter by language tag and by snippet tag.
 * Added ability to download snippets to local directory.
+* Made right click to open the code snippet contextMenu possible anywhere on code snippet in addition to the three dots.
+* Made possible to create or move a snippet while snippets are filtered.
+* Set the language of a new snippet as the kernel language by default.
 * Improved snippet creation process by making description optional and allowing uppercase and spaces in snippet names.
 * Made minor UI and bug fixes.
 

Design/codeSnippetEditor.png

@@ -4,33 +4,38 @@ Features
 Creation of a New Snippet
 -------------------------
 
--  Right click and save highlighted lines of code
+.. image:: ../../Design/right_click.png
+.. image:: ../../Design/code_snippet_input_dialog.png
+
+-  Right click (or use keyboard shortcut (cmd-shift-A or ctrl-shift-A)) and save highlighted lines of code
 -  Drag cell into panel to save
 -  Select cell(s) and right click to save content as snippet
 -  Select cell(s) and use keyboard shortcut (cmd-shift-A or ctrl-shift-A) to save content as snippet
-.. image:: ../../Design/add_snippet.png
 
+.. image:: ../../Design/create_from_scratch.png
 -  Plus button to create a new snippet from scratch
-.. image:: ../../Design/add_custom_snippet.png
 
 Use of Code Snippets
 --------------------
-.. image:: ../../Design/options.png
--  Copy, Insert, Delete snippet
+
+.. image:: ../../Design/code_snippet_menu.png
+-  Copy, Insert, Edit, Download, Delete snippet
 -  Drag snippet into any JupyterLab workspace
 
 Search of Code Snippets
 -----------------------
 
-.. image:: ../../Design/search_filter.png
+.. image:: ../../Design/code_snippet_filter_box.png
 -  Scrollable/resizable snippet explorer panel displaying snippets
 -  Move snippet within snippet explorer
 -  Search bar for snippets
 -  Filter tags for snippets
+
+.. image:: ../../Design/code_snippet_preview.png
 -  Snippet preview (on the side)
 
 Edit of Existing Code Snippets
 ------------------------------
 
-.. image:: ../../Design/codeSnippetEditor.png
+.. image:: ../../Design/code_snippet_edit.png
 -  Code Snippet Editor

Design/code_snippet_edit.png

@@ -19,17 +19,22 @@ Find snippet
 
 Edit snippet
 ^^^^^^^^^^^^
-* Click 3 dots and select "Edit snippet" in dropdown.
+* Click 3 dots (or right click) and select "Edit snippet" in dropdown.
 
 Use snippet
 ^^^^^^^^^^^
 *  Drag and drop snippet using 6 dot drag icon (visible on hover) to notebook.
 
    *  Will put snippet code into a cell upon insertion.
 
-* Click 3 dots and select "Insert snippet" to insert snippet where cursor was on notebook.
-* Click 3 dots and select "Copy to clipboard" to copy snippet and paste it wherever desired.
+* Click 3 dots (or right click) and select "Insert snippet" to insert snippet where cursor was on notebook.
+* Click 3 dots (or right click) and select "Copy to clipboard" to copy snippet and paste it wherever desired.
+
+Download snippet
+^^^^^^^^^^^^^^^^
+* Click 3 dots (or right click) and select "Download snippet" and input the relative path to download. If the path is not given, it downloads it to the current directory.
+* Easy way to share snippets with others.
 
 Delete snippet
 ^^^^^^^^^^^^^^
-* Click 3 dots and select "Delete snippet" and confirm delete in dialog.
+* Click 3 dots (or right click) and select "Delete snippet" and confirm delete in dialog.