Startlight Docs | Astro Lounge | Page 1

chrome yew Mar 31, 2024, 9:18 PM

#

How can I setup starlight docs?

hybrid minnowBOT Mar 31, 2024, 9:18 PM

#

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

#

To set up Starlight docs, you need to follow these steps:

Add the Starlight integration: Starlight is an Astro integration. You can add it to your site by running the astro add command in your project’s root directory. Depending on your package manager, you can use one of the following commands:

npx astro add starlight

or

pnpm astro add starlight

or

yarn astro add starlight

This will install the required dependencies and add Starlight to the integrations array in your Astro config file.

Configure the integration: The Starlight integration is configured in your astro.config.mjs file. Add a title to get started:

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

export default defineConfig({
  integrations: [
    starlight({
      title: 'My delightful docs site',
    }),
  ],
});

You can find all available options in the Starlight configuration reference (https://starlight.astro.build/reference/configuration/).

Configure content collections: Starlight is built on top of Astro’s content collections, which are configured in the src/content/config.ts file. Create or update the content config file, adding a docs collection that uses Starlight’s docsSchema:

import { defineCollection } from 'astro:content';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
  docs: defineCollection({
    schema: docsSchema(),
  }),
};

Add content: Create a src/content/docs/ directory and start by adding an index.md file. This will be the homepage of your new site. Starlight uses file-based routing, which means every Markdown, MDX, or Markdoc file in src/content/docs/ will turn into a page on your site.

#

For more detailed instructions, you can refer to the manual setup guide (https://starlight.astro.build/manual-setup#_top) on the Starlight website.

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

#

@chrome yew kapa.ai is still learning and improving, please let us know how it did by reacting below

chrome yew Mar 31, 2024, 9:43 PM

#

@hybrid minnow I installed starlight by using npm create astro@latest -- --template starlight starting as a new project

I want to change the color of both theme Light and dark, how can I change it?

hybrid minnowBOT Mar 31, 2024, 9:43 PM

#

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

#

To change the color theme in Starlight, you can override its default custom properties. These variables are used throughout the UI with a range of gray shades used for text and background colors and an accent color used for links and to highlight current items in navigation.

You can use the color theme editor provided by Starlight to modify the accent and gray color palettes. The dark and light preview areas will show the resulting colors, and the whole page will also update to preview your changes.

Once you're happy with your changes, you can copy the CSS or Tailwind code provided by the color theme editor and use it in your project.

Here's a brief guide on how to do it:

Navigate to the color theme editor on the Starlight website.
Use the sliders to modify Starlight’s accent and gray color palettes.
Preview your changes in the dark and light preview areas.
Once you're satisfied with your changes, copy the CSS or Tailwind code.
Add the copied code to your project in a custom CSS file to apply this theme to your site.

Please note that when using custom themes and setting useStarlightUiThemeColors to true, you must provide at least one dark and one light theme to ensure proper color contrast.

For more detailed instructions, you can refer to the Theming guide (https://starlight.astro.build/guides/css-and-tailwind#theming) on the Starlight website.

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

#

@chrome yew kapa.ai is still learning and improving, please let us know how it did by reacting below

chrome yew Mar 31, 2024, 10:27 PM

#

@hybrid minnow how can I change the border radius of code blocks?

hybrid minnowBOT Mar 31, 2024, 10:27 PM

#

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

#

To change the border radius of code blocks in Starlight, you can use the expressiveCode configuration option. This option allows you to set Expressive Code’s styleOverrides option to override the default CSS.

Here's an example of how to set the border radius for your code blocks:

starlight({ 
  expressiveCode: { 
    styleOverrides: { 
      borderRadius: '0.5rem' 
    }, 
  },
});

In this example, the border radius of the code blocks is set to '0.5rem'. You can adjust this value to suit your needs.

For more information, you can refer to the Expressive Code section (https://starlight.astro.build/reference/configuration#expressivecode) in the Starlight Configuration Reference.

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

#

@chrome yew kapa.ai is still learning and improving, please let us know how it did by reacting below

chrome yew Apr 1, 2024, 12:21 AM

#

@hybrid minnow how can I change the border radius of Aside

hybrid minnowBOT Apr 1, 2024, 12:21 AM

#

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

#

To change the border radius of the Aside component in Starlight, you can use CSS. However, the specific class name or id of the Aside component is not provided in the given knowledge sources.

Typically, you would target the Aside component in your CSS file and set the border-radius property to your desired value. Here's a general example:

.aside-class-name {
  border-radius: 10px;
}

Replace aside-class-name with the actual class name or id of your Aside component.

Please note that this is a general approach and the actual implementation may vary based on the specific structure and styling of your Starlight project.

If you need more specific guidance, I would recommend referring to the Starlight documentation or the source code of the `Aside` component in your project.

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

#

@chrome yew kapa.ai is still learning and improving, please let us know how it did by reacting below

chrome yew Apr 1, 2024, 12:22 AM

#

@hybrid minnow how can i change Aside color

hybrid minnowBOT Apr 1, 2024, 12:22 AM

#

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

#

To change the color of the Aside component in Starlight, you can use CSS. However, the specific class name or id of the Aside component is not provided in the given knowledge sources.

Typically, you would target the Aside component in your CSS file and set the color property to your desired value. Here's a general example:

.aside-class-name {
  color: #123456;
}

Replace aside-class-name with the actual class name or id of your Aside component.

Please note that this is a general approach and the actual implementation may vary based on the specific structure and styling of your Starlight project.

If you need more specific guidance, I would recommend referring to the Starlight documentation or the source code of the `Aside` component in your project.

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

#

@chrome yew kapa.ai is still learning and improving, please let us know how it did by reacting below

chrome yew Apr 1, 2024, 7:13 AM

#

@hybrid minnow how can I change the font?

hybrid minnowBOT Apr 1, 2024, 7:13 AM

#

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

#

To change the font in Starlight, you can use custom CSS or Google Fonts via the Fontsource project. Here's how you can do it:

Using Custom CSS

Override Starlight’s default font everywhere by setting the --sl-font custom property in your custom CSS file:

:root { 
  --sl-font: 'Your Font Name', serif;
}

If you want to apply your font more selectively, you can target specific elements. For example, to only set a font on the main content, but not the sidebars:

main { 
  font-family: 'Your Font Name', serif;
}

Using Google Fonts via Fontsource

Find the font you want to use in Fontsource’s catalog (https://fontsource.org/).
Install the package for your chosen font. You can find the package name by clicking “Install” on the Fontsource font page. For example, to install the IBM Plex Serif font:

npm install @fontsource/ibm-plex-serif

Add Fontsource CSS files to Starlight’s customCss array in astro.config.mjs:

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

export default defineConfig({
  integrations: [
    starlight({
      title: 'Docs With a Custom Typeface',
      customCss: [
        '@fontsource/ibm-plex-serif/400.css',
        '@fontsource/ibm-plex-serif/600.css',
      ],
    }),
  ],
});

For more detailed instructions, you can refer to the Custom Fonts guide (https://starlight.astro.build/guides/customization#custom-fonts) on the Starlight website.

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

#

@chrome yew kapa.ai is still learning and improving, please let us know how it did by reacting below

chrome yew Apr 1, 2024, 7:17 AM

#

@hybrid minnow I added

    --sl-font: 'Plus Jakarta Sans', Sans;
  }```

how can I change the font weight

hybrid minnowBOT Apr 1, 2024, 7:17 AM

#

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

#

To change the font weight in Starlight, you can use the --sl-font-weight custom property. This property controls the font weight of the text in your Starlight site.

Here's how you can set it in your custom CSS file:

:root { 
  --sl-font: 'Plus Jakarta Sans', sans-serif;
  --sl-font-weight: 700; /* Adjust this value to your desired font weight */
}

In this example, the font weight is set to 700 which corresponds to bold text. You can adjust this value according to your needs. The value must be a number and can typically range from 100 (thin) to 900 (bold), depending on the weights available for your chosen font.

Please note that not all fonts support all font weights, so make sure the weight you want to use is available for your chosen font.

For more detailed instructions, you can refer to the Custom Fonts guide (https://starlight.astro.build/guides/customization#custom-fonts) on the Starlight website.

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

#

@chrome yew kapa.ai is still learning and improving, please let us know how it did by reacting below

chrome yew Apr 1, 2024, 7:19 AM

#

@hybrid minnow what else I can change on fonts?

hybrid minnowBOT Apr 1, 2024, 7:19 AM

#

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

#

In Starlight, you can customize various aspects of fonts including:

Font Family: You can change the font family using the --sl-font custom property.

:root { 
  --sl-font: 'Your Font Name', serif;
}

Font Weight: You can change the font weight using the --sl-font-weight custom property.

:root { 
  --sl-font-weight: 700; /* Adjust this value to your desired font weight */
}

Font Size: You can change the font size using the --sl-font-size custom property.

:root { 
  --sl-font-size: 16px; /* Adjust this value to your desired font size */
}

Line Height: You can change the line height using the --sl-line-height custom property.

:root { 
  --sl-line-height: 1.5; /* Adjust this value to your desired line height */
}

Letter Spacing: You can change the letter spacing using the --sl-letter-spacing custom property.

:root { 
  --sl-letter-spacing: 0.05em; /* Adjust this value to your desired letter spacing */
}

Please note that these are general CSS properties and their actual implementation may vary based on the specific structure and styling of your Starlight project.

For more detailed instructions, you can refer to the Custom Fonts guide (https://starlight.astro.build/guides/customization#custom-fonts) on the Starlight website.

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

#

@chrome yew kapa.ai is still learning and improving, please let us know how it did by reacting below

chrome yew Apr 1, 2024, 8:02 AM

#

@hybrid minnow how can I increase the width of the content area

hybrid minnowBOT Apr 1, 2024, 8:02 AM

#

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

#

To increase the width of the content area in Starlight, you can use the --sl-content-width custom property. This property controls the maximum width of the main content area.

Here's how you can set it in your custom CSS file:

:root { 
  --sl-content-width: 70rem; /* Adjust this value to your desired width */
}

In this example, the content width is set to 70rem. You can adjust this value according to your needs.

For more detailed instructions, you can refer to the Custom CSS Styles guide (https://starlight.astro.build/guides/css-and-tailwind#_top) on the Starlight website.

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

#

@chrome yew kapa.ai is still learning and improving, please let us know how it did by reacting below

chrome yew Apr 1, 2024, 8:04 AM

#

@hybrid minnow how can I adjust the position of "On this page" right side menu

hybrid minnowBOT Apr 1, 2024, 8:04 AM

#

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

#

To adjust the position of the "On this page" right side menu in Starlight, you would typically use CSS. However, the specific class name or id of the "On this page" menu is not provided in the given knowledge sources.

Typically, you would target the "On this page" menu in your CSS file and set the position, top, right, bottom, or left properties to your desired values. Here's a general example:

.on-this-page-class-name {{
  position: absolute;
  top: 20px;
  right: 20px;
}}

Replace on-this-page-class-name with the actual class name or id of your "On this page" menu.

Please note that this is a general approach and the actual implementation may vary based on the specific structure and styling of your Starlight project.

If you need more specific guidance, I would recommend referring to the Starlight documentation or the source code of the "On this page" menu in your project.

#Startlight Docs

For more detailed instructions, you can refer to the manual setup guide (https://starlight.astro.build/manual-setup#_top) on the Starlight website.

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

For more detailed instructions, you can refer to the Theming guide (https://starlight.astro.build/guides/css-and-tailwind#theming) on the Starlight website.

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

For more information, you can refer to the Expressive Code section (https://starlight.astro.build/reference/configuration#expressivecode) in the Starlight Configuration Reference.

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

If you need more specific guidance, I would recommend referring to the Starlight documentation or the source code of the Aside component in your project.

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

If you need more specific guidance, I would recommend referring to the Starlight documentation or the source code of the Aside component in your project.

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

For more detailed instructions, you can refer to the Custom Fonts guide (https://starlight.astro.build/guides/customization#custom-fonts) on the Starlight website.

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

For more detailed instructions, you can refer to the Custom Fonts guide (https://starlight.astro.build/guides/customization#custom-fonts) on the Starlight website.

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

For more detailed instructions, you can refer to the Custom Fonts guide (https://starlight.astro.build/guides/customization#custom-fonts) on the Starlight website.

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

For more detailed instructions, you can refer to the Custom CSS Styles guide (https://starlight.astro.build/guides/css-and-tailwind#_top) on the Starlight website.

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

If you need more specific guidance, I would recommend referring to the Starlight documentation or the source code of the "On this page" menu in your project.

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

If you need more specific guidance, I would recommend referring to the Starlight documentation or the source code of the `Aside` component in your project.

If you need more specific guidance, I would recommend referring to the Starlight documentation or the source code of the `Aside` component in your project.