@sp-days-framework/docusaurus-frontpage-collection 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Helse Sør-Øst
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,339 @@
+# @sp-days-framework/docusaurus-frontpage-collection
+
+A collection of React components for Docusaurus with TypeScript support and flexible theming.
+
+## Features
+
+- **Rich Component Library**: 8 polished components including HeroBanner, Columns, CourseFeature, Iconify, and more
+- **Flexible Icon System**: Supports both Iconify's 200,000+ icons and custom themed images
+- **Interactive Effects**: Engaging animations like the dot cross grid in HeroBanner
+- **Full TypeScript Support**: Complete type definitions for all components and props
+- **Theme-Aware**: Automatic light/dark mode support with customizable colors
+- **Responsive by Default**: Mobile-first design with container queries and media queries
+- **Zero Configuration**: Works out of the box with sensible defaults
+- **MDX-Optimized**: Designed specifically for Docusaurus MDX pages
+
+## Installation
+
+```bash
+npm install @sp-days-framework/docusaurus-frontpage-collection
+```
+
+## Quick Start
+
+```tsx
+import {
+  HeroBanner,
+  Columns,
+  Left,
+  Right,
+  Block,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+export default function MyPage() {
+  return (
+    <>
+      <HeroBanner
+        bannerText="Build amazing documentation sites"
+        iconify="mdi:rocket-launch"
+      />
+
+      <Columns leftRatio="60">
+        <Left>## Main content here</Left>
+        <Right>
+          <Block>### Sidebar content</Block>
+        </Right>
+      </Columns>
+    </>
+  );
+}
+```
+
+## Components Overview
+
+### HeroBanner
+
+Full-width banner with animated dot cross grid background.
+
+```tsx
+<HeroBanner
+  bannerText="Learn with our hands-on course"
+  iconify="mdi:docker"
+  iconColors={{
+    light: "#2496ED",
+    dark: "#2496ED"
+  }}
+/>
+```
+
+**Key Props:**
+- `bannerText` - Description text below tagline
+- `iconify` - Iconify icon name or configuration
+- `customIcon` - Custom images for light/dark themes
+- `iconColors` - Color overrides for Iconify icons
+- `enableDotCrossEffect` - Interactive background animation (default: `true`)
+
+> Title and tagline are automatically pulled from `docusaurus.config.js`.
+
+### Columns
+
+Responsive two-column layout with customizable ratios.
+
+```tsx
+<Columns leftRatio="70">
+  <Left>### Main content (70%)</Left>
+  <Right>### Sidebar (30%)</Right>
+</Columns>
+```
+
+**Key Props:**
+- `leftRatio` - Width percentage for left column (default: `'50'`)
+- `equalHeight` - Match column heights (default: `true`)
+- `minWidth` - Breakpoint for stacking (default: `'700px'`)
+
+### CourseFeature
+
+Display what's included and not included in your course.
+
+```tsx
+<CourseFeature>
+  <Included>
+    - **Docker Fundamentals**: Core concepts
+    - **Container Management**: Hands-on labs
+  </Included>
+  <NotIncluded>
+    - **Kubernetes**: Covered in advanced course
+  </NotIncluded>
+</CourseFeature>
+```
+
+**Key Props:**
+- `iconifyIncluded` - Custom Iconify icon for included section
+- `iconifyNotIncluded` - Custom Iconify icon for not included section
+- `customIconIncluded` / `customIconNotIncluded` - Custom images
+
+### IconContainersSection
+
+Grid of clickable icon cards for navigation or information.
+
+```tsx
+<IconContainersSection>
+  <IconContainerBlock
+    title="Git Knowledge"
+    iconify="mdi:git"
+    link="/docs/git"
+  />
+  <IconContainerBlock
+    title="Docker Basics"
+    iconify="mdi:docker"
+    link="/docs/docker"
+  />
+</IconContainersSection>
+```
+
+**Key Props:**
+- `title` - Display title
+- `iconify` - Iconify icon name or configuration
+- `customIcon` - Custom images for light/dark themes
+- `iconColors` - Custom colors for light/dark themes
+- `link` - Navigation URL
+
+### GetStarted
+
+Call-to-action section with optional exploration grid.
+
+```tsx
+<GetStarted buttonText="Start Course" buttonLink="/module-1">
+  ## Ready to begin?
+  
+  <Explore>
+    <ExploreItem 
+      title="Documentation" 
+      iconify="mdi:book"
+      link="/docs"
+    >
+      Browse our guides
+    </ExploreItem>
+  </Explore>
+</GetStarted>
+```
+
+**Key Props:**
+- `buttonText` - CTA button label
+- `buttonLink` - CTA button URL
+
+### FancyHeader
+
+Section header with decorative underline.
+
+```tsx
+<FancyHeader as="h2">What You'll Learn</FancyHeader>
+```
+
+**Key Props:**
+- `as` - Heading level: `'h1'` through `'h6'` (default: `'h2'`)
+
+### Block
+
+Simple styled container with hover effects.
+
+```tsx
+<Block>
+  ### Quick Stats
+  - Duration: 4 weeks
+  - Level: Intermediate
+</Block>
+```
+
+### Iconify
+
+Simple component for adding Iconify icons to pages with theme-aware colors.
+
+```tsx
+<Iconify 
+  icon="mdi:docker" 
+  width="250px"
+  iconColors={{
+    light: "#2496ED",
+    dark: "#2496ED"
+  }}
+/>
+```
+
+**Key Props:**
+- `icon` - Iconify icon name (e.g., "mdi:tools")
+- `width` / `height` - Optional sizing (default: `'200px'`)
+- `alignment` - Page alignment: `'left'`, `'center'`, or `'right'` (default: `'center'`)
+- `iconColors` - Color configuration for light/dark themes
+
+## Icon System
+
+All components support flexible icon configuration:
+
+### Iconify Icons
+
+```tsx
+<HeroBanner
+  iconify="mdi:docker"
+  iconColors={{
+    light: "#2496ED",
+    dark: "#2496ED"
+  }}
+/>
+```
+
+Browse 200,000+ icons at [Iconify](https://icon-sets.iconify.design/).
+
+### Custom Images
+
+```tsx
+<HeroBanner
+  customIcon={{
+    light: "img/logo-light.svg",
+    dark: "img/logo-dark.svg"
+  }}
+/>
+```
+
+### Advanced Iconify Configuration
+
+```tsx
+<IconContainerBlock
+  title="Linux"
+  iconify={{
+    icon: "mdi:linux",
+    width: "100%",
+    height: "100%",
+    colors: {
+      light: "#FCC624",
+      lightHover: "#DB9D0C",
+      dark: "#FFD65A",
+      darkHover: "#FFE89E"
+    }
+  }}
+  link="/docs/linux"
+/>
+```
+
+## Complete Example
+
+```mdx
+---
+title: My Course
+description: Learn with our hands-on course
+hide_table_of_contents: true
+---
+
+import {
+  HeroBanner,
+  FancyHeader,
+  CourseFeature,
+  Included,
+  NotIncluded,
+  IconContainersSection,
+  IconContainerBlock,
+  GetStarted,
+  Explore,
+  ExploreItem,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+<HeroBanner
+  bannerText="Learn with our hands-on course"
+  iconify="mdi:school"
+/>
+
+<FancyHeader>What You'll Learn</FancyHeader>
+
+<CourseFeature>
+  <Included>
+    - **Core Concepts**: Fundamentals
+    - **Hands-on Labs**: Practical exercises
+  </Included>
+  <NotIncluded>
+    - **Advanced Topics**: Covered separately
+  </NotIncluded>
+</CourseFeature>
+
+<FancyHeader>Requirements</FancyHeader>
+
+<IconContainersSection>
+  <IconContainerBlock
+    title="Git Knowledge"
+    iconify="mdi:git"
+    link="/docs/git"
+  />
+  <IconContainerBlock
+    title="Terminal Skills"
+    iconify="mdi:console"
+    link="/docs/terminal"
+  />
+</IconContainersSection>
+
+<GetStarted buttonText="Start Learning" buttonLink="/docs">
+  ## Ready to Begin?
+  
+  <Explore>
+    <ExploreItem
+      title="Documentation"
+      iconify="mdi:book-open-variant"
+      link="/docs"
+    >
+      Comprehensive guides
+    </ExploreItem>
+  </Explore>
+</GetStarted>
+```
+
+## TypeScript Support
+
+All components are fully typed with TypeScript:
+
+```typescript
+import type { 
+  HeroBannerProps,
+  ColumnsProps,
+  IconifyConfig,
+  CustomIconConfig,
+  IconColorConfig
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+```

package/lib/components/Block/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { StyledComponentProps } from '../../utils/types';
+export interface BlockProps extends StyledComponentProps {
+}
+/**
+ * Block Component
+ *
+ * A simple styled block container for Markdown content with hover effects.
+ * Perfect for creating card-like sections in your documentation.
+ *
+ * @example
+ * ```tsx
+ * <Block>
+ *   ## Your Content
+ *
+ *   This is some markdown content inside a styled block.
+ * </Block>
+ * ```
+ */
+export declare const Block: React.FC<BlockProps>;
+export default Block;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Block/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Block/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,oBAAoB;CAAG;AAE3D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAQtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/Block/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Block = void 0;
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const react_2 = require("@mdx-js/react");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * Block Component
+ *
+ * A simple styled block container for Markdown content with hover effects.
+ * Perfect for creating card-like sections in your documentation.
+ *
+ * @example
+ * ```tsx
+ * <Block>
+ *   ## Your Content
+ *
+ *   This is some markdown content inside a styled block.
+ * </Block>
+ * ```
+ */
+const Block = ({ className, children, style }) => {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(styles_module_css_1.default.block, className), style: style },
+        react_1.default.createElement(react_2.MDXProvider, null, children)));
+};
+exports.Block = Block;
+exports.default = exports.Block;
+//# sourceMappingURL=index.js.map

package/lib/components/Block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Block/index.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gDAAwB;AACxB,yCAA4C;AAE5C,4EAAyC;AAIzC;;;;;;;;;;;;;;GAcG;AACI,MAAM,KAAK,GAAyB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5E,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,2BAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK;QACzD,8BAAC,mBAAW,QACT,QAAQ,CACG,CACV,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,KAAK,SAQhB;AAEF,kBAAe,aAAK,CAAC"}

package/lib/components/Block/styles.module.css

@@ -0,0 +1,26 @@
+/**
+ * Block component styles
+ */
+
+.block {
+  padding: 0.5rem 1rem 1rem 1rem;
+  margin: 0rem 0.6rem 1.2rem 0.6rem;
+  border-radius: 8px;
+  background-color: var(--ifm-color-emphasis-100);
+  box-shadow: var(--ifm-global-shadow-lw);
+  height: 100%;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.block:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.block h2 {
+  margin-top: 0;
+}
+
+.block h3 {
+  margin-top: 0;
+}

package/lib/components/Columns/index.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import type { WithChildren } from '../../utils/types';
+export interface LeftProps extends WithChildren {
+}
+export interface RightProps extends WithChildren {
+}
+export interface ColumnsProps extends WithChildren {
+    /** Width ratio of left column as percentage (default: '50') */
+    leftRatio?: string;
+    /** Whether columns should have equal height (default: true) */
+    equalHeight?: boolean;
+    /** Minimum width before columns stack (default: '700px') */
+    minWidth?: string;
+    /** Prevent columns from stretching to fill container height (default: false) */
+    noStretch?: boolean;
+}
+/**
+ * Left Column Component
+ *
+ * Must be used as a child of the Columns component.
+ *
+ * @example
+ * ```tsx
+ * <Columns>
+ *   <Left>Content for left column</Left>
+ *   <Right>Content for right column</Right>
+ * </Columns>
+ * ```
+ */
+export declare const Left: React.FC<LeftProps>;
+/**
+ * Right Column Component
+ *
+ * Must be used as a child of the Columns component.
+ *
+ * @example
+ * ```tsx
+ * <Columns>
+ *   <Left>Content for left column</Left>
+ *   <Right>Content for right column</Right>
+ * </Columns>
+ * ```
+ */
+export declare const Right: React.FC<RightProps>;
+/**
+ * Columns Component
+ *
+ * A responsive two-column layout with customizable width ratios.
+ * Automatically stacks on smaller screens.
+ *
+ * @example
+ * ```tsx
+ * // Equal columns (50/50)
+ * <Columns>
+ *   <Left>Left content</Left>
+ *   <Right>Right content</Right>
+ * </Columns>
+ *
+ * // Custom ratio (70/30)
+ * <Columns leftRatio="70">
+ *   <Left>Larger left content</Left>
+ *   <Right>Smaller right content</Right>
+ * </Columns>
+ * ```
+ */
+export declare const Columns: React.FC<ColumnsProps>;
+export default Columns;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Columns/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Columns/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,WAAW,SAAU,SAAQ,YAAY;CAAG;AAElD,MAAM,WAAW,UAAW,SAAQ,YAAY;CAAG;AAEnD,MAAM,WAAW,YAAa,SAAQ,YAAY;IAChD,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAYpC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAYtC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8D1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Columns/index.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Columns = exports.Right = exports.Left = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@mdx-js/react");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * Left Column Component
+ *
+ * Must be used as a child of the Columns component.
+ *
+ * @example
+ * ```tsx
+ * <Columns>
+ *   <Left>Content for left column</Left>
+ *   <Right>Content for right column</Right>
+ * </Columns>
+ * ```
+ */
+const Left = ({ children }) => {
+    return (react_1.default.createElement("div", { className: styles_module_css_1.default.leftColumn },
+        react_1.default.createElement("div", { className: styles_module_css_1.default.columnContent },
+            react_1.default.createElement("div", { className: styles_module_css_1.default.mdxContainer },
+                react_1.default.createElement(react_2.MDXProvider, null, children)))));
+};
+exports.Left = Left;
+/**
+ * Right Column Component
+ *
+ * Must be used as a child of the Columns component.
+ *
+ * @example
+ * ```tsx
+ * <Columns>
+ *   <Left>Content for left column</Left>
+ *   <Right>Content for right column</Right>
+ * </Columns>
+ * ```
+ */
+const Right = ({ children }) => {
+    return (react_1.default.createElement("div", { className: styles_module_css_1.default.rightColumn },
+        react_1.default.createElement("div", { className: styles_module_css_1.default.columnContent },
+            react_1.default.createElement("div", { className: styles_module_css_1.default.mdxContainer },
+                react_1.default.createElement(react_2.MDXProvider, null, children)))));
+};
+exports.Right = Right;
+/**
+ * Columns Component
+ *
+ * A responsive two-column layout with customizable width ratios.
+ * Automatically stacks on smaller screens.
+ *
+ * @example
+ * ```tsx
+ * // Equal columns (50/50)
+ * <Columns>
+ *   <Left>Left content</Left>
+ *   <Right>Right content</Right>
+ * </Columns>
+ *
+ * // Custom ratio (70/30)
+ * <Columns leftRatio="70">
+ *   <Left>Larger left content</Left>
+ *   <Right>Smaller right content</Right>
+ * </Columns>
+ * ```
+ */
+const Columns = ({ leftRatio = '50', equalHeight = true, minWidth = '700px', noStretch = false, children }) => {
+    // Calculate the right ratio as the remaining percentage
+    const leftRatioNum = parseInt(leftRatio, 10);
+    const rightRatioNum = 100 - leftRatioNum;
+    // Find Left and Right components among children
+    let leftColumn = null;
+    let rightColumn = null;
+    react_1.default.Children.forEach(children, (child) => {
+        if (react_1.default.isValidElement(child)) {
+            if (child.type === exports.Left) {
+                leftColumn = child;
+            }
+            else if (child.type === exports.Right) {
+                rightColumn = child;
+            }
+        }
+    });
+    // Calculate common styles
+    const commonStyles = {
+        overflow: 'hidden',
+        minWidth: minWidth,
+        alignSelf: noStretch ? 'flex-start' : 'stretch',
+    };
+    // Set up grid template based on ratio
+    const gridTemplate = `${leftRatioNum}fr ${rightRatioNum}fr`;
+    return (react_1.default.createElement("div", { className: styles_module_css_1.default.columnsContainer, style: {
+            gridTemplateColumns: gridTemplate,
+            minWidth: '100%',
+            maxWidth: '100%',
+            width: '100%'
+        } },
+        leftColumn && react_1.default.cloneElement(leftColumn, {
+            style: {
+                ...commonStyles,
+                minWidth: 0,
+                maxWidth: '100%',
+            }
+        }),
+        rightColumn && react_1.default.cloneElement(rightColumn, {
+            style: {
+                ...commonStyles,
+                minWidth: 0,
+                maxWidth: '100%',
+            }
+        })));
+};
+exports.Columns = Columns;
+exports.default = exports.Columns;
+//# sourceMappingURL=index.js.map

package/lib/components/Columns/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Columns/index.tsx"],"names":[],"mappings":"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"}