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. For generic code that is not framework specific, such as an Astro component along with JavaScript, use the code slot instead.

<Preview client:load>
  <Fragment slot="preview"><Example /></Fragment>
  <Preview>
    <Fragment slot="preview">
      <Example />
    </Fragment>
    <Fragment slot="code">
      <Code code={ExampleGenericRaw} lang="astro" />
    </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.

Anatomy

Allows you to generate a visual aid that showcases how a component’s template is structured, how we label each part of the component, and how those labels are used for style prop prefixes.

## Anatomy

<Anatomy label="Accordion" isComponent>
  <Anatomy label="Accordion.Item" isComponent>
    <Anatomy label="Accordion.Control" element="button" isComponent>
      <Anatomy label="lead" />
      <Anatomy label="content" />
      <Anatomy label="indicator" />
    </Anatomy>
    <Anatomy label="Accordion.Panel" isComponent />
  </Anatomy>
  <Anatomy label="Accordion.Item" isComponent />
</Anatomy>

• label - sets the left-side label text presented in a code tag.
• element - sets the right-side element tag text; defaults to div.
• isComponent - denotes a parent component element; wraps the label with <> brackets.

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