npm - @sp-days-framework/create-sp-days - Versions diffs - 1.0.3 → 1.0.4 - Mend

@sp-days-framework/create-sp-days 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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.

package/templates/addon-resources/resources/frontpage-collection/components/FancyHeader.mdx DELETED Viewed

@@ -1,76 +0,0 @@
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import { FancyHeader } from "@sp-days-framework/docusaurus-frontpage-collection";
-# Fancy Header
-A header component with a decorative underline accent.
-<div className="preview">
-  <div className="container">
-    <FancyHeader as="h3">This is a Live Example</FancyHeader>
-  </div>
-</div>
-## Features
-- Decorative underline accent
-- Customizable heading level
-- Primary color accent
-- Automatic spacing
-- Scroll margin for anchor links
-## Import
-<Tabs>
-  <TabItem value="individual" label="Individual import" default>
-    ```mdx
-    import { FancyHeader } from "@sp-days-framework/docusaurus-frontpage-collection";
-    ```
-  </TabItem>
-  <TabItem value="default" label="Default import">
-    ```mdx
-    import FancyHeader from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/FancyHeader";
-    ```
-  </TabItem>
-</Tabs>
-## Basic Usage
-```mdx
-<FancyHeader>Section Title</FancyHeader>
-```
-## Props
-| Prop        | Type                                           | Default  | Description            |
-| ----------- | ---------------------------------------------- | -------- | ---------------------- |
-| `as`        | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `'h2'`   | Heading level          |
-| `className` | `string`                                       | -        | Additional CSS classes |
-| `children`  | `ReactNode`                                    | required | Header text            |
-## Examples
-### Default (h2)
-```mdx
-<FancyHeader>What You'll Learn</FancyHeader>
-```
-### Different Heading Levels
-```mdx
-<FancyHeader as="h1">Main Title</FancyHeader>
-<FancyHeader as="h2">Section Title</FancyHeader>
-<FancyHeader as="h3">Subsection Title</FancyHeader>
-```
-### With Custom Class
-```mdx
-<FancyHeader as="h2" className="my-custom-class">
-  Custom Styled Header
-</FancyHeader>
-```