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

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

@@ -1,222 +0,0 @@
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import {
-  GetStarted,
-  Explore,
-  ExploreItem,
-} from "@sp-days-framework/docusaurus-frontpage-collection";
-
-# Get Started
-
-A call-to-action component with an optional explore grid for additional resources.
-
-<div className="preview">
-  <div className="container" style={{ paddingBottom: '1.5rem' }}>
-    <GetStarted buttonText="Get Started" buttonLink="/resources">
-      ## Ready to Begin?
-      
-      Start your learning journey today with our comprehensive course materials.
-      
-      <Explore>
-        <ExploreItem
-          title="Interactive Tasks"
-          iconify="ci:window-check"
-          link="/resources"
-        >
-          Access all course modules and lessons
-        </ExploreItem>
-        <ExploreItem
-          title="Resources"
-          iconify="mdi:book-open-variant"
-          link="/resources"
-        >
-          Additional learning materials and references
-        </ExploreItem>
-        <ExploreItem
-          title="Presentations"
-          iconify="mdi:television-play"
-          link="/resources"
-        >
-          View presentation slides and notes
-        </ExploreItem>
-      </Explore>
-    </GetStarted>
-  </div>
-</div>
-
-## Features
-
-- Central call-to-action button with pop animation
-- Optional explore grid
-- Responsive layout
-- Icon support for explore items
-- Hover effects with customizable colors
-- Optional animation disable
-
-## Import
-
-<Tabs>
-  <TabItem value="individual" label="Individual import" default>
-    ```mdx
-    import {
-      GetStarted,
-      Explore,
-      ExploreItem,
-    } from "@sp-days-framework/docusaurus-frontpage-collection";
-    ```
-  </TabItem>
-  <TabItem value="default" label="Default import">
-    ```mdx
-    import GetStarted, { Explore, ExploreItem } from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/GetStarted";
-    ```
-  </TabItem>
-</Tabs>
-
-## Basic Usage
-
-```mdx
-<GetStarted buttonText="Start Learning" buttonLink="/docs/intro">
-  ## Ready to Begin?
-  
-  Start with Module 1 and begin your journey!
-  
-  <Explore>
-    <ExploreItem
-      title="Documentation"
-      iconify="mdi:book-open-variant"
-      link="/docs"
-    >
-      Comprehensive guides
-    </ExploreItem>
-    <ExploreItem
-      title="Examples"
-      iconify="mdi:code-tags"
-      link="/examples"
-    >
-      Sample projects
-    </ExploreItem>
-  </Explore>
-</GetStarted>
-```
-
-## Props
-
-### GetStarted
-
-| Prop         | Type        | Description                                          |
-| ------------ | ----------- | ---------------------------------------------------- |
-| `buttonText` | `string`    | Text for the CTA button                              |
-| `buttonLink` | `string`    | Link for the CTA button                              |
-| `children`   | `ReactNode` | Content displayed above button and Explore component |
-
-### Explore
-
-| Prop       | Type        | Default   | Description                |
-| ---------- | ----------- | --------- | -------------------------- |
-| `children` | `ReactNode` | required  | ExploreItem components     |
-| `minWidth` | `string`    | `'250px'` | Minimum width for items    |
-| `columns`  | `number`    | `0`       | Fixed columns (0 for auto) |
-
-### ExploreItem
-
-| Prop              | Type                   | Description                           |
-| ----------------- | ---------------------- | ------------------------------------- |
-| `title`           | `string`               | Item title                            |
-| `iconify`         | `IconifyConfig\|string`| Iconify icon name or configuration    |
-| `customSvg`       | `CustomSvgConfig`      | Custom SVG files for light/dark themes (supports color override) |
-| `customImage`     | `CustomImageConfig`    | Custom image files (PNG/JPEG) for light/dark themes |
-| `iconColors`      | `IconColorConfig`      | Icon color overrides (light/dark/hover)|
-| `titleColors`     | `TitleColorConfig`     | Title color overrides (light/dark/hover)|
-| `disableAnimation`| `boolean`              | Disable hover animation (default: false)|
-| `link`            | `string`               | Link URL                              |
-| `children`        | `ReactNode`            | Description content                   |
-
-## Examples
-
-### Simple CTA
-
-```mdx
-<GetStarted buttonText="Get Started" buttonLink="/docs">
-  Ready to learn? Click below to start!
-</GetStarted>
-```
-
-### With Explore Grid
-
-```mdx
-<GetStarted buttonText="Start Learning" buttonLink="/docs/module1">
-  ## Ready for Launch?
-  
-  Begin your Docker journey today!
-  
-  <Explore>
-    <ExploreItem title="Documentation" iconify="mdi:book" link="/docs">
-      Complete reference guides
-    </ExploreItem>
-    <ExploreItem title="Video Tutorials" iconify="mdi:video" link="/videos">
-      Step-by-step videos
-    </ExploreItem>
-    <ExploreItem title="Community" iconify="mdi:forum" link="/community">
-      Join the discussion
-    </ExploreItem>
-  </Explore>
-</GetStarted>
-```
-
-### With Custom Colors
-
-```mdx
-<Explore>
-  <ExploreItem 
-    title="Documentation" 
-    iconify="mdi:book"
-    iconColors={{
-      light: "#1976d2",
-      lightHover: "#115293",
-      dark: "#90caf9",
-      darkHover: "#b3d9ff"
-    }}
-    titleColors={{
-      light: "#333333",
-      lightHover: "#1976d2"
-    }}
-    link="/docs"
-  >
-    Complete reference
-  </ExploreItem>
-</Explore>
-```
-
-### Disable Animations
-
-```mdx
-<Explore>
-  <ExploreItem 
-    title="Static Item" 
-    iconify="mdi:information"
-    disableAnimation={true}
-    link="/info"
-  >
-    No hover effects
-  </ExploreItem>
-</Explore>
-```
-
-### Fixed Column Layout
-
-```mdx
-<Explore columns={2}>
-  <ExploreItem title="Item 1" iconify="mdi:numeric-1" link="/1">
-    Content
-  </ExploreItem>
-  <ExploreItem title="Item 2" iconify="mdi:numeric-2" link="/2">
-    Content
-  </ExploreItem>
-  <ExploreItem title="Item 3" iconify="mdi:numeric-3" link="/3">
-    Content
-  </ExploreItem>
-  <ExploreItem title="Item 4" iconify="mdi:numeric-4" link="/4">
-    Content
-  </ExploreItem>
-</Explore>
-```

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

@@ -1,205 +0,0 @@
----
-# hide_table_of_contents: true
----
-
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import { HeroBanner } from "@sp-days-framework/docusaurus-frontpage-collection";
-import remarkGfm from 'remark-gfm'
-
-# Hero Banner
-
-A full-width banner that displays at the top of your page. Perfect for course introductions and landing pages.
-
-<div className="preview">
-  <div className="container" style={{ width: '-webkit-fill-available', paddingBottom: '1.5rem'}}> 
-      <HeroBanner
-        bannerText="This is a live example"
-        bannerFullWidth={false}
-        iconify="mdi:docker"
-      />
-  </div>
-</div>
-
-## Features
-
-- Full-width design that breaks out of container constraints
-- Automatic title and tagline from Docusaurus config
-- Support for Iconify icons or custom images
-- Customizable icon colors for light/dark themes
-- Interactive dot cross grid background effect
-
-## Import
-
-<Tabs>
-  <TabItem value="individual" label="Individual import" default>
-    ```mdx
-    import { HeroBanner } from "@sp-days-framework/docusaurus-frontpage-collection";
-    ```
-  </TabItem>
-  <TabItem value="default" label="Default import">
-    ```mdx
-    import HeroBanner from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/HeroBanner";
-    ```
-  </TabItem>
-</Tabs>
-
-## Basic Usage
-
-```mdx
-<HeroBanner
-  bannerText="Learn Docker with our hands-on operations course"
-  iconify="mdi:docker"
-/>
-```
- 
-## Props
-
-| Prop                   | Type                   | Default     | Description                                  |
-| ---------------------- | ---------------------- | ----------- | -------------------------------------------- |
-| `bannerText`           | `string`               | `''`        | Description text displayed in the banner     |
-| `bannerFullWidth`      | `boolean`              | `true`      | Full viewport width or contained within doc content |
-| `iconify`              | `IconifyConfig\|string`| `undefined` | Iconify icon name or configuration object    |
-| `customSvg`            | `CustomSvgConfig`      | `undefined` | Custom SVG files for light/dark themes (supports color override) |
-| `customImage`          | `CustomImageConfig`    | `undefined` | Custom image files (PNG/JPEG) for light/dark themes |
-| `iconColors`           | `IconColorConfig`      | `undefined` | Optional color overrides for Iconify icons   |
-| `enableDotCrossEffect` | `boolean`              | `true`      | Enable interactive dot cross grid background |
-| `dotCrossColor`        | `string`               | `#ffffff` | Color of the dot cross grid                  |
-
-> **Note**: The banner automatically uses the site `title` and `tagline` from your `docusaurus.config.js`.
-
-## Examples
-
-### With Iconify Icon
-
-```mdx
-<HeroBanner
-  bannerText="Master Kubernetes deployment and orchestration"
-  iconify="mdi:kubernetes"
-/>
-```
-
-### With Custom Icon Colors
-
-```mdx
-<HeroBanner
-  bannerText="Advanced Kubernetes Training"
-  iconify="mdi:kubernetes"
-  iconColors={{
-    light: "#326CE5",
-    dark: "#7CB9FF"
-  }}
-/>
-```
-
-### With Custom SVG Images
-
-```mdx
-<HeroBanner
-  bannerText="Welcome to our comprehensive Docker course"
-  customSvg={{
-    light: "img/docker-logo-light.svg",
-    dark: "img/docker-logo-dark.svg",
-  }}
-/>
-```
-
-
-### With Custom PNG/JPEG Images
-
-```mdx
-<HeroBanner
-  bannerText="Welcome to our comprehensive Docker course"
-  customImage={{
-    light: "img/docker-logo-light.png",
-    dark: "img/docker-logo-dark.png",
-  }}
-/>
-```
-
-### With Advanced Iconify Configuration
-
-```mdx
-<HeroBanner
-  bannerText="Build modern cloud-native applications"
-  iconify={{
-    icon: "mdi:cloud",
-    width: "100%",
-    height: "100%",
-    colors: {
-      light: "#4285F4",
-      dark: "#8AB4F8"
-    }
-  }}
-/>
-```
-
-### Minimal (No Icon)
-
-```mdx
-<HeroBanner bannerText="Simple text-only banner" />
-```
-
-### Disable Dot Cross Grid Effect
-
-You can deactivate the effect by setting `enableDotCrossEffect` to `false`.
-
-```mdx
-<HeroBanner
-  bannerText="Interactive learning experience"
-  enableDotCrossEffect={false}
-/>
-```
-
-### Contained Mode (Within Document Flow)
-
-Use `bannerFullWidth={false}` to keep the banner within the document content area instead of full viewport width. This is useful when you have a sidebar or table of contents.
-
-```mdx
-<HeroBanner
-  bannerText="Course overview and learning objectives"
-  iconify="mdi:school"
-  bannerFullWidth={false}
-/>
-```
-
-## Dot Cross Grid Animation
-
-The dot cross grid creates an interactive background effect inspired by the HF Cross design. Move your mouse over the banner to see crosses appear around the cursor. The effect also includes idle animations along the edges when not interacting.
-
-### Advanced Configuration
-
-The following props allow fine-tuning of the dot cross grid animation. These are optional and typically don't need to be changed from their defaults.
-
-| Prop                     | Type      | Default   | Description                                           |
-| ------------------------ | --------- | --------- | ----------------------------------------------------- |
-| `dotCrossSize`           | `number`  | `2`       | Size of each dot in pixels                            |
-| `dotCrossGap`            | `number`  | `30`      | Gap between dots in pixels                            |
-| `pointerRadius`          | `number`  | `100`     | Radius of pointer interaction area in pixels          |
-| `pointerInnerIntensity`  | `number`  | `1.0`     | Opacity intensity for dots near pointer center        |
-| `pointerOuterIntensity`  | `number`  | `0.3`     | Opacity intensity for dots at edge of pointer radius  |
-| `maxOpacity`             | `number`  | `1.0`     | Maximum opacity for dots                              |
-| `minOpacity`             | `number`  | `0.0`     | Minimum opacity for dots                              |
-| `randomOpacity`          | `boolean` | `false`   | Add random opacity variation to dots                  |
-| `idleEnabled`            | `boolean` | `true`    | Enable idle edge animations                           |
-| `idleAreaWidth`          | `number`  | `200`     | Width of idle animation area from edges in pixels     |
-| `idleInterval`           | `number`  | `3000`    | Time between idle animations in milliseconds          |
-| `idleIntensity`          | `number`  | `0.5`     | Opacity intensity for idle animations                 |
-
-### Example with Custom Animation Settings
-
-```mdx
-<HeroBanner
-  bannerText="Custom animated banner"
-  iconify="mdi:rocket"
-  enableDotCrossEffect={true}
-  dotCrossColor="#00ff00"
-  dotCrossSize={3}
-  dotCrossGap={40}
-  pointerRadius={150}
-  pointerInnerIntensity={1.0}
-  pointerOuterIntensity={0.2}
-  idleEnabled={true}
-  idleInterval={2000}
-/>
-```

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

@@ -1,249 +0,0 @@
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import {
-  IconContainersSection,
-  IconContainerBlock,
-} from "@sp-days-framework/docusaurus-frontpage-collection";
-
-# Icon Containers Block
-
-Display icon containers in a responsive grid with icons and links.
-
-<div className="preview">
-  <div className="container">
-    <IconContainersSection>
-      <IconContainerBlock
-        title="Git Knowledge"
-        iconify="mdi:git"
-        link="/resources"
-      />
-      <IconContainerBlock
-        title="Terminal Skills"
-        iconify="mdi:console"
-        link="/resources"
-      />
-    </IconContainersSection>
-  </div>
-</div>
-
-## Features
-
-- Responsive grid layout
-- Icon support (Iconify or custom images)
-- Clickable cards with hover animations
-- Customizable icon and title colors
-- Optional animation disable
-
-## Import
-
-<Tabs>
-  <TabItem value="individual" label="Individual import" default>
-    ```mdx
-    import {
-      IconContainersSection,
-      IconContainerBlock,
-    } from "@sp-days-framework/docusaurus-frontpage-collection";
-    ```
-  </TabItem>
-  <TabItem value="default" label="Default import">
-    ```mdx
-    import IconContainersSection, { IconContainerBlock } from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/IconContainer";
-    ```
-  </TabItem>
-</Tabs>
-
-## Basic Usage
-
-```mdx
-<IconContainersSection>
-  <IconContainerBlock
-    title="Programming Basics"
-    iconify="mdi:code-braces"
-    link="/docs/programming"
-  />
-  <IconContainerBlock
-    title="Development Tools"
-    iconify="mdi:tools"
-    link="/docs/tools"
-  />
-</IconContainersSection>
-```
-
-## Props
-
-### IconContainersSection
-
-| Prop             | Type        | Default   | Description                   |
-| ---------------- | ----------- | --------- | ----------------------------- |
-| `children`       | `ReactNode` | required  | IconContainerBlock components |
-| `minWidth`       | `string`    | `'200px'` | Minimum width for each block  |
-| `maxItemsPerRow` | `string`    | `'auto'`  | Max items per row             |
-
-### IconContainerBlock
-
-| Prop              | Type                   | Description                                    |
-| ----------------- | ---------------------- | ---------------------------------------------- |
-| `id`              | `string`               | Optional unique identifier for the item        |
-| `title`           | `string`               | Title of the item                              |
-| `iconify`         | `IconifyConfig\|string`| Iconify icon name or configuration             |
-| `customSvg`       | `CustomSvgConfig`      | Custom SVG files for light/dark themes (supports color override) |
-| `customImage`     | `CustomImageConfig`    | Custom image files (PNG/JPEG) for light/dark themes |
-| `iconColors`      | `IconColorConfig`      | Icon color overrides (light/dark/hover)        |
-| `titleColors`     | `TitleColorConfig`     | Title color overrides (light/dark/hover)       |
-| `disableAnimation`| `boolean`              | Disable hover animation (default: false)       |
-| `link`            | `string`               | Link URL when clicked                          |
-
-## Examples
-
-### With Iconify Icons
-
-```mdx
-<IconContainersSection>
-  <IconContainerBlock
-    title="Linux Knowledge"
-    iconify="mdi:linux"
-    link="/docs/linux"
-  />
-  <IconContainerBlock
-    title="Git Basics"
-    iconify="mdi:git"
-    link="/docs/git"
-  />
-  <IconContainerBlock
-    title="Docker Basics"
-    iconify="mdi:docker"
-    link="/docs/docker"
-  />
-</IconContainersSection>
-```
-
-### With Custom Colors
-
-```mdx
-<IconContainersSection>
-  <IconContainerBlock
-    title="Linux Knowledge"
-    iconify="mdi:linux"
-    iconColors={{
-      light: "#FCC624",
-      lightHover: "#DB9D0C",
-      dark: "#FFD65A",
-      darkHover: "#FFE89E"
-    }}
-    titleColors={{
-      light: "#333333",
-      lightHover: "#FCC624"
-    }}
-    link="/docs/linux"
-  />
-</IconContainersSection>
-```
-
-### With Custom SVG Images
-
-```mdx
-<IconContainersSection>
-  <IconContainerBlock
-    title="VS Code"
-    customSvg={{
-      light: "img/vscode-light.svg",
-      dark: "img/vscode-dark.svg",
-    }}
-    link="/docs/vscode"
-  />
-</IconContainersSection>
-```
-
-### With Custom PNG/JPEG Images
-
-```mdx
-<IconContainersSection>
-  <IconContainerBlock
-    title="VS Code"
-    customImage={{
-      light: "img/vscode-light.png",
-      dark: "img/vscode-dark.png",
-    }}
-    link="/docs/vscode"
-  />
-</IconContainersSection>
-```
-
-### Disable Animations
-
-```mdx
-<IconContainersSection>
-  <IconContainerBlock
-    title="Static Item"
-    iconify="mdi:information"
-    disableAnimation={true}
-    link="/docs/info"
-  />
-</IconContainersSection>
-```
-
-### Custom Layout
-
-```mdx
-<IconContainersSection minWidth="250px" maxItemsPerRow="2">
-  <IconContainerBlock
-    title="Requirement 1"
-    iconify="mdi:check"
-    link="/docs/req1"
-  />
-  <IconContainerBlock
-    title="Requirement 2"
-    iconify="mdi:check"
-    link="/docs/req2"
-  />
-  <IconContainerBlock
-    title="Requirement 3"
-    iconify="mdi:check"
-    link="/docs/req3"
-  />
-  <IconContainerBlock
-    title="Requirement 4"
-    iconify="mdi:check"
-    link="/docs/req4"
-  />
-</IconContainersSection>
-```
-
-## Complete Example
-
-```mdx
----
-title: Course Icon Containers
----
-
-import {
-  FancyHeader,
-  IconContainersSection,
-  IconContainerBlock,
-} from "@sp-days-framework/docusaurus-frontpage-collection";
-
-<FancyHeader>Icon Containers</FancyHeader>
-
-Before starting this course, make sure you have:
-
-<IconContainersSection>
-  <IconContainerBlock
-    id="programming"
-    title="Programming Basics"
-    iconify="mdi:code-braces"
-    link="/docs/programming-basics"
-  />
-  <IconContainerBlock
-    id="terminal"
-    title="Terminal Usage"
-    iconify="mdi:console"
-    link="/docs/terminal"
-  />
-  <IconContainerBlock
-    id="editor"
-    title="Code Editor"
-    iconify="mdi:file-code"
-    link="/docs/editor-setup"
-  />
-</IconContainersSection>
-```