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

package/templates/page-course/course/placeholder-advanced-usage.mdx

@@ -0,0 +1,304 @@
+---
+sidebar_position: 2
+task_section_name: "Demo Module 2"
+---
+
+import { useState } from 'react';
+
+# Advanced Task Page
+
+Discover how to leverage advanced Docusaurus markdown features within interactive tasks to create rich, engaging learning experiences.
+
+<TaskProgression path="." />
+
+---
+
+::::task[Add Syntax Highlighting to Code Blocks]
+
+Practice adding syntax-highlighted code blocks to your documentation:
+
+1. Create a code block using triple backticks (```)
+2. Add the language identifier immediately after the opening backticks
+3. Write your code inside the block
+4. Close with triple backticks
+
+**Bash example:**
+```bash
+docker run -d -p 8080:80 nginx
+npm install express
+```
+
+**YAML example:**
+```yaml
+version: '3.8'
+services:
+  web:
+    image: nginx:latest
+    ports:
+      - "8080:80"
+```
+
+**JSON example:**
+```json
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "dependencies": {
+    "react": "^18.0.0"
+  }
+}
+```
+
+:::hint
+Docusaurus supports 30+ languages out of the box. Check the [Prism language list](https://prismjs.com/#supported-languages) for all available options. You can add more languages in `docusaurus.config.ts` - see the [Docusaurus documentation](https://docusaurus.io/docs/markdown-features/code-blocks#supported-languages).
+:::
+
+::::
+
+---
+
+::::task[Add File Names to Code Blocks]
+
+Add descriptive file names to your code blocks for better context:
+
+1. After the language identifier, add a space and `title="filename.ext"`
+2. The filename will appear as a header above the code block
+3. This helps readers know exactly where code should be placed
+
+```json title="tsconfig.json"
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "strict": true,
+    "strictNullChecks": true,
+    "skipLibCheck": true
+  }
+}
+```
+
+:::hint
+Use this feature to show exactly where code should be placed in a project structure. It's especially helpful in tutorials with multiple files.
+:::
+
+::::
+
+---
+
+::::task[Highlight Important Code Lines]
+
+Learn two methods for highlighting specific lines in code blocks:
+
+**Method 1: Inline comments** (best when actively developing)
+
+Use `highlight-next-line`, `highlight-start`, and `highlight-end` comments to mark important lines:
+
+```js
+function HighlightSomeText(highlight) {
+  if (highlight) {
+    // highlight-next-line
+    return 'This text is highlighted!';
+  }
+
+  return 'Nothing highlighted';
+}
+
+function HighlightMoreText(highlight) {
+  // highlight-start
+  if (highlight) {
+    return 'This range is highlighted!';
+  }
+  // highlight-end
+
+  return 'Nothing highlighted';
+}
+```
+
+**Method 2: Meta string** (cleaner for published docs)
+
+Add line numbers after the language identifier. Separate multiple lines with commas or use ranges:
+
+```jsx {1,4-6,11}
+import React from 'react';
+
+function MyComponent(props) {
+  if (props.isBar) {
+    return <div>Bar</div>;
+  }
+
+  return <div>Foo</div>;
+}
+
+export default MyComponent;
+```
+
+:::hint
+
+Supported commenting syntax:
+
+| Style      | Syntax                   |
+| ---------- | ------------------------ |
+| C-style    | `/* ... */` and `// ...` |
+| JSX-style  | `{/* ... */}`            |
+| Bash-style | `# ...`                  |
+| HTML-style | `<!-- ... -->`           |
+
+Choose inline comments when actively developing, and meta strings for final published documentation.
+
+:::
+
+::::
+
+---
+
+:::::task[Nest Admonitions in Tasks]
+
+Practice nesting admonitions inside tasks by using the correct number of colons:
+
+1. Task containers use 4+ colons: `::::task`
+2. Hints/solutions use 3+ colons: `:::hint`
+3. Nested admonitions also use 3+ colons: `:::note`
+4. For deeper nesting inside hints/solutions, use 4+ colons for the admonition
+
+**Rule:** Parent containers always need **more colons** than their children to prevent the parser from prematurely closing containers.
+
+:::note
+
+This is a note at the task level (3 colons).
+
+:::
+
+:::warning
+
+This is a warning at the task level (3 colons).
+
+:::
+
+::::hint
+
+This hint contains a nested admonition (4 colons for hint, since it needs to contain a 3-colon admonition):
+
+:::note
+
+This note is nested inside the hint (3 colons).
+
+:::
+
+::::
+
+:::::
+
+---
+
+::::task[Use React Components in Tasks]
+
+Import and use React components within your task content to create interactive experiences:
+
+1. Import React and any hooks you need at the top of the file: `import { useState } from 'react';`
+2. Define your component using `export const`
+3. Use the component anywhere in your MDX content
+
+**Example - Interactive Counter:**
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <div style={{ 
+      padding: '1rem', 
+      border: '2px solid var(--ifm-color-primary)', 
+      borderRadius: '8px',
+      textAlign: 'center',
+      margin: '1rem 0'
+    }}>
+      <p style={{ fontSize: '1.5rem', margin: '0.5rem 0' }}>
+        Count: <strong>{count}</strong>
+      </p>
+      <button 
+        onClick={() => setCount(count + 1)}
+        style={{ 
+          marginRight: '0.5rem',
+          padding: '0.5rem 1rem',
+          fontSize: '1rem',
+          cursor: 'pointer'
+        }}
+      >
+        Increment
+      </button>
+      <button 
+        onClick={() => setCount(0)}
+        style={{ 
+          padding: '0.5rem 1rem',
+          fontSize: '1rem',
+          cursor: 'pointer'
+        }}
+      >
+        Reset
+      </button>
+    </div>
+  );
+};
+
+<Counter />
+
+:::hint
+
+Tasks support all Docusaurus MDX features, including:
+- React component imports and usage (useState, useEffect, etc.)
+- Tabs, admonitions, and other built-in components
+- Custom CSS and styling with theme-aware variables
+- Interactive JavaScript functionality
+
+This makes tasks perfect for interactive tutorials and hands-on learning experiences!
+
+:::
+
+:::solution
+
+Here is the React code running in the task:
+
+```ts
+import { useState } from 'react';
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <div style={{ 
+      padding: '1rem', 
+      border: '2px solid var(--ifm-color-primary)', 
+      borderRadius: '8px',
+      textAlign: 'center',
+      margin: '1rem 0'
+    }}>
+      <p style={{ fontSize: '1.5rem', margin: '0.5rem 0' }}>
+        Count: <strong>{count}</strong>
+      </p>
+      <button 
+        onClick={() => setCount(count + 1)}
+        style={{ 
+          marginRight: '0.5rem',
+          padding: '0.5rem 1rem',
+          fontSize: '1rem',
+          cursor: 'pointer'
+        }}
+      >
+        Increment
+      </button>
+      <button 
+        onClick={() => setCount(0)}
+        style={{ 
+          padding: '0.5rem 1rem',
+          fontSize: '1rem',
+          cursor: 'pointer'
+        }}
+      >
+        Reset
+      </button>
+    </div>
+  );
+};
+
+<Counter />
+```
+
+:::
+
+::::

package/templates/page-course/course/placeholder-basic-usage.mdx

@@ -0,0 +1,128 @@
+---
+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/page-course/docusaurus.config.ts

@@ -0,0 +1,171 @@
+import { themes as prismThemes } from "prism-react-renderer";
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
+
+const organizationName = "<%= organizationName %>"; // Usually Helse Sør-Øst GitHub Organization
+const projectName = "<%= projectName %>"; // Usually your repo name.
+const gitRepositoryUrl = "<%= gitRepositoryUrl %>"; // Repository URL
+const title = "<%= title %>"; // Site title
+const tagline = "<%= tagline %>"; // Site tagline
+
+const config: Config = {
+  title,
+  tagline,
+  favicon: "img/favicon-navbar/sp-days-logo",
+
+  // Improve compatibility with the upcoming Docusaurus v4
+  future: {
+    v4: true,
+  },
+
+  // Set the production url of your site here
+  url: `https://${organizationName}.github.io`,
+  baseUrl: "/",
+
+  // GitHub pages deployment config.
+  organizationName,
+  projectName,
+  trailingSlash: false,
+
+  // Recommended to set to 'throw' to ensure broken links are caught during development
+  onBrokenLinks: "throw",
+
+  // Adds static directories
+  staticDirectories: ["static"],
+
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          id: "course",
+          path: "course",
+          routeBasePath: "course",
+          remarkPlugins: [
+            require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
+              .remarkTaskDirective,
+          ],
+        },
+        theme: {
+          customCss: "./src/css/sp-days-theme.scss",
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
+  plugins: [
+    // Adds SASS/SCSS support
+    "docusaurus-plugin-sass",
+
+    // Adds the Interactive Tasks plugin to enable task directives
+    "@sp-days-framework/docusaurus-plugin-interactive-tasks",
+
+    // CONDITIONAL: addon-slidev (START)
+    // Adds the Slidev plugin to enable slide presentations and static directories for Slidev assets
+    "@sp-days-framework/docusaurus-plugin-slidev",
+    // CONDITIONAL: addon-slidev (END)
+
+    // CONDITIONAL: addon-resources (START)
+    // Resources documentation instance
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        id: "resources",
+        path: "resources",
+        routeBasePath: "resources",
+        remarkPlugins: [
+          require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
+            .remarkTaskDirective,
+        ],
+      },
+    ],
+    // CONDITIONAL: addon-resources (END)
+  ],
+
+  markdown: {
+    mermaid: true,
+  },
+
+  // Mermaid support
+  themes: ["@docusaurus/theme-mermaid"],
+
+  themeConfig: {
+    colorMode: {
+      respectPrefersColorScheme: true,
+    },
+    navbar: {
+      title: title,
+      logo: {
+        alt: "Sykehuspartner HF",
+        src: "img/favicon-navbar/sorost-logo-light.svg",
+        srcDark: "img/favicon-navbar/sorost-logo-dark.svg",
+      },
+      items: [
+        { to: "/course", label: "Course" },
+        // CONDITIONAL: addon-resources (START)
+        { to: "/resources", label: "Resources" },
+        // CONDITIONAL: addon-resources (END)
+        // CONDITIONAL: addon-slidev (START)
+        { to: "/slidev", label: "Slides" },
+        // CONDITIONAL: addon-slidev (END)
+        {
+          href: gitRepositoryUrl,
+          position: "right",
+          className: "navbar-github-link",
+          "aria-label": "GitHub repository",
+        },
+      ],
+    },
+    footer: {
+      style: "dark",
+      logo: {
+        alt: "Sykehuspartner Logo",
+        src: "img/footer/sykehuspartner-dark.svg",
+        href: "https://www.sykehuspartner.no/",
+        width: 360,
+        height: 81,
+      },
+      copyright: `Copyright © ${new Date().getFullYear()} Sykehuspartner . Built with Docusaurus.`,
+    },
+    prism: {
+      additionalLanguages: [
+        "bash",
+        "batch",
+        "c",
+        "csharp",
+        "docker",
+        "dot",
+        "git",
+        "hcl",
+        "http",
+        "ignore",
+        "ini",
+        "log",
+        "makefile",
+        "mermaid",
+        "nginx",
+        "plant-uml",
+        "powershell",
+        "cshtml",
+        "regex",
+        "sass",
+        "scss",
+        "shell-session",
+        "solution-file",
+        "splunk-spl",
+        "sql",
+        "systemd",
+        "toml",
+        "typescript",
+        "typoscript",
+        "uri",
+        "vim",
+        "yaml",
+      ],
+      theme: prismThemes.oceanicNext,
+      darkTheme: prismThemes.oceanicNext,
+    },
+  } satisfies Preset.ThemeConfig,
+};
+
+export default config;

package/templates/page-course/example-github-pages.yml

@@ -0,0 +1,66 @@
+# IMPORTANT: Verify that all paths below match your project structure.
+# The DOCS_PATH variable should point to your documentation directory.
+
+name: Deploy to GitHub Pages
+
+# Environment variable for the documentation path
+# Change this if your documentation is in a different location
+env:
+  DOCS_PATH: <%= directoryName %>
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - '<%= directoryName %>/**'
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    name: Build Docusaurus
+    runs-on: ubuntu-latest
+    environment: github-pages
+    defaults:
+      run:
+        working-directory: ./${{ env.DOCS_PATH }}
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: './${{ env.DOCS_PATH }}/package-lock.json'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build website
+        run: npm run build
+
+      - name: Upload Build Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./${{ env.DOCS_PATH }}/build
+
+  deploy:
+    name: Deploy to GitHub Pages
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to authenticate with GitHub Pages
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/templates/page-course/gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*