@jjlmoya/utils-shared 1.0.0

package/src/seo/SEOList.astro

@@ -0,0 +1,123 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+    items?: string[] | undefined;
+    icon?: string | undefined;
+}
+
+const { items, icon = "mdi:chevron-right" } = Astro.props;
+---
+
+<ul class="seo-list-premium">
+    {
+        items ? (
+            items.map((item) => (
+                <li class="list-card">
+                    <div class="marker-wrapper">
+                        <div class="marker-box">
+                            <Icon name={icon} class="marker-svg" />
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <Fragment set:html={item} />
+                    </div>
+                </li>
+            ))
+        ) : (
+            <slot />
+        )
+    }
+</ul>
+
+<style>
+    .seo-list-premium {
+        list-style: none;
+        padding: 0;
+        margin: 3rem 0;
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+    }
+
+    .list-card {
+        display: flex;
+        align-items: flex-start;
+        gap: 1.5rem;
+        padding: 1.5rem 1.75rem;
+        background: var(--bg-surface);
+        border: 1px solid var(--border-base);
+        border-radius: 20px;
+        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+        box-shadow: 0 4px 6px -1px var(--shadow-base), 0 2px 4px -2px var(--shadow-base);
+    }
+
+    .list-card:hover {
+        border-color: var(--accent);
+        transform: scale(1.01) translateX(8px);
+        box-shadow: 0 20px 25px -5px var(--shadow-hover), 0 8px 10px -6px var(--shadow-hover);
+    }
+
+    .marker-wrapper {
+        flex-shrink: 0;
+        margin-top: 4px;
+    }
+
+    .marker-box {
+        width: 32px;
+        height: 32px;
+        background: var(--bg-page);
+        border: 1px solid var(--border-base);
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--accent);
+        transition: all 0.3s ease;
+    }
+
+    .list-card:hover .marker-box {
+        background: var(--accent);
+        color: var(--text-on-accent);
+        transform: rotate(90deg);
+        border-color: var(--accent);
+        box-shadow: 0 0 15px var(--accent-bg);
+    }
+
+    .marker-svg {
+        width: 18px;
+        height: 18px;
+    }
+
+    .card-content {
+        font-size: 1.05rem;
+        color: var(--text-muted);
+        line-height: 1.7;
+        font-weight: 500;
+    }
+
+    .card-content :global(strong) {
+        color: var(--text-base);
+        font-weight: 800;
+        display: block;
+        margin-bottom: 4px;
+        font-size: 1.1rem;
+        letter-spacing: -0.01em;
+    }
+
+    @media (max-width: 640px) {
+        .list-card {
+            padding: 1.25rem;
+            gap: 1rem;
+        }
+
+        .list-card:hover {
+            transform: translateX(4px);
+        }
+
+        .marker-box {
+            width: 28px;
+            height: 28px;
+        }
+    }
+</style>

package/src/seo/SEOMessageTemplate.astro

@@ -0,0 +1,54 @@
+---
+interface Props {
+    title?: string | undefined;
+    ariaLabel?: string | undefined;
+}
+
+const { title, ariaLabel } = Astro.props;
+---
+
+<div class="seo-message-box" aria-label={ariaLabel}>
+    {title && <div class="box-header">{title}</div>}
+    <div class="box-inner">
+        <div class="box-content"><slot /></div>
+    </div>
+</div>
+
+<style>
+    .seo-message-box {
+        margin: 2.5rem 0;
+        background: var(--bg-surface);
+        border: 1px solid var(--border-base);
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 4px 6px -1px var(--shadow-base);
+    }
+
+    .box-header {
+        background: var(--bg-page);
+        border-bottom: 1px solid var(--border-base);
+        padding: 10px 20px;
+        font-size: 0.7rem;
+        font-weight: 800;
+        color: var(--text-dimmed);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .box-inner {
+        padding: 24px;
+        background: radial-gradient(
+            circle at top right,
+            var(--accent-bg),
+            transparent
+        );
+    }
+
+    .box-content {
+        font-size: 1rem;
+        color: var(--text-base);
+        line-height: 1.6;
+        white-space: pre-line;
+        text-align: left;
+    }
+</style>

package/src/seo/SEOProsCons.astro

@@ -0,0 +1,153 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface ProsConsItem {
+    pro: string;
+    con: string;
+}
+
+interface Props {
+    title?: string | undefined;
+    items: ProsConsItem[];
+    proTitle?: string | undefined;
+    conTitle?: string | undefined;
+}
+
+const { title, items, proTitle = "Ventajas", conTitle = "Desventajas" } = Astro.props;
+---
+
+<div class="seo-proscons-box">
+    {title && <h4 class="proscons-header-title">{title}</h4>}
+    <div class="proscons-grid">
+        <div class="pros-column">
+            <span class="column-title pro-text">
+                <Icon name="mdi:check-circle" class="title-icon" />
+                {proTitle}
+            </span>
+            <ul class="proscons-list">
+                {items.map((item) => (
+                    <li class="proscons-item">
+                        <Icon name="mdi:plus" class="item-icon pro-text" />
+                        <span>{item.pro}</span>
+                    </li>
+                ))}
+            </ul>
+        </div>
+        <div class="cons-column">
+            <span class="column-title con-text">
+                <Icon name="mdi:alert-circle" class="title-icon" />
+                {conTitle}
+            </span>
+            <ul class="proscons-list">
+                {items.map((item) => (
+                    <li class="proscons-item">
+                        <Icon name="mdi:minus" class="item-icon con-text" />
+                        <span>{item.con}</span>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    </div>
+</div>
+
+<style>
+    .seo-proscons-box {
+        margin: 3.5rem 0;
+        background: var(--bg-surface);
+        border: 1px solid var(--border-base);
+        border-radius: 24px;
+        padding: 2.5rem;
+        box-shadow: 0 4px 6px -1px var(--shadow-base);
+    }
+
+    .proscons-header-title {
+        text-align: center;
+        font-size: 1.25rem;
+        font-weight: 800;
+        color: var(--text-base);
+        margin-bottom: 2.5rem;
+        letter-spacing: -0.01em;
+    }
+
+    .proscons-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 2.5rem;
+        position: relative;
+    }
+
+    .proscons-grid::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background: var(--border-base);
+        transform: translateX(-50%);
+    }
+
+    .column-title {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 1rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        margin-bottom: 1.5rem;
+    }
+
+    .pro-text {
+        color: var(--color-success);
+    }
+
+    .con-text {
+        color: var(--color-error);
+    }
+
+    .title-icon {
+        width: 22px;
+        height: 22px;
+    }
+
+    .proscons-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 1.25rem;
+    }
+
+    .proscons-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        font-size: 0.95rem;
+        color: var(--text-muted);
+        font-weight: 500;
+        line-height: 1.5;
+    }
+
+    .item-icon {
+        width: 18px;
+        height: 18px;
+        margin-top: 2px;
+        flex-shrink: 0;
+    }
+
+    @media (max-width: 768px) {
+        .proscons-grid {
+            grid-template-columns: 1fr;
+        }
+
+        .proscons-grid::after {
+            display: none;
+        }
+
+        .seo-proscons-box {
+            padding: 1.5rem;
+        }
+    }
+</style>

package/src/seo/SEORenderer.astro

@@ -0,0 +1,87 @@
+---
+import type { UtilitySEOContent } from "../types/index.ts";
+import SEOArticle from "./SEOArticle.astro";
+import SEOTitle from "./SEOTitle.astro";
+import SEOList from "./SEOList.astro";
+import SEOTable from "./SEOTable.astro";
+import SEOTip from "./SEOTip.astro";
+import SEOCard from "./SEOCard.astro";
+import SEOStats from "./SEOStats.astro";
+import SEOGlossary from "./SEOGlossary.astro";
+import SEOCode from "./SEOCode.astro";
+import SEOComparative from "./SEOComparative.astro";
+import SEODiagnostic from "./SEODiagnostic.astro";
+import SEOProsCons from "./SEOProsCons.astro";
+import SEOSummary from "./SEOSummary.astro";
+import SEOGrid from "./SEOGrid.astro";
+import SEOMessageTemplate from "./SEOMessageTemplate.astro";
+
+interface Props {
+    content: UtilitySEOContent;
+}
+
+const { content } = Astro.props;
+---
+
+<SEOArticle>
+    {content.sections.map((section) => {
+        if (section.type === "title") {
+            return <SEOTitle title={section.text} level={section.level ?? 2} />;
+        }
+        if (section.type === "paragraph") {
+            return <Fragment set:html={section.html} />;
+        }
+        if (section.type === "list") {
+            return <SEOList items={section.items} icon={section.icon} />;
+        }
+        if (section.type === "table") {
+            return (
+                <SEOTable headers={section.headers}>
+                    {section.rows.map((row) => (
+                        <tr>
+                            {row.map((cell) => <td set:html={cell} />)}
+                        </tr>
+                    ))}
+                </SEOTable>
+            );
+        }
+        if (section.type === "tip") {
+            return <SEOTip title={section.title}><Fragment set:html={section.html} /></SEOTip>;
+        }
+        if (section.type === "card") {
+            return <SEOCard icon={section.icon} title={section.title}><Fragment set:html={section.html} /></SEOCard>;
+        }
+        if (section.type === "stats") {
+            return <SEOStats stats={section.items} columns={section.columns} />;
+        }
+        if (section.type === "glossary") {
+            return <SEOGlossary items={section.items} />;
+        }
+        if (section.type === "code") {
+            return <SEOCode code={section.code} ariaLabel={section.ariaLabel} />;
+        }
+        if (section.type === "comparative") {
+            return <SEOComparative items={section.items} columns={section.columns} />;
+        }
+        if (section.type === "diagnostic") {
+            return (
+                <SEODiagnostic title={section.title} icon={section.icon} type={section.variant} badge={section.badge}>
+                    <Fragment set:html={section.html} />
+                </SEODiagnostic>
+            );
+        }
+        if (section.type === "proscons") {
+            return <SEOProsCons title={section.title} items={section.items} proTitle={section.proTitle} conTitle={section.conTitle} />;
+        }
+        if (section.type === "summary") {
+            return <SEOSummary title={section.title} items={section.items} />;
+        }
+        if (section.type === "grid") {
+            return <SEOGrid columns={section.columns} />;
+        }
+        if (section.type === "message") {
+            return <SEOMessageTemplate title={section.title} ariaLabel={section.ariaLabel}><Fragment set:html={section.html} /></SEOMessageTemplate>;
+        }
+        return null;
+    })}
+</SEOArticle>

package/src/seo/SEOStats.astro

@@ -0,0 +1,140 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface StatItem {
+    value: string;
+    label: string;
+    icon?: string;
+    trend?: { value: string; positive: boolean };
+}
+
+interface Props {
+    stats: StatItem[];
+    columns?: 2 | 3 | 4 | undefined;
+}
+
+const { stats, columns = 3 } = Astro.props;
+---
+
+<div class={`seo-stats-grid cols-${columns}`}>
+    {stats.map((stat) => (
+        <div class="stat-card">
+            <div class="stat-header">
+                {stat.icon && <Icon name={stat.icon} class="stat-icon" />}
+                {stat.trend && (
+                    <span class={`stat-trend ${stat.trend.positive ? "is-positive" : "is-negative"}`}>
+                        <Icon name={stat.trend.positive ? "mdi:trending-up" : "mdi:trending-down"} />
+                        {stat.trend.value}
+                    </span>
+                )}
+            </div>
+            <div class="stat-main">
+                <span class="stat-value">{stat.value}</span>
+                <span class="stat-label">{stat.label}</span>
+            </div>
+        </div>
+    ))}
+</div>
+
+<style>
+    .seo-stats-grid {
+        display: grid;
+        gap: 1.5rem;
+        margin: 2.5rem 0;
+    }
+
+    .cols-2 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .cols-3 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .cols-4 {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .stat-card {
+        background: var(--bg-surface);
+        border: 1px solid var(--border-base);
+        border-radius: 20px;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        transition: all 0.3s ease;
+    }
+
+    .stat-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 12px 20px -5px var(--shadow-base);
+        border-color: var(--accent);
+    }
+
+    .stat-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .stat-icon {
+        width: 24px;
+        height: 24px;
+        color: var(--accent);
+    }
+
+    .stat-trend {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 0.75rem;
+        font-weight: 700;
+        padding: 4px 8px;
+        border-radius: 100px;
+    }
+
+    .is-positive {
+        background: var(--color-success);
+        color: var(--text-on-primary);
+    }
+
+    .is-negative {
+        background: var(--color-error);
+        color: var(--text-on-primary);
+    }
+
+    .stat-main {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .stat-value {
+        font-size: 2.25rem;
+        font-weight: 900;
+        color: var(--text-base);
+        letter-spacing: -0.02em;
+        line-height: 1;
+        margin-bottom: 0.25rem;
+    }
+
+    .stat-label {
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: var(--text-dimmed);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    @media (max-width: 768px) {
+        .seo-stats-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+
+    @media (max-width: 480px) {
+        .seo-stats-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>