---
title: Create SP Days
hide_title: true
sidebar_class_name: title-logo-sidebar-sp-days
sidebar_label: "Create SP Days"
sidebar_position: 0
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import LogoSPDays from './sp-days-plugin-color-light.svg';

<div align="center">
  <div style={{ display: 'flex', justifyContent: 'center', margin: '1rem' }}>
    <LogoSPDays width="110" height="110"/>
  </div>
  <div align="center">
    # Create SP Days
  </div>
  <div align="center">
    <p>
      *Scaffolding tool for creating SP Days course websites!*
    </p>
    <h4>
      <a href="./create-sp-days/install/">🔧 Setup</a> · 
      <a href="https://www.npmjs.com/package/@sp-days-framework/create-sp-days">📦 NPM Package</a> · 
      <a href="https://github.com/helse-sorost/sp-days-framework">💻 Source Code</a>
    </h4>
  </div>
</div>

---

## Features

- **Zero-Config Setup** - Get started with a fully configured course website in minutes
- **Interactive CLI** - Guided setup process with sensible defaults
- **Flexible Templates** - Base course structure with optional Slidev and Resources addons
- **TypeScript Ready** - Full TypeScript support out of the box
- **Multiple Package Managers** - Works with npm, yarn, pnpm, and bun
- **GitHub Integration** - Pre-configured for GitHub Pages deployment

## Quick Start

### Interactive Mode (Recommended)

Run the scaffolding tool and follow the prompts:

```bash
npx @sp-days-framework/create-sp-days
```

You'll be asked for:

- **Site name** - Directory name for your project
- **Project details** - Name, GitHub org, repository
- **Branding** - Site title and tagline
- **Features** - Enable Slidev presentations and/or Resources documentation

### Quick Create

Create a new course with one command:

```bash
npx @sp-days-framework/create-sp-days my-course
```

This creates a basic course structure in the `my-course` directory. You can customize it later.

## What You Get

### Base Template (Always Included)

Every SP-Days course comes with:

- **Docusaurus 3.x** - Modern documentation framework
- **Interactive Tasks** - Hands-on learning exercises with built-in task tracking
- **Frontpage Components** - Beautiful landing page components and layouts
- **Course Structure** - Pre-configured `/course` directory ready for your content
- **TypeScript** - Full type safety and IntelliSense support
- **SASS Support** - Custom styling capabilities
- **Mermaid Diagrams** - Create flowcharts, sequence diagrams, and more

### Optional Addons

<Tabs>
  <TabItem value="slidev" label="Slidev Integration" default>
    Add presentation capabilities to your course:

    ```bash
    npx @sp-days-framework/create-sp-days my-course --addon-slidev
    ```

    Includes:

    - Slidev integration plugin
    - Sykehuspartner theme
    - Example presentations
    - `npm run slidev` command
  </TabItem>
  <TabItem value="resources" label="Resources Documentation">
    Add comprehensive documentation:

    ```bash
    npx @sp-days-framework/create-sp-days my-course --addon-resources
    ```

    Includes:

    - Separate documentation instance
    - Component usage guides
    - Setup examples
    - Best practices
  </TabItem>
  <TabItem value="package-docs" label="Package Documentation">
    Add developer documentation for all installed plugins:

    ```bash
    npx @sp-days-framework/create-sp-days my-course --include-package-docs
    ```

    Includes:

    - Plugin API documentation
    - Developer guides
    - Accessible via "Plugin Docs" dropdown
    - Routes: `/package-docs/interactive-tasks`, etc.

    :::info Package Documentation Feature
    Starting from version 1.1.0, all `@sp-days-framework` packages include their documentation as pre-made Docusaurus MDX files. This feature is useful for package development and easier documentation access, but adds unnecessary dependencies for production builds.

    **Note:** Enabling package documentation automatically installs the Slidev addon (even if not explicitly requested) because package docs include Slidev theme documentation.
    :::
  </TabItem>
</Tabs>

## Getting Started

### 1. Create Your Course

<Tabs>
  <TabItem value="interactive" label="Interactive Mode" default>
    ```bash
    npx @sp-days-framework/create-sp-days
    ```

    Follow the prompts to configure your course. The interactive mode guides you through all options with helpful defaults and suggestions.
  </TabItem>
  <TabItem value="cli" label="CLI Mode">
    ```bash
    npx @sp-days-framework/create-sp-days docker-course \
      --title "Docker Fundamentals" \
      --tagline "Master containerization" \
      --addon-slidev
    ```

    Specify all options upfront. Perfect for scripting or when you know exactly what you want.
  </TabItem>
</Tabs>

### 2. Add Your Content

Create your course content in the generated project:

**Main landing page:**
- Edit `src/pages/index.mdx` to customize your course homepage

**Course modules:**
- Add lessons in `course/` directory
- Each `.mdx` file becomes a page

**Presentations (if `--addon-slidev` enabled):**
- Create slides in `slidev/` directory
- Run `npm run slidev ./slidev/your-presentation.md` for live preview

**Resources (if `--addon-resources` enabled):**
- Add documentation in `resources/` directory

### 3. Development

Start the development server:

```bash
npm start
```

Open `http://localhost:3000` to see your course site. The server will hot-reload as you edit content.

See [Installation](./install.mdx) for detailed configuration options.

## Available Commands

After creating your course, use these commands:

| Command | Description |
|---------|-------------|
| `npm start` | Start development server with hot-reload |
| `npm run build` | Build for production |
| `npm run serve` | Preview production build locally |
| `npm run slidev` | Launch Slidev (if `--addon-slidev` enabled) |
| `npm run typecheck` | Run TypeScript type checking |

## Requirements

- **Node.js** >= 20.0
- **Package Manager** - npm, yarn, pnpm, or bun