#help

16 messages · Page 1 of 1 (latest)

sturdy rose
#

how do i set the website's name on the top bar as an image instead of its actual name in starlight?

ivory geyserBOT
#

Hi @sturdy rose. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To set the website's name on the top bar as an image instead of its actual name in Starlight, you can use the logo configuration option. Here's how you can do it:

  1. First, add your logo image file to the src/assets/ directory of your Starlight project.

  2. Then, in your astro.config.mjs file, configure the Starlight integration to use your logo. You'll need to set the logo.src option and optionally use the replacesTitle property to hide the text title:

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'Your Site Title',
      logo: {
        src: './src/assets/your-logo.svg',
        replacesTitle: true,
      },
    }),
  ],
});

Make sure to replace './src/assets/your-logo.svg' with the actual path to your logo file.

The replacesTitle: true option will visually hide the text title, but it will still be included for screen readers to maintain accessibility.

For more details on customizing your logo, you can refer to the Customizing Starlight guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sturdy rose Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sturdy rose
#

@ivory geyser where do i put this image?

ivory geyserBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Based on the information provided in the knowledge sources and our previous conversation, you should put your logo image in the src/assets/ directory of your Starlight project.

Specifically, as mentioned in the Customizing Starlight guide:

  1. Add your logo image file to the src/assets/ directory:
src/
  assets/
    my-logo.svg  <-- Put your image here
  content/
    ...
astro.config.mjs
  1. Then, in your astro.config.mjs file, you'll reference this path when configuring the logo:
starlight({
  title: 'Your Site Title',
  logo: {
    src: './src/assets/my-logo.svg',
    replacesTitle: true,
  },
}),

Make sure to replace 'my-logo.svg' with the actual filename of your logo image. The path in the configuration should be relative to the root of your project, which is why it starts with './src/assets/'.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sturdy rose Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sturdy rose
#

@ivory geyser how do i now make 2 different logos, 1 for light mode, the other for dark mode?

ivory geyserBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

To create two different logos for light and dark modes in Starlight, you can use the light and dark options in the logo configuration. Here's how you can set it up:

  1. First, add both of your logo image files to the src/assets/ directory. For example:

    src/
  assets/
    light-logo.svg
    dark-logo.svg
  content/
    ...
astro.config.mjs

  2. Then, in your astro.config.mjs file, configure the Starlight integration to use both logos:

    import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'Your Site Title',
      logo: {
        light: './src/assets/light-logo.svg',
        dark: './src/assets/dark-logo.svg',
      },
    }),
  ],
});

This configuration tells Starlight to use light-logo.svg in light mode and dark-logo.svg in dark mode.

You can find more details about this in the Customizing Starlight guide, which states:

"You can display different versions of your logo in light and dark modes.

  1. Add an image file for each variant to src/assets/:

    src/
  assets/
    light-logo.svg
    dark-logo.svg

  2. Add the path to your logo variants as the light and dark options instead of src in astro.config.mjs:

    starlight({
  logo: {
    light: './src/assets/light-logo.svg',
    dark: './src/assets/dark-logo.svg',
  },
}),
```"
#

Remember to replace the filenames with your actual logo filenames. This setup will automatically switch between the two logos based on the current theme of your Starlight site.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sturdy rose Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sturdy rose
#

@ivory geyser how to disable "next/previous page" buttons from splash pages in starlight?

ivory geyserBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

To disable the "next/previous page" buttons (also known as pagination) from splash pages in Starlight, you can use the prev and next frontmatter fields. Here's how you can do it:

  1. In the frontmatter of your splash page (the page where you've set template: splash), add the following:
---
title: Your Splash Page Title
template: splash
prev: false
next: false
---

By setting both prev and next to false, you're telling Starlight to hide both the previous and next page links for this specific page.

This approach is based on the information from the Frontmatter Reference:

"Overrides the global pagination option. If a string is specified, the generated link text will be replaced and if an object is specified, both the link and the text will be overridden."

And similarly for the next option:

"Same as prev but for the next page link."

By setting these to false, you're effectively disabling the pagination for your splash page.

Remember, this method disables the pagination on a per-page basis. If you want to disable pagination globally for all pages, you can do so in your astro.config.mjs file by setting the pagination option to false in your Starlight configuration:

starlight({
  title: 'Your Site Title',
  pagination: false,
  // other options...
}),

This information comes from the Configuration Reference.

User: how do i disable the footer entirely?

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: