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

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

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

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

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

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

@@ -1,85 +0,0 @@
----
-title: Frontpage Collection
-sidebar_class_name: sidebar-logo-docusaurus
----
-
-import { Iconify } from "@sp-days-framework/docusaurus-frontpage-collection";
-
-<div align="center">
-  <div className="resourceLandingPage">
-    <Iconify icon="logos:docusaurus" width="105px"/>
-  </div>
-  <div align="center">
-    # Frontpage Collection
-  </div>
-  <div align="center">
-    <p>
-        *Collection of React components for Docusaurus.
-        <br/> Designed for creating landing pages using the `.mdx` file format.*
-    </p>
-    <h4>
-        [Setup](./setup/index.mdx)
-        ·
-        [NPM Package](https://www.npmjs.com/package/@sp-days-framework/docusaurus-frontpage-collection)
-        ·
-        [Source Code](https://github.com/helse-sorost/sp-days-framework)
-    </h4>
-  </div>
-</div>
-
----
-
-## Features
-
-- **Pre-built Components** - Professional React components ready to use
-- **Icon System** - Support for Iconify icons and custom images
-- **Theme-Aware** - Automatic light/dark mode support with customizable colors
-- **Responsive Design** - Mobile-friendly layouts that adapt to all screen sizes
-- **MDX Integration** - Works seamlessly with Docusaurus MDX pages
-
-## Getting Started
-
-Import and use components in your MDX pages:
-
-```mdx title="src/pages/index.mdx"
----
-title: Course Homepage
-hide_table_of_contents: true
----
-
-import {
-  HeroBanner,
-  CourseFeature,
-  Included,
-  NotIncluded
-} from "@sp-days-framework/docusaurus-frontpage-collection";
-
-<HeroBanner
-  bannerText="Learn Docker with our hands-on course"
-  iconify="mdi:docker"
-/>
-
-<CourseFeature>
-  <Included>
-    - Hands-on exercises
-    - Real-world examples
-  </Included>
-  <NotIncluded>
-    - Prerequisites knowledge
-    - Development environment
-  </NotIncluded>
-</CourseFeature>
-```
-
-See [Setup](./setup/index.mdx) for installation and configuration.
-
-## Available Components
-
-- **[Block](./components/ContentBlock.mdx)** - Simple styled content block
-- **[Columns](./components/Columns.mdx)** - Two-column responsive layout
-- **[CourseFeature](./components/CourseFeature.mdx)** - Display course features with included/not included sections
-- **[FancyHeader](./components/FancyHeader.mdx)** - Header with decorative underline
-- **[GetStarted](./components/GetStarted.mdx)** - Call-to-action section with explore items
-- **[HeroBanner](./components/HeroBanner.mdx)** - Full-width banner with title and icon
-- **[IconContainersSection](./components/IconContainer.mdx)** - Display icon containers in a grid
-- **[Iconify](./components/Iconify.mdx)** - Add Iconify icons to pages with theme-aware colors