⌨ Online Editor

The source code of the Sphinx-Needs-Demo project can be loaded automatically in a preconfigured VS Code instance on Gitpod, which allows to change data, test some features and see the outcome as a preview in the browser. And this all without any installation or costs on your side.

Start the Online Editor

Hint

It may take up to a minute to start the Online Editor (~30s) and build the docs (~25s). After this, the documentation build is only building updated files, which is normally done in under a second.

  1. Open the following link in your browser: https://gitpod.io/#https://github.com/useblocks/sphinx-needs-demo

  2. You are asked to log in with a Gitpod or Github account.

  3. Select the editor to use. Recommended for this demo is VS Code Browser.

    _images/gitpod_config.png
  4. An instance is started, which

    1. Checks out the Sphinx-Needs-Demo repository.

    2. Installs all needed dependencies for the operating system and the Python environment.

    3. Loads preconfigured VS Code extensions, to support you with the development of the documentation.

    4. Start an initial documentation build.

    5. Shows the documentation build result as a preview in a browser.

After everything is running:

  1. Feel free to edit and save any file under docs.

  2. With each change, the docs get built automatically and you can see the result in the preview, after refreshing the page (normally by pressing F5).

_images/gitpod_editor.png

Watching the built documentation

Your specific build of the Sphinx-Needs-Demo project is publicly available and can be shared with colleagues and other users around the world, as long as your Gitpod instance is running.

You can get the link by opening the “ports” tab and copy the address entry for the port “8000”.

_images/editor_ports.gif

Open the docs in an extra browser tab has some advantages compared to the internal VS Code previewer:

  • The VS Code previewer does not show the folder and files in the URL.

  • A page reload (F5) reopens the root page and not the current page.

There is a small button in the upper right corner of the VS Code previewer, to open the shown page in a new browser tab.

Note

The browser’s pop-up policy may not allow to open this link. In this case, just allow it.

_images/editor_pop_up.png

Ideas for playing around

  1. Create a new file playground.rst under /docs/.

  2. Set a title in playground.rst:

    Playground
    ==========
    
  3. Add playground to the .. toctree:: in the /docs/index.rst file (end of the file). “Playground” shows up in the left side-menu of the built documentation.

  4. Set a needtable to get an overview of all Sphinx-Needs objects in the documentation:

    .. needtable::
    
  5. Add your own requirements:

    .. req:: My requirement
       :id: REQ_FIRST
    
  6. Add a specification and link it:

    .. spec:: My spec
       :id: SPEC_MY
       :links: REQ_FIRST
    
  7. Get the traceability tree of the Lane Keeping Assistance (NEED_001) reqirement by using needflow:

    .. needflow::
       :root_id: NEED_001
       :root_direction: outgoing
       :show_link_names:
    
  8. After taking a look into the generate needflow image, change the root_direction to incoming and watch again.

Debug the docs

If anything is not working, here are some locations where to look for the problem

Documentation build problems

In the Terminal app, you will see 3 open terminals on the right side:

  1. Build & watch docs

  2. Serve docs

  3. Preview the docs

1) Build & watch docs is the important one, because there the documentation build output is shown and therefore also all warnings and errors.

_images/gitpod_terminals.png

Extension problems

If any VS Code extension is not working as it should, or errors are popping up in the editor itself, take a look into the extension-specific output.

For this, open the Output tab. On the right side is a small select box, which shows all extensions. Select one and you see its log messages.

_images/gitpod_outputs.png

Captured Editor run

_images/editor_showcase.gif