@jjlmoya/utils-shared 1.0.0

package/src/seo/SEOSummary.astro

@@ -0,0 +1,166 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+    title: string;
+    items: string[];
+}
+
+const { title, items } = Astro.props;
+---
+
+<section class="summary-panel">
+    <div class="panel-header">
+        <div class="header-content">
+            <div class="header-icon-box">
+                <Icon name="mdi:lightbulb-on-outline" class="header-icon" />
+            </div>
+            <div class="header-text">
+                <span class="header-subtitle">Resumen </span>
+                <h4 class="header-title">{title}</h4>
+            </div>
+        </div>
+    </div>
+    <div class="panel-body">
+        <div class="points-grid">
+            {
+                items.map((item) => (
+                    <div class="point-item">
+                        <div class="point-marker">
+                            <Icon
+                                name="mdi:chevron-right"
+                                class="marker-icon"
+                            />
+                        </div>
+                        <div class="point-content">
+                            <Fragment set:html={item} />
+                        </div>
+                    </div>
+                ))
+            }
+        </div>
+    </div>
+</section>
+
+<style>
+    .summary-panel {
+        margin: 0 0 4rem;
+        background: var(--bg-surface);
+        border: 1px solid var(--border-base);
+        border-radius: 16px;
+        box-shadow: 0 1px 2px var(--shadow-base), 0 10px 15px -3px var(--shadow-base);
+        overflow: hidden;
+    }
+
+    .panel-header {
+        padding: 1.5rem 2rem;
+        background: var(--bg-page);
+        border-bottom: 1px solid var(--border-base);
+    }
+
+    .header-content {
+        display: flex;
+        align-items: center;
+        gap: 1.25rem;
+    }
+
+    .header-icon-box {
+        width: 44px;
+        height: 44px;
+        background: var(--bg-surface);
+        border: 1px solid var(--border-base);
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2px 4px var(--shadow-base);
+    }
+
+    .header-icon {
+        width: 24px;
+        height: 24px;
+        color: var(--accent);
+    }
+
+    .header-text {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .header-subtitle {
+        font-size: 0.65rem;
+        font-weight: 800;
+        color: var(--text-dimmed);
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+    }
+
+    .header-title {
+        font-size: 1.25rem;
+        font-weight: 800;
+        color: var(--text-base);
+        margin: 0;
+        letter-spacing: -0.01em;
+    }
+
+    .panel-body {
+        padding: 2rem;
+    }
+
+    .points-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.5rem 2.5rem;
+    }
+
+    .point-item {
+        display: flex;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+
+    .point-marker {
+        width: 22px;
+        height: 22px;
+        background: var(--accent-bg);
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        margin-top: 2px;
+    }
+
+    .marker-icon {
+        width: 14px;
+        height: 14px;
+        color: var(--accent);
+    }
+
+    .point-content {
+        font-size: 0.95rem;
+        color: var(--text-muted);
+        line-height: 1.6;
+        font-weight: 500;
+    }
+
+    .point-content :global(strong) {
+        color: var(--text-base);
+        font-weight: 700;
+    }
+
+    @media (max-width: 768px) {
+        .points-grid {
+            grid-template-columns: 1fr;
+            gap: 1.25rem;
+        }
+
+        .panel-body {
+            padding: 1.5rem;
+        }
+
+        .panel-header {
+            padding: 1.25rem 1.5rem;
+        }
+    }
+</style>

package/src/seo/SEOTable.astro

@@ -0,0 +1,154 @@
+---
+interface Props {
+    headers: string[];
+    striped?: boolean;
+    responsive?: boolean;
+}
+
+const { headers, responsive = true } = Astro.props;
+---
+
+<div class={`seo-table-wrapper ${responsive ? "responsive" : ""}`}>
+    <table class="seo-table" role="table">
+        <thead>
+            <tr class="header-row">
+                {
+                    headers.map((header, index) => (
+                        <th
+                            scope="col"
+                            class={`header-cell ${index === 0 ? "first" : ""} ${index === headers.length - 1 ? "last" : ""}`}
+                        >
+                            {header}
+                        </th>
+                    ))
+                }
+            </tr>
+        </thead>
+        <tbody>
+            <slot />
+        </tbody>
+    </table>
+</div>
+
+<style>
+    .seo-table-wrapper {
+        width: 100%;
+        margin: 2.5rem 0;
+        border-radius: 1rem;
+        overflow: hidden;
+        box-shadow: 0 1px 3px 0 var(--shadow-base), 0 4px 6px -2px var(--shadow-base);
+        background: var(--bg-surface);
+        border: 1px solid var(--border-base);
+    }
+
+    .seo-table-wrapper.responsive {
+        overflow-x: auto;
+    }
+
+    .seo-table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: left;
+        font-size: 0.95rem;
+        line-height: 1.5;
+    }
+
+    .header-row {
+        background: linear-gradient(
+            135deg,
+            var(--bg-page) 0%,
+            var(--bg-muted) 100%
+        );
+        border-bottom: 2px solid var(--border-base);
+    }
+
+    .header-cell {
+        padding: 1.25rem 1.5rem;
+        font-weight: 700;
+        color: var(--text-base);
+        white-space: nowrap;
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        letter-spacing: 0.5px;
+    }
+
+    .header-cell.first {
+        border-radius: 1rem 0 0;
+    }
+
+    .header-cell.last {
+        border-radius: 0 1rem 0 0;
+    }
+
+    .seo-table :global(tbody tr) {
+        border-bottom: 1px solid var(--border-base);
+        transition: all 0.2s ease-in-out;
+    }
+
+    .seo-table :global(tbody tr:last-child) {
+        border-bottom: none;
+    }
+
+    .seo-table :global(tbody tr:nth-child(odd)) {
+        background-color: var(--bg-surface);
+    }
+
+    .seo-table :global(tbody tr:nth-child(even)) {
+        background-color: var(--bg-page);
+    }
+
+    .seo-table :global(tbody tr:hover) {
+        background-color: var(--bg-muted);
+        box-shadow: inset 0 0 0 1px var(--border-base);
+    }
+
+    .seo-table :global(td) {
+        padding: 1.25rem 1.5rem;
+        color: var(--text-muted);
+        vertical-align: middle;
+        font-weight: 400;
+    }
+
+    .seo-table :global(td strong) {
+        color: var(--text-base);
+        font-weight: 600;
+    }
+
+    @media (max-width: 768px) {
+        .header-cell {
+            padding: 1rem 1.25rem;
+            font-size: 0.75rem;
+        }
+
+        .seo-table :global(td) {
+            padding: 1rem 1.25rem;
+            font-size: 0.9rem;
+        }
+
+        .seo-table-wrapper {
+            margin: 2rem 0;
+            border-radius: 0.75rem;
+        }
+
+        .header-cell.first {
+            border-radius: 0.75rem 0 0;
+        }
+
+        .header-cell.last {
+            border-radius: 0 0.75rem 0 0;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .header-cell {
+            padding: 0.875rem 1rem;
+            font-size: 0.7rem;
+            letter-spacing: 0.25px;
+        }
+
+        .seo-table :global(td) {
+            padding: 0.875rem 1rem;
+            font-size: 0.875rem;
+        }
+    }
+</style>

package/src/seo/SEOTip.astro

@@ -0,0 +1,36 @@
+---
+interface Props {
+    title?: string | undefined;
+}
+
+const { title } = Astro.props;
+---
+
+<div class="seo-tip">
+    {title && <h5>{title}</h5>}
+    <slot />
+</div>
+
+<style>
+    .seo-tip {
+        background: var(--bg-muted);
+        border-left: 4px solid var(--primary);
+        padding: 1.5rem;
+        border-radius: 1rem;
+        margin: 2.5rem 0;
+    }
+
+    .seo-tip h5 {
+        margin: 0 0 0.75rem;
+        color: var(--text-base);
+        font-size: 1.1rem;
+        font-weight: 700;
+    }
+
+    .seo-tip :global(p) {
+        margin: 0;
+        color: var(--text-muted);
+        font-size: 0.95rem;
+        line-height: 1.6;
+    }
+</style>

package/src/seo/SEOTitle.astro

@@ -0,0 +1,59 @@
+---
+interface Props {
+    title: string;
+    level?: 2 | 3 | 4;
+}
+
+const { title, level = 2 } = Astro.props;
+type HeadingTag = "h2" | "h3" | "h4";
+const Tag = `h${level}` as HeadingTag;
+---
+
+<Tag class="seo-title">
+    <span class="prefix">#</span>
+    {title}
+</Tag>
+
+<style>
+    .seo-title {
+        color: var(--text-base);
+        line-height: 1.3;
+        margin-bottom: 1.5rem;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .prefix {
+        font-weight: 700;
+        color: var(--primary);
+    }
+
+    h2.seo-title {
+        font-size: 2rem;
+        font-weight: 800;
+        margin-top: 4rem;
+    }
+
+    h3.seo-title {
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin-top: 3rem;
+    }
+
+    h4.seo-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        margin-top: 2rem;
+    }
+
+    @media (max-width: 768px) {
+        h2.seo-title {
+            font-size: 1.75rem;
+        }
+
+        h3.seo-title {
+            font-size: 1.35rem;
+        }
+    }
+</style>

package/src/styles/theme.css

@@ -0,0 +1,48 @@
+:root,
+.theme-light {
+    --bg-page: #f8fafc;
+    --bg-surface: #fff;
+    --bg-muted: #f1f5f9;
+    --bg-code: #0f172a;
+    --text-base: #0f172a;
+    --text-muted: #475569;
+    --text-dimmed: #64748b;
+    --text-code: #f8fafc;
+    --border-base: #e2e8f0;
+    --primary: #3b82f6;
+    --primary-bg: #eff6ff;
+    --primary-strong: #1e40af;
+    --accent: #6366f1;
+    --accent-bg: rgba(99, 102, 241, 0.1);
+    --text-on-accent: #fff;
+    --text-on-primary: #fff;
+    --color-warning: #f59e0b;
+    --color-error: #f43f5e;
+    --color-info: #3b82f6;
+    --color-success: #10b981;
+    --shadow-base: rgba(0, 0, 0, 0.05);
+    --shadow-hover: rgba(0, 0, 0, 0.1);
+}
+
+.theme-dark {
+    --bg-page: #020617;
+    --bg-surface: #0f172a;
+    --bg-muted: #1e293b;
+    --bg-code: #020617;
+    --text-base: #f8fafc;
+    --text-muted: #94a3b8;
+    --text-dimmed: #64748b;
+    --text-code: #f8fafc;
+    --border-base: #1e293b;
+    --primary: #60a5fa;
+    --primary-bg: rgba(59, 130, 246, 0.1);
+    --primary-strong: #93c5fd;
+    --accent: #818cf8;
+    --accent-bg: rgba(129, 140, 248, 0.15);
+    --color-warning: #fbbf24;
+    --color-error: #fb7185;
+    --color-info: #60a5fa;
+    --color-success: #34d399;
+    --shadow-base: rgba(0, 0, 0, 0.3);
+    --shadow-hover: rgba(0, 0, 0, 0.4);
+}

package/src/types/index.ts

@@ -0,0 +1,64 @@
+export interface UtilityItem {
+    title: string;
+    description: string;
+    href: string;
+    iconBg: string;
+    iconFg: string;
+    color: string;
+    appSlug?: string;
+}
+
+export interface SectionData {
+    title: string;
+    slug: string;
+    icon: string;
+    theme:
+        | "emerald"
+        | "orange"
+        | "purple"
+        | "blue"
+        | "pink"
+        | "cyan"
+        | "indigo"
+        | "slate"
+        | "rose"
+        | "amber"
+        | "nature";
+    utilities: UtilityItem[];
+}
+
+export type SEOSection =
+    | { type: "title"; level?: 2 | 3 | 4; text: string }
+    | { type: "paragraph"; html: string }
+    | { type: "list"; items: string[]; icon?: string }
+    | { type: "table"; headers: string[]; rows: string[][] }
+    | { type: "tip"; title?: string; html: string }
+    | { type: "card"; icon?: string; title?: string; html: string }
+    | { type: "stats"; items: { value: string; label: string; icon?: string }[]; columns?: 2 | 3 | 4 }
+    | { type: "glossary"; items: { term: string; definition: string }[] }
+    | { type: "code"; code: string; ariaLabel?: string }
+    | {
+          type: "comparative";
+          items: {
+              title: string;
+              description: string;
+              icon?: string;
+              highlight?: boolean;
+              points?: string[];
+              pointIcon?: string;
+          }[];
+          columns?: 2 | 3;
+      }
+    | { type: "diagnostic"; variant: "warning" | "error" | "info" | "success"; title: string; icon?: string; badge?: string; html: string }
+    | { type: "proscons"; title?: string; items: { pro: string; con: string }[]; proTitle?: string; conTitle?: string }
+    | { type: "summary"; title: string; items: string[] }
+    | { type: "grid"; columns?: 1 | 2 | 3 | 4 }
+    | { type: "message"; title?: string; ariaLabel?: string; html: string };
+
+export interface UtilitySEOContent {
+    locale: string;
+    sections: SEOSection[];
+    faqItems?: { question: string; answer: string }[];
+    howToSteps?: { name: string; text: string }[];
+    bibliography?: { name: string; url: string }[];
+}

package/src/ui/Bibliography.astro

@@ -0,0 +1,158 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Link {
+    name: string;
+    url: string;
+}
+
+interface Props {
+    links: Link[];
+    title?: string;
+}
+
+const { links = [], title = "Referencias Bibliográficas" } = Astro.props;
+---
+
+<div class="bibliography">
+    <div class="bibliography-card">
+        <div class="bibliography-header">
+            <Icon
+                name="mdi:format-quote-open"
+                class="bibliography-quote-icon"
+            />
+            <h3 class="bibliography-title">{title}</h3>
+        </div>
+        <ul class="bibliography-list">
+            {
+                links.map((link: Link, index: number) => (
+                    <li class="bibliography-item">
+                        <span class="bibliography-index">[{index + 1}]</span>
+                        <div class="bibliography-content">
+                            <a
+                                href={link.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="bibliography-link"
+                            >
+                                {link.name}
+                                <Icon
+                                    name="mdi:open-in-new"
+                                    class="bibliography-external-icon"
+                                />
+                            </a>
+                            <p class="bibliography-url">{link.url}</p>
+                        </div>
+                    </li>
+                ))
+            }
+        </ul>
+    </div>
+</div>
+
+<style>
+    .bibliography {
+        margin-top: 4rem;
+        margin-bottom: 3rem;
+    }
+
+    .bibliography-card {
+        position: relative;
+        border-radius: 0 0.5rem 0.5rem 0;
+        border-left: 4px solid var(--primary-strong);
+        background-color: var(--bg-page);
+        padding: 1.5rem 2rem;
+    }
+
+    .bibliography-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid var(--border-base);
+    }
+
+    .bibliography-quote-icon {
+        width: 2rem;
+        height: 2rem;
+        color: var(--accent);
+        opacity: 0.2;
+        flex-shrink: 0;
+    }
+
+    .bibliography-title {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--text-base);
+        letter-spacing: -0.02em;
+        margin: 0;
+    }
+
+    .bibliography-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 1.25rem;
+    }
+
+    .bibliography-item {
+        display: flex;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+
+    .bibliography-index {
+        font-family: ui-monospace, SFMono-Regular, monospace;
+        font-size: 0.75rem;
+        color: var(--text-dimmed);
+        user-select: none;
+        flex-shrink: 0;
+        padding-top: 0.2rem;
+    }
+
+    .bibliography-content {
+        flex: 1;
+    }
+
+    .bibliography-link {
+        font-size: 1rem;
+        font-weight: 500;
+        color: var(--text-base);
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        transition: color 0.2s ease;
+    }
+
+    .bibliography-link:hover {
+        color: var(--primary);
+        text-decoration: underline;
+        text-decoration-thickness: 1px;
+        text-underline-offset: 4px;
+    }
+
+    .bibliography-external-icon {
+        width: 0.75rem;
+        height: 0.75rem;
+        opacity: 0.3;
+        transition: opacity 0.2s ease;
+        flex-shrink: 0;
+    }
+
+    .bibliography-item:hover .bibliography-external-icon {
+        opacity: 1;
+    }
+
+    .bibliography-url {
+        font-family: ui-monospace, SFMono-Regular, monospace;
+        font-size: 0.7rem;
+        color: var(--text-dimmed);
+        margin: 0.25rem 0 0;
+        word-break: break-all;
+        line-height: 1.5;
+    }
+</style>