Getting Started

Quick Start

This quickest way to get started with Astro Theme Provider is to clone the theme template:

git clone https://github.com/astrolicious/astro-theme-provider-template.git my-theme

Navigate to the created directory and install dependencies:
Terminal window
```
cd my-theme/
pnpm install
```
Run the playground to generate types for theme development and preview any changes:
Terminal window
```
pnpm playground:dev
```
Explore! Learn how Astro Theme Provider works by navigating the theme and reading the docs.

Setup Manually

If you are creating a theme inside an existing repository, you will have to set things up manually:

Create a package directory with the following structure:
- Directorypackage/
  - Directorypublic/
    …
  - Directorysrc/
    Directoryassets/
    …
    Directorycomponents/
    …
    Directorylayouts/
    …
    Directorypages/
    …
    Directorystyles/
    …
  - index.ts
  - package.json
  - README.md
Create a playground directory to generate types and test changes:
Terminal window
```
pnpm create astro@latest playground --template minimal --no-git -y
```
- Directoryplayground/
  - Directorypublic/
    …
  - Directorysrc/
    …
  - astro.config.mjs
  - package.json
  - tsconfig.json
Add the package and playground directories to the workspace:
pnpm-workspace.yaml
```
packages:
  - 'package'
  - 'playground'
```
Add the theme package to the playground’s package.json and re-install dependencies:
playground/package.json
```
{
  "dependencies": {
    "astro": "^4.9.0",
    "my-theme": "workspace:^"
  }
}
```
Terminal window
```
pnpm install
```

Add the theme package to the integrations array inside the playground’s Astro configuration:

import { defineConfig } from 'astro/config';
import myTheme from 'my-theme';

export default defineConfig({
  integrations: [
    myTheme({
      // ...
    }),
  ]
});

Run the playground to generate types for theme development and preview any changes
Terminal window
```
pnpm --filter playground dev
```