@sp-days-framework/create-sp-days 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sp-days-framework/create-sp-days",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Scaffolding tool for creating SP-Days course websites built on Docusaurus and Slidev.",
   "type": "module",
   "repository": {

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

@@ -23,28 +23,21 @@ Learn how to create interactive tasks with various features including hints, sol
 
 A simple task without hints or solutions.
 
-<Tabs>
-  <TabItem value="code" label="Code" default>
-    ```md
-    ::::task[Create a Component]
 
-    Create a new React component in `src/components/MyComponent.tsx`.
+```md
+::::task[Create a Component]
 
-    ::::
-    ```
-  </TabItem>
-  <TabItem value="preview" label="Preview">
-    <div className="preview">
-      <div className="container" style={{ width: '-webkit-fill-available' }}> 
-        ::::task-example[Create a Component]
+Create a new React component in `src/components/MyComponent.tsx`.
 
-        Create a new React component in `src/components/MyComponent.tsx`.
+::::
+```
+
+::::task-example[Create a Component]
+
+Create a new React component in `src/components/MyComponent.tsx`.
+
+::::
 
-        ::::
-      </div>
-    </div>
-  </TabItem>
-</Tabs>
 
 ---
 
@@ -52,36 +45,28 @@ A simple task without hints or solutions.
 
 Add a hint to guide users through the task.
 
-<Tabs>
-  <TabItem value="code" label="Code" default>
-    ```mdx
-    ::::task[Configure TypeScript]
 
-    Set up TypeScript configuration for strict mode.
+```mdx
+::::task[Configure TypeScript]
 
-    :::hint
-    Look for the `tsconfig.json` file in your project root.
-    :::
+Set up TypeScript configuration for strict mode.
 
-    ::::
-    ```
-  </TabItem>
-  <TabItem value="preview" label="Preview">
-    <div className="preview">
-      <div className="container" style={{ width: '-webkit-fill-available' }}> 
-        ::::task-example[Configure TypeScript]
+:::hint
+Look for the `tsconfig.json` file in your project root.
+:::
 
-        Set up TypeScript configuration for strict mode.
+::::
+```
 
-        :::hint
-        Look for the `tsconfig.json` file in your project root.
-        :::
+::::task-example[Configure TypeScript]
 
-        ::::
-      </div>
-    </div>
-  </TabItem>
-</Tabs>
+Set up TypeScript configuration for strict mode.
+
+:::hint
+Look for the `tsconfig.json` file in your project root.
+:::
+
+::::
 
 ---
 
@@ -89,36 +74,28 @@ Add a hint to guide users through the task.
 
 Provide a complete solution for the task.
 
-<Tabs>
-  <TabItem value="code" label="Code" default>
-    ```mdx
-    ::::task[Create Package JSON]
 
-    Initialize a new Node.js project with npm.
+```mdx
+::::task[Create Package JSON]
 
-    :::solution
-    Run `npm init -y` in your project directory.
-    :::
+Initialize a new Node.js project with npm.
 
-    ::::
-    ```
-  </TabItem>
-  <TabItem value="preview" label="Preview">
-    <div className="preview">
-      <div className="container" style={{ width: '-webkit-fill-available' }}> 
-        ::::task-example[Create Package JSON]
+:::solution
+Run `npm init -y` in your project directory.
+:::
 
-        Initialize a new Node.js project with npm.
+::::
+```
 
-        :::solution
-        Run `npm init -y` in your project directory.
-        :::
+::::task-example[Create Package JSON]
 
-        ::::
-      </div>
-    </div>
-  </TabItem>
-</Tabs>
+Initialize a new Node.js project with npm.
+
+:::solution
+Run `npm init -y` in your project directory.
+:::
+
+::::
 
 ---
 
@@ -126,60 +103,52 @@ Provide a complete solution for the task.
 
 Combine both hint and solution for comprehensive guidance.
 
-<Tabs>
-  <TabItem value="code" label="Code" default>
-    ````mdx
-    ::::task[Add API Route]
-
-    Create a new API endpoint for user authentication.
-
-    :::hint
-    API routes in Next.js go in the `app/api` directory.
-    :::
-
-    :::solution
-    Create `app/api/auth/route.ts`:
-
-    ```typescript
-    export async function POST(request: Request) {
-    const body = await request.json();
-    // Authentication logic here
-    return Response.json({ success: true });
-    }
-    ```
-    :::
-
-    ::::
-    ````
-  </TabItem>
-  <TabItem value="preview" label="Preview">
-    <div className="preview">
-      <div className="container" style={{ width: '-webkit-fill-available' }}> 
-        ::::task-example[Add API Route]
-
-        Create a new API endpoint for user authentication.
-
-        :::hint
-        API routes in Next.js go in the `app/api` directory.
-        :::
-
-        :::solution
-        Create `app/api/auth/route.ts`:
-
-        ```typescript
-        export async function POST(request: Request) {
-        const body = await request.json();
-        // Authentication logic here
-        return Response.json({ success: true });
-        }
-        ```
-        :::
-
-        ::::
-      </div>
-    </div>
-  </TabItem>
-</Tabs>
+````mdx
+::::task[Add API Route]
+
+Create a new API endpoint for user authentication.
+
+:::hint
+API routes in Next.js go in the `app/api` directory.
+:::
+
+:::solution
+Create `app/api/auth/route.ts`:
+
+```typescript
+export async function POST(request: Request) {
+const body = await request.json();
+// Authentication logic here
+return Response.json({ success: true });
+}
+```
+:::
+
+::::
+````
+
+::::task-example[Add API Route]
+
+Create a new API endpoint for user authentication.
+
+:::hint
+API routes in Next.js go in the `app/api` directory.
+:::
+
+:::solution
+Create `app/api/auth/route.ts`:
+
+```typescript
+export async function POST(request: Request) {
+const body = await request.json();
+// Authentication logic here
+return Response.json({ success: true });
+}
+```
+:::
+
+::::
+
 
 ---
 
@@ -187,76 +156,69 @@ Combine both hint and solution for comprehensive guidance.
 
 Tasks fully support standard Docusaurus markdown features like the [admonitions feature](https://docusaurus.io/docs/markdown-features/admonitions).
 
-<Tabs>
-  <TabItem value="code" label="Code" default>
-    ````mdx
-    ::::task[Setup Development Environment]
 
-    Follow these steps to configure your workspace.
+````mdx
+::::task[Setup Development Environment]
+
+Follow these steps to configure your workspace.
+
+:::note
+Make sure you have Node.js 18+ installed before proceeding.
+:::
+
+**Installation Steps:**
 
-    :::note
-    Make sure you have Node.js 18+ installed before proceeding.
-    :::
+1. Install dependencies:
+```bash
+npm install
+```
 
-    **Installation Steps:**
+2. Start the development server:
+```bash
+npm run dev
+```
 
-    1. Install dependencies:
-    ```bash
-    npm install
-    ```
+:::warning
+Do not commit your `.env` file to version control!
+:::
 
-    2. Start the development server:
-    ```bash
-    npm run dev
-    ```
+:::hint
+Check the README.md for environment variable examples.
+:::
 
-    :::warning
-    Do not commit your `.env` file to version control!
-    :::
+::::
+````
 
-    :::hint
-    Check the README.md for environment variable examples.
-    :::
+::::task-example[Setup Development Environment]
 
-    ::::
-    ````
-  </TabItem>
-  <TabItem value="preview" label="Preview">
-    <div className="preview">
-      <div className="container" style={{ width: '-webkit-fill-available' }}> 
-        ::::task-example[Setup Development Environment]
+Follow these steps to configure your workspace.
 
-        Follow these steps to configure your workspace.
+:::note
+Make sure you have Node.js 18+ installed before proceeding.
+:::
 
-        :::note
-        Make sure you have Node.js 18+ installed before proceeding.
-        :::
+**Installation Steps:**
 
-        **Installation Steps:**
+1. Install dependencies:
+```bash
+npm install
+```
 
-        1. Install dependencies:
-        ```bash
-        npm install
-        ```
+2. Start the development server:
+```bash
+npm run dev
+```
 
-        2. Start the development server:
-        ```bash
-        npm run dev
-        ```
+:::warning
+Do not commit your `.env` file to version control!
+:::
 
-        :::warning
-        Do not commit your `.env` file to version control!
-        :::
+:::hint
+Check the README.md for environment variable examples.
+:::
 
-        :::hint
-        Check the README.md for environment variable examples.
-        :::
+::::
 
-        ::::
-      </div>
-    </div>
-  </TabItem>
-</Tabs>
 
 ## Nesting
 

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

@@ -8,7 +8,130 @@ import TabItem from "@theme/TabItem";
 
 # Advanced Configuration
 
-## Frontmatter Options Reference
+## 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                                        |
 | ------------------------------- | --------- | ------- | -------------------------------------------------- |

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

@@ -39,7 +39,7 @@ module.exports = {
       "classic",
       {
         docs: {
-          remarkPlugins: [
+          beforeDefaultRemarkPlugins: [
             require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
               .remarkTaskDirective,
           ],
@@ -50,60 +50,6 @@ module.exports = {
 };
 ```
 
-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:

package/templates/addon-slidev/package.json

@@ -20,10 +20,10 @@
     "@docusaurus/preset-classic": "^3.9.2",
     "@docusaurus/theme-mermaid": "^3.9.2",
     "@mdx-js/react": "^3.0.0",
-    "@sp-days-framework/docusaurus-frontpage-collection": "^1.0.2",
-    "@sp-days-framework/docusaurus-plugin-interactive-tasks": "^1.0.2",
-    "@sp-days-framework/docusaurus-plugin-slidev": "^1.0.2",
-    "@sp-days-framework/slidev-theme-sykehuspartner": "^1.0.2",
+    "@sp-days-framework/docusaurus-frontpage-collection": "^1.0.4",
+    "@sp-days-framework/docusaurus-plugin-interactive-tasks": "^1.0.4",
+    "@sp-days-framework/docusaurus-plugin-slidev": "^1.0.4",
+    "@sp-days-framework/slidev-theme-sykehuspartner": "^1.0.4",
     "clsx": "^2.0.0",
     "docusaurus-plugin-sass": "^0.2.6",
     "prism-react-renderer": "^2.3.0",

package/templates/page-course/docusaurus.config.ts

@@ -41,7 +41,7 @@ const config: Config = {
           id: "course",
           path: "course",
           routeBasePath: "course",
-          remarkPlugins: [
+          beforeDefaultRemarkPlugins: [
             require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
               .remarkTaskDirective,
           ],
@@ -73,9 +73,16 @@ const config: Config = {
         id: "resources",
         path: "resources",
         routeBasePath: "resources",
-        remarkPlugins: [
-          require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
-            .remarkTaskDirective,
+        beforeDefaultRemarkPlugins: [
+          [
+            require('@sp-days-framework/docusaurus-plugin-interactive-tasks')
+              .remarkTaskDirective,
+            {
+              // TOC configuration for resources docs instance
+              tocEnabled: true,
+              tocHeadingLevel: 3, // Use h2 for TOC entries (can be 2-6)
+            },
+          ],
         ],
       },
     ],
@@ -90,6 +97,11 @@ const config: Config = {
   themes: ["@docusaurus/theme-mermaid"],
 
   themeConfig: {
+    docs: {
+      sidebar: {
+        hideable: true,
+      },
+    },
     colorMode: {
       respectPrefersColorScheme: true,
     },

package/templates/page-course/package.json

@@ -19,8 +19,8 @@
     "@docusaurus/preset-classic": "^3.9.2",
     "@docusaurus/theme-mermaid": "^3.9.2",
     "@mdx-js/react": "^3.0.0",
-    "@sp-days-framework/docusaurus-frontpage-collection": "^1.0.2",
-    "@sp-days-framework/docusaurus-plugin-interactive-tasks": "^1.0.2",
+    "@sp-days-framework/docusaurus-frontpage-collection": "^1.0.4",
+    "@sp-days-framework/docusaurus-plugin-interactive-tasks": "^1.0.4",
     "clsx": "^2.0.0",
     "docusaurus-plugin-sass": "^0.2.6",
     "prism-react-renderer": "^2.3.0",