@sp-days-framework/docusaurus-frontpage-collection 1.0.3 → 1.1.0-beta1

package/docs/call-to-action.mdx

@@ -0,0 +1,226 @@
+---
+sidebar_label: "Call to Action"
+sidebar_position: 2.1
+sidebar_custom_props:
+  section: "Components"
+  section_position: 2
+---
+
+import {
+  GetStarted,
+  Explore,
+  ExploreItem,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+# Call to Action
+
+A call-to-action (aka `Get Started`) component with an optional explore grid for additional resources.
+
+<div style={{ position: 'relative', marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
+  <div style={{ position: 'absolute', left: '50%', marginTop: '4px', transform: 'translateX(-50%)', fontWeight: 500, color: 'var(--ifm-color-emphasis-600)' }}>
+    Preview
+  </div>
+  <div style={{ borderRadius: '12px', padding: '2rem', width: '-webkit-fill-available', background: 'var(--ifm-color-emphasis-200)' }}>
+    <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"
+        >
+          Access all course modules and lessons
+        </ExploreItem>
+        <ExploreItem
+          title="Resources"
+          iconify="mdi:book-open-variant"
+        >
+          Additional learning materials and references
+        </ExploreItem>
+        <ExploreItem
+          title="Presentations"
+          iconify="mdi:television-play"
+        >
+          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
+
+### When to Use
+
+- End of landing pages to drive user action
+- Course enrollment sections
+- Resource navigation hubs
+- Next steps or getting started sections
+
+## Import
+
+```mdx
+import {
+  GetStarted,
+  Explore,
+  ExploreItem,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+```
+
+## Basic Usage
+
+```mdx
+<GetStarted buttonText="Start Learning" buttonLink="/resources/intro">
+  ## Ready to Begin?
+  
+  Start with Module 1 and begin your journey!
+  
+  <Explore>
+    <ExploreItem
+      title="Documentation"
+      iconify="mdi:book-open-variant"
+      link="/resources"
+    >
+      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="/resources">
+  Ready to learn? Click below to start!
+</GetStarted>
+```
+
+### With Explore Grid
+
+```mdx
+<GetStarted buttonText="Start Learning" buttonLink="/resources/module1">
+  ## Ready for Launch?
+  
+  Begin your Docker journey today!
+  
+  <Explore>
+    <ExploreItem title="Documentation" iconify="mdi:book" link="/resources">
+      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="/resources"
+  >
+    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/docs/changelog.mdx

@@ -0,0 +1,105 @@
+---
+sidebar_label: "Change Logs"
+sidebar_position: 3
+toc_max_heading_level: 2
+sidebar_custom_props:
+  section: "Releases"
+  section_position: 3
+---
+
+# Changelog
+
+## `@sp-days-framework/docusaurus-frontpage-collection`
+
+[![npm version](https://img.shields.io/npm/v/@sp-days-framework/docusaurus-frontpage-collection?logo=nodedotjs)](https://www.npmjs.com/package/@sp-days-framework/docusaurus-frontpage-collection)
+
+:::note
+All packages within `@sp-days-framework` use the same version number. In some cases, a package might just be "bumped" to match the rest without any functional changes.
+:::
+
+---
+
+## Version 1.1.0-beta1 ![beta](https://img.shields.io/badge/release-beta-yellow)
+
+Display beautiful command-line examples in your documentation
+
+<details>
+<summary><strong>Beta Details</strong> (2025 December 08)</summary>
+
+### New Features
+
+- **Terminal Component**: Create realistic terminal output displays in your documentation
+  - Perfect for showing command examples and expected outputs
+  - Automatic theme support (matches your site's light/dark mode)
+  - Customizable prompt text and colors
+  - Browser window styling for a polished look
+  
+  :::warning Beta Feature
+  This component is in beta and may be replaced with a dedicated terminal UI package in future releases.
+  :::
+
+### Package Documentation
+
+- Documentation is now bundled with the npm package, making it accessible during development and for offline reference
+
+</details>
+
+---
+
+## Version 1.0.4 ![Release](https://img.shields.io/badge/release-production-blue)
+
+Terminal UI component for displaying command outputs
+
+<details>
+<summary><strong>Details</strong> (2025 December 1)</summary>
+
+### New Features
+
+- Implemented Terminal UI component to display expected command outputs with customizable prompts and styles
+
+</details>
+
+---
+
+## Version 1.0.3 ![Release](https://img.shields.io/badge/release-production-blue)
+
+Component styling improvements
+
+<details>
+<summary><strong>Details</strong> (2025 November 27)</summary>
+
+### Bug Fixes
+
+- Fix `GettingStarted` component styling
+
+</details>
+
+---
+
+## Version 1.0.2 ![Release](https://img.shields.io/badge/release-production-blue)
+
+Minor code cleanup
+
+<details>
+<summary><strong>Details</strong> (2025 November 25)</summary>
+
+### Improvements
+
+- Minor code cleanup
+
+</details>
+
+---
+
+## Version 1.0.0 ![Release](https://img.shields.io/badge/release-production-blue)
+
+Initial release of the Docusaurus Frontpage Collection plugin
+
+<details>
+<summary><strong>Details</strong> (2025 November 24)</summary>
+
+### New Features
+
+- Initial release with frontpage collection components
+
+</details>

package/docs/columns.mdx

@@ -0,0 +1,198 @@
+---
+sidebar_label: "Columns Section"
+sidebar_position: 2.2
+sidebar_custom_props:
+  section: "Components"
+  section_position: 2
+---
+
+import {
+  Columns,
+  Left,
+  Right,
+  Block,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+# Columns Section
+
+Create responsive two-column layouts with customizable ratios.
+
+<div style={{ position: 'relative', marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
+  <div style={{ position: 'absolute', left: '50%', marginTop: '4px', transform: 'translateX(-50%)', fontWeight: 500, color: 'var(--ifm-color-emphasis-600)' }}>
+    Preview
+  </div>
+  <div style={{ borderRadius: '12px', padding: '2rem 1rem 0rem 1rem', width: '-webkit-fill-available', background: 'var(--ifm-color-emphasis-200)' }}>
+    <Columns leftRatio="60">
+      <Left>
+        ### Main Content
+        
+        This is a live example of the Columns component. The left column takes up 60% of the width, while the right column takes up 40%.
+        
+        The columns will automatically stack on smaller screens for better mobile experience.
+      </Left>
+      <Right>
+        <Block>
+          ### Quick Stats
+          
+          - **Responsive**: Stacks on mobile
+          - **Flexible**: Custom ratios
+          - **Equal height**: Automatic
+        </Block>
+      </Right>
+    </Columns>
+  </div>
+</div>
+
+## Features
+
+- Flexible column ratios
+- Equal height option
+- Automatic text wrapping
+
+### When to Use
+
+- Side-by-side comparisons
+- Main content with sidebar information
+- Split layouts for text and supporting details
+- Responsive two-column layouts
+
+## Import
+
+```mdx
+import {
+  Columns,
+  Left,
+  Right,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+```
+
+## Basic Usage
+
+```mdx
+<Columns>
+  <Left>
+    Left column content
+  </Left>
+  <Right>
+    Right column content
+  </Right>
+</Columns>
+```
+
+## Props
+
+### Columns
+
+| Prop          | Type        | Default   | Description                              |
+| ------------- | ----------- | --------- | ---------------------------------------- |
+| `leftRatio`   | `string`    | `'50'`    | Width percentage for left column         |
+| `equalHeight` | `boolean`   | `true`    | Whether columns should have equal height |
+| `minWidth`    | `string`    | `'700px'` | Minimum width before stacking            |
+| `noStretch`   | `boolean`   | `false`   | Prevent columns from stretching          |
+| `children`    | `ReactNode` | required  | Left and Right components                |
+
+### Left / Right
+
+| Prop       | Type        | Description                   |
+| ---------- | ----------- | ----------------------------- |
+| `children` | `ReactNode` | Column content (supports MDX) |
+
+## Examples
+
+### 50/50 Split
+
+```mdx
+<Columns>
+  <Left>
+    ## Left Side
+    
+    Content for the left column
+  </Left>
+  <Right>
+    ## Right Side
+    
+    Content for the right column
+  </Right>
+</Columns>
+```
+
+### 60/40 Split
+
+```mdx
+<Columns leftRatio="60">
+  <Left>
+    ## Main Content (60%)
+    
+    This column takes up 60% of the width
+  </Left>
+  <Right>
+    ## Sidebar (40%)
+    
+    This column takes up 40% of the width
+  </Right>
+</Columns>
+```
+
+### 70/30 Split
+
+```mdx
+<Columns leftRatio="70">
+  <Left>
+    ## Primary Content
+    
+    Larger column for main content
+  </Left>
+  <Right>
+    ### Quick Stats
+    
+    - Duration: 4 weeks
+    - Effort: 10 hrs/week
+  </Right>
+</Columns>
+```
+
+### With Block Component
+
+```mdx
+import {
+  Columns,
+  Left,
+  Right,
+  Block,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+<Columns leftRatio="65">
+  <Left>
+    ## Course Overview
+    
+    Detailed description of the course...
+  </Left>
+  <Right>
+    <Block>
+      ### Info
+      
+      - **Level**: Intermediate
+      - **Duration**: 6 weeks
+      - **Certificate**: Yes
+    </Block>
+  </Right>
+</Columns>
+```
+
+## Responsive Behavior
+
+The columns automatically stack vertically when the container is too narrow:
+
+- **> 900px**: Full two-column layout
+- **750px - 900px**: Reduced gap between columns
+- **600px - 750px**: Further adjusted spacing
+- **< 600px**: Stacks vertically
+
+## Content Wrapping
+
+Text and content automatically wrap within columns:
+
+- Long words break appropriately
+- Tables become scrollable
+- Images scale to fit
+- Code blocks wrap or scroll

package/docs/content-block.mdx

@@ -0,0 +1,133 @@
+---
+sidebar_label: "Content Block"
+sidebar_position: 2.3
+sidebar_custom_props:
+  section: "Components"
+  section_position: 2
+---
+
+import { Block } from "@sp-days-framework/docusaurus-frontpage-collection";
+
+# Content Block
+
+A simple styled block container for highlighting content.
+
+<div style={{ position: 'relative', marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
+  <div style={{ position: 'absolute', left: '50%', marginTop: '4px', transform: 'translateX(-50%)', fontWeight: 500, color: 'var(--ifm-color-emphasis-600)' }}>
+    Preview
+  </div>
+  <div style={{ borderRadius: '12px', padding: '2rem 1.3rem', background: 'var(--ifm-color-emphasis-200)' }}>
+    <Block>
+      ### Example Block
+      
+      This is a live example of the Block component with hover effect.
+      
+      - **Feature 1**: Styled container
+      - **Feature 2**: Hover animation
+      - **Feature 3**: Perfect for side content
+    </Block>
+  </div>
+</div>
+
+## Features
+
+- Hover effect
+- Works great in columns or standalone
+
+### When to Use
+
+- Highlighting supplementary information
+- Quick reference sections in sidebars
+- Course metadata displays
+- Callout boxes for important details
+
+## Import
+
+```mdx
+import { Block } from "@sp-days-framework/docusaurus-frontpage-collection";
+```
+
+## Basic Usage
+
+```mdx
+<Block>
+  ## Quick Info
+  
+  - **Duration**: 4 weeks
+  - **Effort**: 10 hours/week
+  - **Level**: Intermediate
+</Block>
+```
+
+## Props
+
+| Prop        | Type        | Description            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Additional CSS classes |
+| `children`  | `ReactNode` | Markdown content       |
+
+## Examples
+
+### Simple Block
+
+```mdx
+<Block>
+  ### Important Note 
+  
+  Remember to complete all iconContainers before starting.
+</Block>
+```
+
+### With Custom Class
+
+```mdx
+<Block className="my-custom-class">Custom styled content</Block>
+```
+
+### In Columns
+
+```mdx
+import {
+  Columns,
+  Left,
+  Right,
+  Block,
+} from "@sp-days-framework/docusaurus-frontpage-collection";
+
+<Columns leftRatio="65">
+  <Left>
+    Main content goes here...
+  </Left>
+  <Right>
+    <Block>
+      ### Course Stats
+      
+      - 1,000+ students
+      - 4.8/5 rating
+      - Updated monthly
+    </Block>
+  </Right>
+</Columns>
+```
+
+### Multiple Blocks
+
+```mdx
+<Block>
+  ### Module 1
+  
+  Introduction to Docker
+</Block>
+
+<Block>
+  ### Module 2
+  
+  Container Management
+</Block>
+
+<Block>
+  ### Module 3
+  
+  Image Building
+</Block>
+```