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

package/templates/addon-resources/resources/frontpage-collection/index.mdx

@@ -0,0 +1,85 @@
+---
+title: Frontpage Collection
+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">
+    # Frontpage Collection
+  </div>
+  <div align="center">
+    <p>
+        *Collection of React components for Docusaurus.
+        <br/> Designed for creating landing pages using the `.mdx` file format.*
+    </p>
+    <h4>
+        [Setup](./setup/index.mdx)
+        ·
+        [NPM Package](https://www.npmjs.com/package/@sp-days-framework/docusaurus-frontpage-collection)
+        ·
+        [Source Code](https://github.com/helse-sorost/sp-days-framework)
+    </h4>
+  </div>
+</div>
+
+---
+
+## Features
+
+- **Pre-built Components** - Professional React components ready to use
+- **Icon System** - Support for Iconify icons and custom images
+- **Theme-Aware** - Automatic light/dark mode support with customizable colors
+- **Responsive Design** - Mobile-friendly layouts that adapt to all screen sizes
+- **MDX Integration** - Works seamlessly with Docusaurus MDX pages
+
+## Getting Started
+
+Import and use components in your MDX pages:
+
+```mdx title="src/pages/index.mdx"
+---
+title: Course Homepage
+hide_table_of_contents: true
+---
+
+import {
+  HeroBanner,
+  CourseFeature,
+  Included,
+  NotIncluded
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+<HeroBanner
+  bannerText="Learn Docker with our hands-on course"
+  iconify="mdi:docker"
+/>
+
+<CourseFeature>
+  <Included>
+    - Hands-on exercises
+    - Real-world examples
+  </Included>
+  <NotIncluded>
+    - Prerequisites knowledge
+    - Development environment
+  </NotIncluded>
+</CourseFeature>
+```
+
+See [Setup](./setup/index.mdx) for installation and configuration.
+
+## Available Components
+
+- **[Block](./components/ContentBlock.mdx)** - Simple styled content block
+- **[Columns](./components/Columns.mdx)** - Two-column responsive layout
+- **[CourseFeature](./components/CourseFeature.mdx)** - Display course features with included/not included sections
+- **[FancyHeader](./components/FancyHeader.mdx)** - Header with decorative underline
+- **[GetStarted](./components/GetStarted.mdx)** - Call-to-action section with explore items
+- **[HeroBanner](./components/HeroBanner.mdx)** - Full-width banner with title and icon
+- **[IconContainersSection](./components/IconContainer.mdx)** - Display icon containers in a grid
+- **[Iconify](./components/Iconify.mdx)** - Add Iconify icons to pages with theme-aware colors

package/templates/addon-resources/resources/frontpage-collection/setup/index.mdx

@@ -0,0 +1,185 @@
+---
+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 Frontpage Collection is already installed and configured. You can start using components right away!
+:::
+
+## Installation
+
+Install the package using your preferred package manager:
+
+<Tabs>
+  <TabItem value="npm" label="npm" default>
+    ```bash
+    npm install @sp-days-framework/docusaurus-frontpage-collection
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    ```bash
+    yarn add @sp-days-framework/docusaurus-frontpage-collection
+    ```
+  </TabItem>
+</Tabs>
+
+Unlike plugins, the Frontpage Collection works immediately after installation. No changes to `docusaurus.config.js` are needed.
+
+## Configuration
+
+### Import Methods
+
+You can import components in several ways depending on your needs.
+
+<Tabs>
+  <TabItem value="individual" label="Individual Imports (Recommended)" default>
+      Import only the components you need for optimal bundle size:
+
+      ```mdx title="src/pages/index.mdx"
+      import {
+        HeroBanner,
+        IconContainersSection,
+        IconContainerBlock,
+      } from "@sp-days-framework/docusaurus-frontpage-collection";
+
+      <HeroBanner
+        bannerText="Welcome to Our Course"
+        iconify="mdi:school"
+      />
+
+      <IconContainersSection>
+        <IconContainerBlock
+          title="Getting Started"
+          iconify="mdi:rocket-launch"
+          link="/docs/intro"
+        />
+      </IconContainersSection>
+      ```
+  </TabItem>
+  <TabItem value="default" label="Default Imports">
+    Import specific components directly from their source:
+
+    ```mdx title="src/pages/index.mdx"
+    import HeroBanner from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/HeroBanner";
+    import IconContainersSection, { IconContainerBlock } from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/IconContainer";
+
+    <HeroBanner bannerText="Welcome" iconify="mdi:school" />
+
+    <IconContainersSection>
+      <IconContainerBlock title="Start" iconify="mdi:rocket-launch" link="/docs/intro" />
+    </IconContainersSection>
+    ```
+  </TabItem>
+  <TabItem value="wildcard" label="Wildcard">
+    :::warning[Not Recommended]
+    Wildcard imports may increase bundle size as they import the entire library. Use individual imports instead.
+    :::
+
+    ```mdx title="src/pages/index.mdx"
+    import * as Components from "@sp-days-framework/docusaurus-frontpage-collection";
+
+    <Components.HeroBanner bannerText="Welcome" iconify="mdi:school" />
+    ```
+  </TabItem>
+</Tabs>
+
+### Where to Use
+
+The components are designed for creating landing pages in MDX format. Place your landing pages in the `/src/pages/` directory:
+
+```
+src/pages/
+├── index.mdx              # Homepage
+├── courses.mdx            # Courses overview
+└── workshops/
+    └── index.mdx          # Workshop landing page
+```
+
+Files in `/src/pages/` automatically map to URLs:
+
+- `src/pages/index.mdx` → `/`
+- `src/pages/courses.mdx` → `/courses`
+- `src/pages/workshops/index.mdx` → `/workshops/`
+
+### Page Configuration
+
+Use frontmatter to configure your landing pages:
+
+```mdx title="src/pages/index.mdx"
+---
+title: Course Homepage
+description: Learn with our comprehensive course
+hide_table_of_contents: true
+---
+
+import { HeroBanner, CourseFeature } from "@sp-days-framework/docusaurus-frontpage-collection";
+
+<HeroBanner
+  bannerText="Learn with our hands-on course"
+  iconify="mdi:school"
+/>
+```
+
+:::tip
+Set `hide_table_of_contents: true` in frontmatter for cleaner landing pages.
+:::
+
+### Icon Configuration
+
+All components support flexible icon configuration.
+
+**Using Iconify Icons:**
+
+Browse icons at [Iconify](https://icon-sets.iconify.design/) and use the icon name:
+
+```mdx
+<HeroBanner
+  iconify="mdi:docker"
+  iconColors={{
+    light: "#2496ED",
+    dark: "#2496ED"
+  }}
+/>
+```
+
+**Using Custom Images:**
+
+Provide custom SVG or PNG images with theme variants:
+
+```mdx
+<HeroBanner
+  customSvg={{
+    light: "img/logo-light.svg",
+    dark: "img/logo-dark.svg",
+  }}
+/>
+```
+
+Place custom images in the `/static/img/` directory.
+
+### Usage with React Pages
+
+:::note
+While the components are compatible with React (`.jsx`, `.tsx`) pages, we recommend using them in MDX pages for the best experience.
+:::
+
+If using in React pages, import as standard React components:
+
+```tsx title="src/pages/index.tsx"
+import React from 'react';
+import { HeroBanner } from '@sp-days-framework/docusaurus-frontpage-collection';
+
+export default function Home() {
+  return (
+    <HeroBanner
+      bannerText="Welcome to Our Course"
+      iconify="mdi:school"
+    />
+  );
+}
+```

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

@@ -0,0 +1,35 @@
+---
+sidebar_position: 1
+sidebar_class_name: sidebar-logo-sp-days
+pagination_next: null
+---
+
+import {
+IconContainersSection,
+IconContainerBlock,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+# Resources Overview
+
+<IconContainersSection maxItemsPerRow="2">
+  <IconContainerBlock
+    title="Frontpage Collection"
+    iconify="mdi:code-block-tags"
+    link="/resources/frontpage-collection/"
+  />
+  <IconContainerBlock
+    title="Interactive Tasks"
+    iconify="ci:window-check"
+    link="/resources/interactive-tasks/"
+  />
+  <IconContainerBlock
+    title="Slidev Integration"
+    iconify="mdi:television-play"
+    link="/resources/slidev-integration/"
+  />
+  <IconContainerBlock
+    title="Slidev SP Theme"
+    iconify="mdi:palette-outline"
+    link="/resources/sykehuspartner-theme/"
+  />
+</IconContainersSection>

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

@@ -0,0 +1,292 @@
+---
+sidebar_position: 2
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import Mermaid from '@theme/Mermaid';
+
+# Task Component
+
+Learn how to create interactive tasks with various features including hints, solutions, and non-persistent examples.
+
+## Syntax Reference
+
+| Element | Directive | Requirement | Notes |
+|---------|-----------|-------------|-------|
+| **Task Container** | `::::task[Task Name]` (4+ colons) | Required | Tasks are auto-numbered sequentially per page |
+| **Hint Section** | `:::hint` (3+ colons) | Optional | Max one per task; additional hints ignored with warning. Can appear anywhere inside task container |
+| **Solution Section** | `:::solution` (3+ colons) | Optional | Max one per task; additional solutions ignored with warning. Can appear anywhere inside task container |
+| **Task Example** | `::::task-example[Example Name]` (4+ colons) | Required | Same as regular tasks but non-persistent; uses "Example N" numbering |
+
+## Basic Task
+
+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`.
+
+    ::::
+    ```
+  </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`.
+
+        ::::
+      </div>
+    </div>
+  </TabItem>
+</Tabs>
+
+---
+
+## Task with Hint
+
+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.
+
+    :::hint
+    Look for the `tsconfig.json` file in your project root.
+    :::
+
+    ::::
+    ```
+  </TabItem>
+  <TabItem value="preview" label="Preview">
+    <div className="preview">
+      <div className="container" style={{ width: '-webkit-fill-available' }}> 
+        ::::task-example[Configure TypeScript]
+
+        Set up TypeScript configuration for strict mode.
+
+        :::hint
+        Look for the `tsconfig.json` file in your project root.
+        :::
+
+        ::::
+      </div>
+    </div>
+  </TabItem>
+</Tabs>
+
+---
+
+## Task with Solution
+
+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.
+
+    :::solution
+    Run `npm init -y` in your project directory.
+    :::
+
+    ::::
+    ```
+  </TabItem>
+  <TabItem value="preview" label="Preview">
+    <div className="preview">
+      <div className="container" style={{ width: '-webkit-fill-available' }}> 
+        ::::task-example[Create Package JSON]
+
+        Initialize a new Node.js project with npm.
+
+        :::solution
+        Run `npm init -y` in your project directory.
+        :::
+
+        ::::
+      </div>
+    </div>
+  </TabItem>
+</Tabs>
+
+---
+
+## Task with Hint and Solution
+
+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>
+
+---
+
+## Using Markdown Features
+
+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.
+
+    :::note
+    Make sure you have Node.js 18+ installed before proceeding.
+    :::
+
+    **Installation Steps:**
+
+    1. Install dependencies:
+    ```bash
+    npm install
+    ```
+
+    2. Start the development server:
+    ```bash
+    npm run dev
+    ```
+
+    :::warning
+    Do not commit your `.env` file to version control!
+    :::
+
+    :::hint
+    Check the README.md for environment variable examples.
+    :::
+
+    ::::
+    ````
+  </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.
+
+        :::note
+        Make sure you have Node.js 18+ installed before proceeding.
+        :::
+
+        **Installation Steps:**
+
+        1. Install dependencies:
+        ```bash
+        npm install
+        ```
+
+        2. Start the development server:
+        ```bash
+        npm run dev
+        ```
+
+        :::warning
+        Do not commit your `.env` file to version control!
+        :::
+
+        :::hint
+        Check the README.md for environment variable examples.
+        :::
+
+        ::::
+      </div>
+    </div>
+  </TabItem>
+</Tabs>
+
+## Nesting
+
+The `::::task` directive supports nesting [admonitions](https://docusaurus.io/docs/markdown-features/admonitions) and other markdown features by using colon count to determine hierarchy. Each parent container must use **more colons** than its children to prevent premature closure.
+
+**Nesting rules:**
+- Task container: `::::task` (4+ colons)
+  - Hint/Solution: `:::hint` or `:::solution` (3+ colons)
+    - Nested admonition: `:::note`, `:::tip`, etc. (3+ colons)
+    - For deeper nesting, add more colons to parent containers
+
+Each level needs more colons than its children to avoid premature closure.
+
+### Nesting Example
+
+```mdx
+::::::task[Nested Example]
+(Layer 1)
+
+:::::hint
+(Layer 2)
+
+::::note
+(Layer 3)
+
+:::warning
+(Layer 4)
+:::
+
+:::::
+
+::::::
+```

package/templates/addon-resources/resources/interactive-tasks/examples/_category_.yml

@@ -0,0 +1,3 @@
+label: 'Task Examples'
+customProps:
+  sidebar_task_hide_progress: true