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

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import type { WithChildren } from '../../utils/types';
+import type { IconifyConfig, CustomSvgConfig, CustomImageConfig, IconColorConfig, TitleColorConfig } from '../../utils/types';
+export interface IconContainerBlockProps {
+    /** Unique identifier for the iconContainer (optional) */
+    id?: string;
+    /** Title of the iconContainer */
+    title: string;
+    /** Iconify icon configuration */
+    iconify?: IconifyConfig | string;
+    /** Custom SVG configuration (inline rendering, supports color override) */
+    customSvg?: CustomSvgConfig;
+    /** Custom image configuration (img tag, no color override) */
+    customImage?: CustomImageConfig;
+    /** Icon color configuration */
+    iconColors?: IconColorConfig;
+    /** Title color configuration */
+    titleColors?: TitleColorConfig;
+    /** Disable hover animations (default: false) */
+    disableAnimation?: boolean;
+    /** Link to navigate to when clicked */
+    link: string;
+    /** Inline style override for card */
+    style?: React.CSSProperties;
+    /** Inline style override for link wrapper */
+    linkStyle?: React.CSSProperties;
+}
+export interface IconContainersSectionProps extends WithChildren {
+    /** Minimum width for each iconContainer block (default: '200px') */
+    minWidth?: string;
+    /** Maximum number of items per row ('auto' for responsive, default: 'auto') */
+    maxItemsPerRow?: string | number;
+}
+/**
+ * IconContainerBlock Component
+ *
+ * Individual card for a iconContainer item.
+ * Must be used as a child of IconContainersSection component.
+ *
+ * @example
+ * ```tsx
+ * <IconContainerBlock
+ *   id="github-user"
+ *   title="GitHub Account"
+ *   iconify="mdi:github"
+ *   link="/docs/iconContainers#github"
+ * />
+ * ```
+ */
+export declare const IconContainerBlock: React.FC<IconContainerBlockProps>;
+/**
+ * IconContainersSection Component
+ *
+ * Container for iconContainer blocks in a responsive grid layout.
+ *
+ * @example
+ * ```tsx
+ * <IconContainersSection>
+ *   <IconContainerBlock
+ *     id="github-user"
+ *     title="GitHub Account"
+ *     iconify="mdi:github"
+ *     link="/docs/iconContainers#github"
+ *   />
+ *   <IconContainerBlock
+ *     id="linux-knowledge"
+ *     title="Linux Basics"
+ *     iconify="mdi:linux"
+ *     link="/docs/iconContainers#linux"
+ *   />
+ * </IconContainersSection>
+ * ```
+ */
+export declare const IconContainersSection: React.FC<IconContainersSectionProps>;
+export default IconContainersSection;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG9H,MAAM,WAAW,uBAAuB;IACtC,yDAAyD;IACzD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IACjC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,gCAAgC;IAChC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,WAAW,0BAA2B,SAAQ,YAAY;IAC9D,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAoDhE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA6DtE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/lib/components/IconContainer/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.IconContainersSection = exports.IconContainerBlock = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@mdx-js/react");
+const Link_1 = __importDefault(require("@docusaurus/Link"));
+const ThemedIcon_1 = require("../../utils/ThemedIcon");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * IconContainerBlock Component
+ *
+ * Individual card for a iconContainer item.
+ * Must be used as a child of IconContainersSection component.
+ *
+ * @example
+ * ```tsx
+ * <IconContainerBlock
+ *   id="github-user"
+ *   title="GitHub Account"
+ *   iconify="mdi:github"
+ *   link="/docs/iconContainers#github"
+ * />
+ * ```
+ */
+const IconContainerBlock = ({ id, title, iconify, customSvg, customImage, iconColors, titleColors, disableAnimation = false, link, style, linkStyle }) => {
+    // Build iconify config with colors if provided
+    const iconifyWithColors = iconify && iconColors
+        ? (typeof iconify === 'string'
+            ? { icon: iconify, colors: iconColors }
+            : { ...iconify, colors: { ...iconify.colors, ...iconColors } })
+        : iconify;
+    // Build CSS custom properties for title colors
+    const titleCssVars = titleColors ? {
+        '--title-color': titleColors.light,
+        '--title-color-hover': titleColors.lightHover,
+        '--title-color-dark': titleColors.dark || titleColors.light,
+        '--title-color-hover-dark': titleColors.darkHover || titleColors.lightHover,
+    } : {};
+    return (react_1.default.createElement(Link_1.default, { to: link, className: styles_module_css_1.default.iconContainerLink, style: linkStyle },
+        react_1.default.createElement("div", { className: `${styles_module_css_1.default.iconContainerCard} ${disableAnimation ? styles_module_css_1.default.disableAnimation : ''}`.trim(), ...(id && { id }), style: { ...titleCssVars, ...style } },
+            (iconify || customSvg || customImage) && (react_1.default.createElement("div", { className: styles_module_css_1.default.iconContainerIconContainer },
+                react_1.default.createElement(ThemedIcon_1.ThemedIcon, { iconify: iconifyWithColors, customSvg: customSvg, customImage: customImage, alt: title, className: styles_module_css_1.default.iconContainerIcon, supportsHover: true, disableAnimation: disableAnimation }))),
+            react_1.default.createElement("h4", null, title))));
+};
+exports.IconContainerBlock = IconContainerBlock;
+/**
+ * IconContainersSection Component
+ *
+ * Container for iconContainer blocks in a responsive grid layout.
+ *
+ * @example
+ * ```tsx
+ * <IconContainersSection>
+ *   <IconContainerBlock
+ *     id="github-user"
+ *     title="GitHub Account"
+ *     iconify="mdi:github"
+ *     link="/docs/iconContainers#github"
+ *   />
+ *   <IconContainerBlock
+ *     id="linux-knowledge"
+ *     title="Linux Basics"
+ *     iconify="mdi:linux"
+ *     link="/docs/iconContainers#linux"
+ *   />
+ * </IconContainersSection>
+ * ```
+ */
+const IconContainersSection = ({ children, minWidth = '200px', maxItemsPerRow = 'auto' }) => {
+    // Extract the string content and iconContainer blocks
+    let introContent = null;
+    const iconContainerBlocks = [];
+    if (Array.isArray(children)) {
+        children.forEach((child) => {
+            if (typeof child === 'string') {
+                introContent = child;
+            }
+            else if (react_1.default.isValidElement(child)) {
+                iconContainerBlocks.push(child);
+            }
+        });
+    }
+    else if (react_1.default.isValidElement(children)) {
+        iconContainerBlocks.push(children);
+    }
+    // Calculate flex-basis for even distribution
+    let flexBasis = 'calc(25% - 1.5rem)'; // Default: ~4 per row
+    if (maxItemsPerRow !== 'auto') {
+        const maxItems = parseInt(maxItemsPerRow.toString());
+        flexBasis = `calc(${100 / maxItems}% - 1.5rem)`;
+    }
+    // Apply custom flex styling to each block if custom props are provided
+    const shouldApplyCustomStyles = minWidth !== '200px' || maxItemsPerRow !== 'auto';
+    const styledBlocks = shouldApplyCustomStyles
+        ? iconContainerBlocks.map((block, index) => {
+            if (react_1.default.isValidElement(block)) {
+                return react_1.default.cloneElement(block, {
+                    key: index,
+                    linkStyle: {
+                        flex: `1 1 ${flexBasis}`,
+                        minWidth: minWidth,
+                        maxWidth: maxItemsPerRow !== 'auto' ? '100%' : '300px',
+                        ...(block.props.linkStyle || {})
+                    }
+                });
+            }
+            return block;
+        })
+        : iconContainerBlocks;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        introContent && (react_1.default.createElement(react_2.MDXProvider, null, introContent)),
+        react_1.default.createElement("div", { className: styles_module_css_1.default.iconContainersRow }, styledBlocks)));
+};
+exports.IconContainersSection = IconContainersSection;
+exports.default = exports.IconContainersSection;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,147 @@
+/**
+ * IconContainers Section component styles
+ */
+
+.iconContainersRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  padding: 0.5rem 1rem 1rem 1rem;
+  width: 100%;
+}
+
+.iconContainerLink {
+  text-decoration: none !important;
+  color: inherit !important;
+  /* Use flex to control sizing - this encourages even distribution */
+  flex: 1 1 calc(25% - 1.5rem);
+  min-width: 200px;
+}
+
+.iconContainerCard {
+  padding: 1.25rem;
+  border-radius: 8px;
+  background-color: var(--ifm-color-emphasis-100);
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border-left: 4px solid var(--ifm-color-primary);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.iconContainerCard:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--ifm-global-shadow-md);
+  background-color: var(--ifm-color-primary-contrast-background);
+}
+
+.iconContainerCard:hover::after {
+  content: "";
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1.5rem;
+  color: var(--ifm-color-primary);
+}
+
+.iconContainerIconContainer {
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--icon-color, var(--ifm-color-emphasis-600));
+  transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.iconContainerCard:hover .iconContainerIconContainer {
+  color: var(--icon-color-hover, var(--ifm-color-primary));
+  transform: scale(1.05) translateY(-2px);
+}
+
+/* Dark theme support */
+[data-theme="dark"] .iconContainerIconContainer {
+  color: var(
+    --icon-color-dark,
+    var(--icon-color, var(--ifm-color-emphasis-600))
+  );
+}
+
+[data-theme="dark"] .iconContainerCard:hover .iconContainerIconContainer {
+  color: var(
+    --icon-color-hover-dark,
+    var(--icon-color-hover, var(--ifm-color-primary))
+  );
+}
+
+/* Disable animation when requested */
+.iconContainerCard.disableAnimation:hover .iconContainerIconContainer {
+  transform: none;
+}
+
+.iconContainerIcon {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ensure SVG fills the container */
+.iconContainerIcon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.iconContainerCard h4 {
+  color: var(--title-color, var(--ifm-color-emphasis-600));
+  margin-bottom: 0;
+  text-align: center;
+  transition: color 0.3s ease;
+}
+
+.iconContainerCard:hover h4 {
+  color: var(--title-color-hover, var(--ifm-color-primary));
+}
+
+/* Dark theme support */
+[data-theme="dark"] .iconContainerCard h4 {
+  color: var(
+    --title-color-dark,
+    var(--title-color, var(--ifm-color-emphasis-600))
+  );
+}
+
+[data-theme="dark"] .iconContainerCard:hover h4 {
+  color: var(
+    --title-color-hover-dark,
+    var(--title-color-hover, var(--ifm-color-primary))
+  );
+}
+
+/* Responsive adjustments */
+@media (max-width: 996px) {
+  .iconContainerLink {
+    flex: 1 1 calc(33.333% - 1.5rem);
+    min-width: 180px;
+  }
+}
+
+@media (max-width: 768px) {
+  .iconContainerLink {
+    flex: 1 1 calc(50% - 1.5rem);
+    min-width: 150px;
+  }
+
+  /* .iconContainerCard h4 {
+    font-size: 1.1rem;
+  } */
+}
+
+@media (max-width: 480px) {
+  .iconContainerLink {
+    flex: 1 1 100%;
+  }
+}

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

@@ -0,0 +1,56 @@
+import React from 'react';
+/**
+ * Color configuration for Iconify component (simplified, no hover states)
+ */
+export interface IconifyImageColorConfig {
+    /** Icon color in light mode (default: --ifm-color-primary) */
+    light?: string;
+    /** Icon color in dark mode (default: --ifm-color-primary if light is not defined, otherwise inherits from light) */
+    dark?: string;
+}
+export interface IconifyProps {
+    /** Iconify icon name (e.g., "mdi:tools") */
+    icon: string;
+    /** Optional width (e.g., "200px", "10rem"). Maintains aspect ratio. */
+    width?: string;
+    /** Optional height (e.g., "200px", "10rem"). Maintains aspect ratio. */
+    height?: string;
+    /** Alignment of the component on the page (default: 'center') */
+    alignment?: 'left' | 'center' | 'right';
+    /** Icon color configuration */
+    iconColors?: IconifyImageColorConfig;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Iconify Component
+ *
+ * A simple component for adding Iconify icons to MDX pages and documentation.
+ * Supports theme-aware colors, flexible sizing, and page alignment.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default settings
+ * <Iconify icon="mdi:tools" />
+ *
+ * // Custom size and alignment
+ * <Iconify icon="mdi:docker" width="300px" alignment="left" />
+ *
+ * // Custom colors for light and dark themes
+ * <Iconify
+ *   icon="mdi:kubernetes"
+ *   iconColors={{
+ *     light: "#326CE5",
+ *     dark: "#326CE5"
+ *   }}
+ * />
+ *
+ * // Only specify one dimension (maintains aspect ratio)
+ * <Iconify icon="mdi:react" height="150px" />
+ * ```
+ */
+export declare const Iconify: React.FC<IconifyProps>;
+export default Iconify;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Iconify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oHAAoH;IACpH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoE1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Iconify/index.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Iconify = void 0;
+const react_1 = __importDefault(require("react"));
+const useIsBrowser_1 = __importDefault(require("@docusaurus/useIsBrowser"));
+const theme_common_1 = require("@docusaurus/theme-common");
+const IconifyIcon_1 = require("../../utils/IconifyIcon");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * Iconify Component
+ *
+ * A simple component for adding Iconify icons to MDX pages and documentation.
+ * Supports theme-aware colors, flexible sizing, and page alignment.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default settings
+ * <Iconify icon="mdi:tools" />
+ *
+ * // Custom size and alignment
+ * <Iconify icon="mdi:docker" width="300px" alignment="left" />
+ *
+ * // Custom colors for light and dark themes
+ * <Iconify
+ *   icon="mdi:kubernetes"
+ *   iconColors={{
+ *     light: "#326CE5",
+ *     dark: "#326CE5"
+ *   }}
+ * />
+ *
+ * // Only specify one dimension (maintains aspect ratio)
+ * <Iconify icon="mdi:react" height="150px" />
+ * ```
+ */
+const Iconify = ({ icon, width, height, alignment = 'center', iconColors, className, style, }) => {
+    const isBrowser = (0, useIsBrowser_1.default)();
+    const { colorMode } = (0, theme_common_1.useColorMode)();
+    const isDarkTheme = isBrowser ? colorMode === 'dark' : false;
+    // Determine icon color based on theme and user config
+    let iconColor;
+    if (iconColors?.light && iconColors?.dark) {
+        // Both defined - use appropriate one
+        iconColor = isDarkTheme ? iconColors.dark : iconColors.light;
+    }
+    else if (iconColors?.light) {
+        // Only light defined - use for light, default primary for dark
+        iconColor = isDarkTheme ? 'var(--ifm-color-primary)' : iconColors.light;
+    }
+    else if (iconColors?.dark) {
+        // Only dark defined - use for dark, default primary for light
+        iconColor = isDarkTheme ? iconColors.dark : 'var(--ifm-color-primary)';
+    }
+    else {
+        // Neither defined - use default primary for both
+        iconColor = 'var(--ifm-color-primary)';
+    }
+    // Build icon sizing styles
+    const iconSizeStyle = {};
+    if (width) {
+        iconSizeStyle.maxWidth = width;
+        iconSizeStyle.width = width;
+    }
+    if (height) {
+        iconSizeStyle.maxHeight = height;
+        iconSizeStyle.height = height;
+    }
+    // If no size specified, use default 200px constraint
+    if (!width && !height) {
+        iconSizeStyle.maxWidth = '200px';
+        iconSizeStyle.maxHeight = '200px';
+        iconSizeStyle.width = '200px';
+        iconSizeStyle.height = '200px';
+    }
+    // Determine alignment class
+    const alignmentClass = alignment === 'left' ? styles_module_css_1.default.alignLeft :
+        alignment === 'right' ? styles_module_css_1.default.alignRight :
+            styles_module_css_1.default.alignCenter;
+    return (react_1.default.createElement("div", { className: `${styles_module_css_1.default.iconifyContainer} ${alignmentClass} ${className || ''}`.trim(), style: style },
+        react_1.default.createElement("div", { className: styles_module_css_1.default.iconifyWrapper },
+            react_1.default.createElement(IconifyIcon_1.IconifyIcon, { icon: icon, color: iconColor, width: "100%", height: "100%", className: styles_module_css_1.default.iconifyIcon, style: iconSizeStyle }))));
+};
+exports.Iconify = Iconify;
+exports.default = exports.Iconify;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Iconify/index.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4EAAoD;AACpD,2DAAwD;AACxD,yDAAsD;AACtD,4EAAyC;AA6BzC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACI,MAAM,OAAO,GAA2B,CAAC,EAC9C,IAAI,EACJ,KAAK,EACL,MAAM,EACN,SAAS,GAAG,QAAQ,EACpB,UAAU,EACV,SAAS,EACT,KAAK,GACN,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,IAAA,sBAAY,GAAE,CAAC;IACjC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,2BAAY,GAAE,CAAC;IACrC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAE7D,sDAAsD;IACtD,IAAI,SAAiB,CAAC;IACtB,IAAI,UAAU,EAAE,KAAK,IAAI,UAAU,EAAE,IAAI,EAAE,CAAC;QAC1C,qCAAqC;QACrC,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/D,CAAC;SAAM,IAAI,UAAU,EAAE,KAAK,EAAE,CAAC;QAC7B,+DAA+D;QAC/D,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC;IAC1E,CAAC;SAAM,IAAI,UAAU,EAAE,IAAI,EAAE,CAAC;QAC5B,8DAA8D;QAC9D,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B,CAAC;IACzE,CAAC;SAAM,CAAC;QACN,iDAAiD;QACjD,SAAS,GAAG,0BAA0B,CAAC;IACzC,CAAC;IAED,2BAA2B;IAC3B,MAAM,aAAa,GAAwB,EAAE,CAAC;IAC9C,IAAI,KAAK,EAAE,CAAC;QACV,aAAa,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC/B,aAAa,CAAC,KAAK,GAAG,KAAK,CAAC;IAC9B,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACX,aAAa,CAAC,SAAS,GAAG,MAAM,CAAC;QACjC,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC;IAChC,CAAC;IAED,qDAAqD;IACrD,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;QACtB,aAAa,CAAC,QAAQ,GAAG,OAAO,CAAC;QACjC,aAAa,CAAC,SAAS,GAAG,OAAO,CAAC;QAClC,aAAa,CAAC,KAAK,GAAG,OAAO,CAAC;QAC9B,aAAa,CAAC,MAAM,GAAG,OAAO,CAAC;IACjC,CAAC;IAED,4BAA4B;IAC5B,MAAM,cAAc,GAClB,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,2BAAM,CAAC,SAAS,CAAC,CAAC;QACzC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,2BAAM,CAAC,UAAU,CAAC,CAAC;YAC3C,2BAAM,CAAC,WAAW,CAAC;IAErB,OAAO,CACL,uCAAK,SAAS,EAAE,GAAG,2BAAM,CAAC,gBAAgB,IAAI,cAAc,IAAI,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK;QACpG,uCAAK,SAAS,EAAE,2BAAM,CAAC,cAAc;YACnC,8BAAC,yBAAW,IACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,SAAS,EAChB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,SAAS,EAAE,2BAAM,CAAC,WAAW,EAC7B,KAAK,EAAE,aAAa,GACpB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AApEW,QAAA,OAAO,WAoElB;AAEF,kBAAe,eAAO,CAAC"}

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

@@ -0,0 +1,30 @@
+/**
+ * Iconify component styles
+ */
+
+.iconifyContainer {
+  display: block;
+  width: 100%;
+}
+
+.alignLeft {
+  text-align: left;
+}
+
+.alignCenter {
+  text-align: center;
+}
+
+.alignRight {
+  text-align: right;
+}
+
+.iconifyWrapper {
+  display: inline-block;
+  padding: 10px;
+}
+
+.iconifyIcon {
+  display: block;
+  object-fit: contain;
+}

package/lib/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @sp-days-framework/docusaurus-frontpage-collection
+ *
+ * A collection of reusable React components for Docusaurus with TypeScript support.
+ * Includes flexible icon system supporting both Iconify icons and custom images.
+ */
+export { IconifyIcon } from "./utils/IconifyIcon";
+export { ThemedIcon } from "./utils/ThemedIcon";
+export { logWarn, logError, logInfo } from "./utils/logger";
+export { IMAGE_NOT_FOUND_SVG, DEFAULT_ICON_COLORS, DEFAULT_TITLE_COLORS, } from "./utils/constants";
+export type { IconifyConfig, CustomSvgConfig, CustomImageConfig, IconColorConfig, TitleColorConfig, IconifyImageColorConfig, IconifyIconProps, ThemedIconProps, WithChildren, WithClassName, StyledComponentProps, } from "./utils/types";
+export { Block } from "./components/Block";
+export { default as BlockDefault } from "./components/Block";
+export type { BlockProps } from "./components/Block";
+export { Columns, Left, Right } from "./components/Columns";
+export { default as ColumnsDefault } from "./components/Columns";
+export type { ColumnsProps, LeftProps, RightProps } from "./components/Columns";
+export { CourseFeature, Included, NotIncluded, } from "./components/CourseFeature";
+export { default as CourseFeatureDefault } from "./components/CourseFeature";
+export type { CourseFeatureProps, IncludedProps, NotIncludedProps, } from "./components/CourseFeature";
+export { FancyHeader } from "./components/FancyHeader";
+export { default as FancyHeaderDefault } from "./components/FancyHeader";
+export type { FancyHeaderProps } from "./components/FancyHeader";
+export { GetStarted, Explore, ExploreItem } from "./components/GetStarted";
+export { default as GetStartedDefault } from "./components/GetStarted";
+export type { GetStartedProps, ExploreProps, ExploreItemProps, } from "./components/GetStarted";
+export { HeroBanner } from "./components/HeroBanner";
+export { default as HeroBannerDefault } from "./components/HeroBanner";
+export type { HeroBannerProps } from "./components/HeroBanner";
+export { IconContainersSection, IconContainerBlock, } from "./components/IconContainer";
+export { default as IconContainersSectionDefault } from "./components/IconContainer";
+export type { IconContainersSectionProps, IconContainerBlockProps, } from "./components/IconContainer";
+export { Iconify } from "./components/Iconify";
+export { default as IconifyDefault } from "./components/Iconify";
+export type { IconifyProps } from "./components/Iconify";
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,aAAa,EACb,oBAAoB,GACrB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGhF,OAAO,EACL,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,YAAY,EACV,kBAAkB,EAClB,aAAa,EACb,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACzE,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,YAAY,EACV,eAAe,EACf,YAAY,EACZ,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EACL,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AACrF,YAAY,EACV,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/index.js

@@ -0,0 +1,73 @@
+"use strict";
+/**
+ * @sp-days-framework/docusaurus-frontpage-collection
+ *
+ * A collection of reusable React components for Docusaurus with TypeScript support.
+ * Includes flexible icon system supporting both Iconify icons and custom images.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconifyDefault = exports.Iconify = exports.IconContainersSectionDefault = exports.IconContainerBlock = exports.IconContainersSection = exports.HeroBannerDefault = exports.HeroBanner = exports.GetStartedDefault = exports.ExploreItem = exports.Explore = exports.GetStarted = exports.FancyHeaderDefault = exports.FancyHeader = exports.CourseFeatureDefault = exports.NotIncluded = exports.Included = exports.CourseFeature = exports.ColumnsDefault = exports.Right = exports.Left = exports.Columns = exports.BlockDefault = exports.Block = exports.DEFAULT_TITLE_COLORS = exports.DEFAULT_ICON_COLORS = exports.IMAGE_NOT_FOUND_SVG = exports.logInfo = exports.logError = exports.logWarn = exports.ThemedIcon = exports.IconifyIcon = void 0;
+// Utility exports
+var IconifyIcon_1 = require("./utils/IconifyIcon");
+Object.defineProperty(exports, "IconifyIcon", { enumerable: true, get: function () { return IconifyIcon_1.IconifyIcon; } });
+var ThemedIcon_1 = require("./utils/ThemedIcon");
+Object.defineProperty(exports, "ThemedIcon", { enumerable: true, get: function () { return ThemedIcon_1.ThemedIcon; } });
+var logger_1 = require("./utils/logger");
+Object.defineProperty(exports, "logWarn", { enumerable: true, get: function () { return logger_1.logWarn; } });
+Object.defineProperty(exports, "logError", { enumerable: true, get: function () { return logger_1.logError; } });
+Object.defineProperty(exports, "logInfo", { enumerable: true, get: function () { return logger_1.logInfo; } });
+var constants_1 = require("./utils/constants");
+Object.defineProperty(exports, "IMAGE_NOT_FOUND_SVG", { enumerable: true, get: function () { return constants_1.IMAGE_NOT_FOUND_SVG; } });
+Object.defineProperty(exports, "DEFAULT_ICON_COLORS", { enumerable: true, get: function () { return constants_1.DEFAULT_ICON_COLORS; } });
+Object.defineProperty(exports, "DEFAULT_TITLE_COLORS", { enumerable: true, get: function () { return constants_1.DEFAULT_TITLE_COLORS; } });
+// Block component
+var Block_1 = require("./components/Block");
+Object.defineProperty(exports, "Block", { enumerable: true, get: function () { return Block_1.Block; } });
+var Block_2 = require("./components/Block");
+Object.defineProperty(exports, "BlockDefault", { enumerable: true, get: function () { return __importDefault(Block_2).default; } });
+// Columns component and sub-components
+var Columns_1 = require("./components/Columns");
+Object.defineProperty(exports, "Columns", { enumerable: true, get: function () { return Columns_1.Columns; } });
+Object.defineProperty(exports, "Left", { enumerable: true, get: function () { return Columns_1.Left; } });
+Object.defineProperty(exports, "Right", { enumerable: true, get: function () { return Columns_1.Right; } });
+var Columns_2 = require("./components/Columns");
+Object.defineProperty(exports, "ColumnsDefault", { enumerable: true, get: function () { return __importDefault(Columns_2).default; } });
+// CourseFeature component and sub-components
+var CourseFeature_1 = require("./components/CourseFeature");
+Object.defineProperty(exports, "CourseFeature", { enumerable: true, get: function () { return CourseFeature_1.CourseFeature; } });
+Object.defineProperty(exports, "Included", { enumerable: true, get: function () { return CourseFeature_1.Included; } });
+Object.defineProperty(exports, "NotIncluded", { enumerable: true, get: function () { return CourseFeature_1.NotIncluded; } });
+var CourseFeature_2 = require("./components/CourseFeature");
+Object.defineProperty(exports, "CourseFeatureDefault", { enumerable: true, get: function () { return __importDefault(CourseFeature_2).default; } });
+// FancyHeader component
+var FancyHeader_1 = require("./components/FancyHeader");
+Object.defineProperty(exports, "FancyHeader", { enumerable: true, get: function () { return FancyHeader_1.FancyHeader; } });
+var FancyHeader_2 = require("./components/FancyHeader");
+Object.defineProperty(exports, "FancyHeaderDefault", { enumerable: true, get: function () { return __importDefault(FancyHeader_2).default; } });
+// GetStarted component and sub-components
+var GetStarted_1 = require("./components/GetStarted");
+Object.defineProperty(exports, "GetStarted", { enumerable: true, get: function () { return GetStarted_1.GetStarted; } });
+Object.defineProperty(exports, "Explore", { enumerable: true, get: function () { return GetStarted_1.Explore; } });
+Object.defineProperty(exports, "ExploreItem", { enumerable: true, get: function () { return GetStarted_1.ExploreItem; } });
+var GetStarted_2 = require("./components/GetStarted");
+Object.defineProperty(exports, "GetStartedDefault", { enumerable: true, get: function () { return __importDefault(GetStarted_2).default; } });
+// HeroBanner component
+var HeroBanner_1 = require("./components/HeroBanner");
+Object.defineProperty(exports, "HeroBanner", { enumerable: true, get: function () { return HeroBanner_1.HeroBanner; } });
+var HeroBanner_2 = require("./components/HeroBanner");
+Object.defineProperty(exports, "HeroBannerDefault", { enumerable: true, get: function () { return __importDefault(HeroBanner_2).default; } });
+// IconContainersSection component and sub-components
+var IconContainer_1 = require("./components/IconContainer");
+Object.defineProperty(exports, "IconContainersSection", { enumerable: true, get: function () { return IconContainer_1.IconContainersSection; } });
+Object.defineProperty(exports, "IconContainerBlock", { enumerable: true, get: function () { return IconContainer_1.IconContainerBlock; } });
+var IconContainer_2 = require("./components/IconContainer");
+Object.defineProperty(exports, "IconContainersSectionDefault", { enumerable: true, get: function () { return __importDefault(IconContainer_2).default; } });
+// Iconify component
+var Iconify_1 = require("./components/Iconify");
+Object.defineProperty(exports, "Iconify", { enumerable: true, get: function () { return Iconify_1.Iconify; } });
+var Iconify_2 = require("./components/Iconify");
+Object.defineProperty(exports, "IconifyDefault", { enumerable: true, get: function () { return __importDefault(Iconify_2).default; } });
+//# sourceMappingURL=index.js.map