SiteFooter · @codigosinsiesta/theme

Demo

Los iconos (/icons/github.svg, linkedin.svg, envelope.svg) los carga el browser desde la ruta absoluta — en este Storybook se sirven desde /theme/icons/ via Astro. En tu sitio, copia los SVG a public/icons/ o configura el path como prefieras.

Uso

app.svelte

<script>
  import { SiteFooter } from '@codigosinsiesta/theme/layout';
  const links = [
    { href: 'https://github.com/TellMeAlex',   label: 'GitHub',   icon: 'github' },
    { href: 'https://linkedin.com/in/...',     label: 'LinkedIn', icon: 'linkedin' },
    { href: 'mailto:alex@tellmealex.dev',      label: 'Email',    icon: 'envelope' }
  ];
</script>

<SiteFooter
  copyright="© 2026 Alejandro de la Fuente"
  tagline="Hecho con ♥ · parte de Código Sin Siesta"
  {links}
/>

Iconos

Cada link.icon es el basename de un asset que el consumer sirve desde /icons/{icon}.svg. El componente NO inlina los SVG — usa un <img> con ruta absoluta. Si el archivo no existe, el browser oculta el icono y queda solo el label.

Iconos disponibles en v0.9.0 (13 Heroicons originales de v0.6.0 + 3 sociales nuevos):

Nombre	Tipo	Uso típico
`github`	Social	Links a repos/perfil GitHub.
`linkedin`	Social	Perfil profesional.
`envelope`	Social	Links `mailto:`.
+ 13 Heroicons outline de v0.6.0: bars-3, book-open, bookmark, check-circle, chevron-left, chevron-right, cpu-chip, light-bulb, magnifying-glass, puzzle-piece, sparkles, wrench-screwdriver, x-mark

En Astro, copia los SVG a public/icons/ (se sirven en /icons/*.svg automáticamente). En Vite puro, usa publicDir equivalente.

API

Prop	Tipo	Default	Descripción
`copyright`	`string`	`''`	Texto de copyright. Si vacío, el bloque no se renderiza.
`tagline`	`string`	`''`	Lema centrado. Si vacío, el bloque no se renderiza.
`links`	`FooterLink[]`	`[]`	Lista de links. Si vacía, el nav no se renderiza.

FooterLink:

Field	Tipo	Descripción
`href`	`string`	URL del link. Si empieza con `http(s):`, auto-aplica `target="_blank"` + `rel="noopener noreferrer"`.
`label`	`string`	Texto visible.
`icon`	`string` (opcional)	Basename del SVG en `/icons/{icon}.svg`. Si no existe, se renderiza solo el label.

Casos de uso

Portfolio CsS: copyright + GitHub + LinkedIn + email + tagline "Hecho con ♥".
Landings de talleres: copyright + link al repo del workshop + recursos.
Sitios CsS futuros: footer consistente de marca.