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

package/templates/page-course/package.json

@@ -12,6 +12,9 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
+    // CONDITIONAL: addon-slidev (START)
+    "slidev": "slidev",
+    // CONDITIONAL: addon-slidev (END)
     "typecheck": "tsc"
   },
   "dependencies": {
@@ -19,8 +22,15 @@
     "@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.3",
-    "@sp-days-framework/docusaurus-plugin-interactive-tasks": "^1.0.3",
+    "@sp-days-framework/docusaurus-frontpage-collection": "^1.1.0-beta1",
+    "@sp-days-framework/docusaurus-plugin-interactive-tasks": "^1.1.0-beta1",
+    // CONDITIONAL: addon-slidev (START)
+    "@sp-days-framework/docusaurus-plugin-slidev": "^1.1.0-beta1",
+    "@sp-days-framework/slidev-theme-sykehuspartner": "^1.1.0-beta1",
+    // CONDITIONAL: addon-slidev (END)
+    // CONDITIONAL: package-docs (START)
+    "@sp-days-framework/create-sp-days": "^1.1.0-beta1",
+    // CONDITIONAL: package-docs (END)
     "clsx": "^2.0.0",
     "docusaurus-plugin-sass": "^0.2.6",
     "prism-react-renderer": "^2.3.0",

package/templates/page-course/sidebarSections.js

@@ -0,0 +1,118 @@
+/**
+ * Custom sidebar generator that dynamically groups pages and categories based on sidebar_custom_props.section
+ *
+ * Usage in document frontmatter:
+ * ---
+ * sidebar_label: "API Reference"
+ * sidebar_custom_props:
+ *   section: "Templates"
+ *   section_position: 2
+ * ---
+ *
+ * Usage in _category_.yml:
+ * label: "Content"
+ * customProps:
+ *   section: "Layouts"
+ *   section_position: 3
+ *
+ * Pages and categories with the same section value will be grouped together under a separator with that name.
+ * Items without a section will appear at the top in their natural order.
+ * Sections are ordered by section_position (optional). Sections without position are sorted alphabetically after positioned sections.
+ *
+ * @param {Object} params - Sidebar generation parameters
+ * @returns {Promise<Array>} Modified sidebar items with section separators
+ */
+async function dynamicSectionSidebarGenerator({
+  defaultSidebarItemsGenerator,
+  ...args
+}) {
+  const sidebarItems = await defaultSidebarItemsGenerator(args);
+
+  // Group items by section
+  const unsectioned = [];
+  const sections = new Map(); // Map<sectionName, {items: [], positions: Set}>
+
+  sidebarItems.forEach((item) => {
+    if (item.type === "doc") {
+      const doc = args.docs.find((d) => d.id === item.id);
+      const section = doc?.frontMatter?.sidebar_custom_props?.section;
+      const sectionPosition =
+        doc?.frontMatter?.sidebar_custom_props?.section_position;
+
+      if (section) {
+        if (!sections.has(section)) {
+          sections.set(section, { items: [], positions: new Set() });
+        }
+        sections.get(section).items.push(item);
+        if (sectionPosition !== undefined) {
+          sections.get(section).positions.add(sectionPosition);
+        }
+      } else {
+        unsectioned.push(item);
+      }
+    } else if (item.type === "category") {
+      // Handle categories (e.g., from _category_.yml files)
+      const section = item.customProps?.section;
+      const sectionPosition = item.customProps?.section_position;
+
+      if (section) {
+        if (!sections.has(section)) {
+          sections.set(section, { items: [], positions: new Set() });
+        }
+        sections.get(section).items.push(item);
+        if (sectionPosition !== undefined) {
+          sections.get(section).positions.add(sectionPosition);
+        }
+      } else {
+        unsectioned.push(item);
+      }
+    } else {
+      // Links, HTML items, etc. stay at top
+      unsectioned.push(item);
+    }
+  });
+
+  // Validate section_position values
+  sections.forEach((data, sectionName) => {
+    if (data.positions.size > 1) {
+      const positionValues = Array.from(data.positions).join(", ");
+      throw new Error(
+        `Section "${sectionName}" has conflicting section_position values: ${positionValues}. ` +
+          `All pages in a section must use the same section_position value.`,
+      );
+    }
+  });
+
+  // Sort sections by position, then alphabetically
+  const sortedSections = Array.from(sections.entries()).sort(
+    ([nameA, dataA], [nameB, dataB]) => {
+      const posA =
+        dataA.positions.size > 0 ? Array.from(dataA.positions)[0] : Infinity;
+      const posB =
+        dataB.positions.size > 0 ? Array.from(dataB.positions)[0] : Infinity;
+
+      if (posA !== posB) {
+        return posA - posB;
+      }
+      // If positions are equal (both Infinity or same number), sort alphabetically
+      return nameA.localeCompare(nameB);
+    },
+  );
+
+  // Build final sidebar with separators
+  const result = [...unsectioned];
+
+  sortedSections.forEach(([sectionName, data]) => {
+    result.push({
+      type: "html",
+      value: `<div style=" margin: 0.5rem; padding: 0.25rem 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.5rem;"><span style=" flex: 1; border-top: 1px solid var(--ifm-color-emphasis-300); " ></span> <span style=" text-transform: uppercase; color: var(--ifm-color-emphasis-600);
+white-space: nowrap;">${sectionName}</span><span style="flex: 1; border-top: 1px solid var(--ifm-color-emphasis-300);"></span></div>`,
+      className: `sidebar-section-${sectionName.toLowerCase().replace(/\s+/g, "-")}`,
+    });
+    result.push(...data.items);
+  });
+
+  return result;
+}
+
+module.exports = dynamicSectionSidebarGenerator;

package/tsconfig.base.client.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "${configDir}/lib/.tsbuildinfo-client",
+    "noEmit": false,
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    "target": "esnext"
+  }
+}

package/tsconfig.base.json

@@ -0,0 +1,71 @@
+{
+  "compilerOptions": {
+    "rootDir": "${configDir}/src",
+    "outDir": "${configDir}/lib",
+    "composite": true,
+    "incremental": true,
+    "tsBuildInfoFile": "${configDir}/lib/.tsbuildinfo",
+    "erasableSyntaxOnly": true,
+    /* Emit */
+    "target": "ES2020",
+    "lib": ["ESNext"],
+    "declaration": true,
+    // These two options will be selectively overridden in each project.
+    // Utility libraries will have source maps on, but plugins will not.
+    "declarationMap": false,
+    "sourceMap": false,
+    "jsx": "react-native",
+    "importHelpers": true,
+    "noEmitHelpers": true,
+    // Will be overridden in client projects
+    "module": "NodeNext",
+    // Avoid accidentally using this config to build
+    "noEmit": true,
+
+    /* Strict Type-Checking Options */
+    "allowUnreachableCode": false,
+    // Too hard to turn on
+    "exactOptionalPropertyTypes": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    // `process.env` is usually accessed as property
+    "noPropertyAccessFromIndexSignature": false,
+    "noUncheckedIndexedAccess": true,
+    /* strict family */
+    "strict": true,
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "useUnknownInCatchVariables": true,
+    /* Handled by ESLint */
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "importsNotUsedAsValues": "remove",
+
+    /* Module Resolution */
+    "moduleResolution": "NodeNext",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "allowJs": true,
+    "skipLibCheck": true // @types/webpack and webpack/types.d.ts are not the same thing
+  },
+  "include": ["./**/*", "./**/.eslintrc.js"],
+  "exclude": [
+    "node_modules",
+    "coverage/**",
+    "**/lib/**/*",
+    "website/**",
+    "**/__mocks__/**/*",
+    "**/__fixtures__/**/*",
+    "examples/**",
+    "packages/create-docusaurus/templates/**"
+  ]
+}

package/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "tsBuildInfoFile": "lib/.tsbuildinfo-build"
+  },
+  "include": ["src"],
+  "exclude": ["templates/", "**/__tests__/**"]
+}

package/templates/addon-resources/resources/frontpage-collection/components/Columns.mdx

@@ -1,191 +0,0 @@
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import {
-  Columns,
-  Left,
-  Right,
-  Block,
-} from "@sp-days-framework/docusaurus-frontpage-collection";
-
-# Columns Section
-
-Create responsive two-column layouts with customizable ratios.
-
-<div className="preview">
-  <div className="container" style={{ width: '-webkit-fill-available'}}>
-    <Columns leftRatio="60">
-      <Left>
-        ### Main Content
-        
-        This is a live example of the Columns component. The left column takes up 60% of the width, while the right column takes up 40%.
-        
-        The columns will automatically stack on smaller screens for better mobile experience.
-      </Left>
-      <Right>
-        <Block>
-          ### Quick Stats
-          
-          - **Responsive**: Stacks on mobile
-          - **Flexible**: Custom ratios
-          - **Equal height**: Automatic
-        </Block>
-      </Right>
-    </Columns>
-  </div>
-</div>
-
-## Features
-
-- Flexible column ratios
-- Equal height option
-- Automatic text wrapping
-
-## Import
-
-<Tabs>
-  <TabItem value="individual" label="Individual import" default>
-    ```mdx
-    import {
-      Columns,
-      Left,
-      Right,
-    } from "@sp-days-framework/docusaurus-frontpage-collection";
-    ```
-  </TabItem>
-  <TabItem value="default" label="Default import">
-    ```mdx
-    import Columns, { Left, Right } from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/Columns";
-    ```
-  </TabItem>
-</Tabs>
-
-## Basic Usage
-
-```mdx
-<Columns>
-  <Left>
-    Left column content
-  </Left>
-  <Right>
-    Right column content
-  </Right>
-</Columns>
-```
-
-## Props
-
-### Columns
-
-| Prop          | Type        | Default   | Description                              |
-| ------------- | ----------- | --------- | ---------------------------------------- |
-| `leftRatio`   | `string`    | `'50'`    | Width percentage for left column         |
-| `equalHeight` | `boolean`   | `true`    | Whether columns should have equal height |
-| `minWidth`    | `string`    | `'700px'` | Minimum width before stacking            |
-| `noStretch`   | `boolean`   | `false`   | Prevent columns from stretching          |
-| `children`    | `ReactNode` | required  | Left and Right components                |
-
-### Left / Right
-
-| Prop       | Type        | Description                   |
-| ---------- | ----------- | ----------------------------- |
-| `children` | `ReactNode` | Column content (supports MDX) |
-
-## Examples
-
-### 50/50 Split
-
-```mdx
-<Columns>
-  <Left>
-    ## Left Side
-    
-    Content for the left column
-  </Left>
-  <Right>
-    ## Right Side
-    
-    Content for the right column
-  </Right>
-</Columns>
-```
-
-### 60/40 Split
-
-```mdx
-<Columns leftRatio="60">
-  <Left>
-    ## Main Content (60%)
-    
-    This column takes up 60% of the width
-  </Left>
-  <Right>
-    ## Sidebar (40%)
-    
-    This column takes up 40% of the width
-  </Right>
-</Columns>
-```
-
-### 70/30 Split
-
-```mdx
-<Columns leftRatio="70">
-  <Left>
-    ## Primary Content
-    
-    Larger column for main content
-  </Left>
-  <Right>
-    ### Quick Stats
-    
-    - Duration: 4 weeks
-    - Effort: 10 hrs/week
-  </Right>
-</Columns>
-```
-
-### With Block Component
-
-```mdx
-import {
-  Columns,
-  Left,
-  Right,
-  Block,
-} from "@sp-days-framework/docusaurus-frontpage-collection";
-
-<Columns leftRatio="65">
-  <Left>
-    ## Course Overview
-    
-    Detailed description of the course...
-  </Left>
-  <Right>
-    <Block>
-      ### Info
-      
-      - **Level**: Intermediate
-      - **Duration**: 6 weeks
-      - **Certificate**: Yes
-    </Block>
-  </Right>
-</Columns>
-```
-
-## Responsive Behavior
-
-The columns automatically stack vertically when the container is too narrow:
-
-- **> 900px**: Full two-column layout
-- **750px - 900px**: Reduced gap between columns
-- **600px - 750px**: Further adjusted spacing
-- **< 600px**: Stacks vertically
-
-## Content Wrapping
-
-Text and content automatically wrap within columns:
-
-- Long words break appropriately
-- Tables become scrollable
-- Images scale to fit
-- Code blocks wrap or scroll

package/templates/addon-resources/resources/frontpage-collection/components/ContentBlock.mdx

@@ -1,126 +0,0 @@
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import { Block } from "@sp-days-framework/docusaurus-frontpage-collection";
-
-# Content Block
-
-A simple styled block container for highlighting content.
-
-<div className="preview">
-  <div className="container">
-    <Block>
-      ### Example Block
-      
-      This is a live example of the Block component with hover effect.
-      
-      - **Feature 1**: Styled container
-      - **Feature 2**: Hover animation
-      - **Feature 3**: Perfect for side content
-    </Block>
-  </div>
-</div>
-
-## Features
-
-- Hover effect
-- Works great in columns or standalone
-
-## Import
-
-<Tabs>
-  <TabItem value="individual" label="Individual import" default>
-    ```mdx
-    import { Block } from "@sp-days-framework/docusaurus-frontpage-collection";
-    ```
-  </TabItem>
-  <TabItem value="default" label="Default import">
-    ```mdx
-    import Block from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/Block";
-    ```
-  </TabItem>
-</Tabs>
-
-## Basic Usage
-
-```mdx
-<Block>
-  ## Quick Info
-  
-  - **Duration**: 4 weeks
-  - **Effort**: 10 hours/week
-  - **Level**: Intermediate
-</Block>
-```
-
-## Props
-
-| Prop        | Type        | Description            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Additional CSS classes |
-| `children`  | `ReactNode` | Markdown content       |
-
-## Examples
-
-### Simple Block
-
-```mdx
-<Block>
-  ### Important Note 
-  
-  Remember to complete all iconContainers before starting.
-</Block>
-```
-
-### With Custom Class
-
-```mdx
-<Block className="my-custom-class">Custom styled content</Block>
-```
-
-### In Columns
-
-```mdx
-import {
-  Columns,
-  Left,
-  Right,
-  Block,
-} from "@sp-days-framework/docusaurus-frontpage-collection";
-
-<Columns leftRatio="65">
-  <Left>
-    Main content goes here...
-  </Left>
-  <Right>
-    <Block>
-      ### Course Stats
-      
-      - 1,000+ students
-      - 4.8/5 rating
-      - Updated monthly
-    </Block>
-  </Right>
-</Columns>
-```
-
-### Multiple Blocks
-
-```mdx
-<Block>
-  ### Module 1
-  
-  Introduction to Docker
-</Block>
-
-<Block>
-  ### Module 2
-  
-  Container Management
-</Block>
-
-<Block>
-  ### Module 3
-  
-  Image Building
-</Block>
-```

package/templates/addon-resources/resources/frontpage-collection/components/CourseFeature.mdx

@@ -1,147 +0,0 @@
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import {
-  CourseFeature,
-  Included,
-  NotIncluded,
-} from "@sp-days-framework/docusaurus-frontpage-collection";
-
-# Course Feature Section
-
-A card-based component for displaying what's included and not included in your course.
-
-<div className="preview">
-  <div className="container" style={{ width: '-webkit-fill-available'}}>
-    <CourseFeature>
-      <Included>
-        - **Core Concepts**: Learn the fundamentals
-        - **Hands-on Labs**: Practice with real examples
-        - **Certificate**: Earn a completion certificate
-      </Included>
-      <NotIncluded>
-        - **Advanced Topics**: Covered in advanced course
-        - **1-on-1 Mentoring**: Available as add-on
-      </NotIncluded>
-    </CourseFeature>
-  </div>
-</div>
-
-## Features
-
-- Side-by-side included/not included cards
-- Built-in success/danger colored icons
-- Hover animations on cards and icons
-- Support for custom icons
-- Responsive layout
-- Equal height cards
-
-## Import
-
-<Tabs>
-  <TabItem value="individual" label="Individual import" default>
-    ```mdx
-    import {
-      CourseFeature,
-      Included,
-      NotIncluded,
-    } from "@sp-days-framework/docusaurus-frontpage-collection";
-    ```
-  </TabItem>
-  <TabItem value="default" label="Default import">
-    ```mdx
-    import CourseFeature, { Included, NotIncluded } from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/CourseFeature";
-    ```
-  </TabItem>
-</Tabs>
-
-## Basic Usage
-
-```mdx
-<CourseFeature>
-  <Included>
-    - **Docker Fundamentals**: Core concepts and architecture
-    - **Container Management**: Creating and managing containers
-    - **Image Building**: Building custom images
-  </Included>
-  <NotIncluded>
-    - **Kubernetes**: Covered in advanced course
-    - **CI/CD Pipelines**: Separate course available
-  </NotIncluded>
-</CourseFeature>
-```
-
-## Props
-
-### CourseFeature
-
-| Prop                       | Type                   | Default    | Description                                       |
-| -------------------------- | ---------------------- | ---------- | ------------------------------------------------- |
-| `children`                 | `ReactNode`            | required   | Included/NotIncluded components or direct content |
-| `iconifyIncluded`          | `IconifyConfig\|string`| Check icon | Iconify icon for included section                 |
-| `customSvgIncluded`        | `CustomSvgConfig`      | -          | Custom SVG file for included section (supports color override) |
-| `customImageIncluded`      | `CustomImageConfig`    | -          | Custom image file (PNG/JPEG) for included section |
-| `iconifyNotIncluded`       | `IconifyConfig\|string`| Cross icon | Iconify icon for not included section             |
-| `customSvgNotIncluded`     | `CustomSvgConfig`      | -          | Custom SVG file for not included section (supports color override) |
-| `customImageNotIncluded`   | `CustomImageConfig`    | -          | Custom image file (PNG/JPEG) for not included section |
-| `included`                 | `boolean`              | `true`     | Legacy prop for single card mode                  |
-
-### Included / NotIncluded
-
-| Prop       | Type        | Description      |
-| ---------- | ----------- | ---------------- |
-| `children` | `ReactNode` | Markdown content |
-
-## Examples
-
-### Standard Usage
-
-```mdx
-<CourseFeature>
-  <Included>
-    - **Core Concepts**: Fundamentals
-    - **Hands-on Labs**: Practical exercises
-    - **Real Examples**: Production code
-  </Included>
-  <NotIncluded>
-    - **Advanced Topics**: In advanced course
-    - **Certification**: Available separately
-  </NotIncluded>
-</CourseFeature>
-```
-
-### With Custom Icons
-
-```mdx
-<CourseFeature
-  iconifyIncluded="mdi:check-circle"
-  iconifyNotIncluded="mdi:close-circle"
->
-  <Included>
-    Content...
-  </Included>
-  <NotIncluded>
-    Not included...
-  </NotIncluded>
-</CourseFeature>
-```
-
-### Only Included
-
-```mdx
-<CourseFeature>
-  <Included>
-    - Everything you need
-    - Lifetime access
-    - Free updates
-  </Included>
-</CourseFeature>
-```
-
-## Default Icons
-
-The component uses inline SVG icons with CSS variable colors:
-
-- **Included**: Green check circle (`var(--ifm-color-success)`)
-- **Not Included**: Red cross circle (`var(--ifm-color-danger)`)
-
-These automatically adapt to your Docusaurus theme colors.