Detailed guide on how to write content for Setu docs

Sample content

Sample MDX file

---
sidebar_title: Sample Page
page_title: Sample page — Setu Docs
order: 0
visible_in_sidebar: true
---

## This is heading 2
And this is a paragraph text
- And a bullet point, **in bold**

As seen above, every MDX file has two main sections — frontmatter and the actual content

Frontmatter

Frontmatter is information about the page, helping the CMS to know what to do with page.

---
sidebar_title: Overview
page_title: Test product 1 Overview
order: 0
visible_in_sidebar: true
---

Actual content

This is the content that is actually shown on the page when processed by the CMS. For help on Markdown syntax, refer this Markdown cheatsheet.

## This is heading 2
And this is a paragraph text
- And a bullet point, **in bold**

Adding a new product category and a new product

Let's start with an example. We will—

• Create a product category with name Test category and path test-category
• Create two products
  • Name Test product 1, path test-product-1
  • Name Test product 2, path test-product-2
• Create an Overview page for each product with some content in it

---

Create a product category

Create a new folder with name, 'test-category'

---

Create a product

Create two new folders with names test-product-1 and test-prodcut-2 inside test-category folder.

---

Add an entry in endpoints.json

For the product category and the new products just created above, add a new object in the endpoints.json like this,

{
      "name": "Test category",
      "path": "test-category",
      "order": 4,
      "visible_in_sidebar": true,
      "children":
      [
        {
          "name": "Test product 1",
          "path": "test-product-1",
          "order": 0,
          "visible_in_sidebar": true
        },
        {
          "name": "Test product 2",
          "path": "test-product-2",
          "order": 1,
          "visible_in_sidebar": true
        }
      ]
  }

Add some content

Create a file overview.mdx inside test-product-1 and add some sample content like this—

---
sidebar_title: Sample Page
page_title: Sample page — Setu Docs
order: 0
visible_in_sidebar: true
---

## This is heading 2
And this is a paragraph text
- And a bullet point, **in bold**

Create a similar mdx file inside test-product-2 and we are done!

Hiding pages from the sidebar

You can hide pages, products, or entire categories from the sidebar navigation while keeping them accessible via direct URL. This is useful for:

• Deprecated pages that shouldn't be discoverable but need to remain accessible for existing links
• Internal or partner-specific documentation
• Draft content not yet ready for public visibility
• Sample/template content

Use the visible_in_sidebar property and set it to false.

---

Hide a specific page

In the MDX file's frontmatter, set visible_in_sidebar: false:

---
sidebar_title: Hidden Page
page_title: Hidden Page — Setu Docs
order: 0
visible_in_sidebar: false
---

The page will not appear in the sidebar but can still be accessed via its direct URL.

---

Hide an entire product

In endpoints.json, set visible_in_sidebar: false on the product:

{
  "name": "Hidden Product",
  "path": "hidden-product",
  "order": 0,
  "visible_in_sidebar": false
}

---

Hide an entire category

In endpoints.json, set visible_in_sidebar: false on the category:

{
  "name": "Hidden Category",
  "path": "hidden-category",
  "order": 4,
  "visible_in_sidebar": false,
  "children": [...]
}

Using React components in MDX files

List of all components and their usage can be found by visiting https://docs.setu.co/sample-category/sample-product/sample-page

Code of these components can be found in sample-category folder in this repo

Uploading images

If you wish to use images in docs, you can upload them directly to GCP Cloud storage in strapi-assests bucket as a public file. You can use the public URL in our docs content to render the required image.