@sp-days-framework/create-sp-days 1.0.4 → 1.1.0-beta1

package/templates/addon-resources/resources/interactive-tasks/setup/advanced-configuration.mdx

@@ -1,273 +0,0 @@
----
-title: Advanced
-sidebar_position: 2
----
-
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
-# Advanced Configuration
-
-## TOC (Table of Contents) Configuration
-
-The Interactive Tasks plugin supports TOC configuration via the `remarkTaskDirective` plugin options. This allows you to control whether tasks appear in the table of contents and at what heading level.
-
-### Remark Plugin Options
-
-Configure TOC behavior in your `docusaurus.config.ts` for each docs instance:
-
-```ts title="docusaurus.config.ts"
-module.exports = {
-  presets: [
-    [
-      'classic',
-      {
-        docs: {
-          beforeDefaultRemarkPlugins: [
-            [
-              require('@sp-days-framework/docusaurus-plugin-interactive-tasks')
-                .remarkTaskDirective,
-              {
-                // Enable TOC generation for tasks (default: true)
-                tocEnabled: true,
-                
-                // Heading level for TOC entries (default: 2)
-                // Values: 2 (h2), 3 (h3), 4 (h4), 5 (h5), 6 (h6)
-                tocHeadingLevel: 2,
-              },
-            ],
-          ],
-        },
-      },
-    ],
-  ],
-};
-```
-
-### Remark Plugin Options Reference
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `tocEnabled` | `boolean` | `true` | Enable/disable TOC entry generation for tasks |
-| `tocHeadingLevel` | `2` \| `3` \| `4` \| `5` \| `6` | `2` | Heading level for TOC entries (h2-h6) |
-
-### TOC Configuration Examples
-
-#### Disable TOC Generation
-
-If you don't want tasks to appear in the table of contents:
-
-```ts title="docusaurus.config.ts"
-beforeDefaultRemarkPlugins: [
-  [
-    require('@sp-days-framework/docusaurus-plugin-interactive-tasks')
-      .remarkTaskDirective,
-    {
-      tocEnabled: false,
-    },
-  ],
-],
-```
-
-#### Use h3 for Task TOC Entries
-
-To make tasks appear as subsections in the TOC:
-
-```ts title="docusaurus.config.ts"
-beforeDefaultRemarkPlugins: [
-  [
-    require('@sp-days-framework/docusaurus-plugin-interactive-tasks')
-      .remarkTaskDirective,
-    {
-      tocEnabled: true,
-      tocHeadingLevel: 3, // Tasks appear as h3 in TOC
-    },
-  ],
-],
-```
-
-This is useful when you have main h2 headings and want tasks to be nested under them in the TOC.
-
-#### Different Config Per Docs Instance
-
-You can configure TOC differently for each docs instance:
-
-```ts title="docusaurus.config.ts"
-module.exports = {
-  presets: [
-    [
-      'classic',
-      {
-        docs: {
-          // Course docs: use h2 for tasks
-          beforeDefaultRemarkPlugins: [
-            [
-              require('@sp-days-framework/docusaurus-plugin-interactive-tasks')
-                .remarkTaskDirective,
-              { tocEnabled: true, tocHeadingLevel: 2 },
-            ],
-          ],
-        },
-      },
-    ],
-  ],
-  plugins: [
-    [
-      '@docusaurus/plugin-content-docs',
-      {
-        id: 'resources',
-        path: 'resources',
-        // Resources docs: use h3 for tasks
-        beforeDefaultRemarkPlugins: [
-          [
-            require('@sp-days-framework/docusaurus-plugin-interactive-tasks')
-              .remarkTaskDirective,
-            { tocEnabled: true, tocHeadingLevel: 3 },
-          ],
-        ],
-      },
-    ],
-  ],
-};
-```
-
-## Document Frontmatter Options
-
-| Property                        | Type      | Default | Description                                        |
-| ------------------------------- | --------- | ------- | -------------------------------------------------- |
-| `sidebar_task_hide_progress`    | `boolean` | `false` | Hide the task progress badge entirely              |
-| `sidebar_task_disable_icon`     | `boolean` | `false` | Show "5/5" instead of checkmark icon when complete |
-| `sidebar_task_badge_colors`     | `object`  | -       | Badge color configuration (see below)              |
-
-### Badge Colors Structure
-
-```yaml
-sidebar_task_badge_colors:
-  completed:
-    lightmode: "#4caf50"  # Background color when all tasks completed (light mode)
-    darkmode: "#66bb6a"   # Background color when all tasks completed (dark mode)
-  incomplete:
-    lightmode: "#2196f3"  # Background color when tasks incomplete (light mode)
-    darkmode: "#42a5f5"   # Background color when tasks incomplete (dark mode)
-  font:
-    lightmode: "#ffffff"  # Text color (light mode)
-    darkmode: "#000000"   # Text color (dark mode)
-```
-
-**Supported Color Formats:**
-
-- Hex: `#ff6b6b`, `#f00`
-- RGB/RGBA: `rgb(255, 107, 107)`, `rgba(255, 107, 107, 0.8)`
-- HSL/HSLA: `hsl(0, 100%, 71%)`
-- Named colors: `red`, `blue`, `green`
-- CSS variables: `var(--ifm-color-primary)`
-
-## How It Works
-
-### Task Registry
-
-During the build process, the plugin:
-
-1. **Scans** all MDX files in the docs directory for task directives
-2. **Extracts** metadata from each task (name, number, document info)
-3. **Reads** frontmatter for document-level badge customization
-4. **Generates** a registry file (`task-registry.json`) containing:
-   - Total task count per document
-   - Task names and sequential numbers
-   - Document metadata (title, section, permalink)
-   - Badge customization settings from frontmatter
-   - Sidebar position information
-
-The registry powers features like the TaskProgression component and sidebar badges.
-
-### Completion Tracking
-
-Task completion is tracked using browser localStorage:
-
-- **Storage Keys** - Format: `task-{pluginId}-{docId}-{taskNumber}-{encodedName}`
-- **Real-time Updates** - Progress updates immediately when tasks are completed
-- **Cross-tab Sync** - Changes sync across browser tabs via storage events
-- **Persistence** - Completion state persists across browser sessions
-
-### Path Resolution
-
-The TaskProgression component uses intelligent path resolution:
-
-1. **Normalizes** the provided path (handles `@site/` prefix, file extensions)
-2. **Resolves** relative paths (`.`, `./`, `../`) based on current document
-3. **Searches** the task registry for matching document source
-4. **Returns** document metadata and task information
-
-This allows flexible path references:
-
-```mdx
-<!-- Absolute paths -->
-<TaskProgression path="/docs/module1/tasks" />
-
-<!-- Relative paths -->
-<TaskProgression path="./sibling-page" />
-<TaskProgression path="../parent-page" />
-
-<!-- Current page -->
-<TaskProgression path="." />
-```
-
-## Multiple Docs Instances
-
-The plugin automatically works with [multiple docs instances](https://docusaurus.io/docs/docs-multi-instance). Each instance is tracked independently:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  presets: [
-    [
-      '@docusaurus/preset-classic',
-      {
-        docs: {
-          path: 'docs',
-          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',
-        routeBasePath: 'community',
-        remarkPlugins: [
-          require('@sp-days-framework/docusaurus-plugin-interactive-tasks').remarkTaskDirective,
-        ],
-      },
-    ],
-  ],
-};
-```
-
-The `TaskProgression` component auto-detects the instance. To reference a different instance explicitly:
-
-```mdx
-<!-- Auto-detects parent doc's instance -->
-<TaskProgression path="./intro" />
-
-<!-- Explicitly reference a different instance -->
-<TaskProgression path="/docs/intro" pluginId="default" />
-<TaskProgression path="/community/getting-started" pluginId="community" />
-```
-
-### Configuring `TaskProgression`
-
-| Prop       | Type     | Default     | Description                                    |
-| ---------- | -------- | ----------- | ---------------------------------------------- |
-| `path`     | `string` | **Required** | Path to the document (absolute or relative)   |
-| `pluginId` | `string` | *Auto-detected* | [Docs Multi-instance](https://docusaurus.io/docs/docs-multi-instance) instance ID. Auto-detects from parent doc if not provided. |
-
-### Configuring `TaskProgressionOverview`
-
-| Prop       | Type     | Default     | Description                  |
-| ---------- | -------- | ----------- | ---------------------------- |
-| `pluginId` | `string` | *Auto-detected* | [Docs Multi-instance](https://docusaurus.io/docs/docs-multi-instance) instance ID. Auto-detects from parent doc if not provided. |

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

@@ -1,120 +0,0 @@
----
-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: {
-          beforeDefaultRemarkPlugins: [
-            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

@@ -1,140 +0,0 @@
----
-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

@@ -1,106 +0,0 @@
----
-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