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

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

@@ -1,185 +0,0 @@
----
-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/interactive-tasks/creating-tasks.mdx

@@ -1,292 +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.
-
-<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

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