Zuplo
Configuration

​Page Configuration

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.

The page configuration allows you to customize the main aspects of your Dev Portal site's appearance and behavior.

​Basic Configuration

Configure the page settings in your zudoku.config.tsx file under the page property:

const config: ZudokuConfig = {
  page: {
    pageTitle: "My API Documentation",
    logo: {
      src: {
        light: "/path/to/light-logo.png",
        dark: "/path/to/dark-logo.png",
      },
      alt: "Company Logo",
    },
    // Other options...
  },
};
tsx

​Available Options

​Page Title

Set the title of your site next to the logo in the header:

page: {
  pageTitle: "My API Documentation";
}
tsx

Configure the site's logo with different versions for light and dark themes:

page: {
  logo: {
    src: {
      light: "/light-logo.png",
      dark: "/dark-logo.png"
    },
    alt: "Company Logo",
    width: "120px" // optional width
  }
}
tsx

Add a banner message to the top of the page:

page: {
  banner: {
    message: "Welcome to our beta documentation!",
    color: "info", // "note" | "tip" | "info" | "caution" | "danger" or custom
    dismissible: true
  }
}
tsx

​Footer

The footer configuration has its own dedicated section. See the Footer Configuration page for details.

​Complete Example

Here's a comprehensive example showing all available page configuration options:

page: {
  pageTitle: "My API Documentation",
  logo: {
    src: {
      light: "/images/logo-light.svg",
      dark: "/images/logo-dark.svg"
    },
    alt: "Company Logo",
    width: "100px"
  },
  banner: {
    message: "Welcome to our documentation!",
    color: "info",
    dismissible: true
  },
}
tsx
SearchFooter