Framework Astro: Framework Moderno para Desarrollo Web Escalable

 Un Sistema Revolucionario para Crear Sitios Web Rápidos y Personalizables

He creado Frameword Astro es un framework de código abierto construido sobre Astro que revoluciona la forma de desarrollar sitios web. Diseñado para crear experiencias web rápidas, escalables y completamente personalizables, este proyecto combina configuración centralizada, componentes reutilizables y un sistema de generación automática de páginas que elimina código repetitivo.

¿Qué hace único a Frameword Astro?

El Poder de la Configuración Centralizada

A diferencia de otros frameworks donde la configuración está dispersa en múltiples archivos, Frameword Astro centraliza toda la lógica de tu sitio en archivos TypeScript claramente organizados:

config/
├── index.ts              # Punto de entrada central
├── site.config.ts        # Configuración general del sitio
├── themes.config.ts      # Temas y paletas de colores
└── content.config.ts     # Tipos de contenido y colecciones

Esta arquitectura significa que puedes cambiar el nombre de tu sitio, actualizar la navegación, modificar colores del tema o agregar nuevos tipos de contenido sin tocar una sola línea de código en componentes o páginas. Todo se actualiza automáticamente.

Generación Automática de Páginas: La Característica Revolucionaria

La joya de la corona de Frameword Astro es su sistema de generación automática de páginas. Tradicionalmente, cuando definías un nuevo tipo de contenido (como "proyectos" o "servicios"), tenías que:

❌ Crear manualmente src/pages/proyectos/index.astro
❌ Crear manualmente src/pages/proyectos/[slug].astro
❌ Escribir código repetitivo para listar y mostrar contenido

Con Frameword Astro, esto se acabó.

Ahora simplemente defines tu colección en config/content.config.ts:

const proyectosCollection = createCollection('proyectos', {
  label: 'Proyectos',
  route: '/proyectos',
  schema: commonSchemas.project,
  pagination: { enabled: true, perPage: 12 }
});

Y el framework genera automáticamente:

• 📄 /proyectos/ - Lista todos los proyectos
• 📄 /proyectos/proyecto-1 - Página detalle del proyecto 1
• 📄 /proyectos/proyecto-2 - Página detalle del proyecto 2
• Y así sucesivamente...

Cero código repetitivo. Escalabilidad infinita. Mantenimiento cero.

Características Principales

🚀 Rendimiento Extremo

Basado en Astro, el framework envía cero JavaScript por defecto, cargando solo lo necesario. Generación estática para todas las rutas garantiza tiempos de carga ultrarrápidos.

🎨 Sistema de Temas Completo

Configura paletas de colores completas con escalas del 50 al 900. Las variables CSS se generan automáticamente y están disponibles tanto en CSS puro como en Tailwind:

/* Usar en CSS */
.btn-primary {
  background-color: var(--color-primary-500);
}

// Integración automática con Tailwind
colors: {
  primary: theme.colors.primary,
  secondary: theme.colors.secondary,
}

📝 Tipos de Contenido Extensibles

Soporte integrado para múltiples colecciones:

• Blog Posts: Artículos con categorías, tags y paginación
• Portfolio/Proyectos: Con demos, repositorios y tecnologías
• Servicios/Productos: Precios, características y disponibilidad
• Testimonios: Opiniones con ratings y metadata de empresa

🛠️ Componentes Inteligentes y Modernos

SEO Mejorado: Configuración automática con Open Graph, Twitter Cards, Structured Data (JSON-LD), URLs canónicas y keywords inteligentes que combinan configuración global con tags y categorías.

SocialShare: Compartir en Twitter, Facebook, LinkedIn y WhatsApp con URLs codificadas automáticamente.

Newsletter: Formulario de suscripción con validación, estados de loading y animaciones suaves.

Footer Dinámico: Incluye icono de administración con enlace a /admin/nuevo-post, enlaces a redes sociales y copyright automático.

🌙 Dark Mode Nativo

Soporte completo para temas claros y oscuros con detección automática de preferencias del sistema.

📱 Diseño Responsive Mobile-First

Todos los componentes están optimizados para cualquier dispositivo.

Comenzando con Frameword Astro

Instalación Rápida

La forma más rápida de empezar es usando el CLI oficial:

# Crear un nuevo proyecto
npx create-frameword-app mi-sitio

# O clonar directamente
git clone https://github.com/ximosa/frameword-astro.git
cd frameword-astro
npm install

Comandos de Desarrollo

# Desarrollo local
npm run dev

# Build de producción
npm run build

# Preview del build
npm run preview

Configuración Básica

Personalizar tu Sitio

Edita config/site.config.ts para configurar los aspectos fundamentales:

export const siteConfig: SiteConfig = {
  name: "Mi Sitio Web",
  description: "Descripción de mi sitio",
  url: "https://misitio.com",

  navigation: {
    main: [
      { label: "Inicio", href: "/" },
      { label: "Blog", href: "/blog" },
      { label: "Portfolio", href: "/portfolio" },
      { label: "Contacto", href: "/contacto" }
    ]
  },

  theme: {
    default: "system", // o "light", "dark"
    colors: {
      primary: "#3B82F6",
      secondary: "#6B7280",
    }
  },

  seo: {
    title: "Mi Sitio Web",
    description: "Descripción SEO optimizada",
    keywords: ["desarrollo", "web", "astro"],
    author: "Tu Nombre"
  }
}

Los componentes como Header, Footer y SEO leen esta configuración automáticamente. No necesitas actualizar nada más.

Crear Nuevo Tipo de Contenido

1. Define la colección en config/content.config.ts:

const serviciosCollection = createCollection('servicios', {
  label: 'Servicios',
  route: '/servicios',
  schema: commonSchemas.service,
  pagination: { enabled: true, perPage: 9 }
});

2. Crea el directorio en src/content/servicios/

3. Añade contenido en servicio-1.mdx:

---
title: "Desarrollo Web Personalizado"
description: "Creamos sitios web únicos para tu negocio"
price: "Desde $1,500"
featured: true
---

Contenido detallado del servicio...

4. ¡Listo! Las páginas se generan automáticamente en /servicios/

Casos de Uso Ideales

Portfolios Profesionales

Muestra tu trabajo con diseños elegantes, carga ultrarrápida y proyectos organizados automáticamente.

Sitios Corporativos

Páginas empresariales con múltiples secciones (servicios, equipo, testimonios) completamente configurables.

Blogs y Publicaciones

Sistema completo de gestión de contenido con categorías, tags, paginación y SEO automático.

Landing Pages de Alta Conversión

Páginas de destino con componentes optimizados para conversión (Newsletter, SocialShare, CTAs).

Documentación Técnica

Sitios de documentación navegables con búsqueda, categorización y renderizado rápido.

Panel de Administración: Crea Contenido Sin Fricciones

Accede al panel desde cualquier página usando el icono de engranaje en el footer, o directamente en /admin/nuevo-post:

Características del Admin :

🎨 Editor Visual Intuitivo
├── 📝 Campos de formulario para metadata
│   ├── Título del post
│   ├── Descripción y excerpt
│   ├── Categorías y tags
│   ├── Imagen destacada
│   └── Configuración de publicación
├── ✍️ Editor de contenido MDX
│   ├── Sintaxis Markdown
│   ├── Soporte para componentes
│   └── Preview en tiempo real
└── 💾 Exportación automática
    ├── Genera archivo .mdx válido
    ├── Frontmatter correctamente formateado
    └── Listo para subir al repositorio

Workflow típico:

1. 🔗 Accede: Click en el icono de engranaje del footer o navega a /admin/nuevo-post
2. ✍️ Crea: Escribe tu contenido usando el editor visual
3. 📋 Configura: Completa el frontmatter (categorías, tags, fecha, etc.)
4. 💾 Descarga: Click en "Descargar MDX" para obtener el archivo
5. 🚀 Publica: Sube el archivo a src/content/blog/ en tu repositorio
6. ✅ Listo: El contenido aparece automáticamente en tu sitio

Este sistema es perfecto para equipos sin conocimientos técnicos avanzados o para agilizar tu propio workflow de creación de contenido.

Componentes en Acción

Usar Newsletter en tu Contenido

---
import Newsletter from '../components/Newsletter.astro';
---

<Newsletter
  title="Únete a nuestra comunidad"
  description="Recibe tips semanales sobre desarrollo web"
  placeholder="tu@email.com"
  buttonText="¡Suscribirme!"
/>

Compartir en Redes Sociales

---
import SocialShare from '../components/SocialShare.astro';
---

<SocialShare
  url={Astro.url.href}
  title="Título del artículo"
  description="Descripción para compartir"
/>

SEO Automático Inteligente

Para páginas personalizadas:

<SEO
  title="Acerca de Nosotros"
  description="Conoce nuestro equipo"
  image="/images/equipo.jpg"
  type="website"
/>

Para posts del blog, el SEO se configura automáticamente usando el frontmatter:

---
title: "Mi Artículo"
description: "Descripción del artículo"
date: "2024-01-15"
author: "Tu Nombre"
category: "Desarrollo"
tags: ["astro", "web", "framework"]
---

El componente genera automáticamente:

• ✅ Open Graph completo con tipo "article"
• ✅ Twitter Cards con imagen y metadata
• ✅ Structured Data (JSON-LD) para SEO
• ✅ Keywords combinadas (globales + tags)
• ✅ URLs canónicas

CLI de Setup: Crear Proyectos en Segundos

El CLI oficial de Frameword Astro permite crear nuevos proyectos completamente configurados:

npx create-frameword-app mi-proyecto

¿Qué incluye el CLI?

Al ejecutar el comando, obtienes automáticamente:

✅ Estructura completa de directorios
✅ Configuración inicial personalizada
✅ Componentes básicos (Header, Footer, SEO, Layout)
✅ Páginas de inicio y blog funcionales
✅ Post de ejemplo para empezar
✅ Dependencias instaladas automáticamente
✅ Tailwind configurado y listo

Roadmap del CLI

Próximas características planificadas:

• 🔄 Generadores avanzados de componentes y páginas
• 🎨 Administrador visual de temas
• 📝 Validación automática de configuración
• 🚀 Deploy integrado para Vercel, Netlify, etc.
• 📊 Analytics y monitoreo integrado

Estructura del Proyecto

frameword-astro/
├── config/                    # Configuración centralizada
│   ├── index.ts              # Punto de entrada
│   ├── site.config.ts        # Config del sitio
│   ├── themes.config.ts      # Temas y colores
│   └── content.config.ts     # Colecciones de contenido
├── src/
│   ├── components/           # Componentes reutilizables
│   │   ├── Header.astro      # Navegación dinámica
│   │   ├── Footer.astro      # Footer con admin
│   │   ├── SEO.astro         # SEO inteligente
│   │   ├── SocialShare.astro # Compartir en redes
│   │   └── Newsletter.astro  # Captura de emails
│   ├── layouts/              # Layouts de página
│   │   └── Layout.astro      # Layout base
│   ├── pages/                # Páginas del sitio
│   │   ├── [collection]/     # Rutas dinámicas
│   │   │   ├── index.astro   # Lista de contenido
│   │   │   └── [slug].astro  # Detalle individual
│   │   └── index.astro       # Página principal
│   ├── content/              # Contenido estructurado
│   │   ├── blog/             # Posts del blog
│   │   ├── projects/         # Proyectos/portfolio
│   │   └── services/         # Servicios
│   └── styles/               # Estilos globales
│       └── theme.css         # Variables CSS
└── tailwind.config.mjs       # Config de Tailwind

Personalización Avanzada

Crear un Tema Personalizado

Define tu tema en config/themes.config.ts:

export const miTema: ThemeConfig = {
  name: "mi-tema-corporativo",
  colors: {
    primary: {
      50: '#f0f9ff',
      500: '#0ea5e9',
      900: '#0c4a6e'
    },
    secondary: { /* ... */ },
    gray: { /* ... */ }
  }
}

Actualiza site.config.ts:

theme: {
  default: "mi-tema-corporativo"
}

Las variables CSS y Tailwind se regeneran automáticamente.

Modificar Páginas Generadas Automáticamente

Personaliza src/pages/[collection]/index.astro para añadir:

• 🎨 Estilos específicos por tipo de contenido
• 🔍 Filtros y búsqueda avanzada
• 📄 Paginación personalizada
• 🏷️ Filtros por categorías y tags
• 📊 Ordenamiento dinámico

Únete a la Comunidad

¿Por Qué Contribuir?

Frameword Astro es un proyecto vivo que mejora con cada contribución. Hay múltiples formas de participar:

• 🐛 Reporta Bugs: ¿Encontraste algo que no funciona? Abre un issue
• 💡 Propón Features: ¿Tienes ideas para mejorar el framework? La comunidad quiere escucharlas
• 🎨 Contribuye Componentes: Crea componentes reutilizables que otros puedan aprovechar
• 📖 Mejora la Documentación: Escribe guías, tutoriales o traduce contenido
• ⭐ Dale una Estrella: Si te gusta el proyecto, deja una estrella en GitHub
• 🔄 Comparte tu Experiencia: Escribe sobre cómo usas Frameword en tu blog

Cómo Contribuir

1. Fork el Repositorio: Haz tu copia en GitHub
2. Crea una Rama: Trabaja en tus cambios en una rama separada
3. Implementa: Desarrolla tu feature, corrección o mejora
4. Pull Request: Envía tus cambios para revisión

Consulta la documentación completa del framework para detalles técnicos.

Recursos y Enlaces

• 📦 Repositorio: github.com/ximosa/frameword-astro
• 📚 Documentación Completa: README del Framework
• 🐛 Issues y Sugerencias: Reportar o Proponer
• 👤 Autor: Joaquin Saez (@ximosa)
• 🌐 Astro Oficial: astro.build
• 🚀 CLI: npx create-frameword-app

El Futuro del Framework

Roadmap de Desarrollo

Características planificadas para próximas versiones:

• Ampliación de componentes: Gallery, Carousel, Modals, Forms avanzados
• Integraciones: Servicios populares (Analytics, CMS headless, Email)
• Temas predefinidos: Templates para diferentes industrias (e-commerce, corporate, blog)
• Herramientas CLI avanzadas: Generadores, validadores, deploys automáticos
• Ejemplos completos: Proyectos de referencia para diferentes casos de uso
• Modo multilenguaje: Soporte i18n integrado
• Panel de administración: CMS visual para gestión de contenido

Por Qué Elegir Frameword Astro

Velocidad de Desarrollo Sin Precedentes

Configura una vez, genera infinitas veces. El sistema de rutas dinámicas y configuración centralizada significa que puedes lanzar nuevas secciones de contenido en minutos, no horas.

Flexibilidad Total

Aunque proporciona una estructura robusta, puedes personalizar cada aspecto. Desde los colores del tema hasta la estructura de las páginas, todo es configurable sin tocar código base del framework.

SEO y Rendimiento Nativo

No necesitas plugins adicionales. El SEO inteligente, la generación estática y las optimizaciones de Astro están integradas desde el inicio.

Comunidad en Crecimiento

Únete a desarrolladores que están construyendo sitios más rápidos y mantenibles con Frameword Astro.

Palabras Finales

Frameword Astro no es solo otro framework de Astro. Es una filosofía de desarrollo que prioriza la configuración sobre el código, la automatización sobre la repetición, y la experiencia del desarrollador sobre todo lo demás.

Si estás cansado de escribir el mismo código de páginas de blog una y otra vez, si quieres un sistema que escale sin esfuerzo, o simplemente buscas crear sitios web excepcionales con menos fricción, Frameword Astro es para ti.

¿Listo para cambiar la forma en que construyes sitios web?

npx create-frameword-app mi-proyecto
cd mi-proyecto
npm run dev

Y si el proyecto te resulta útil, considera contribuir. Cada línea de código, cada sugerencia y cada estrella hace de Frameword Astro una herramienta mejor para toda la comunidad.

¡Construyamos juntos el futuro del desarrollo web! 🚀

⭐ Estrella en GitHub • 🐛 Reportar Issue • 📚 Documentación • 🚀 Empezar Ahora

Licencia

Este proyecto está bajo la Licencia MIT - libre para usar en proyectos personales y comerciales.