libreria-astro-lefebvre

Instrucciones:

• La libreria en npm está en: https://www.npmjs.com/package/libreria-astro-lefebvre
• Para instalar:

npm i libreria-astro-lefebvre

🖼️ Imágenes de Limbo

La librería incluye utilidades para trabajar con imágenes de Limbo de forma sencilla.

Opción 1: Componente LimboImage (Recomendado para maquetadores)

El componente <LimboImage> extrae automáticamente la URL del JSON de Limbo:

---
import LimboImage from 'libreria-astro-lefebvre/components/LimboImage.astro';

const { imagen } = Astro.props; // Puede ser URL directa o JSON de Limbo
---

<!-- Uso básico -->
<LimboImage src={imagen} alt="Descripción de la imagen" />

<!-- Con estilos -->
<LimboImage 
  src={imagen} 
  alt="Hero" 
  class="w-full h-auto rounded-lg"
/>

<!-- Preferir imagen original en lugar del crop -->
<LimboImage src={imagen} prefer="original" alt="Original" />

<!-- Con fallback si no hay imagen -->
<LimboImage src={imagen} fallback="/default.jpg" alt="Con fallback" />

Opción 2: Función extractImageUrl

Para casos donde necesitas más control:

---
import { extractImageUrl } from 'libreria-astro-lefebvre/lib/functions';

const { imagen } = Astro.props;

// Extraer URL (preferir crop por defecto)
const srcUrl = extractImageUrl(imagen);

// Preferir imagen original
const originalUrl = extractImageUrl(imagen, { prefer: 'original' });
---

<img src={srcUrl} alt="Mi imagen" />

Funciones disponibles

import { 
  extractImageUrl,    // Extrae URL de JSON Limbo
  parseImageData,     // Obtiene datos completos (original + crops)
  resolveUrl,         // Convierte /files/... a URL absoluta
  isValidImageUrl,    // Verifica si URL es válida (no blob)
  LIMBO_BASE_URL      // { DEV: '...', PROD: '...' }
} from 'libreria-astro-lefebvre/lib/functions';

Instalación y desarrollo

Hacer un link en librería local: npm link

Usar librería local: npm link nombre-librería

Dejar de usar librería local: npm unlink --no-save nombre-librería

Login en npm: npm login --auth-type=legacy

Publicar en npm: npm publish --access public

Cuenta nodejs: dretamal P...a

Hay que hacer npm install y reiniciar server

Correr aplicación node: npm run dev

Compilar: npm run build

Para importar en proyecto astro y usar componentes:

import { Button, Button2, Button3} from 'libreria-astro-lefebvre';

Para listar componentes en Vue:

import { listComponents} from 'libreria-astro-lefebvre/list';