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

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

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

@@ -1,185 +0,0 @@
----
-sidebar_position: 1
----
-
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
-# Setup
-
-:::tip[Already Included]
-If you're using `@sp-days-framework/create-sp-days`, the Frontpage Collection is already installed and configured. You can start using components right away!
-:::
-
-## Installation
-
-Install the package using your preferred package manager:
-
-<Tabs>
-  <TabItem value="npm" label="npm" default>
-    ```bash
-    npm install @sp-days-framework/docusaurus-frontpage-collection
-    ```
-  </TabItem>
-  <TabItem value="yarn" label="Yarn">
-    ```bash
-    yarn add @sp-days-framework/docusaurus-frontpage-collection
-    ```
-  </TabItem>
-</Tabs>
-
-Unlike plugins, the Frontpage Collection works immediately after installation. No changes to `docusaurus.config.js` are needed.
-
-## Configuration
-
-### Import Methods
-
-You can import components in several ways depending on your needs.
-
-<Tabs>
-  <TabItem value="individual" label="Individual Imports (Recommended)" default>
-      Import only the components you need for optimal bundle size:
-
-      ```mdx title="src/pages/index.mdx"
-      import {
-        HeroBanner,
-        IconContainersSection,
-        IconContainerBlock,
-      } from "@sp-days-framework/docusaurus-frontpage-collection";
-
-      <HeroBanner
-        bannerText="Welcome to Our Course"
-        iconify="mdi:school"
-      />
-
-      <IconContainersSection>
-        <IconContainerBlock
-          title="Getting Started"
-          iconify="mdi:rocket-launch"
-          link="/docs/intro"
-        />
-      </IconContainersSection>
-      ```
-  </TabItem>
-  <TabItem value="default" label="Default Imports">
-    Import specific components directly from their source:
-
-    ```mdx title="src/pages/index.mdx"
-    import HeroBanner from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/HeroBanner";
-    import IconContainersSection, { IconContainerBlock } from "@sp-days-framework/docusaurus-frontpage-collection/lib/components/IconContainer";
-
-    <HeroBanner bannerText="Welcome" iconify="mdi:school" />
-
-    <IconContainersSection>
-      <IconContainerBlock title="Start" iconify="mdi:rocket-launch" link="/docs/intro" />
-    </IconContainersSection>
-    ```
-  </TabItem>
-  <TabItem value="wildcard" label="Wildcard">
-    :::warning[Not Recommended]
-    Wildcard imports may increase bundle size as they import the entire library. Use individual imports instead.
-    :::
-
-    ```mdx title="src/pages/index.mdx"
-    import * as Components from "@sp-days-framework/docusaurus-frontpage-collection";
-
-    <Components.HeroBanner bannerText="Welcome" iconify="mdi:school" />
-    ```
-  </TabItem>
-</Tabs>
-
-### Where to Use
-
-The components are designed for creating landing pages in MDX format. Place your landing pages in the `/src/pages/` directory:
-
-```
-src/pages/
-├── index.mdx              # Homepage
-├── courses.mdx            # Courses overview
-└── workshops/
-    └── index.mdx          # Workshop landing page
-```
-
-Files in `/src/pages/` automatically map to URLs:
-
-- `src/pages/index.mdx` → `/`
-- `src/pages/courses.mdx` → `/courses`
-- `src/pages/workshops/index.mdx` → `/workshops/`
-
-### Page Configuration
-
-Use frontmatter to configure your landing pages:
-
-```mdx title="src/pages/index.mdx"
----
-title: Course Homepage
-description: Learn with our comprehensive course
-hide_table_of_contents: true
----
-
-import { HeroBanner, CourseFeature } from "@sp-days-framework/docusaurus-frontpage-collection";
-
-<HeroBanner
-  bannerText="Learn with our hands-on course"
-  iconify="mdi:school"
-/>
-```
-
-:::tip
-Set `hide_table_of_contents: true` in frontmatter for cleaner landing pages.
-:::
-
-### Icon Configuration
-
-All components support flexible icon configuration.
-
-**Using Iconify Icons:**
-
-Browse icons at [Iconify](https://icon-sets.iconify.design/) and use the icon name:
-
-```mdx
-<HeroBanner
-  iconify="mdi:docker"
-  iconColors={{
-    light: "#2496ED",
-    dark: "#2496ED"
-  }}
-/>
-```
-
-**Using Custom Images:**
-
-Provide custom SVG or PNG images with theme variants:
-
-```mdx
-<HeroBanner
-  customSvg={{
-    light: "img/logo-light.svg",
-    dark: "img/logo-dark.svg",
-  }}
-/>
-```
-
-Place custom images in the `/static/img/` directory.
-
-### Usage with React Pages
-
-:::note
-While the components are compatible with React (`.jsx`, `.tsx`) pages, we recommend using them in MDX pages for the best experience.
-:::
-
-If using in React pages, import as standard React components:
-
-```tsx title="src/pages/index.tsx"
-import React from 'react';
-import { HeroBanner } from '@sp-days-framework/docusaurus-frontpage-collection';
-
-export default function Home() {
-  return (
-    <HeroBanner
-      bannerText="Welcome to Our Course"
-      iconify="mdi:school"
-    />
-  );
-}
-```