Zuplo
Guide

​Custom pages

This documentation is for the preview version of the Dev Portal. If you are not part of the preview program, please refer to the current Dev Portal docs.

If you want to include pages in your documentation that have greater flexibility than MDX pages, it is possible to include custom pages of your own.

These pages are typically built using standard React markup and can borrow from a set of prebuild components that Dev Portal already has such as buttons, links and headers.

Start by creating the page you want to add.

​Setup a custom page

Each custom page is a page component of its own and live in a src directory at the root of your project. Let's create the <MyCustomPage /> component as an example.

From the root of your project run this command:

touch src/MyCustomPage.tsx
command

You can now open /src/MyCustomPage.tsx in the editor of your choice. It will be empty.

Copy and paste this code to implement the page:

import { Button, Head, Link } from "zudoku/components";

export const LandingPage = () => {
  return (
    <section className="">
      <Head>
        <title>My Custom Page</title>
      </Head>
      <div>
        <p>Welcome to MyCustomPage</p>
      </div>
    </section>
  );
};
tsx

​Configuration

In the Dev Portal Configuration you will need to add two things.

First, import the <MyCustomPage /> component that you created.

import { MyCustomPage } from "./src/MyCustomPage";
typescript

Next, add the customPages option to the configuration. Each page you want to add to the site must be its own object.

The path key can be set to whatever you like. This will appear as part of the URL in the address bar of the browser.

The element key references the name of the custom page component that you want to load.

{
  // ...
  customPages: [
    {
      path: "/a-custom-page",
      element: <MyCustomPage />,
    },
  ]
  // ...
}
typescript

This configuration will allow Dev Portal to load the contents of the <MyCustomPage /> component when a user clinks on a link that points to /a-custom-page.

← Previous page
Environment Variables
Next page →
Multiple APIs