# <%= title %>

<%= tagline %>

This course website was created with [@sp-days-framework/create-sp-days](https://github.com/helse-sorost/sp-days-framework).

## Getting Started

### Development

Start the development server:

```bash
npm start
```

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

### Build

Build the website for production:

```bash
npm run build
```

This command generates static content into the `build` directory and can be served using any static hosting service.

### Serve

Test the production build locally:

```bash
npm run serve
```

Serves the production build from the `build` directory.

<% if (addonSlidev) { %>

### Slidev Presentations

Launch the Slidev presentation server:

```bash
npm run slidev ./slidev/filename.md
```

This opens the Slidev presentation interface where you can view and edit your slides.

<% } %>

## Project Structure

```
<%= directoryName %>/
├── course/                 # Course content (MDX files)
│   ├── index.mdx          # Course overview
│   └── ...                # Add your course modules here
├── src/
│   ├── css/
│   │   └── sp-days-theme.scss  # Custom styling
│   └── pages/
│       └── index.mdx      # Landing page
├── static/
│   └── img/               # Static assets (logos, images)
<% if (addonSlidev) { %>├── slidev/                # Slidev presentations
│   ├── creating-your-first-slidev.md
│   └── ...                # Add your presentations here
<% } %><% if (addonResources) { %>├── resources/             # Additional documentation
│   └── ...                # Reference materials
<% } %>├── docusaurus.config.ts   # Site configuration
├── package.json           # Dependencies and scripts
└── tsconfig.json          # TypeScript configuration
```

## Adding Course Content

### Creating Course Modules

1. Create MDX files in the `/course` directory
2. Use frontmatter to configure each page:

```markdown
---
sidebar_position: 1
title: Module 1
---

# Module 1: Getting Started

Your content here...
```

### Using Interactive Tasks

The course includes the interactive tasks plugin. Create tasks like this:

````markdown
:::task{title="Your Task Title"}

::text

Your task description and requirements here.

::

::hint

Helpful hints for learners.

::

::solution

The complete solution with explanations.

::

:::
````

See the [Interactive Tasks documentation](https://helse-sorost.github.io/sp-days-framework/resources/interactive-tasks) for more details.

<% if (addonSlidev) { %>

## Creating Presentations

Slidev presentations are Markdown files in the `/slidev` directory:

1. Create a new `.md` file in `/slidev`
2. Use Slidev syntax for slides:

```markdown
---
theme: sykehuspartner
---

# Slide Title

Content for your slide

---

# Another Slide

More content
```

See the [Slidev documentation](https://sli.dev/) for the full syntax.

<% } %>

<% if (includePackageDocs) { %>

## Removing Package Documentation
This project includes package documentation for easier access to plugin documentation during development. If you want to remove this feature to reduce dependencies in production:

1. **Remove package documentation plugins** from `docusaurus.config.ts`:
   ```typescript
   // Remove these plugin entries:
   [
     "@docusaurus/plugin-content-docs",
     require("@sp-days-framework/docusaurus-plugin-interactive-tasks/publish-package-docs"),
   ],
   [
     "@docusaurus/plugin-content-docs",
     require("@sp-days-framework/docusaurus-plugin-slidev/publish-package-docs"),
   ],
   [
     "@docusaurus/plugin-content-docs",
     require("@sp-days-framework/docusaurus-frontpage-collection/publish-package-docs"),
   ],
   [
     "@docusaurus/plugin-content-docs",
     require("@sp-days-framework/slidev-theme-sykehuspartner/publish-package-docs"),
   ],
   [
     "@docusaurus/plugin-content-docs",
     require("@sp-days-framework/create-sp-days/publish-package-docs"),
   ],
   ```

2. **Remove the Plugin Docs dropdown** from the navbar in `docusaurus.config.ts`:
   ```typescript
   // Remove this navbar item:
    {
      type: "dropdown",
      label: "Plugin Docs",
      position: "left",
      items: [
        {
          to: "/package-docs/create-sp-days",
          label: "Create SP Days",
          className: "title-logo-navbar-sp-days-plugin",
        },
        {
          to: "/package-docs/frontpage-collection",
          label: "Frontpage Collection",
          className: "title-logo-navbar-docusaurus",
        },
        {
          to: "/package-docs/interactive-tasks",
          label: "Interactive Tasks",
          className: "title-logo-navbar-docusaurus",
        },
        {
          to: "/package-docs/slidev-integration",
          label: "Slidev Integration",
          className: "title-logo-navbar-docusaurus",
        },
        {
          to: "/package-docs/terminal-codeblock",
          label: "Terminal Codeblock",
          className: "title-logo-navbar-docusaurus",
        },
        {
          to: "/package-docs/sykehuspartner-theme",
          label: "Sykehuspartner Theme",
          className: "title-logo-navbar-slidev",
        },
      ],
    },
   ```

3. **Remove the package dependency** from `package.json`:
   ```json
   // Remove this line from dependencies:
   "@sp-days-framework/create-sp-days": "^1.0.4",
   ```

4. **Reinstall dependencies**:
   ```bash
   npm install
   ```

After these steps, the package documentation will no longer be included in your build, reducing the final bundle size.

<% } %>