Configuration

Footer Configuration

The footer is a customizable component that appears at the bottom of every page in your Dev Portal site. You can configure various aspects of the footer including its position, columns, social links, copyright notice, and logo.

Basic Configuration

The footer is configured in your zudoku.config.tsx file under the page.footer property:

Code(tsx)
 
const config: ZudokuConfig = {
  site: {
    footer: {
      // Footer configuration goes here
      position: "center",
      copyright: `© ${new Date().getFullYear()} YourCompany LLC. All rights reserved.`,
      // Other options...
    },
  },
  // Other configuration...
};

Position

You can control the horizontal alignment of the footer content using the position property:

Code(tsx)
 
footer: {
  position: "center"; // default
  // or
  position: "start";
  // or
  position: "end";
}

This affects how the content in the footer's main row is positioned horizontally.

Columns

The footer can include multiple columns of links, each with its own title:

Code(tsx)
 
footer: {
  columns: [
    {
      title: "Product",
      position: "center", // position in grid, optional: start, center, end
      links: [
        { label: "Features", href: "/features" },
        { label: "Pricing", href: "/pricing" },
        { label: "Documentation", href: "/docs" },
        { label: "GitHub", href: "https://github.com/org/repo" }, // Auto-detected as external
      ],
    },
    {
      title: "Company",
      links: [
        { label: "About", href: "/about" },
        { label: "Blog", href: "/blog" },
        { label: "Contact", href: "/contact" },
      ],
    },
  ];
}

Each column can have its own positioning with the position property, which can be "start", "center", or "end". This controls how the column is positioned within the footer grid.

Social Media Links

You can add social media links to your footer:

Code(tsx)
 
footer: {
  social: [
    {
      icon: "github",
      href: "https://github.com/yourusername",
    },
    {
      icon: "twitter",
      href: "https://twitter.com/yourhandle",
      label: "Follow us", // optional label text
    },
  ];
}

The icon property currently can be one of the following values:

Or you can provide a custom React component.

Copyright Notice

Add a copyright notice with the copyright property:

Code(tsx)
 
footer: {
  copyright: `© ${new Date().getFullYear()} YourCompany LLC. All rights reserved.`;
}

Logo

You can add a logo to your footer:

Code(tsx)
 
footer: {
  logo: {
    src: {
      light: "/path/to/light-logo.png",
      dark: "/path/to/dark-logo.png"
    },
    alt: "Company Logo",
    width: "120px" // optional width
  }
}

Customizing with Slot

Dev Portal provides footer-before and footer-after slots that allow you to insert custom content before or after the main footer columns:

Code(tsx)
 
// In your zudoku.config.tsx
slots: {
  "footer-before": () => (
    <div>
      <h3>Custom pre-footer content</h3>
      <p>This appears before the columns</p>
    </div>
  ),
  "footer-after": () => (
    <div>
      <p>Additional footer content</p>
    </div>
  )
}

Complete Example

Here's a complete example showing all footer options:

Code(tsx)
 
footer: {
  position: "center",
  columns: [
    {
      title: "Product",
      position: "start",
      links: [
        { label: "Features", href: "/features" },
        { label: "Pricing", href: "/pricing" },
        { label: "Documentation", href: "/docs" }
      ]
    },
    {
      title: "Resources",
      position: "center",
      links: [
        { label: "Blog", href: "/blog" },
        { label: "Support", href: "/support" },
        { label: "GitHub", href: "https://github.com/yourusername" } // Auto-detected as external
      ]
    }
  ],
  social: [
    { icon: "github", href: "https://github.com/yourusername" },
    { icon: "linkedin", href: "https://linkedin.com/company/yourcompany", label: "LinkedIn" }
  ],
  copyright: `© ${new Date().getFullYear()} YourCompany LLC. All rights reserved.`,
  logo: {
    src: {
      light: "/images/logo-light.svg",
      dark: "/images/logo-dark.svg"
    },
    alt: "Company Logo",
    width: "100px"
  }
}