@jjlmoya/utils-shared 1.0.0

package/README.md

@@ -0,0 +1,69 @@
+# @jjlmoya/utils-shared
+
+Library of common components and utilities for jjlmoya projects, built with Astro and TypeScript.
+
+## Installation
+
+```bash
+npm install @jjlmoya/utils-shared
+```
+
+## Setup
+
+Ensure you have `astro-icon` configured in your `astro.config.mjs`:
+
+```javascript
+import { defineConfig } from "astro/config";
+import icon from "astro-icon";
+
+export default defineConfig({
+    integrations: [icon()]
+});
+```
+
+## Main Components
+
+### SEO Components
+
+- **SEOCard**: A premium card with icon support for highlighting information.
+- **SEOList**: A stylistic list with custom icons and hover effects.
+- **SEOStats**: Displays metrics and status with trend indicators.
+- **SEOCode**: A custom code block with syntax highlighting and aria-labels.
+- **SEOComparative**: Used for comparing features or options.
+- **SEODiagnostic**: Shows status, success, or warning messages in a diagnostic format.
+- **SEOTip**: Short informative boxes for advice.
+- **SEOSummary**: A checklist-style list for wrapping up key points.
+
+### UI Components
+
+- **UtilityHeader**: A modern header for utility pages with gradient backgrounds.
+- **Bibliography**: A list of links for further reading or citations.
+
+## Usage Example
+
+```astro
+---
+import { SEOCard, UtilityHeader } from "@jjlmoya/utils-shared";
+---
+
+<UtilityHeader 
+    titleHighlight="My" 
+    titleBase="Utility" 
+    description="This is a description." 
+/>
+
+<SEOCard title="Ready to go" icon="mdi:rocket-launch">
+    <p>This is a custom card content.</p>
+</SEOCard>
+```
+
+## Development
+
+To preview components in development:
+
+```bash
+npm run dev
+```
+
+Then visit `http://localhost:51000/` to see the showroom.
+

package/package.json

@@ -0,0 +1,60 @@
+{
+    "name": "@jjlmoya/utils-shared",
+    "version": "1.0.0",
+    "description": "Shared SEO primitives and UI components for jjlmoya ecosystem",
+    "author": "jjlmoya",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Game-Bob/jjlmoya-utils-shared.git"
+    },
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
+    "publishConfig": {
+        "access": "public"
+    },
+    "type": "module",
+    "exports": {
+        ".": "./src/index.ts",
+        "./theme.css": "./src/styles/theme.css",
+        "./seo/*": "./src/seo/*",
+        "./types": "./src/types/index.ts",
+        "./ui/*": "./src/ui/*",
+        "./styles/*": "./src/styles/*"
+    },
+    "files": [
+        "src"
+    ],
+    "scripts": {
+        "dev": "astro dev",
+        "start": "astro dev",
+        "check": "astro check",
+        "lint": "eslint src --ext .ts,.astro",
+        "lint:css": "stylelint \"src/**/*.{astro,css}\"",
+        "lint:all": "npm run check && npm run lint && npm run lint:css",
+        "prepublishOnly": "npm run lint:all"
+    },
+    "peerDependencies": {
+        "@iconify-json/mdi": "^1.0.0",
+        "astro": "^5.0.0",
+        "astro-icon": "^1.0.0"
+    },
+    "devDependencies": {
+        "@astrojs/check": "^0.9.2",
+        "@iconify-json/mdi": "^1.2.3",
+        "@typescript-eslint/eslint-plugin": "^8.58.0",
+        "@typescript-eslint/parser": "^8.58.0",
+        "astro": "^5.15.9",
+        "astro-eslint-parser": "^1.4.0",
+        "astro-icon": "^1.1.5",
+        "eslint": "^9.39.4",
+        "eslint-plugin-astro": "^1.6.0",
+        "eslint-plugin-no-comments": "^1.1.10",
+        "postcss-html": "^1.8.1",
+        "stylelint": "^17.6.0",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-declaration-strict-value": "^1.11.1",
+        "typescript": "^5.0.0",
+        "typescript-eslint": "^8.58.0"
+    }
+}

package/src/env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+    readonly SITE: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+export { default as CategorySchema } from './seo/CategorySchema.astro';
+export { default as SEOArticle } from './seo/SEOArticle.astro';
+export { default as SEOCard } from './seo/SEOCard.astro';
+export { default as SEOCode } from './seo/SEOCode.astro';
+export { default as SEOComparative } from './seo/SEOComparative.astro';
+export { default as SEODiagnostic } from './seo/SEODiagnostic.astro';
+export { default as SEOGlossary } from './seo/SEOGlossary.astro';
+export { default as SEOGrid } from './seo/SEOGrid.astro';
+export { default as SEOList } from './seo/SEOList.astro';
+export { default as SEOMessageTemplate } from './seo/SEOMessageTemplate.astro';
+export { default as SEOProsCons } from './seo/SEOProsCons.astro';
+export { default as SEORenderer } from './seo/SEORenderer.astro';
+export { default as SEOStats } from './seo/SEOStats.astro';
+export { default as SEOSummary } from './seo/SEOSummary.astro';
+export { default as SEOTable } from './seo/SEOTable.astro';
+export { default as SEOTip } from './seo/SEOTip.astro';
+export { default as SEOTitle } from './seo/SEOTitle.astro';
+
+export { default as Bibliography } from './ui/Bibliography.astro';
+export { default as FAQSection } from './ui/FAQSection.astro';
+export { default as UtilityHeader } from './ui/UtilityHeader.astro';
+export { default as UtilityStructuredData } from './ui/UtilityStructuredData.astro';
+
+export * from './types/index';

package/src/pages/_components/PreviewSection.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+    id: string;
+    label: string;
+}
+
+const { id, label } = Astro.props;
+---
+
+<div id={id} class="component-section">
+    <span class="section-label">{label}</span>
+    <slot />
+</div>

package/src/pages/_components/PreviewSidebar.astro

@@ -0,0 +1,52 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Section {
+    id: string;
+    name: string;
+}
+
+interface Props {
+    sections: Section[];
+}
+
+const { sections } = Astro.props;
+---
+
+<nav class="sidebar">
+    <div class="sidebar-header">
+        <h2>Componentes</h2>
+        <button id="themeToggle" class="theme-btn" aria-label="Cambiar tema">
+            <Icon name="mdi:theme-light-dark" class="theme-icon" />
+        </button>
+    </div>
+    <ul>
+        {sections.map((s: Section) => (
+            <li><a href={`#${s.id}`}>{s.name}</a></li>
+        ))}
+    </ul>
+</nav>
+
+<script is:inline>
+    const setupTheme = () => {
+        const btn = document.getElementById('themeToggle');
+        const body = document.body;
+        const savedTheme = localStorage.getItem('preview-theme') || 'theme-light';
+        
+        body.classList.add(savedTheme);
+        if (savedTheme === 'theme-light') body.classList.remove('theme-dark');
+        else body.classList.remove('theme-light');
+
+        btn?.addEventListener('click', () => {
+            if (body.classList.contains('theme-light')) {
+                body.classList.replace('theme-light', 'theme-dark');
+                localStorage.setItem('preview-theme', 'theme-dark');
+            } else {
+                body.classList.replace('theme-dark', 'theme-light');
+                localStorage.setItem('preview-theme', 'theme-light');
+            }
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', setupTheme);
+</script>

package/src/pages/_components/preview/GroupAdvanced.astro

@@ -0,0 +1,55 @@
+---
+import SEOCode from "../../../seo/SEOCode.astro";
+import SEOComparative from "../../../seo/SEOComparative.astro";
+import SEODiagnostic from "../../../seo/SEODiagnostic.astro";
+import SEOProsCons from "../../../seo/SEOProsCons.astro";
+import SEOGrid from "../../../seo/SEOGrid.astro";
+import SEOCard from "../../../seo/SEOCard.astro";
+import PreviewSection from "../PreviewSection.astro";
+---
+
+<PreviewSection id="code" label="SEO Code">
+    <SEOCode 
+        code={`import { SEOTip } from "@game-bob/utils-shared";`}
+        ariaLabel="Ejemplo de Importación"
+    />
+</PreviewSection>
+
+<PreviewSection id="comparative" label="SEO Comparative">
+    <SEOComparative 
+        items={[
+            { title: "Versión 1", description: "Básica y rudimentaria", points: ["Sin tipos", "Sin estilos"], highlight: false },
+            { title: "Versión 2", description: "Premium y robusta", points: ["TypeScript", "Design System"], highlight: true }
+        ]}
+    />
+</PreviewSection>
+
+<PreviewSection id="diagnostic" label="SEO Diagnostic">
+    <SEODiagnostic 
+        title="Estado del Repositorio" 
+        type="success"
+        icon="mdi:check-circle"
+    >
+        <p>Todos los linters han pasado correctamente. El código es seguro y sigue las guías de estilo.</p>
+    </SEODiagnostic>
+</PreviewSection>
+
+<PreviewSection id="proscons" label="SEO Pros & Cons">
+    <SEOProsCons 
+        items={[
+            { pro: "Fácil de usar", con: "Requiere Astro" },
+            { pro: "Sólidos principios", con: "Aprender el sistema" }
+        ]}
+    />
+</PreviewSection>
+
+<PreviewSection id="grid" label="SEO Grid">
+    <SEOGrid columns={2}>
+        <SEOCard title="Caja 1">
+            <p>Contenido de la primera caja del grid.</p>
+        </SEOCard>
+        <SEOCard title="Caja 2">
+            <p>Contenido de la segunda caja del grid.</p>
+        </SEOCard>
+    </SEOGrid>
+</PreviewSection>

package/src/pages/_components/preview/GroupBasic.astro

@@ -0,0 +1,49 @@
+---
+import UtilityHeader from "../../../ui/UtilityHeader.astro";
+import SEOList from "../../../seo/SEOList.astro";
+import SEOTip from "../../../seo/SEOTip.astro";
+import SEOCard from "../../../seo/SEOCard.astro";
+import SEOStats from "../../../seo/SEOStats.astro";
+import PreviewSection from "../PreviewSection.astro";
+---
+
+<PreviewSection id="header" label="Utility Header">
+    <UtilityHeader 
+        titleHighlight="Shared" 
+        titleBase="Library Components" 
+        description="Vista previa de todos los componentes disponibles en la librería."
+    />
+</PreviewSection>
+
+<PreviewSection id="list" label="SEO List">
+    <SEOList 
+        items={[
+            "Totalmente tipados con TypeScript",
+            "Accesibles y semánticos",
+            "Estilos modernos y consistentes",
+            "Fáciles de integrar en Astro"
+        ]}
+        icon="mdi:check"
+    />
+</PreviewSection>
+
+<PreviewSection id="tip" label="SEO Tip">
+    <SEOTip title="Consejo de Implementación">
+        <p>Usa estos componentes para mejorar el SEO y la legibilidad de tus utilitarios de forma rápida.</p>
+    </SEOTip>
+</PreviewSection>
+
+<PreviewSection id="card" label="SEO Card">
+    <SEOCard title="Componentes Optimizados" icon="mdi:rocket-launch">
+        <p>Nuestra librería está diseñada para ser ligera y eficiente en cualquier proyecto Astro.</p>
+    </SEOCard>
+</PreviewSection>
+
+<PreviewSection id="stats" label="SEO Stats">
+    <SEOStats 
+        stats={[
+            { label: "Velocidad", value: "99%", icon: "mdi:speedometer" },
+            { label: "Accesibilidad", value: "100/100", icon: "mdi:accessibility" }
+        ]}
+    />
+</PreviewSection>

package/src/pages/_components/preview/GroupContent.astro

@@ -0,0 +1,57 @@
+---
+import SEOMessageTemplate from "../../../seo/SEOMessageTemplate.astro";
+import SEOSummary from "../../../seo/SEOSummary.astro";
+import SEOTable from "../../../seo/SEOTable.astro";
+import SEOGlossary from "../../../seo/SEOGlossary.astro";
+import Bibliography from "../../../ui/Bibliography.astro";
+import PreviewSection from "../PreviewSection.astro";
+---
+
+<PreviewSection id="message" label="SEO Message Template">
+    <SEOMessageTemplate title="Mensaje Informativo">
+        Este es un ejemplo de mensaje que utiliza el template genérico.
+    </SEOMessageTemplate>
+</PreviewSection>
+
+<PreviewSection id="summary" label="SEO Summary">
+    <SEOSummary 
+        title="Puntos Clave"
+        items={[
+            "<strong>Consistencia:</strong> Visualmente unificado.",
+            "<strong>Mantenimiento:</strong> Componentes desacoplados."
+        ]}
+    />
+</PreviewSection>
+
+<PreviewSection id="table" label="SEO Table">
+    <SEOTable headers={["Componente", "Tipo", "Estado"]}>
+        <tr>
+            <td>SEOTable</td>
+            <td>Maquetación</td>
+            <td>Listo</td>
+        </tr>
+        <tr>
+            <td>SEOStats</td>
+            <td>Visualización</td>
+            <td>Listo</td>
+        </tr>
+    </SEOTable>
+</PreviewSection>
+
+<PreviewSection id="glossary" label="SEO Glossary">
+    <SEOGlossary 
+        items={[
+            { term: "Astro", definition: "Framework web moderno para construir sitios rápidos cargando menos JavaScript." },
+            { term: "SOLID", definition: "Cinco principios de diseño orientado a objetos destinados a hacer que los diseños de software sean más comprensibles, flexibles y fáciles de mantener." }
+        ]}
+    />
+</PreviewSection>
+
+<PreviewSection id="bibliography" label="Bibliography">
+    <Bibliography 
+        links={[
+            { name: "Astro Documentation", url: "https://docs.astro.build" },
+            { name: "GitHub Organization", url: "https://github.com/Game-Bob" }
+        ]}
+    />
+</PreviewSection>

package/src/pages/_components/preview/layout.css

@@ -0,0 +1,104 @@
+body {
+    font-family: Inter, system-ui, sans-serif;
+    background: var(--bg-page);
+    color: var(--text-base);
+    margin: 0;
+    display: flex;
+    transition: background 0.3s ease, color 0.3s ease;
+}
+
+.sidebar {
+    width: 260px;
+    height: 100vh;
+    background: var(--bg-surface);
+    border-right: 1px solid var(--border-base);
+    padding: 2rem 1.5rem;
+    position: fixed;
+    overflow-y: auto;
+}
+
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+}
+
+.sidebar h2 {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-dimmed);
+    margin: 0;
+}
+
+.theme-btn {
+    background: var(--bg-muted);
+    border: 1px solid var(--border-base);
+    color: var(--text-base);
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.theme-btn:hover {
+    background: var(--border-base);
+    transform: scale(1.05);
+}
+
+.theme-icon {
+    width: 18px;
+    height: 18px;
+}
+
+.sidebar ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar li {
+    margin-bottom: 0.5rem;
+}
+
+.sidebar a {
+    text-decoration: none;
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    font-weight: 500;
+    display: block;
+    padding: 0.5rem 0.75rem;
+    border-radius: 8px;
+    transition: all 0.2s;
+}
+
+.sidebar a:hover {
+    background: var(--bg-muted);
+    color: var(--text-base);
+}
+
+.main {
+    flex: 1;
+    margin-left: 260px;
+    padding: 4rem;
+}
+
+.component-section {
+    margin-bottom: 8rem;
+    scroll-margin-top: 4rem;
+}
+
+.section-label {
+    font-size: 0.7rem;
+    font-weight: 800;
+    color: var(--primary);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 1rem;
+    display: block;
+}

package/src/pages/index.astro

@@ -0,0 +1,42 @@
+---
+import PreviewSidebar from "./_components/PreviewSidebar.astro";
+import GroupBasic from "./_components/preview/GroupBasic.astro";
+import GroupAdvanced from "./_components/preview/GroupAdvanced.astro";
+import GroupContent from "./_components/preview/GroupContent.astro";
+import "./_components/preview/layout.css";
+import "../styles/theme.css";
+
+const sections = [
+    { id: "header", name: "Utility Header" },
+    { id: "list", name: "SEO List" },
+    { id: "tip", name: "SEO Tip" },
+    { id: "card", name: "SEO Card" },
+    { id: "stats", name: "SEO Stats" },
+    { id: "code", name: "SEO Code" },
+    { id: "comparative", name: "SEO Comparative" },
+    { id: "diagnostic", name: "SEO Diagnostic" },
+    { id: "proscons", name: "SEO Pros & Cons" },
+    { id: "grid", name: "SEO Grid" },
+    { id: "message", name: "SEO Message Template" },
+    { id: "summary", name: "SEO Summary" },
+    { id: "table", name: "SEO Table" },
+    { id: "glossary", name: "SEO Glossary" },
+    { id: "bibliography", name: "Bibliography" },
+];
+---
+
+<html lang="es">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Component Library Preview</title>
+    </head>
+    <body>
+        <PreviewSidebar sections={sections} />
+        <main class="main">
+            <GroupBasic />
+            <GroupAdvanced />
+            <GroupContent />
+        </main>
+    </body>
+</html>

package/src/seo/CategorySchema.astro

@@ -0,0 +1,37 @@
+---
+import type { SectionData } from "../types/index.ts";
+
+interface Props {
+    section: SectionData;
+    baseUrl?: string | undefined;
+    categoryPath?: string | undefined;
+}
+
+const {
+    section,
+    baseUrl = "https://www.jjlmoya.es",
+    categoryPath = "/utilidades/categorias/",
+} = Astro.props;
+
+const categorySchema = {
+    "@context": "https://schema.org",
+    "@type": "CollectionPage",
+    name: section.title,
+    url: `${baseUrl}${categoryPath}${section.slug}/`,
+    hasPart: section.utilities.map((u) => ({
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        name: u.title,
+        description: u.description,
+        url: `${baseUrl}${u.href}`,
+        applicationCategory: "UtilityApplication",
+        operatingSystem: "Any",
+    })),
+};
+---
+
+<script
+    is:inline
+    type="application/ld+json"
+    set:html={JSON.stringify(categorySchema)}
+/>

package/src/seo/SEOArticle.astro

@@ -0,0 +1,45 @@
+---
+interface Props {
+    class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<article class:list={["seo-article", className]}>
+    <slot />
+</article>
+
+<style>
+    .seo-article {
+        line-height: 1.8;
+        color: var(--text-muted);
+        font-size: 1.125rem;
+        max-width: 48rem;
+        margin: 0 auto;
+    }
+
+    .seo-article :global(p) {
+        margin-bottom: 1.5rem;
+    }
+
+    .seo-article :global(strong) {
+        color: var(--text-base);
+        font-weight: 700;
+    }
+
+    .seo-article :global(code:not(pre code)) {
+        background: var(--bg-muted);
+        color: var(--primary);
+        padding: 0.2rem 0.4rem;
+        border-radius: 0.375rem;
+        font-size: 0.875em;
+        font-weight: 600;
+    }
+
+    @media (max-width: 768px) {
+        .seo-article {
+            font-size: 1rem;
+        }
+    }
+</style>