@sp-days-framework/create-sp-days 1.0.0

package/templates/addon-resources/resources/interactive-tasks/setup/index.mdx

@@ -0,0 +1,174 @@
+---
+sidebar_position: 1
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Setup
+
+:::tip[Already Included]
+If you're using `@sp-days-framework/create-sp-days`, the Interactive Tasks plugin is already installed and configured. You can start creating tasks right away!
+:::
+
+## Installation
+
+Install the plugin using your preferred package manager:
+
+<Tabs>
+  <TabItem value="npm" label="npm" default>
+    ```bash
+    npm install @sp-days-framework/docusaurus-plugin-interactive-tasks
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    ```bash
+    yarn add @sp-days-framework/docusaurus-plugin-interactive-tasks
+    ```
+  </TabItem>
+</Tabs>
+
+Add the plugin to your plugins array and the remark plugin to your docs configuration:
+
+```js title="docusaurus.config.js" {2,9-11}
+module.exports = {
+  plugins: ["@sp-days-framework/docusaurus-plugin-interactive-tasks"],
+
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          remarkPlugins: [
+            require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
+              .remarkTaskDirective,
+          ],
+        },
+      },
+    ],
+  ],
+};
+```
+
+The plugin requires two integrations:
+
+1. **Plugin** - Auto-discovers all docs instances, generates task registry, and provides theme components
+2. **Remark Plugin** - Transforms task directives in markdown to React components (must be added to each docs instance)
+
+## Configuration
+
+### Basic Plugin Setup
+
+The plugin automatically discovers all Docusaurus docs instances:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  plugins: [
+    "@sp-days-framework/docusaurus-plugin-interactive-tasks",
+  ],
+};
+```
+
+### Remark Plugin Configuration
+
+Add the `remarkTaskDirective` to each docs instance's `remarkPlugins` array:
+
+```js title="docusaurus.config.js" {8-10,22-24}
+module.exports = {
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          // Default instance
+          remarkPlugins: [
+            require('@sp-days-framework/docusaurus-plugin-interactive-tasks').remarkTaskDirective,
+          ],
+        },
+      },
+    ],
+  ],
+  plugins: [
+    '@sp-days-framework/docusaurus-plugin-interactive-tasks',
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'community',
+        path: 'community',
+        remarkPlugins: [
+          require('@sp-days-framework/docusaurus-plugin-interactive-tasks').remarkTaskDirective,
+        ],
+      },
+    ],
+  ],
+};
+```
+
+### Frontmatter Options
+
+Customize task badge appearance for individual pages:
+
+```mdx title="docs/my-module.mdx"
+---
+title: My Module
+sidebar_task_hide_progress: false
+sidebar_task_disable_icon: false
+sidebar_task_badge_colors:
+  completed:
+    lightmode: "#4caf50"
+    darkmode: "#66bb6a"
+  incomplete:
+    lightmode: "#2196f3"
+    darkmode: "#42a5f5"
+  font:
+    lightmode: "#ffffff"
+    darkmode: "#000000"
+---
+
+# My Module Content
+```
+
+### Category Sidebar Configuration
+
+Customize task badges for entire categories using `_category_.yml` or `_category_.json`:
+
+<Tabs>
+  <TabItem value="yaml" label="YAML" default>
+    ```yaml title="docs/module-01/_category_.yml"
+    label: "Module 1"
+    position: 1
+    customProps:
+      sidebar_task_badge_colors:
+        completed:
+          lightmode: "#4caf50"
+          darkmode: "#66bb6a"
+        incomplete:
+          lightmode: "#2196f3"
+          darkmode: "#42a5f5"
+      sidebar_task_disable_icon: false
+    ```
+  </TabItem>
+  <TabItem value="json" label="JSON">
+    ```json title="docs/module-02/_category_.json"
+    {
+      "label": "Module 2",
+      "position": 2,
+      "customProps": {
+        "sidebar_task_hide_progress": false,
+        "sidebar_task_badge_colors": {
+          "completed": {
+            "lightmode": "#4caf50",
+            "darkmode": "#66bb6a"
+          },
+          "incomplete": {
+            "lightmode": "#2196f3",
+            "darkmode": "#42a5f5"
+          }
+        }
+      }
+    }
+    ```
+  </TabItem>
+</Tabs>
+
+See [Advanced Configuration](./advanced-configuration.mdx) for all available options.

package/templates/addon-resources/resources/interactive-tasks/task-progression.mdx

@@ -0,0 +1,140 @@
+---
+sidebar_position: 3
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Progress Components
+
+Display task completion progress using the `TaskProgression` and `TaskProgressionOverview` components.
+
+## Basic Usage
+
+
+<Tabs>
+  <TabItem value="single" label="Single Page" default>
+    Display progress for a specific document with a visual progress indicator.
+
+
+    ```mdx
+    <TaskProgression path="./examples/basic-usage.mdx" />
+    ```
+    <div className="preview">
+      <div className="container" style={{ width: '-webkit-fill-available'}}>
+        <TaskProgression path="./examples/basic-usage.mdx" />
+      </div>
+    </div>
+  </TabItem>
+  <TabItem value="current" label="Current Page">
+    Reference the current page using `.` as the path:
+
+    ```mdx
+    <TaskProgression path="." />
+    ```
+
+    <div className="preview">
+      <div className="container" style={{ width: '-webkit-fill-available'}}>
+        <TaskProgression path="." />
+      </div>
+    </div>
+    <br/>
+
+    :::note
+    If no tasks is found on the page the Task Progression will show a error.
+    :::
+  </TabItem>
+  <TabItem value="result" label="Overview">
+    Display progress across all documents in the docs plugin instance.
+
+    ```mdx
+    <TaskProgressionOverview />
+    ```
+    <div className="preview">
+      <div className="container" style={{ width: '-webkit-fill-available', paddingBottom: '1.5rem'}}>
+        <TaskProgressionOverview />
+      </div>
+    </div>
+  </TabItem>
+</Tabs>
+
+---
+
+## Path Formats
+
+The component supports multiple path formats:
+
+```mdx
+<!-- Current page -->
+<TaskProgression path="." />
+
+<!-- Absolute path -->
+<TaskProgression path="/docs/tasks/creating-tasks" />
+
+<!-- Relative to current page -->
+<TaskProgression path="./sibling-page" />
+<TaskProgression path="../parent-page" />
+
+<!-- With file extension -->
+<TaskProgression path="/docs/tasks/tasks-showcase.mdx" />
+```
+
+---
+
+## Examples
+
+### Learning Module Overview
+
+Create an overview page showing progress across all modules:
+
+```mdx
+---
+title: Course Overview
+---
+
+# Welcome to the Course
+
+Track your progress across all modules:
+
+<TaskProgressionOverview />
+```
+
+### Module Navigation
+
+Link between related modules with progress indicators:
+
+```mdx
+## Prerequisites
+
+Make sure you've completed the previous module:
+
+<TaskProgression path="../module-01/index" />
+
+## Current Module
+
+Your progress in this module:
+
+<TaskProgression path="." />
+
+## Next Steps
+
+Continue to the next module:
+
+<TaskProgression path="../module-03/index" />
+```
+
+### Section Summary
+
+Show progress for the current page at the top:
+
+```mdx
+# Introduction to React
+
+<TaskProgression path="." />
+
+Complete the tasks below to learn React fundamentals.
+
+::::task[Setup React Project]
+...
+::::
+```

package/templates/addon-resources/resources/slidev-integration/index.mdx

@@ -0,0 +1,106 @@
+---
+title: Slidev Integration
+hide_title: true
+sidebar_class_name: sidebar-logo-docusaurus
+---
+
+import { Iconify } from "@sp-days-framework/docusaurus-frontpage-collection";
+
+<div align="center">
+  <div className="resourceLandingPage">
+    <Iconify icon="logos:docusaurus" width="105px"/>
+    <Iconify icon="mdi:plus-thick" width="50px" iconColors={{ light: "#000000", dark: "#ffffff" }} />
+    <Iconify icon="logos:slidev" width="95px"/>
+  </div>
+  <div align="center">
+    # Docusaurus Slidev Integration
+  </div>
+  <div align="center">
+    <p>
+        *Seamlessly integrate Slidev presentations into your Docusaurus site!*
+    </p>
+    <h4>
+        [Setup](./setup/index.mdx)
+        ·
+        [NPM Package](https://www.npmjs.com/package/@sp-days-framework/docusaurus-plugin-slidev)
+        ·
+        [Source Code](https://github.com/helse-sorost/sp-days-framework)
+    </h4>
+  </div>
+</div>
+
+---
+
+## Features
+
+- **Automatic Discovery** - Scans directories for Slidev markdown files and builds them automatically
+- **Interactive Overview Page** - Auto-generated gallery with presentation previews, metadata, and sorting
+- **Zero-Config Setup** - Works out of the box with sensible defaults
+- **Theme Support** - Global or per-presentation theme configuration with automatic validation
+- **Development & Production Modes** - Fast development workflow with separate slide preview
+
+## Getting Started
+
+### 1. Create Your Presentation
+
+Create a presentation in the `/slidev/` directory:
+
+```markdown title="slidev/introduction.md"
+---
+theme: "@sp-days-framework/slidev-theme-sykehuspartner"
+title: Introduction to Docker
+description: Learn containerization fundamentals
+author: Your Name
+layout: cover
+---
+
+# Introduction to Docker
+## Containerization Made Simple
+
+---
+
+# What is Docker?
+
+Docker is a platform for developing, shipping, and running applications in containers.
+```
+### 2. Live Preview During Development
+
+Run Slidev directly to work on your presentation with hot-reload:
+
+```bash
+npm run slidev ./slidev/my-presentation.md
+```
+
+This opens your presentation in the browser with live updates as you edit.
+
+### 3. View in Docusaurus
+
+Build your Docusaurus site to see presentations integrated:
+
+```bash
+npm run build
+npm run serve
+```
+
+Open the page and select "Slides" in the navbar to see the overview gallery.
+
+:::note[Development Mode Limitation]
+
+Presentations are **not built** during `npm run start`, [read more about it here.](./setup/index.mdx#development-vs-production-modes)
+
+:::
+
+See [Setup](./setup/index.mdx) for installation and configuration.
+
+## How It Works
+
+1. **Scan Phase** - Plugin scans the `/slidev/` directory for `.md` files during build
+2. **Extract Metadata** - Frontmatter is parsed from each file (title, description, theme, author)
+3. **Build Phase** - In production, Slidev builds each presentation to `static/slides/`
+4. **Generate Overview** - Creates an interactive overview page (default: `/slidev`) with previews
+5. **Serve** - Built presentations are accessible via unique URLs
+
+## Documentation
+
+- **[Advanced Configuration](./setup/advanced-configuration.mdx)** - Detailed plugin options
+- **[Sykehuspartner Theme](../sykehuspartner-theme/index.mdx)** - Theme documentation and layouts

package/templates/addon-resources/resources/slidev-integration/setup/advanced-configuration.mdx

@@ -0,0 +1,144 @@
+---
+title: Advanced
+sidebar_position: 2
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Advanced Configuration
+
+## All Plugin Options
+
+| Option            | Type      | Default                               | Description                                                        |
+| ----------------- | --------- | ------------------------------------- | ------------------------------------------------------------------ |
+| `sourceDir`       | `string`  | `'./slidev'`                          | Directory to scan for Slidev markdown files                        |
+| `outputDir`       | `string`  | `'slides'`                            | Output directory inside `static/` for built presentations          |
+| `theme`           | `string`  | `undefined`                           | Global theme override for all presentations                        |
+| `download`        | `boolean` | `false`                               | Enable PDF download functionality                                  |
+| `overviewPath`    | `string`  | `'/slidev'`                           | URL path for the auto-generated overview page                      |
+| `overviewTitle`   | `string`  | `'Slidev Presentations'`              | Custom title for the overview page                                 |
+| `overviewTagline` | `string`  | `'Interactive presentation overview'` | Custom tagline/description for the overview page                   |
+| `id`              | `string`  | `'default'`                           | Plugin ID for multiple instances                                   |
+| `buildTimeout`    | `number`  | `60`                                  | Timeout in seconds for building each presentation (10-600)         |
+| `verbose`         | `boolean` | `false`                               | Enable verbose logging for Slidev build output                     |
+
+## All Frontmatter Options
+
+Configure individual presentations using frontmatter:
+
+| Option        | Type     | Description                                    |
+| ------------- | -------- | ---------------------------------------------- |
+| `theme`       | `string` | Theme to use (overrides plugin global theme)   |
+| `title`       | `string` | Presentation title                             |
+| `description` | `string` | Brief description for overview page            |
+| `author`      | `string` | Author name(s)                                 |
+| `layout`      | `string` | Layout for the slide (e.g., `cover`, `intro`)  |
+
+See [Slidev documentation](https://sli.dev/guide/syntax.html#frontmatter) for all available frontmatter options.
+
+## Multiple Plugin Instances
+
+Run multiple instances with different configurations:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  staticDirectories: ["static"],
+  
+  plugins: [
+    [
+      "@sp-days-framework/docusaurus-plugin-slidev",
+      {
+        id: "workshops",
+        sourceDir: "./slidev/workshops",
+        overviewPath: "/workshops/slides",
+        overviewTitle: "Workshop Presentations",
+      },
+    ],
+    [
+      "@sp-days-framework/docusaurus-plugin-slidev",
+      {
+        id: "training",
+        sourceDir: "./slidev/training",
+        overviewPath: "/training/slides",
+        overviewTitle: "Training Materials",
+      },
+    ],
+  ],
+};
+```
+
+This allows you to organize different types of presentations separately.
+
+## Global Theme Configuration
+
+Set a default theme for all presentations:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  plugins: [
+    [
+      "@sp-days-framework/docusaurus-plugin-slidev",
+      {
+        theme: "@sp-days-framework/slidev-theme-sykehuspartner",
+      },
+    ],
+  ],
+};
+```
+
+Individual presentations can override this by specifying a theme in their frontmatter.
+
+## Custom Overview Page
+
+Customize the presentation overview page appearance:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  plugins: [
+    [
+      "@sp-days-framework/docusaurus-plugin-slidev",
+      {
+        overviewPath: "/presentations",
+        overviewTitle: "Our Presentations",
+        overviewTagline: "Explore our collection of learning materials",
+      },
+    ],
+  ],
+};
+```
+
+## Build Timeout Configuration
+
+For large presentations, increase the build timeout:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  plugins: [
+    [
+      "@sp-days-framework/docusaurus-plugin-slidev",
+      {
+        buildTimeout: 120, // 2 minutes per presentation
+        verbose: true,     // Enable verbose logging
+      },
+    ],
+  ],
+};
+```
+
+## PDF Download Support
+
+Enable PDF download functionality for presentations:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  plugins: [
+    [
+      "@sp-days-framework/docusaurus-plugin-slidev",
+      {
+        download: true,
+      },
+    ],
+  ],
+};
+```