HomePaymentsNo-codeDevelopersContribute
Safepay Home PageLive DashboardTest Dashboard

Create a Document

Learn how to set up a blank document and establish a basic structure.

To create a new document, you must first have a clear idea about what your document will teach the reader. If you are not sure about this, we recommend reading our guide on How to Write Effective Developer Documentation.

Create an Empty Document

Creating a new document is straightforward:

  1. Navigate to the pages directory.
  2. Locate the folder where you want to add your document.
  3. Create an empty file with a .mdx extension.
  4. Give your document a meaningful name following the kebab case naming convention.

Does Your File Require a New Folder?

If your document needs a new folder, create one under the pages directory, or within a sub-folder of your choice. Ensure the folder name is meaningful.

Adding Metadata to Your Document

Every document requires metadata at the top to inform the compiler about how to render the content. This metadata also aids the app in handling the sidebar, table of contents, and SEO-related elements. Add the following metadata at the top of your document:

---
title: The title for your document
description: A description of what you're trying to convey with your document
hideTOC: false
sidebar_title: Overview
iconUrl: link-to-local-png-icon-image
---

Metadata Options

NameTypeDefaultDescription
titlestringundefinedRequired. The title displayed as the document heading
descriptionstringundefinedOptional. Provides additional context about the document
hideTOCbooleanfalseOptional. Set to true to hide the Table of Contents
sidebar_titlestringundefinedOptional. Specifies a different title for the sidebar
iconUrlstringundefinedOptional. Path to an image to display next to the title

Using the Components Library

This project includes a comprehensive library of prebuilt components. While you may not need all of them, some can be particularly helpful for illustrating your points. Refer to the UI Programming section for documentation on each component.

Adding a Route for Your Document

Each document needs a route to be publicly accessible. Depending on where your document file is located within the pages directory, you will need to update the routing accordingly.

1

Edit the navigation.js File

Open the constants/navigation.js file and locate the section array where you want to add your document.

2

Add the Path to the Correct Category

Assuming your document is named mydocument.mdx, located in a folder called my-folder, and you want to add it under the Home category in the Get started section, you would update the navigation.js file as follows:

Viewing Your Document

To view your document, build the project using npm run build and then serve it with npm start.

Why Can't I Use `npm run dev`?

While npm run dev would typically allow you to see changes in real-time, there is currently an issue with React Hydration that prevents updates from being properly shown through Hot Module Reloading. If you know how to resolve this, contributions via pull requests are welcome.