Add tutorial for symbol and string collection

Signed-off-by: Keshav Priyadarshi <[email protected]>

docs/index.rst

@@ -32,6 +32,7 @@ you’ll find information on:
     tutorial_api_analyze_package_archive
     tutorial_license_policies
     tutorial_vulnerablecode_integration
+    tutorial_web_ui_symbol_and_string_collection
 
 .. toctree::
     :maxdepth: 2

docs/tutorial_web_ui_symbol_and_string_collection.rst

@@ -0,0 +1,93 @@
+.. _tutorial_web_ui_symbol_and_string_collection:
+
+Symbol and String Collection (Web UI)
+=====================================
+
+In this tutorial we'll introduce the different addon pipeline that can be used for
+collecting symbols and strings from codebase resources.
+
+.. note::
+    This tutorial assumes that you have a working installation of ScanCode.io.
+    If you don't, please refer to the :ref:`installation` page.
+
+Throughout this tutorial, we will use this resource for symbol and string collection.
+
+.. image:: images/tutorial-web-ui-symbol-and-string-collection-demo-resource.png
+
+Ctags Symbols
+-------------
+
+- Open any existing projects containing a few resources.
+
+- Click on the **"Add pipeline"** button and select the **"collect_symbols"**
+  pipeline from the dropdown list.
+  Check the **"Execute pipeline now"** option and validate with the **"Add pipeline"**
+  button.
+
+.. warning::
+    The ``collect_symbols`` pipeline requires ``universal-ctags``, please refer
+    to the :ref:`system_dependencies`.
+
+- Once the pipeline run completes with success, you can reach the **Resources** list view
+  by clicking the count number under the **"RESOURCES"** header:
+
+.. image:: images/tutorial-web-ui-symbol-and-string-collection-resource-link.png
+
+- Click on any code file and go to **Extra** tab, to get the resource symbols.
+
+.. image:: images/tutorial-web-ui-symbol-and-string-collection-result-ctags.png
+
+Xgettext Strings
+----------------
+
+- Open any existing projects containing a few resources.
+
+- Click on the **"Add pipeline"** button and select the **"collect_source_strings"**
+  pipeline from the dropdown list.
+  Check the **"Execute pipeline now"** option and validate with the **"Add pipeline"**
+  button.
+
+.. warning::
+    The ``collect_source_strings`` pipeline requires ``gettext``, please refer
+    to the :ref:`system_dependencies`.
+
+- Once the pipeline run completes with success, you can reach the **Resources** list view
+  by clicking the count number under the **"RESOURCES"** header:
+
+- Click on any code file and go to **Extra** tab, to get the resource strings.
+
+.. image:: images/tutorial-web-ui-symbol-and-string-collection-result-xgettext.png
+
+Tree-Sitter Symbols and Strings
+-------------------------------
+
+- Open any existing projects containing a few resources.
+
+- Click on the **"Add pipeline"** button and select the **"collect_tree_sitter_symbols"**
+  pipeline from the dropdown list.
+  Check the **"Execute pipeline now"** option and validate with the **"Add pipeline"**
+  button.
+
+- Once the pipeline run completes with success, you can reach the **Resources** list view
+  by clicking the count number under the **"RESOURCES"** header:
+
+- Click on any code file and go to **Extra** tab, to get the resource symbols and strings.
+
+.. image:: images/tutorial-web-ui-symbol-and-string-collection-result-tree-sitter.png
+
+Pygments Symbols and Strings
+-------------------------------
+
+- Open any existing projects containing a few resources.
+
+- Click on the **"Add pipeline"** button and select the **"collect_pygments_symbols"**
+  pipeline from the dropdown list.
+  Check the **"Execute pipeline now"** option and validate with the **"Add pipeline"**
+  button.
+
+- Once the pipeline run completes with success, you can reach the **Resources** list view
+  by clicking the count number under the **"RESOURCES"** header:
+
+- Click on any code file and go to **Extra** tab, to get the resource symbols and strings.
+
+.. image:: images/tutorial-web-ui-symbol-and-string-collection-result-pygments.png