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

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

@@ -41,6 +41,11 @@ const config: Config = {
           id: "course",
           path: "course",
           routeBasePath: "course",
+          sidebarItemsGenerator: require("./sidebarSections"),
+          remarkPlugins: [
+            require("@sp-days-framework/docusaurus-plugin-terminal-codeblock")
+              .remarkTerminalDirective,
+          ],
           beforeDefaultRemarkPlugins: [
             require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
               .remarkTaskDirective,
@@ -60,6 +65,61 @@ const config: Config = {
     // Adds the Interactive Tasks plugin to enable task directives
     "@sp-days-framework/docusaurus-plugin-interactive-tasks",
 
+    // Adds the Terminal Codeblock plugin to enable terminal output rendering
+    "@sp-days-framework/docusaurus-plugin-terminal-codeblock",
+
+    // CONDITIONAL: package-docs (START)
+    // Create SP Days Documentation
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        sidebarItemsGenerator: require("./sidebarSections"),
+        ...require("@sp-days-framework/create-sp-days/publish-package-docs"),
+      },
+    ],
+    // Frontpage Collection Documentation
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        sidebarItemsGenerator: require("./sidebarSections"),
+        ...require("@sp-days-framework/docusaurus-frontpage-collection/publish-package-docs"),
+      },
+    ],
+    // Interactive Tasks Plugin Documentation
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        sidebarItemsGenerator: require("./sidebarSections"),
+        ...require("@sp-days-framework/docusaurus-plugin-interactive-tasks/publish-package-docs"),
+      },
+    ],
+    // Slidev Plugin Documentation
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        sidebarItemsGenerator: require("./sidebarSections"),
+        ...require("@sp-days-framework/docusaurus-plugin-slidev/publish-package-docs"),
+      },
+    ],
+    // Terminal Codeblock Plugin Documentation
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        sidebarItemsGenerator: require("./sidebarSections"),
+
+        ...require("@sp-days-framework/docusaurus-plugin-terminal-codeblock/publish-package-docs"),
+      },
+    ],
+    // Sykehuspartner Slidev Theme Documentation
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        sidebarItemsGenerator: require("./sidebarSections"),
+        ...require("@sp-days-framework/slidev-theme-sykehuspartner/publish-package-docs"),
+      },
+    ],
+    // CONDITIONAL: package-docs (END)
+
     // CONDITIONAL: addon-slidev (START)
     // Adds the Slidev plugin to enable slide presentations and static directories for Slidev assets
     "@sp-days-framework/docusaurus-plugin-slidev",
@@ -73,16 +133,10 @@ const config: Config = {
         id: "resources",
         path: "resources",
         routeBasePath: "resources",
-        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)
-            },
-          ],
+        sidebarItemsGenerator: require("./sidebarSections"),
+        remarkPlugins: [
+          require("@sp-days-framework/docusaurus-plugin-terminal-codeblock")
+            .remarkTerminalDirective,
         ],
       },
     ],
@@ -120,6 +174,45 @@ const config: Config = {
         // CONDITIONAL: addon-slidev (START)
         { to: "/slidev", label: "Slides" },
         // CONDITIONAL: addon-slidev (END)
+        // CONDITIONAL: package-docs (START)
+        {
+          type: "dropdown",
+          label: "Plugin Docs",
+          position: "left",
+          items: [
+            {
+              to: "/package-docs/create-sp-days",
+              label: "Create SP Days",
+              className: "title-logo-navbar-sp-days-plugin",
+            },
+            {
+              to: "/package-docs/frontpage-collection",
+              label: "Frontpage Collection",
+              className: "title-logo-navbar-docusaurus",
+            },
+            {
+              to: "/package-docs/interactive-tasks",
+              label: "Interactive Tasks",
+              className: "title-logo-navbar-docusaurus",
+            },
+            {
+              to: "/package-docs/slidev-integration",
+              label: "Slidev Integration",
+              className: "title-logo-navbar-docusaurus",
+            },
+            {
+              to: "/package-docs/terminal-codeblock",
+              label: "Terminal Codeblock",
+              className: "title-logo-navbar-docusaurus",
+            },
+            {
+              to: "/package-docs/sykehuspartner-theme",
+              label: "Sykehuspartner Theme",
+              className: "title-logo-navbar-slidev",
+            },
+          ],
+        },
+        // CONDITIONAL: package-docs (END)
         {
           href: gitRepositoryUrl,
           position: "right",

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.4",
-    "@sp-days-framework/docusaurus-plugin-interactive-tasks": "^1.0.4",
+    "@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;