Home

Configuration

Learn how to set up Illuminate's configuration to add your custom images, metadata, and navigation structure to your documentation site.

Overview

The configuration file (illuminate.config.js) for Illuminate is located in the src directory. Use this file to customize your documentation for your organization and project.

Images

Add your images to replace the social media preview, favicon, and logo used for your documentation project by replacing the corresponding files in the images folder. Make sure to update the paths in the site metadata section, if necessary.

Image	Width × height (px)	Supported file types	Used for
Social media preview (`image`)	1280 × 640	JPEG, JPG, PNG, or GIF	Image preview used when sharing links in social media.
Favicon (`icon`)	512 × 512	JPEG, JPG, PNG, WebP, TIFF, GIF or SVG	Browser favicon and progressive web app (PWA) icons.
Logo (`logo`)	(any width) × 80	JPEG, JPG, PNG, WebP, TIFF, GIF or SVG	Logo that appears at the top of the site in the header.

Site metadata

The siteMetadata section is used to populate meta tags in the head element in the final HTML for optimal SEO. It is also used to generate a preview card when sharing content on social media via Open Graph (OG) Protocol and Twitter (X) Cards tags.

Properties

Property	Type	Description
`title` required	string	Title of the documentation website. Populates the meta tags for `title`, `og:title`, and `twitter:title`.
`description` required	string	Description of the documentation website. Populates the meta tags for `description`, `og:description`, and `twitter:description`.
`author` required	string	Name of the person or organization who owns the project. Populates the meta tag for `author`.
`url` required	string	Base URL of the documentation website. Populates the meta tags for `og:url` and `twitter:url`.
`image` required	string	Name of the image file to use for social media cards when linking to the website. The default value is `og-image.png`. Populates meta tags for `og:image` and `twitter:image`
`icon` required	string	Name of the image file to use for the browser favicon and PWA icons. The default value is `icon.png`. Populates meta tags for `favicon`.
`logo` required	string	Name of the image file to use for the logo that appears in the header at the top of the site. The default value is `logo.svg`.

Example

illuminate.config.js


...
siteMetadata: {
	title: "Illuminate Documentation",
	description: "Learn how to create a documentation website with Illuminate."
	author: "Heather Warnke",
	url: "https://illuminate-docs.netlify.app",
	image: "og-image.png",
}
...

HTML output

The settings in the example above will generate the following metadata in the HTML head element:

index.html


...
<!-- HTML Meta Tags -->
<title>Welcome to Illuminate | Illuminate Documentation</title>
<link rel="icon" href="/favicon-32x32.png" type="image/png" />
<meta
  name="description"
  content="Learn how to create a documentation website with Illuminate."
/>
<meta name="author" content="Heather Warnke" />
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://illuminate-docs.netlify.app/" />
<meta property="og:type" content="website" />
<meta
  property="og:title"
  content="Welcome to Illuminate | Illuminate Documentation"
/>
<meta
  property="og:description"
  content="Learn how to create a documentation website with Illuminate."
/>
<meta property="og:image" content="og-image.png" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta
  name="twitter:title"
  content="Welcome to Illuminate | Illuminate Documentation"
/>
<meta
  name="twitter:description"
  content="Learn how to create a documentation website with Illuminate."
/>
<meta name="twitter:image" content="og-image.png" />
...

The navigation section is used to organize and populate all the links to each document page in the sidebar navigation. Organize your pages into groups. For each page, include the title you want to appear in the navigation menu and the relative path to the MDX file.

Properties

Property	Type	Description
`group` required	string	Name for the category to group pages in the sidebar navigation.
`pages` required	array	List of pages to include in the corresponding group.

Page properties

Property	Type	Description
`title` required	string	Title of the document page.
`path` required	string`<url>`	Relative path of the page file in the `docs` directory.

Example

illuminate.config.js


  ...
  navigation: [
    {
      group: "Introduction",
      pages: [
        {
          title: "About",
          path: "/introduction/about",
        },
        {
          title: "Quick Start",
          path: "/introduction/quick-start",
        },
        {
          title: "Project Structure",
          path: "/introduction/project-structure",
        },
        {
          title: "Roadmap",
          path: "/introduction/roadmap",
        },
      ],
    },
    {
      group: "Guides",
      pages: [
        {
          title: "Configuration",
          path: "/guides/configuration",
        },
        {
          title: "Markdown and MDX",
          path: "/guides/markdown-and-mdx",
        },
        {
          title: "Code Blocks",
          path: "/guides/code-blocks",
        },
        {
          title: "Search",
          path: "/guides/search",
        },
      ],
    },
    {
      group: "Components",
      pages: [
        {
          title: "Accordions",
          path: "/components/accordions",
        },
        {
          title: "Callouts",
          path: "/components/callouts",
        },
        {
          title: "Cards",
          path: "/components/cards",
        },
        {
          title: "Tabs",
          path: "/components/tabs",
          badge: "New",
        },
        {
          title: "CH.Code",
          path: "/components/ch-code",
        },
        {
          title: "CH.Section",
          path: "/components/ch-section",
        },
        {
          title: "CH.Scrollycoding",
          path: "/components/ch-scrollycoding",
        },
        {
          title: "CH.Spotlight",
          path: "/components/ch-spotlight",
        },
        {
          title: "CH.Slideshow",
          path: "/components/ch-slideshow",
        },
      ],
    },
  ],
...

Illuminate Documentation

Overview

Images

Site metadata

Properties

Example

HTML output

Navigation

Properties

Page properties

Example