@jjlmoya/utils-shared

Library of common components and utilities for jjlmoya projects, built with Astro and TypeScript.

Installation

npm install @jjlmoya/utils-shared

Setup

Ensure you have astro-icon configured in your astro.config.mjs:

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

---
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:

npm run dev

Then visit http://localhost:51000/ to see the showroom.