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

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

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

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}
-/>
-```