HB's Thoughts

A simple blog system built with Nuxt 4, focused on articles about Vue, Nuxt, TailwindCSS, TypeScript, and front-end development.

📖 About

HB's Thoughts is a personal blog featuring articles mostly about Vue, Nuxt, TailwindCSS, and TypeScript, but not limited to — more on the front-end and less on the back-end. The blog supports multiple languages (English and Bulgarian) and is optimized for performance and user experience.

✨ Features

• Modern Tech Stack: Built with Nuxt 4, Vue 3, and TypeScript
• Multilingual Support: Available in English and Bulgarian with i18n
• Content Management: Powered by Nuxt Content for markdown-based articles
• Modern UI: Styled with Nuxt UI and TailwindCSS
• Search Functionality: Full-text search with Fuse.js
• Tag System: Articles organized by tags and competencies
• SEO Optimized: Server-side rendering with optimized meta tags
• Structured Data: JSON-LD structured data for blog posts, listings, and breadcrumbs
• Cloud Deployment: Deployed on Cloudflare Workers
• Responsive Design: Mobile-first responsive layout

🛠 Tech Stack

• Framework: Nuxt 4
• Frontend: Vue 3 with TypeScript
• Styling: TailwindCSS + Nuxt UI
• Content: Nuxt Content for markdown articles
• Internationalization: Nuxt i18n
• Search: Fuse.js for fuzzy search
• Database: Better SQLite3
• Deployment: Cloudflare Workers
• Build Tool: Vite

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Wrangler CLI (for Cloudflare deployment)

Installation

1. Clone the repository:

git clone https://github.com/hristobotev/hbsthoughts.git
cd hbsthoughts

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The site will be available at http://localhost:7410

📝 Available Scripts

• npm run dev - Start development server on port 7410
• npm run build - Build the application for production
• npm run generate - Generate static files
• npm run preview - Build and preview with Wrangler
• npm run deploy - Build and deploy to Cloudflare Workers
• npm run cf-typegen - Generate Cloudflare types

📁 Project Structure

├── app/                    # Nuxt app directory
│   ├── components/         # Vue components
│   ├── composables/        # Vue composables (JSON-LD, utilities)
│   ├── layouts/           # Layout components
│   ├── pages/             # Page components and routing
│   └── assets/            # Static assets
├── content/               # Markdown content
│   ├── bg/                # Bulgarian articles
│   ├── en/                # English articles
│   ├── seo/               # SEO configurations
├── i18n/                  # Internationalization
├── public/                # Public assets
└── server/                # Server-side code

🌍 Content Management

Articles are written in Markdown and stored in the content/ directory:

• /content/en/articles/ - English articles
• /content/bg/articles/ - Bulgarian articles
• /content/en/static/ - English static pages (like help pages)
• /content/bg/static/ - Bulgarian static pages (like help pages)

Article Format

Each article follows this frontmatter structure:

---
title: "Article Title"
date: "2024-02-06T12:01:53.293Z"
draft: false
tags: ["vue", "nuxt"]
slug: "article-slug"
navigation: false
competence: "frontend"
---

Article content here...

🔍 SEO & Structured Data

The blog implements comprehensive SEO optimization with JSON-LD structured data:

JSON-LD Implementation

The application includes three types of structured data using Schema.org vocabulary:

1. Blog Listing (useJsonLdBlogListing):
   • Generates Blog schema for article listing pages
   • Includes all articles with their metadata
   • Automatically updates when articles are loaded
2. Blog Posts (useJsonLdBlogPost):
   • Generates BlogPosting schema for individual articles
   • Includes author, publisher, dates, and article metadata
   • Supports optional featured images
3. Breadcrumbs (useJsonLdBreadcrumbs):
   • Generates BreadcrumbList schema for navigation
   • Works with Nuxt UI breadcrumb components
   • Handles multilingual routes and dynamic content

Usage

The JSON-LD composables are automatically imported and can be used in any page:

<script setup>
// For article listings
useJsonLdBlogListing(title, description, articles, locale);

// For individual blog posts
useJsonLdBlogPost(article, locale);

// For breadcrumb navigation
useJsonLdBreadcrumbs(breadcrumbItems);
</script>

All structured data is reactive and updates automatically when content changes.

Site Maps

The blog generates a sitemap for SEO (Search Engine Optimization) purposes, which includes all articles and static pages. The sitemap is automatically updated when new content is added, thanks to the Nuxt Sitemap module.

🚀 Deployment

The application is configured for deployment on Cloudflare Workers:

1. Configure Wrangler:

npm run cf-typegen

2. Deploy:

npm run deploy

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Built with Nuxt 4
• UI components from Nuxt UI
• Content from Nuxt Content
• Multilingual support with Nuxt i18n
• Icons from Heroicons
• Fonts from Google Fonts
• Back-end Cloudflare Workers