Documentation

Astro

The Skeleton documentation uses Astro. View the following integrations in astro.config.mjs:

• Tailwind
• React
• Svelte
• MDX Markdown
• Prettier
• Expressive Code
• Astro-Icon
• Astro-Auto-Import
• Nanostores | Persistent

App Structure

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

Adding MDX Pages

1. Browse to /content and create a new .mdx file within the appropriate content collection.
2. Be sure to complete all required Frontmatter metadata within the --- brackets.
3. The page will be automatically added to the sidebar navigation.

MDX Markdown

View the Astro MDX Documention or see /content/resources/_markdown.md for “kitchen sink” examples. Custom MDX components are provided in /src/components/mdx. To enable these, add the following export to every MDX file.

export const components = componentSet {/* <-- ADD THIS! */}

{/* (content) */}

Global Components

A selection of globally accessible uitlity components provided to MDX contents via astro-auto-importer.

IMPORTANT: These are globally registered and should not be imported within MDX pages.

See astro.config.mjs > AutoImport() for details.

Essential Code

Code Blocks are provided via Expressive Code. Implement via Markdown fences or the full component.

<code code="{AddCodeHere}" lang="html" />

Previewer

Allows you to quickly toggle between a rendered component and the source code.

import Example from '@examples/foo/Example.astro';
import ExampleRaw from '@examples/foo/Example.astro?raw';

<Preview client:load>
  <Fragment slot="preview"><Example /></Fragment>
  <Fragment slot="code"><Code code={ExampleRaw} lang="html" /></Fragment>
</Preview>

Tables

Use Markdown tables or the available Table component (/src/components/docs/Table.astro). The Table component will auto-generate headings based on the key names in the first object row.

export const tableProps: [
  {
    name: 'autocollapse';
    type: 'boolean';
    value: 'false';
    description: 'Set the auto-collapse mode.';
  },
  // ...
];

<table label="Props" data="{tableData}" tonal />

TIP: Optionally add the tonal or kbd props to highlight content in the first column.

Icons

Icons are provided via Astro-Icon and Iconify. This includes the following sets.

• HeroIcons (outlined)
• Simple Icons

// Skip for MDX, this is auto-imported
import { Icon } from 'astro-icon/components';

<Icon name="heroicons-outline:user" />
<Icon name="simple-icons:svelte" />

Linting

See the Astro Prettier documentation for usage details.