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';

Bitácora de cambios

30/03/2026

Soporte de items en campos de tipo list en los carbins

Se ha añadido la propiedad items a la definición de campos en la interfaz ComponentMetadata (src/interfaces/types.ts). Esto permite al pagebuilder conocer la estructura interna de los arrays en los componentes.

Estructura para items simples (strings):

{
  name: 'leftItems',
  type: 'list',
  label: 'Elementos de la columna',
  items: {
    type: 'text'
  }
}

Estructura para items compuestos (objetos con varios campos):

{
  name: 'leftItems',
  type: 'list',
  label: 'Elementos de la columna',
  items: {
    type: 'object',
    fields: [
      { name: 'label', type: 'text', label: 'Texto' },
      { name: 'tipo', type: 'select', label: 'Tipo', options: ['h1', 'h2'], options_labels: ['H1', 'H2'] },
      { name: 'descripcion', type: 'textArea', label: 'Descripción' },
      { name: 'activo', type: 'boolean', label: 'Activo' }
    ]
  }
}

Tipos soportados en los fields de un item object:

| Tipo | Descripción | Propiedades adicionales | |------|-------------|------------------------| | text | Campo de texto simple | — | | textArea | Área de texto multilínea | — | | select | Lista desplegable | options (valores), options_labels (etiquetas) | | boolean | Checkbox verdadero/falso | — |

Aplicado por primera vez en el carbin Tabla_2025_Fuenlabrada.ts.