Features

All basic features supported…

The Ion template supports all features from the base Starlight template. This even applies to collapsing groups, although they are handled a little different from the normal collapsing groups. To see this Theme’s groups in action, select the Example Guide in the sidebar.

If you want to remove the sidebar that comes with this template, simply comment out the sidebar component override in the astro.config.mjs file:

export default defineConfig({
  integrations: [starlight({
    // ...
    components: {
      ThemeProvider: './src/components/ThemeProvider.astro',
      ThemeSelect: './src/components/ThemeSelect.astro',
      SiteTitle: './src/components/SiteTitle.astro',
      // Sidebar: './src/components/Sidebar.astro',
      Pagination: './src/components/Pagination.astro',
      Hero: './src/components/Hero.astro',
    },
    // ...
  })],
  // ...
});

This, of course, goes for any of the component overrides in this theme. If you’d like to re-enable themes, simply comment out this part:

export default defineConfig({
  integrations: [starlight({
    // ...
    components: {
      // ThemeProvider: './src/components/ThemeProvider.astro',
      // ThemeSelect: './src/components/ThemeSelect.astro',
      SiteTitle: './src/components/SiteTitle.astro',
      Sidebar: './src/components/Sidebar.astro',
      Pagination: './src/components/Pagination.astro',
      Hero: './src/components/Hero.astro',
    },
    // ...
  })],
  // ...
});

As for the colors, you can edit them using the CSS variables in the theme.css file:

Directorynode_modules/
- …
Directorypublic/
- …
Directorysrc/
- Directoryassets/
  - …
- Directorycomponents/
  - …
- Directorycontent/
  - …
- Directoryicons/
  - …
- Directoryschemas/
  - …
- Directorystyles/
  - theme.css
  - …
- …
…

… and more ontop!

In addition to the default features & design of starlight, a couple of other things that might be useful have been added.

The Pagination component override doesn’t actually remove or change anything, it only adds a footer below the pagination. If you want to keep this footer, and want to modify it’s contents, head over to this file:

Directorynode_modules/
- …
Directorypublic/
- …
Directorysrc/
- Directoryassets/
  - …
- Directorycomponents/
  - Pagination.astro
- Directorycontent/
  - …
- …
…

To edit the footer, simply put your own text, icons and code into the footer:

<!-- ... -->

<div class="page-footer">
  <div class="footer-links">
    <span>©️ John Doe</span>
    <span>—</span>
    <a href="https://example.com/">Homepage</a>
  </div>
  <div class="social-footer-icons">
    <a href="https://github.com/octocat" aria-label="GitHub Icon"><Icon name="github" size='1.25rem' /></a>
    <a href="https://twitter.com/astrodotbuild" aria-label="Twitter Icon"><Icon name="twitter" size='1.25rem' /></a>
  </div>
</div>

As mentioned before, the sidebar has received a big overhaul with this theme. To add to the new style, there’s now an easy way to add Icons to any group or link.

Groups

Since this theme doesn’t show lower-level groups and instead expects you to have markdown files with the same slug as the folder, only top-level groups are supported. This is how you add any SVG as an icon to a top-level group:

Create a .astro file for the SVG

To add an icon, head over to the icons directory:
- Directorynode_modules/
  - …
- Directorypublic/
  - …
- Directorysrc/
  - Directoryassets/
    …
  - Directorycomponents/
    …
  - Directorycontent/
    …
  - Directoryicons/
    …
  - …
- …
Create a new .astro file, with the filename as the name of the icon:
- Directorynode_modules/
  - …
- Directorypublic/
  - …
- Directorysrc/
  - Directoryassets/
    …
  - Directorycomponents/
    …
  - Directorycontent/
    …
  - Directoryicons/
    rocket.astro
  - …
- …
Put the SVG code into the newly created file:
```
<svg width="16px" height="16px"></svg>
```
A size of 16px is recommended.

Reference the icon in your astro.config.mjs:

export default defineConfig({
  integrations: [starlight({
    // ...
    sidebar: [{
      label: '[rocket] Launch Information',
      autogenerate: {
        directory: 'launch-info'
      }
    }],
    // ...
  })],
  // ...
});

Links / Files

For individual links specified in your astro.config.mjs, you can add icons the same way as groups. For files, you can simply reference the icon in the Frontmatter title:

---
title: "[rocket] Above and beyond"
# ...
---

This will add the icon in the sidebar and on the site’s header. To avoid putting it next to the header of the site itself, speficy the icon as such:

---
title: "Above and beyond"
description: "An example page."
sidebar:
  label: "[rocket] Above and beyond"
# ...
---

This will only add the icon to the sidebar, not the header.

Header Badges I'm a Badge!

Starlight provides a way for you to add badges to items in the sidebar. This is great for drawing attention to certain links. Often times, this is used to show that something has been updated. However, when following the link, there is no way to tell which part of the page has been updated.

To combat this, the Ion theme ships with a <HeaderBadge /> component! To use it, simply add it behind any header, like so:

import HeaderBadge from '@/components/HeaderBadge.astro';

### Example <HeaderBadge text="I'm a Badge!" />

Finishing up

Thanks for using the Ion theme! Feel free to delete this file, or keep it around if you want to check out the included features again. If you like this theme, you can give it a Star on GitHub, and if you feel inclined to, you can become one of my Patreon members.

You’ll be featured on my Homepage!