Astro Components

Last Updated March 29, 2025

Guide

Different Types of Components

Currently, there are two types of components available in the documentation site:

Astro Components: These are components written in Astro and are used to create static HTML pages. Use these components when you don’t need any client-side interactivity. Astro components can be used from other Astro components but can not be used from React components.
React Components: These are components written in React and are used to create dynamic, interactive pages. Use these components when you need client-side interactivity or state management. React components can be used from other React components and from Astro components.

Astro components are written in .astro files in the /src/components directory.

In addition to the standard Starlight - Components, the Hardcover documentation site includes the following custom components:

This component allows a user to view GraphQL queries and experiment by running them against the API.

Import Path:

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

Parameters:

canTry - A boolean value determining whether the user can run the query in the explorer. The default is true.
description - A string describing the query.
forcePresentation - A boolean value determining whether the presentation options should be hidden. The default is false.
presentation - The default presentation of the response, either json or table. The default is json.
query - A string containing the GraphQL query to be displayed in the explorer.
title - A string for the title of the query shown in the explorer. The default is Example Query. Change this when translating the page to another language.

Usage:

<GraphQLExplorer
    query={query}
    description="An example query"
    presentation='table'
    title="Example"
/>

query {
  me {
      id,
      username
  }
}

This component is mostly meant for internal use, but it can be used to display the hardcover social media icons.

Import Path:

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

Parameters:

Usage:

<div class="flex justify-around h-6 w-80">
    <SocialIcons iconSize="20px" />
</div>

Astro components are rendered on the server and do not have access to the browser’s window or document objects.
Astro components do not support client-side state management or interactivity.
Astro components cannot be used inside React components.