Starlight Nova

https://starlight-theme-nova.pages.dev
Admin
Starlight Nova is a modern and beautiful theme for Starlight that provides an enhanced documentation...
Tokens:5,836
Snippets:53
Trust Score:7.2
Update:9 months ago
Show doc for...
Tokens:
Raw
### Basic Console Log Example

Source: https://starlight-theme-nova.pages.dev/components/code

A simple JavaScript example demonstrating a console log output. This snippet is intended for basic demonstration purposes.

```javascript
console.log('Hello, world!')
```

--------------------------------

### Example Console Log within Aside Component

Source: https://starlight-theme-nova.pages.dev/components/aside

Shows a simple JavaScript console log example embedded within the Aside component, demonstrating that code snippets can be included within the aside content.

```javascript
console.log('A code snippet, for example.')
```

--------------------------------

### Markdown Table Example

Source: https://starlight-theme-nova.pages.dev/guide/markdown

A basic example of a Markdown table with three columns: Name, Age, and City. Tables are used for presenting tabular data.

--------------------------------

### Install Tailwind CSS for Starlight Nova

Source: https://starlight-theme-nova.pages.dev/guide/getting-started

Installs Tailwind CSS and its dependencies using npm. This is a prerequisite for using Tailwind CSS with the Starlight Nova theme.

```bash
npm install tailwindcss @tailwindcss/vite
```

--------------------------------

### Tailwind CSS Integration

Source: https://starlight-theme-nova.pages.dev/guide/getting-started

Instructions on how to integrate Tailwind CSS with the Starlight Nova theme, including installation, CSS setup, and Astro configuration.

```APIDOC
## Use with Tailwind CSS

You can optionally use Tailwind CSS with the Starlight Nova theme. To do so, you need to:

**1. Install Tailwind CSS and its dependencies:**
```bash
npm install tailwindcss @tailwindcss/vite
```

**2. Create a `./src/styles/global.css` file and add the following content:**
```css
/** ./src/styles/global.css */
@import 'tailwindcss';
@import 'starlight-theme-nova/tailwind.css';
```

**3. Configure your Astro config file (`astro.config.mjs`):**
```javascript
// astro.config.mjs
import starlight from '@astrojs/starlight'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'astro/config'
import starlightThemeNova from 'starlight-theme-nova'

export default defineConfig({
  vite: {
    plugins: [tailwindcss()], 
  },
  integrations: [
    starlight({
      plugins: [starlightThemeNova()],
      title: 'My Docs',
      customCss: ['./src/styles/global.css'], 
    }),
  ],
})
```
```

--------------------------------

### Using LinkCard Component in Starlight Nova

Source: https://starlight-theme-nova.pages.dev/components/link-card

Demonstrates how to import and use the LinkCard component in Starlight Nova. It shows examples with and without the optional description prop. The component requires 'starlight-theme-nova/components' to be imported.

```javascript
import { LinkCard } from 'starlight-theme-nova/components'

<LinkCard title="Authoring Markdown" href="/guides/authoring-content/" />

<LinkCard
  title="Internationalization"
  href="/guides/i18n/"
  description="Configure Starlight to support multiple languages."
/>
```

--------------------------------

### Implement LinkButton Component - JavaScript

Source: https://starlight-theme-nova.pages.dev/components/link-button

Demonstrates how to import and use the LinkButton component from 'starlight-theme-nova/components'. It shows examples of different variants (primary, secondary, minimal) and icon placements (external, right-arrow, left-arrow).

```javascript
import { LinkButton } from 'starlight-theme-nova/components'

<div>
  <LinkButton href="/guide/getting-started/">Primary</LinkButton>
  <LinkButton href="/guide/markdown/" variant="secondary">
    Secondary
  </LinkButton>
  <LinkButton
    href="https://docs.astro.build"
    variant="minimal"
    icon="external"
    iconPlacement="start"
  >
    Minimal with external icon
  </LinkButton>
</div>
<div>
  <LinkButton href="/guide/markdown/" variant="secondary" icon="right-arrow">
    Right Arrow
  </LinkButton>
  <LinkButton
    href="/guide/markdown/"
    variant="secondary"
    icon="left-arrow"
    iconPlacement="start"
  >
    Left Arrow
  </LinkButton>
</div>
```

--------------------------------

### Install Starlight Theme Nova with Package Managers

Source: https://starlight-theme-nova.pages.dev/components/code-package-managers

Provides commands to install the starlight-theme-nova and @astrojs/starlight packages using different package managers. These commands are typically used for development dependencies.

```shell
pnpm add -D starlight-theme-nova @astrojs/starlight
```

```shell
npm install -D starlight-theme-nova @astrojs/starlight
```

```shell
yarn add -D starlight-theme-nova @astrojs/starlight
```

```shell
bun add -D starlight-theme-nova @astrojs/starlight
```

--------------------------------

### Usage of CodePackageManagers Component

Source: https://starlight-theme-nova.pages.dev/components/code-package-managers

Demonstrates how to import and use the `<CodePackageManagers>` component in your project. This component can display installation commands for specified packages and package managers.

```astro
import { CodePackageManagers } from 'starlight-theme-nova/components'

<CodePackageManagers
  packages="starlight-theme-nova @astrojs/starlight"
  dev={true}
/>
```

--------------------------------

### Markdown Heading with Custom ID in Markdown and MDX

Source: https://starlight-theme-nova.pages.dev/guide/markdown

Illustrates how to create Markdown headings with custom anchor IDs. This allows for direct linking to specific sections of a page. Examples are provided for both standard Markdown and MDX syntax.

```markdown
### Hello World {#my-custom-id}
```

```mdx
### Hello World \{#my-custom-id\}
```

--------------------------------

### Diff Highlighting in TypeScript Code Blocks

Source: https://starlight-theme-nova.pages.dev/guide/markdown

Explains diff highlighting for code blocks, typically used to show additions and deletions in code. This example uses TypeScript syntax to demonstrate the highlighting of added and removed lines.

```typescript
console.log('hewwo') 
console.log('hello') 
console.log('goodbye')
```

--------------------------------

### Configure Global CSS for Starlight Nova with Tailwind

Source: https://starlight-theme-nova.pages.dev/guide/getting-started

Sets up the global CSS file by importing Tailwind CSS and the Starlight Nova theme's Tailwind styles. This file should be placed at `./src/styles/global.css`.

```css
/** ./src/styles/global.css */
@import 'tailwindcss';
@import 'starlight-theme-nova/tailwind.css';
```

--------------------------------

### Configuration Options

Source: https://starlight-theme-nova.pages.dev/guide/getting-started

This section details the available configuration options for the Starlight Nova theme, focusing on the `nav` option for customizing the navigation bar.

```APIDOC
## Options

### `nav`

You can add optional navigation items to the top navigation bar by passing an array of objects to the `nav` option.

**Basic Usage:**
```typescript
starlightThemeNova({
  nav: [
    { label: 'Quick start', href: '/guide/getting-started' },
    { label: 'External link', href: 'https://example.com' },
  ],
})
```

**Multi-language Support:**
If you want to support multiple languages, you can pass an object with values for each different locale to `label` and `href`. The keys must be BCP-47 tags (e.g. `en`, `ar`, or `zh-CN`) or the `root` key to set the default value.

```typescript
starlightThemeNova({
  nav: [
    {
      label: {
        en: 'Quick start',
        'zh-CN': '快速开始',
      },
      href: {
        en: '/guide/getting-started',
        'zh-CN': '/zh-cn/guide/getting-started',
      },
    },
  ],
})
```

**Parameter Details:**
- **`nav`** (Array<NavItem> | undefined): An array of navigation items.
  - **`NavItem`** (Object):
    - **`label`** (string | Record<string, string>): The visible label for this item in the navigation. Can be a string or a record of strings with language codes as keys.
    - **`href`** (string | Record<string, string>): The link to this item’s content. Can be a string or a record of strings with language codes as keys.
```

--------------------------------

### Displaying Secondary Information with Aside Component

Source: https://starlight-theme-nova.pages.dev/components/aside

Demonstrates the basic usage of the Aside component to display secondary information. It shows how to import the component and use it with simple text content.

```astro
import { Aside } from '@astrojs/starlight/components'

<Aside>Some content in an aside.</Aside>

<Aside type="caution">Some cautionary content.</Aside>

<Aside type="tip">

Other content is also supported in asides.

```js
console.log('A code snippet, for example.')
```

Some inline markdown like [link](https://example.com), `inline code`, **bold**, _italic_, and ~~strikethrough~~.

<details>
<summary>A collapsible disclosure</summary>

Some collapsible content.

</details>

</Aside>

<Aside type="danger">Do not give your password to anyone.</Aside>

<Aside type="danger" title="Watch out!">
  A warning aside *with* a custom title.
</Aside>
```

--------------------------------

### Configure Multilingual Navigation in Starlight Nova

Source: https://starlight-theme-nova.pages.dev/guide/getting-started

Shows how to configure navigation items for multiple languages by providing an object with locale-specific values for labels and hrefs. Uses BCP-47 tags or the 'root' key for default values.

```typescript
starlightThemeNovafunction starlightThemeNova(options?: ThemeNovaOptions): StarlightPlugin({
  navThemeNovaOptions.nav?: NavItem[] | undefined: [
    {
      labelNavItem.label: string | Record<string, string>
The visible label for this item in the navigation. It could be a string or
a record of strings with the language code as the key.
: {
        enen: string: 'Quick start',
        'zh-CN': '快速开始',
      },
      hrefNavItem.href: string | Record<string, string>
The link to this item’s content. It could be a string or a record of
strings with the language code as the key.
: {
        enen: string: '/guide/getting-started',
        'zh-CN': '/zh-cn/guide/getting-started',
      },
    },
  ],
})
```

--------------------------------

### Using Starlight Nova Code Component

Source: https://starlight-theme-nova.pages.dev/components/code

Demonstrates how to import and use the custom Code component from 'starlight-theme-nova/components'. It shows passing language and code as props.

```javascript
import { Code } from 'starlight-theme-nova/components'

<Code lang="js" code={`console.log('Hello, world!')`} />
```

--------------------------------

### Configure Navigation Items in Starlight Nova

Source: https://starlight-theme-nova.pages.dev/guide/getting-started

Demonstrates how to add optional navigation items to the top navigation bar using an array of objects. Supports basic links and external URLs.

```typescript
starlightThemeNovafunction starlightThemeNova(options?: ThemeNovaOptions): StarlightPlugin({
  navThemeNovaOptions.nav?: NavItem[] | undefined: [
    { labelNavItem.label: string | Record<string, string>
The visible label for this item in the navigation. It could be a string or
a record of strings with the language code as the key.
: 'Quick start', hrefNavItem.href: string | Record<string, string>
The link to this item’s content. It could be a string or a record of
strings with the language code as the key.
: '/guide/getting-started' },
    { labelNavItem.label: string | Record<string, string>
The visible label for this item in the navigation. It could be a string or
a record of strings with the language code as the key.
: 'External link', hrefNavItem.href: string | Record<string, string>
The link to this item’s content. It could be a string or a record of
strings with the language code as the key.
: 'https://example.com' },
  ],
})
```

--------------------------------

### Configure Astro for Starlight Nova and Tailwind CSS

Source: https://starlight-theme-nova.pages.dev/guide/getting-started

Configures the Astro build process to include Tailwind CSS as a Vite plugin and the Starlight Nova theme as a Starlight plugin. It also specifies the custom CSS file for global styles.

```javascript
// astro.config.mjs
import starlight from '@astrojs/starlight'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'astro/config'
import starlightThemeNova from 'starlight-theme-nova'

export default defineConfig({
  vite: {
    plugins: [tailwindcss()], 
  },
integrations: [
    starlight({
      plugins: [starlightThemeNova()],
      title: 'My Docs',
      customCss: ['./src/styles/global.css'], 
    }),
  ],
})
```

--------------------------------

### package.json configuration file

Source: https://starlight-theme-nova.pages.dev/components/code-file

This is a standard package.json file used for Node.js projects, defining project metadata, scripts, and dependencies. It includes development scripts for building and testing the website, as well as dependencies for Astro, Starlight, and Tailwind CSS.

```json
{
  "name": "starlight-theme-nova-website",
  "type": "module",
  "version": "0.0.0",
  "private": true,
  "description": "The website for the Starlight Nova theme",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "postinstall": "astro sync",
    "test": "playwright test --max-failures 3",
    "test:update": "playwright test --update-snapshots"
  },
  "dependencies": {
    "@astrojs/starlight": "^0.37.2",
    "@tailwindcss/vite": "^4.1.18",
    "astro": "^5.16.9",
    "sharp": "^0.34.5",
    "starlight-theme-nova": "workspace:*",
    "tailwindcss": "^4.1.18"
  },
  "devDependencies": {
    "@playwright/test": "^1.57.0",
    "@sindresorhus/slugify": "^3.0.0",
    "astro-minify-html-swc": "^0.1.10"
  }
}
```

--------------------------------

### Display Badges using Starlight Nova Component

Source: https://starlight-theme-nova.pages.dev/components/badge

Demonstrates how to import and use the Badge component from '@astrojs/starlight/components' to display various types of badges. Supports different text, variants (note, success, tip, caution, danger, default), and sizes (small, medium, large).

```javascript
import { Badge } from '@astrojs/starlight/components'

<Badge text="Note" variant="note" />
<Badge text="Success" variant="success" />
<Badge text="Tip" variant="tip" size="small" />
<Badge text="Caution" variant="caution" size="medium" />
<Badge text="Danger" variant="danger" size="large" />
<Badge text="Default" />
```

--------------------------------

### Code Tabs with JavaScript and TypeScript

Source: https://starlight-theme-nova.pages.dev/guide/markdown

Shows how to create code tabs for different programming languages. Each tab displays code for a specific language, allowing users to switch between them.

```javascript
function foo() {
  console.log('Foo!')
}
```

```typescript
function bar() {
  console.log('Bar!')
}
```

--------------------------------

### Display package.json content using CodeFile (Astro)

Source: https://starlight-theme-nova.pages.dev/components/code-file

This snippet demonstrates how to use the CodeFile component in Astro to display the content of a 'package.json' file. It automatically uses the file name as the title and detects the language from the file extension. The 'path' prop is required and specifies the file's location relative to the project root.

```astro
import { CodeFile } from 'starlight-theme-nova/components'

<CodeFile path="package.json" />
```

--------------------------------

### Configure Starlight Nova Theme in Astro

Source: https://starlight-theme-nova.pages.dev/guide/getting-started

Configure the Starlight Nova theme by adding it as a plugin in your Astro configuration file (`astro.config.mjs`). This involves importing necessary functions and including the theme plugin within the Starlight integration.

```javascript
// astro.config.mjs
import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightThemeNova from 'starlight-theme-nova'

export default defineConfig({
  integrations: [
    starlight({
      plugins: [starlightThemeNova()],
      title: 'My Docs',
    }),
  ],
})
```

--------------------------------

### Display Code Snippets with Tabs (JavaScript, TypeScript, CSS, JSON)

Source: https://starlight-theme-nova.pages.dev/components/code-tabs

Demonstrates how to use the CodeTabs and CodeTabItem components to display multiple code blocks with distinct tabs. Supports various languages like JavaScript, TypeScript, CSS, and JSON. The 'code' prop accepts a string containing the code, and 'lang' specifies the language for syntax highlighting.

```jsx
import { CodeTabItem, CodeTabs } from 'starlight-theme-nova/components'

<CodeTabs>
  <CodeTabItem
    label="index.js"
    lang="js"
    code={`function () {\n  console.log('Hello, JS!')\n}`}
  />
  <CodeTabItem
    label="index.ts"
    lang="ts"
    code={`function (): void {\n  console.log('Hello, TS!')\n}`}
  />
  <CodeTabItem
    label="styles/global.css"
    lang="css"
    code={`.my-class {\n  background-color: red;\n}`}
  />
  <CodeTabItem
    label="package.json"
    lang="json"
    code={JSON.stringify(
      {
        name: 'my-project',
        version: '1.0.0',
        description: 'My project',
        main: 'index.js',
        scripts: {
          dev: 'astro dev',
          build: 'astro build',
        },
        author: 'John Doe',
        license: 'MIT',
      },
      null,
      2,
    )}
  />
</CodeTabs>
```

--------------------------------

### Twoslash Integration in TypeScript

Source: https://starlight-theme-nova.pages.dev/guide/markdown

Shows how Starlight Nova supports Twoslash for TypeScript code blocks. Twoslash provides inline type information and error checking when hovering over the code.

```typescript
// @errors: 2551
const div = document.createElement('h1')
div.style.colour = 'red' // Incorrect CSS property name
```

--------------------------------

### Aside Component with Different Types and Custom Titles

Source: https://starlight-theme-nova.pages.dev/components/aside

Illustrates advanced usage of the Aside component, including different predefined types ('caution', 'tip', 'danger') and the ability to add a custom title for more specific warnings or notes.

```astro
import { Aside } from '@astrojs/starlight/components'

<Aside type="caution">Some cautionary content.</Aside>

<Aside type="tip">

Other content is also supported in asides.

```js
console.log('A code snippet, for example.')
```

Some inline markdown like [link](https://example.com), `inline code`, **bold**, _italic_, and ~~strikethrough~~.

<details>
<summary>A collapsible disclosure</summary>

Some collapsible content.

</details>

</Aside>

<Aside type="danger">Do not give your password to anyone.</Aside>

<Aside type="danger" title="Watch out!">
  A warning aside *with* a custom title.
</Aside>
```

--------------------------------

### Word Highlighting in JavaScript and TypeScript Code Blocks

Source: https://starlight-theme-nova.pages.dev/guide/markdown

Demonstrates word highlighting within code blocks. Specific words or phrases can be highlighted to emphasize them. This functionality is available for JavaScript and TypeScript.

```javascript
const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World
```

```typescript
const message = 'Hello World'
console.log(message) // prints Hello World
```

--------------------------------

### Line Highlighting in JavaScript and TypeScript Code Blocks

Source: https://starlight-theme-nova.pages.dev/guide/markdown

Illustrates line highlighting within code blocks. Specific lines or ranges of lines can be highlighted to draw attention to important parts of the code. This feature supports both JavaScript and TypeScript.

```javascript
console.log('1')
console.log('2')
console.log('3')
console.log('4')
```

```typescript
console.log('Not highlighted')
console.log('Highlighted') 
console.log('Not highlighted')
```

--------------------------------

### Define CSS Cascade Layer Order (CSS)

Source: https://starlight-theme-nova.pages.dev/guide/css-and-styling

Demonstrates how to define the order of CSS cascade layers to manage style precedence. This is useful for overriding default Starlight and Nova theme styles.

```css
@layer my-reset, starlight, nova, my-overrides;
```
Tokens:
Raw