Guides

Step-by-step guides to help you get the most out of Hermes.

Creating a New Page

1. Create a new .mdx file in src/content/docs/
2. Add frontmatter with metadata:

---
title: My New Page
description: Page description
order: 5
---

3. Write your content using Markdown or MDX
4. The page will automatically appear in the navigation

Customizing the Theme

Edit tailwind.config.mjs to customize colors:

theme: {
  extend: {
    colors: {
      primary: {
        // Your color palette
      }
    }
  }
}

Adding Search

Search is enabled by default. To use Algolia:

1. Set environment variables:

   • PUBLIC_ALGOLIA_APP_ID
   • PUBLIC_ALGOLIA_API_KEY
   • PUBLIC_ALGOLIA_INDEX_NAME

2. Update src/config.ts with your Algolia credentials

Versioning

To add versioning:

1. Add version to page frontmatter:

---
version: 'v2'
---

2. Update versions in src/config.ts

3. Use the version switcher in the sidebar

Custom Components

Create custom MDX components in src/components/mdx/:

---
interface Props {
  // Your props
}
---

<div class="my-component">
  <slot />
</div>

Then use them in your MDX files:

import MyComponent from '@components/mdx/MyComponent.astro';

<MyComponent>
  Content here
</MyComponent>