@sp-days-framework/create-sp-days 1.0.0

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

@@ -0,0 +1,205 @@
+---
+# 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

@@ -0,0 +1,249 @@
+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>
+```

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

@@ -0,0 +1,228 @@
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { Iconify } from "@sp-days-framework/docusaurus-frontpage-collection";
+
+# Iconify
+
+A simple component for adding Iconify icons to your MDX pages and documentation with theme-aware colors and flexible sizing.
+
+<div className="preview">
+  <div className="container">
+    <Iconify icon="mdi:tools" />
+  </div>
+</div>
+
+## Features
+
+- **Theme-Aware Colors** - Automatic light/dark mode support
+- **Flexible Sizing** - Control width, or let it default to 200px
+- **Alignment Control** - Left, center, or right alignment on the page
+- **Aspect Ratio** - Always maintains proper icon proportions
+
+## Import
+
+<Tabs>
+  <TabItem value="individual" label="Individual import" default>
+    ```mdx
+    import { Iconify } from "@sp-days-framework/docusaurus-frontpage-collection";
+    ```
+  </TabItem>
+  <TabItem value="default" label="Default import">
+    ```mdx
+    import Iconify from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/Iconify";
+    ```
+  </TabItem>
+</Tabs>
+
+## Basic Usage
+
+```mdx
+<Iconify icon="mdi:tools" />
+```
+
+## Props
+
+| Prop         | Type                          | Default    | Description                                    |
+| ------------ | ----------------------------- | ---------- | ---------------------------------------------- |
+| `icon`       | `string`                      | required   | Iconify icon name (e.g., "mdi:tools")          |
+| `width`      | `string`                      | `"200px"`  | Icon width (e.g., "300px", "10rem")            |
+| `alignment`  | `'left' \| 'center' \| 'right'` | `'center'` | Alignment of icon on the page                  |
+| `iconColors` | `IconifyImageColorConfig`     | primary    | Color configuration for light/dark themes      |
+| `className`  | `string`                      | -          | Additional CSS class                           |
+| `style`      | `CSSProperties`               | -          | Additional inline styles                       |
+
+### IconifyImageColorConfig
+
+| Property | Type     | Description                                           |
+| -------- | -------- | ----------------------------------------------------- |
+| `light`  | `string` | Icon color in light mode (default: --ifm-color-primary) |
+| `dark`   | `string` | Icon color in dark mode (default: --ifm-color-primary)  |
+
+:::tip
+If only `light` is specified, `dark` will default to `--ifm-color-primary`. If only `dark` is specified, `light` will default to `--ifm-color-primary`.
+:::
+
+## Examples
+
+### Default Settings
+
+Default size (200px x 200px) and center alignment:
+
+```mdx
+<Iconify icon="mdi:docker" />
+```
+
+<Iconify icon="mdi:docker" />
+
+### Custom Size
+
+Control the size with `width`. The icon maintains aspect ratio:
+
+```mdx
+<Iconify icon="mdi:kubernetes" width="300px" />
+```
+
+<Iconify icon="mdi:kubernetes" width="300px" />
+
+### Custom Alignment
+
+Control where the icon appears on the page:
+
+```mdx
+<Iconify icon="mdi:git" alignment="left" width="150px" />
+```
+
+<Iconify icon="mdi:git" alignment="left" width="150px" />
+
+```mdx
+<Iconify icon="mdi:github" alignment="right" width="150px" />
+```
+
+<Iconify icon="mdi:github" alignment="right" width="150px" />
+
+### Custom Colors
+
+Specify different colors for light and dark themes:
+
+```mdx
+<Iconify 
+  icon="mdi:docker" 
+  iconColors={{
+    light: "#2496ED",
+    dark: "#2496ED"
+  }}
+  width="250px"
+/>
+```
+
+<Iconify 
+  icon="mdi:docker" 
+  iconColors={{
+    light: "#2496ED",
+    dark: "#2496ED"
+  }}
+  width="250px"
+/>
+
+```mdx
+<Iconify 
+  icon="mdi:kubernetes" 
+  iconColors={{
+    light: "#326CE5",
+    dark: "#76A9FA"
+  }}
+  width="250px"
+/>
+```
+
+<Iconify 
+  icon="mdi:kubernetes" 
+  iconColors={{
+    light: "#326CE5",
+    dark: "#76A9FA"
+  }}
+  width="250px"
+/>
+
+### Only Specify One Color
+
+If you only specify `light`, the dark mode defaults to primary color:
+
+```mdx
+<Iconify 
+  icon="mdi:react" 
+  iconColors={{
+    light: "#61DAFB"
+  }}
+  width="200px"
+/>
+```
+
+<Iconify 
+  icon="mdi:react" 
+  iconColors={{
+    light: "#61DAFB"
+  }}
+  width="200px"
+/>
+
+## Finding Icons
+
+Browse the full Iconify icon collection at [Iconify Icon Sets](https://icon-sets.iconify.design/).
+
+Popular icon sets include:
+- **Material Design Icons** - `mdi:icon-name`
+- **Font Awesome** - `fa:icon-name` or `fa-brands:icon-name`
+- **Simple Icons** - `simple-icons:brand-name`
+- **Heroicons** - `heroicons:icon-name`
+- **Lucide** - `lucide:icon-name`
+
+## Use Cases
+
+### In Documentation
+
+Add visual elements to your documentation:
+
+```mdx
+## Prerequisites
+
+Before starting, you'll need:
+
+<Iconify icon="mdi:docker" width="100px" />
+
+Docker installed on your system.
+```
+
+### In Landing Pages
+
+Create visual interest on landing pages:
+
+```mdx
+---
+title: Course Overview
+---
+
+# Welcome to Our Course
+
+<Iconify icon="mdi:school" width="300px" />
+
+Learn the fundamentals with hands-on examples.
+```
+
+### Multiple Icons in a Row
+
+Place multiple icons side-by-side using markdown or HTML:
+
+```mdx
+<div style={{ display: 'flex', justifyContent: 'center', gap: '2rem' }}>
+  <Iconify icon="mdi:docker" width="150px" alignment="center" />
+  <Iconify icon="mdi:kubernetes" width="150px" alignment="center" />
+  <Iconify icon="mdi:git" width="150px" alignment="center" />
+</div>
+```
+
+<div style={{ display: 'flex', justifyContent: 'center', gap: '2rem' }}>
+  <Iconify icon="mdi:docker" width="150px" alignment="center" />
+  <Iconify icon="mdi:kubernetes" width="150px" alignment="center" />
+  <Iconify icon="mdi:git" width="150px" alignment="center" />
+</div>

package/templates/addon-resources/resources/frontpage-collection/components/_category_.yml

@@ -0,0 +1,2 @@
+position: 2
+label: 'Components'