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

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/interactive-tasks/creating-tasks.mdx

@@ -1,254 +0,0 @@
----
-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.
-
-
-```md
-::::task[Create a Component]
-
-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`.
-
-::::
-
-
----
-
-## Task with Hint
-
-Add a hint to guide users through the task.
-
-
-```mdx
-::::task[Configure TypeScript]
-
-Set up TypeScript configuration for strict mode.
-
-:::hint
-Look for the `tsconfig.json` file in your project root.
-:::
-
-::::
-```
-
-::::task-example[Configure TypeScript]
-
-Set up TypeScript configuration for strict mode.
-
-:::hint
-Look for the `tsconfig.json` file in your project root.
-:::
-
-::::
-
----
-
-## Task with Solution
-
-Provide a complete solution for the task.
-
-
-```mdx
-::::task[Create Package JSON]
-
-Initialize a new Node.js project with npm.
-
-:::solution
-Run `npm init -y` in your project directory.
-:::
-
-::::
-```
-
-::::task-example[Create Package JSON]
-
-Initialize a new Node.js project with npm.
-
-:::solution
-Run `npm init -y` in your project directory.
-:::
-
-::::
-
----
-
-## Task with Hint and Solution
-
-Combine both hint and solution for comprehensive guidance.
-
-````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 });
-}
-```
-:::
-
-::::
-
-
----
-
-## Using Markdown Features
-
-Tasks fully support standard Docusaurus markdown features like the [admonitions feature](https://docusaurus.io/docs/markdown-features/admonitions).
-
-
-````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.
-:::
-
-::::
-````
-
-::::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.
-:::
-
-::::
-
-
-## 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

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