CodigoNovel is a Single Page Application (SPA) designed to render content from Notion, using Notion as a headless CMS. Its main purpose is to render my programming and technology notes, providing access to Notion content through a custom web interface.

Tech stack

• Frontend
  • TypeScript: Main language of the project
  • Vue 3: UI framework
  • Vite: Fast build tool
  • Pinia: State management for global data handling
• UI
  • Tailwind 3: Styling framework
  • highlight.js: Library for code syntax highlighting
  • LottieFiles: Lottie animation support
  • Font Awesome: Icons for the UI
• Data fetching
  • Notion API: API to fetch content from Notion
  • Axios: HTTP client for API requests

Features

• Dynamic rendering from Notion: Converts Notion blocks (paragraphs, headings, code) into interactive web components.
• Easy editing: Content is fully managed in Notion, no complex admin panels required.
• Hierarchical navigation: Navigation system based on sessions and pages, with a dynamically loaded content tree.
• Integrated search: Allows users to search through the content of notes.
• Themes: Supports light and dark modes plus color variants — 14 themes in total — adapting to user preferences.
• Tag system: Filter content using tags defined in the Notion database.
• Table of contents: Auto-generates a table of contents from headings for easier navigation in long articles.
• Breadcrumbs: Breadcrumb navigation to help users move within the content hierarchy.

Value and application

• Personal notes blog: CodigoNovel serves as a personal blog to share software development knowledge.
• Software documentation: Publish guides that require code examples with syntax highlighting.