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

package/templates/addon-resources/resources/interactive-tasks/examples/basic-usage.mdx

@@ -1,128 +0,0 @@
----
-sidebar_position: 1
-task_section_name: "Demo Module 1"
----
-
-# Basic Task Page
-
-See interactive tasks in action with real-world examples. This page demonstrates how tasks work in a documentation environment.
-
-<TaskProgression path="."/>
-
----
-
-::::task[Install the Plugin]
-
-Follow these steps to add Interactive Tasks to your Docusaurus project:
-
-1. Open your terminal in the project root directory
-2. Run the installation command for your package manager
-3. Verify the package appears in your `package.json` dependencies
-
-
-:::hint
-
-If you created your project with `@sp-days-framework/create-sp-days`, this plugin is already installed and you can skip this task.
-
-:::
-
-::::
-
----
-
-::::task[Configure Docusaurus]
-
-Add the plugin and remark plugin to your Docusaurus configuration:
-
-1. Open `docusaurus.config.js` in your project root
-2. Add the plugin to the `plugins` array
-3. Add the remark plugin to your preset's docs configuration
-4. Save the file
-
-:::solution
-
-The plugin needs to be registered in two places: the `plugins` array for the main functionality, and the `remarkPlugins` array to transform task directives in your markdown files.
-
-**Verify Configuration:**
-
-- The file should have both entries as shown below
-- No syntax errors when running `npm run start`
-
-Add to your `docusaurus.config.js`:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  plugins: ["@sp-days-framework/docusaurus-plugin-interactive-tasks"],
-
-  presets: [
-    [
-      "classic",
-      {
-        docs: {
-          remarkPlugins: [
-            require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
-              .remarkTaskDirective,
-          ],
-        },
-      },
-    ],
-  ],
-};
-```
-
-:::
-
-::::
-
----
-
-::::task[Add Progress Tracking]
-
-Display task completion progress on your documentation pages:
-
-1. Import the `TaskProgression` component in your MDX file
-2. Add the component where you want to show progress
-3. Provide the path to the document you want to track
-
-Add to your MDX file:
-
-```mdx
-import TaskProgression from "@theme/TaskProgression";
-
-<TaskProgression path="." />
-```
-
-Reference other pages:
-
-```mdx
-<TaskProgression path="/docs/tutorial/first-task" />
-<TaskProgression path="../module-02/introduction" />
-```
-
-:::hint
-
-Use `path="."` to reference the current page, or provide an absolute/relative path to track other pages. The component shows a visual progress bar and completion count.
-
-:::
-
-::::
-
----
-
-::::task[Test Auto-Collapse Feature]
-
-Learn how the auto-collapse feature helps you focus on incomplete tasks:
-
-1. Complete at least one task on this page by clicking "Mark as Done"
-2. Look for the collapse icon button in the navbar
-3. Click the collapse icon to enable auto-collapse mode
-4. Observe how completed tasks automatically collapse
-5. Click the collapse icon again to disable the feature
-
-:::hint
-
-The auto-collapse setting is saved to your browser's localStorage and syncs across all tabs. This feature is especially useful when working through long tutorial pages with many tasks.
-
-:::
-
-::::

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

@@ -1,93 +0,0 @@
----
-title: Interactive Tasks
-sidebar_custom_props:
-  sidebar_task_hide_progress: 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"/>
-  </div>
-  <div align="center">
-    # Docusaurus Interactive Tasks
-  </div>
-  <div align="center">
-    <p>
-        *A Docusaurus plugin that transforms documentation into interactive learning experiences!*
-    </p>
-    <h4>
-        [Setup](./setup/index.mdx)
-        ·
-        [NPM Package](https://www.npmjs.com/package/@sp-days-framework/docusaurus-plugin-interactive-tasks)
-        ·
-        [Source Code](https://github.com/helse-sorost/sp-days-framework)
-    </h4>
-  </div>
-</div>
-
----
-
-## Features
-
-- **Interactive Tasks** - Collapsible task components with completion tracking
-- **Hints & Solutions** - Optional toggleable hints and solutions for each task
-- **Auto-Numbering** - Automatic task numbering per page
-- **Persistent Progress** - Completion status saved to localStorage
-- **Progress Tracking** - Visual progress indicators in sidebar and task progression components
-- **Sidebar Badges** - Automatic completion badges (e.g., "2/5") in sidebar navigation
-- **Auto-Collapse Toggle** - Navbar button to enable/disable auto-collapsing of completed tasks
-
-## Getting Started
-
-Create interactive tasks using simple markdown directives:
-
-````mdx
-::::task[Install the Plugin]
-
-Install the Interactive Tasks plugin using npm or yarn.
-
-:::hint
-Use npm install or yarn add to install the package.
-:::
-
-:::solution
-```bash
-npm install @sp-days-framework/docusaurus-plugin-interactive-tasks
-```
-:::
-
-::::
-````
-
-<div className="preview">
-  <div className="container" style={{ width: '-webkit-fill-available' }}>
-    ::::task-example[Install the Plugin]
-
-    Install the Interactive Tasks plugin using npm or yarn.
-
-    :::hint
-    Use npm install or yarn add to install the package.
-    :::
-
-    :::solution
-    ```bash
-    npm install @sp-days-framework/docusaurus-plugin-interactive-tasks
-    ```
-    :::
-
-    ::::
-  </div>
-</div>
-<br>
-</br>
-
-Tasks are automatically numbered, track completion in localStorage, and sync across browser tabs. See [Setup](./setup/index.mdx) for installation and configuration.
-
-## Documentation
-
-- **[Creating Tasks](./creating-tasks.mdx)** - Learn the task directive syntax
-- **[Task Progression](./task-progression.mdx)** - Display progress with components
-- **[Advanced Configuration](./setup/advanced-configuration.mdx)** - Detailed options and internals

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.