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 and create a new .mdx file within the appropriate content collection.
2. Complete all required Frontmatter metadata within the --- brackets.
3. New pages will be automatically added to the sidebar navigation.

Component Pages

Similar to standard pages, but split into multiple parts. This represents the header and tabbed sections.

• /content/common/{feature}.mdx - contains the frontmatter metadata for the page header information.
• /content/react/{feature}.mdx - provide usage instruction for the React component only.
• /content/svelte/{feature}.mdx - provide usage instruction for the Svelte component only.

MDX Markdown

View the Astro MDX Documention or refer to /content/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 within your MDX page.

{/* (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.

All components are configure via astro.config.mjs > AutoImport()

Essential Code

Code Blocks are provided via Expressive Code via either a Code component or Markdown fences. See the list of supported languages, provided by the Shiki syntaxt highlighter.

<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 to display icons. View Iconography for details.

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