CódigoNovel es una aplicación web de tipo SPA (Single Page Application) diseñada para funcionar como un renderizador del contenido de Notion, utilizándolo como un CMS Headless. Su objetivo principal es renderizar mis apuntes relacionados con programación y tecnología, otorgando un acceso a dicho contenido de Notion pero con una interfaz web hecha a medida.

Stack tecnológico

• Frontend
  • TypeScript: Lenguaje principal del proyecto
  • Vue 3: Framework de interfaz de usuario
  • Vite: Herramienta de construcción rápida
  • Pinia: Gestión de estado para el manejo global de datos
• UI
  • Tailwind 3: Framework de estilos
  • highlight.js: Librería para resaltar sintaxis de código
  • LottieFiles: Soporte para animaciones Lottie
  • Font Awesome: Iconos para la interfaz de usuario
• Obtención de datos
  • Notion API: API para obtener contenido desde Notion
  • Axios: Cliente HTTP para realizar solicitudes a APIs

Funcionalidades

• Renderizado dinámico desde Notion: Convierte bloques de Notion (párrafos, encabezados, código) en componentes web interactivos.
• Facilidad de edición: El contenido se gestiona completamente en Notion, sin necesidad de paneles de administración complejos.
• Navegación jerárquica: Sistema de navegación basado en sesiones y páginas, con un árbol de contenido que se carga dinámicamente.
• Búsqueda integrada: Permite a los usuarios buscar contenido dentro de los apuntes.
• Temas: Soporte para temas claros y oscuros y sus variantes de colores, en total 14 temas, ajustándose a las preferencias del usuario.
• Sistema de etiquetas (tags): Filtrado de contenidos mediante etiquetas definidas en la base de datos de Notion.
• Índice de Contenidos: Generación automática de una tabla de contenidos basado en los encabezados, para facilitar la navegación en artículos largos.
• Breadcrumbs: Migas de pan para facilitar la navegación del usuario dentro de la jerarquía.

Valor y aplicación

• Blog personal de apuntes: CódigoNovel sirve como un blog personal donde puedo compartir mis conocimientos en desarrollo de software.
• Documentación de software: Publicar guías donde se requiera mostrar código con resaltado de sintaxis.