Tutorial

Improving documentation

Improving Documentation with JSDoc

Introduction

Effective documentation is crucial for maintaining a clear and understandable codebase. One powerful tool for enhancing documentation within your code is JSDoc. JSDoc is a markup language that allows you to annotate your code with structured comments, enabling automatic generation of documentation. In this guide, we will explore the uses of JSDoc and how it can improve your project's documentation.

Using JSDoc for Genereated Documentation

One of the primary uses of JSDoc is to generate documentation directly from your codebase. By adding JSDoc comments to your functions, classes, and variables, you can provide essential information that is automatically extracted and transformed into comprehensive documentation.

To use JSDoc for generating documentation, follow these steps:

  1. Markup Comments: Add JSDoc comments directly above the code elements you want to document. Use the /*_ ... _/ syntax to indicate a JSDoc comment block.

  2. Documenting Functions: Use JSDoc tags to describe function parameters, return values, and additional information. Tags like @param, @returns, and @description are commonly used for this purpose.

  3. Documenting Classes: For classes, use JSDoc comments to provide descriptions, document class properties, and document class methods. Tags like @class, @property, and @method are commonly used in this context.

  4. Running JSDoc Generation: Use a JSDoc generator tool, such as JSDoc itself or other popular tools like TypeDoc or JSDoc3, to parse your codebase and generate the documentation output. Configure the generator to target the desired output format, such as HTML or Markdown.

  5. Review and Update: Review the generated documentation and ensure it accurately represents your code. Update the JSDoc comments as needed to provide clearer explanations or additional information.

For more information on using JSDoc for generating documentation, see the JSDoc documentation or Getting started with JSDoc.

Using JSDoc for Writing Documentation

JSDoc can also be used beyond generating code documentation. Its flexible syntax and tagging system make it a valuable tool for writing other aspects of your project's documentation, such as tutorials, guides, and reference materials.

To use JSDoc for writing documentation, consider the following approaches:

  1. Tutorials and Guides: Utilize JSDoc comments to write step-by-step tutorials and guides within your codebase. By embedding tutorial content in JSDoc comments, you can keep the documentation closely tied to the relevant code, making it easier for developers to follow along and understand the concepts.

  2. Inline Examples: Use JSDoc comments to include inline code examples that demonstrate the usage of functions, classes, or modules. These examples can serve as both instructional material and a quick reference for developers.

  3. Reference Materials: JSDoc comments can be used to provide additional information in reference materials, such as explaining design patterns, outlining best practices, or clarifying complex concepts. Leverage JSDoc tags like @example or @see to link to relevant resources or code examples.

  4. Integration with Markdown: JSDoc supports Markdown within comments, allowing you to incorporate formatted text, headings, lists, and other Markdown features into your documentation. This enables you to create more visually appealing and structured content within your JSDoc comments.

Improving the MOOCs documentation with JSDoc

Within the MOOCs project folder, you will find a folder named documentation. This folder contains the documentation for the MOOCs project, written in Markdown. The documentation is divided into several sections, including a Getting Started guide, Contribution Guide, Guide for Maintainers, Technical Guide for API developers and others. You can view the documentation in the MOOCs documentation website.

The MOOCs documentation is not yet complete. There are several areas that could be improved, including:

  • More detailed explanations of the MOOCs project structure and codebase
  • Additional information on how to contribute to the project
  • More detailed explanations of the MOOCs API and how to use it
  • Additional information on how to maintain the MOOCs project
  • Additional information on how to deploy the MOOCs project
  • Project roadmap and future plans.

To improve the MOOCs documentation, you can use JSDoc to add additional documentation directly within the codebase. This will allow you to provide more detailed explanations of the code and project structure, as well as additional information on how to contribute to the project, how to use the MOOCs API, and how to maintain and deploy the project. As at the time of writing this, the documentation was built with other packages to improve the User interface, one of which is Better-docs.

Tutorials guide

This section provides an overview of the .json files used in the MOOCs documentation, specifically focusing on the tutorials folder. The .json files serve as configuration files that help structure and organize the documentation, while the tutorials folder contains the Markdown files for various tutorials.

Overview of .json Files

The .json files in the MOOCs documentation play a crucial role in organizing and categorizing the content. These files define the structure of the documentation and provide metadata for each section, tutorial, or topic. They allow maintainers and contributors to easily navigate and manage the documentation by specifying titles, creating nested structures, and linking related topics.

By using .json files, the documentation can be dynamically generated and updated based on the defined structure. This makes it easier to maintain consistency, track changes, and add new content.

The tutorials Folder

The tutorials folder within the documentation directory is dedicated to hosting tutorials on various topics related to the MOOCs platform. This folder contains a collection of Markdown files, each representing an individual tutorial.

Markdown is a lightweight markup language that allows for easy formatting and structuring of text, making it ideal for creating tutorials. Markdown files provide a simple yet powerful way to document step-by-step instructions, code examples, explanations, and other relevant information.

The tutorials folder can be organized into subfolders to further categorize and group related tutorials. This helps users easily locate and access the tutorials they need based on their specific interests or requirements.

By structuring tutorials within the tutorials folder using Markdown, contributors can contribute new tutorials, update existing ones, and ensure that the documentation remains comprehensive and user-friendly.

Overall, the combination of .json files and the tutorials folder enables a well-organized and accessible documentation structure, allowing users to navigate and explore the MOOCs platform documentation with ease.

The .json configuration

The .json configuration files are used to define the structure of the documentation and provide metadata for each section, tutorial, or topic. They allow maintainers and contributors to easily navigate and manage the documentation by specifying titles, creating nested structures, and linking related topics.

Let's explain how this structure works by looking at the tutorials.json file in the documentation / docs / tutorials / folder. This file defines the structure of the tutorials section of the documentation, including the titles, descriptions links for each tutorial.

{
  "changelog": {
    "title": "Changelog"
  },
  "environment_setup": {
    "title": "Environment Setup"
  },
  "contributing": {
    "title": "Contributing"
  }
}

In this example, the .json file defines the titles and relationships of the main sections within your documentation. The sections are represented as objects, with each object having a unique key and a "title" key-value pair. Here's how to understand this structure:

  1. "changelog" represents the "Changelog" section. The "title" key-value pair specifies the title of this section as "Changelog."

  2. "environment_setup" represents the "Environment Setup" section. The "title" key-value pair specifies the title of this section as "Environment Setup."

  3. "contributing" represents the "Contributing" section. The "title" key-value pair specifies the title of this section as "Contributing."

With this structure, your documentation folder will contain separate Markdown files for each section, named according to the keys in the .json file. For example:

- `documentation /`
    - `docs /`
        - `changelog.md`
        - `environment_setup.md`
        - `contributing.md`
        - `tutorials.json`

Each Markdown file will correspond to a section in your documentation and should contain the relevant content for that section.

This simplified structure allows you to organize your documentation into distinct sections, making it easier for readers to locate and access the specific topics they need. It provides a clear and concise way to represent the main sections of your documentation without the need for nested tutorials or complex hierarchies.

Remember to update the .json file whenever you add or modify sections to ensure that the documentation structure accurately reflects the content of your documentation.

By following this structure, you can maintain a well-organized and easily navigable documentation repository.

Nested .json configuration for tutorials

To structure tutorials and create nested tutorials within your documentation, you can use the .json file to define the hierarchy and relationships between tutorials. Here's an example of how you can structure tutorials using a .json file:

{
    "maintainers": {
        "title": "Technical guide for Maintainers",
        "children": {
            "reviewing_pr": {
                "title": "Reviewing pull requests"
            },
            "ci_workflow": {
                "title": "CI Workflow"
            },
            "secrets_and_security": {
                "title": "Secret Access/Management"
            },
            "deployment_guide": {
                "title": "Deployment Guide"
            }
        }
    },
    "api": {
        "title": "Technical guide for API developers",
        "children": {
            "api_structure": {
                "title": "API structure"
            },
            "api_authentication_flow": {
                "title": "API authentication flow"
            },
            "jwt_token_management": {
                "title": "JWT token management"
            },
            "rbac_handler_flow": {
                "title": "Role based access control flow"
            }
        }
    }
}

In this example, the .json file represents a documentation structure with two main sections: "Technical guide for Maintainers" and "Technical guide for API developers". Each section has its own set of tutorials represented as nested objects.

  1. Define the main sections or categories as top-level objects within the .json file, such as "maintainers" and "api".

  2. Within each main section, provide a "title" key to specify the title or heading for that section. For example, "Technical guide for Maintainers" and "Technical guide for API developers".

  3. Add a "children" key within each main section to define the nested tutorials. Each tutorial is represented as a child object within the "children" object.

  4. For each tutorial, provide a unique key as the object's key, such as "reviewing_pr" and "ci_workflow".

  5. Within each tutorial object, include a "title" key to specify the title or heading for that specific tutorial.

For this example here is what the folder structure would look like assuming the root folder is documentation / docs / tutorials /:

- documentation/
    - docs/
        - tutorials/
            - maintainers/
                - maintainers.md
                - reviewing_pr.md
                - ci_workflow.md
                - secrets_and_security.md
                - deployment_guide.md

            - api/
                - api.md
                - api_structure.md
                - api_authentication_flow.md
                - jwt_token_management.md
                - rbac_handler_flow.md

            - tutorials.json

In this structure:

  • The .json configuration file is located in the tutorials.json
  • The tutorials folder contains subfolders representing different sections or categories of tutorials.
  • Each section or category folder, such as maintainers and api, contains the .md files for individual tutorials.
  • Additionally, for each section or category folder, there should be an accompanying *.md file that serves as the entry overview, providing an overview of the tutorials within that section. For example, maintainers.md provides an overview of the tutorials in the "Technical guide for Maintainers" section.

The nested structure allows you to organize tutorials hierarchically, making it easier to navigate and find specific tutorials based on their topic or category.

It's important to note that the tutorial structure allows only one level of nesting. This means you can have main sections and their respective tutorials, but you cannot create further nested folders within the tutorials.

By following this folder structure and accompanying .md overview files, you can easily define the hierarchy and relationships between tutorials, allowing you to create nested tutorials and organize your documentation in a logical and structured manner.