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 Documention or refer to /src/content/docs/resources/_markdown.md for a “kitchen sink” example page.

MDX Components

This application makes use of custom MDX components to enable Skeleton typography styles for page contents. Browse these components within /src/components/mdx. To enable MDX components for your page, add the following import.

---
{ /* (frontmatter) */ }
---

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

{/* (content) */}

Doc-Only Components

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

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

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" />

```html
<div>Skeleton<div>
```

Preview

Allows you to quickly toggle between an example component and it’s 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>

Framework Specific Code

To allow for a common preview to have framework specific code, use the codeReact and codeSvelte slots.

<Preview client:load>
  <Fragment slot="preview"><Example /></Fragment>
  <Preview>
    <Fragment slot="preview">
      <Example />
    </Fragment>
    <Fragment slot="codeReact">
      <Code code={ExampleSvelteRaw} lang="tsx" />
    </Fragment>
    <Fragment slot="codeSvelte">
      <Code code={ExampleReactRaw} lang="svelte" />
    </Fragment>
  </Preview>
</Preview>

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

Tables

Provided by 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

Lucide

This application implements the React version of Lucide for most icons. View Iconography details.

Astro Icons

Additionally, this application implements Astro-Icon for local custom SVGs and brand icon.

import { Icon } from 'astro-icon/components';

<Icon name="skeleton" size={24} />
<Icon name="react" size={24} />
<Icon name="svelte" size={24} />

• Each icon must be provided in a .svg format.
• Icon assets can be located in /src/icons
• The name attribute should match the icon filename.
• You must restart the Astro server when inserting new icons.