@jjlmoya/utils-shared 1.0.0

package/src/ui/FAQSection.astro

@@ -0,0 +1,117 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface FAQItem {
+    question: string;
+    answer: string;
+}
+
+interface Props {
+    items: FAQItem[];
+    title?: string;
+    inLanguage?: string;
+}
+
+const { items = [], title = "", inLanguage = "es-ES" } = Astro.props;
+
+const faqSchema = {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    inLanguage: inLanguage,
+    mainEntity: items.map((item) => ({
+        "@type": "Question",
+        name: item.question,
+        acceptedAnswer: {
+            "@type": "Answer",
+            text: item.answer,
+        },
+    })),
+};
+---
+
+<script is:inline type="application/ld+json" set:html={JSON.stringify(faqSchema)} />
+
+<section class="faq-section">
+    <h2 class="faq-title">{title}</h2>
+    <div class="faq-list">
+        {
+            items.map((item: FAQItem) => (
+                <details class="faq-item group">
+                    <summary class="faq-question">
+                        <span>{item.question}</span>
+                        <Icon name="mdi:chevron-down" class="faq-icon" />
+                    </summary>
+                    <div class="faq-answer">{item.answer}</div>
+                </details>
+            ))
+        }
+    </div>
+</section>
+
+<style>
+    .faq-section {
+        max-width: 48rem;
+        margin: 4rem auto 3rem;
+    }
+
+    .faq-title {
+        font-size: 1.875rem;
+        font-weight: 700;
+        color: var(--text-base);
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+
+    .faq-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+    }
+
+    .faq-item {
+        background-color: var(--bg-surface);
+        border: 1px solid var(--border-base);
+        border-radius: 1rem;
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+
+    .faq-item:hover {
+        border-color: var(--accent);
+        box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.1);
+    }
+
+    .faq-question {
+        cursor: pointer;
+        padding: 1rem 1.5rem;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 600;
+        font-size: 1.125rem;
+        color: var(--text-base);
+    }
+
+    .faq-question::-webkit-details-marker {
+        display: none;
+    }
+
+    .faq-icon {
+        width: 1.25rem;
+        height: 1.25rem;
+        color: var(--text-dimmed);
+        transition: transform 0.3s ease;
+    }
+
+    .faq-item[open] .faq-icon {
+        transform: rotate(180deg);
+        color: var(--accent);
+    }
+
+    .faq-answer {
+        padding: 0 1.5rem 1.5rem;
+        color: var(--text-dimmed);
+        line-height: 1.6;
+    }
+</style>

package/src/ui/UtilityHeader.astro

@@ -0,0 +1,83 @@
+---
+interface Props {
+    titleHighlight: string;
+    titleBase: string;
+    description: string;
+    gradientFrom?: string;
+    gradientTo?: string;
+    reverse?: boolean;
+}
+
+const {
+    titleHighlight,
+    titleBase,
+    description,
+    gradientFrom = "#10b981",
+    gradientTo = "#0d9488",
+    reverse = false,
+} = Astro.props;
+---
+
+<div class="utility-header">
+    <h1 class="utility-header-title">
+        {reverse ? (
+            <>
+                <span class="utility-header-base">{titleBase}</span>
+                <span class="utility-header-highlight">{titleHighlight}</span>
+            </>
+        ) : (
+            <>
+                <span class="utility-header-highlight">{titleHighlight}</span>
+                <span class="utility-header-base">{titleBase}</span>
+            </>
+        )}
+    </h1>
+    <p class="utility-header-description">{description}</p>
+</div>
+
+<style define:vars={{ gradientFrom, gradientTo }}>
+    .utility-header {
+        text-align: center;
+        margin-bottom: 4rem;
+    }
+
+    .utility-header-title {
+        font-size: clamp(2.5rem, 7vw, 4.5rem);
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        line-height: 1.1;
+        margin-bottom: 1.5rem;
+        overflow-wrap: break-word;
+        hyphens: auto;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: baseline;
+        gap: 0.3em;
+    }
+
+    .utility-header-base {
+        color: var(--text-base);
+    }
+
+    .utility-header-highlight {
+        background: linear-gradient(to right, var(--gradientFrom), var(--gradientTo));
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .utility-header-description {
+        font-size: 1.25rem;
+        color: var(--text-muted);
+        max-width: 40rem;
+        margin: 0 auto;
+        font-weight: 300;
+        line-height: 1.7;
+    }
+
+    @media (max-width: 640px) {
+        .utility-header-description {
+            font-size: 1.1rem;
+        }
+    }
+</style>

package/src/ui/UtilityStructuredData.astro

@@ -0,0 +1,149 @@
+---
+interface HowToStep {
+    name: string;
+    text: string;
+    url?: string;
+    image?: string;
+}
+
+interface Props {
+    title: string;
+    description: string;
+    url: string;
+    baseUrl: string;
+    organizationName: string;
+    organizationLogo?: string;
+    category?: string;
+    howToSteps?: HowToStep[];
+    version?: string;
+    inLanguage?: string;
+    homeLabel?: string;
+    utilitiesLabel?: string;
+    utilitiesPath?: string;
+    priceCurrency?: string;
+}
+
+const {
+    title,
+    description,
+    url,
+    baseUrl,
+    organizationName,
+    organizationLogo,
+    category,
+    howToSteps,
+    version = "",
+    inLanguage = "",
+    homeLabel = "",
+    utilitiesLabel = "",
+    utilitiesPath = "",
+    priceCurrency = "",
+} = Astro.props;
+
+const fullUrl = `${baseUrl}${url}`;
+
+const authorPublisher = {
+    "@type": "Person",
+    name: "jjlmoya",
+    url: baseUrl,
+    sameAs: [
+        `https://github.com/jjlmoya/`,
+        `https://www.linkedin.com/in/jjlmoya/`,
+    ],
+};
+
+const organizationSchema = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: organizationName,
+    url: baseUrl,
+    logo: organizationLogo || `${baseUrl}/images/logo.webp`,
+    founder: authorPublisher,
+    publisher: authorPublisher,
+};
+
+const breadcrumbSchema = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+        {
+            "@type": "ListItem",
+            position: 1,
+            name: homeLabel,
+            item: baseUrl,
+        },
+        {
+            "@type": "ListItem",
+            position: 2,
+            name: utilitiesLabel,
+            item: `${baseUrl}${utilitiesPath}`,
+        },
+        ...(category
+            ? [
+                  {
+                      "@type": "ListItem",
+                      position: 3,
+                      name: category,
+                      item: fullUrl,
+                  },
+              ]
+            : []),
+    ],
+};
+
+const webAppSchema = {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    name: title,
+    description: description,
+    url: fullUrl,
+    applicationCategory: "UtilityApplication",
+    operatingSystem: "Any",
+    softwareVersion: version,
+    author: authorPublisher,
+    creator: authorPublisher,
+    publisher: organizationSchema,
+    offers: {
+        "@type": "Offer",
+        price: "0",
+        priceCurrency: priceCurrency,
+    },
+    browserRequirements: "Requires JavaScript. Requires HTML5.",
+    inLanguage: inLanguage,
+};
+
+const howToSchema = {
+    "@context": "https://schema.org",
+    "@type": "HowTo",
+    name: title,
+    description: description,
+    inLanguage: inLanguage,
+    url: fullUrl,
+    author: authorPublisher,
+    publisher: organizationSchema,
+    ...(howToSteps && {
+        step: howToSteps.map((step, index) => ({
+            "@type": "HowToStep",
+            position: index + 1,
+            name: step.name,
+            text: step.text,
+            ...(step.url && { url: step.url }),
+            ...(step.image && { image: step.image }),
+        })),
+    }),
+};
+
+const isCalculator =
+    title.toLowerCase().includes("calc") ||
+    title.toLowerCase().includes("simula");
+
+const mainSchema = isCalculator ? webAppSchema : howToSchema;
+
+const schemas = [breadcrumbSchema, mainSchema];
+---
+
+<script
+    is:inline
+    type="application/ld+json"
+    set:html={JSON.stringify(schemas)}
+/>