Documentation

Astro

The Skeleton documentation website is maintained using the Astro framework.

Integrations

Review the full list of integrations in astro.config.js.

• Partytown
• Svelte
• React
• Expressive Code
• Icon
• AutoImport
• MDX (Markdown + JSX)

App Structure

Navigate the app structure within the /src directory. This includes the following directories:

Pages

Standard Pages

1. Browse to /content/docs/ and create a new .mdx file
2. Populate all required Frontmatter metadata within the frontmatter --- fences, see the content configuration in /src/content.config.ts for which properties need to be set.
3. New pages will be automatically added to the sidebar navigation.

Component Pages

Component page content is split into three files within /content/docs/components/<component>/.

• meta.mdx - common frontmatter metadata for the page header (ex: title, description, etc).
• react.mdx - examples and usage information specific to the React page.
• svelte.mdx - examples and usage information specific to the Svelte page.

Hidden Pages

If you wish to prevent a page from showing in the navigation, prefix it with an understore: _example.mdx.

Using MDX

View the Astro MDX Documentation or refer to /src/content/docs/resources/_markdown.md for a “kitchen sink” example page.

Doc-Only Components

Functional components for the Astro project are housed in /src/components. These support Astro/React.

• Astro - used for simple presentational components without logic.
• React - functional components that implement state, logic, or interaction.

TIP: For React components, make sure to use Astro’s hydration directives .

Global Components

A suite of global components are automatically imported within MDX pages via astro-auto-importer .

TIP: These components are configure via astro.config.mjs > AutoImport() in the project root.

Essential Code

Code Blocks are provided via Expressive Code via either the <Code> component or Markdown fences. This is powered by the Shiki syntax highlighter. View the list of supported languages .

<Code code="<div>Skeleton<div>" lang="html" />
 

<div>Skeleton<div>

Preview

Allows you to quickly toggle between an example component and its source code.

import Default from '@/components/examples/foo/default';
import DefaultRaw from '@/components/examples/foo/default?raw';
 

<Preview files={{ 'app.astro': DefaultRaw }} client:visible>
	<Default />
</Preview>
 

Framework Specific Content

To show framework specific content, use the Framework component.

<Framework id="svelte">This is Svelte specific content.</Framework>
<Framework id="react">This is React specific content.</Framework>
 

TIP: For React or Svelte components, make sure to use Astro’s hydration directives .

API Tables

When placed on a component documentation page, these will automatically fetch and display the type schema for the respective component.

## API Reference

<ApiTable />
 

Icons

Lucide

This documentation app uses Lucide for its icons.

SVG Components

View the Astro documentation for more information.