Documentation

Astro

The Skeleton documentation is created using Astro.

Integrations

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

• React
• Svelte
• Tailwind
• MDX (Markdown)
• Prettier
• Expressive Code

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 within the appropriate content collection.
2. Complete all required Frontmatter metadata within the frontmatter --- fences.
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/{feature}/.

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

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

MDX Components

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

{/* (frontmatter) */}

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

{/* (content) */}

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()

Essential Code

Code Blocks are provided via Expressive Code while using either the Code component or Markdown fences. This is powered by the Shiki syntaxt highlighter. See the list of supported languages.

<Code code={`<div>Skeleton<div>`} lang="html" />

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

Preview

Allows you to quickly preview an example component and toggle 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

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>
  ...
</table>

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 for additional information.

Astro Icons

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