Configuration

​Page Configuration

The page configuration allows you to customize the main aspects of your Zudoku 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

​Logo

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

​Banner

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

---