HB's Thoughts

🌍 Choose Language / Изберете Език

🇬🇧 English (README_EN.md)

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

🌐 Live Site

Visit the blog at: thoughts.bizarre.how

📖 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

Clone the repository:

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

Install dependencies:

npm install

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:

Blog Listing (useJsonLdBlogListing):
- Generates Blog schema for article listing pages
- Includes all articles with their metadata
- Automatically updates when articles are loaded
Blog Posts (useJsonLdBlogPost):
- Generates BlogPosting schema for individual articles
- Includes author, publisher, dates, and article metadata
- Supports optional featured images
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:

Configure Wrangler:

npm run cf-typegen

Deploy:

npm run deploy

🤝 Contributing

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

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

👤 Author

howbizarre

GitHub: @howbizarre
Website: thoughts.bizarre.how

🙏 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

🇧🇬 Български (README_BG.md)

Малка блог система построен с Nuxt 4, фокусиран върху статии за Vue, Nuxt, TailwindCSS, TypeScript и фронт-енд разработка.

🌐 Живо Сайт

Посетете блога на: thoughts.bizarre.how

📖 За Проекта

HB's Thoughts е личен блог със статии главно за Vue, Nuxt, TailwindCSS и TypeScript, но не само - повече фронт-енд и по-малко бек-енд. Блогът поддържа множество езици (английски и български) и е оптимизиран за производителност и потребителско изживяване.

✨ Функционалности

Модерен Технологичен Стек: Построен с Nuxt 4, Vue 3 и TypeScript
Многоезична Поддръжка: Достъпен на английски и български с i18n
Управление на Съдържание: Задвижван от Nuxt Content за статии в markdown формат
Модерен UI: Стилизиран с Nuxt UI и TailwindCSS
Функционалност за Търсене: Пълнотекстово търсене с Fuse.js
Система за Тагове: Статиите са организирани по тагове и компетенции
SEO Оптимизация: Рендериране от страна на сървъра с оптимизирани мета тагове
Структурирани Данни: JSON-LD структурирани данни за блог постове, листинги и навигация
Облачна Инсталация: Инсталиран на Cloudflare Workers
Адаптивен Дизайн: Mobile-first адаптивен лейаут

🛠 Технологичен Стек

Фреймуърк: Nuxt 4
Фронт-енд: Vue 3 с TypeScript
Стилизиране: TailwindCSS + Nuxt UI
Съдържание: Nuxt Content за markdown статии
Интернационализация: Nuxt i18n
Търсене: Fuse.js за размито търсене
База данни: Better SQLite3
Инсталация: Cloudflare Workers
Build Tool: Vite

🚀 Започване

Изисквания

Node.js (v18 або по-нова версия)
npm или yarn
Wrangler CLI (за Cloudflare инсталация)

Инсталация

Клонирайте хранилището:

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

Инсталирайте зависимостите:

npm install

Стартирайте development сървъра:

npm run dev

Сайтът ще бъде достъпен на http://localhost:7410

📝 Налични Скриптове

npm run dev - Стартира development сървър на порт 7410
npm run build - Билдва приложението за продукция
npm run generate - Генерира статични файлове
npm run preview - Билдва и прегледва с Wrangler
npm run deploy - Билдва и инсталира на Cloudflare Workers
npm run cf-typegen - Генерира Cloudflare типове

📁 Структура на Проекта

├── app/                    # Nuxt app директория
│   ├── components/         # Vue компоненти
│   ├── composables/        # Vue composables (JSON-LD, utilities)
│   ├── layouts/           # Layout компоненти
│   ├── pages/             # Page компоненти и routing
│   └── assets/            # Статични ресурси
├── content/               # Markdown съдържание
│   ├── bg/                # Български статии
│   ├── en/                # Английски статии
│   ├── seo/               # SEO конфигурации
├── i18n/                  # Интернационализация
├── public/                # Публични ресурси
└── server/                # Server-side код

🌍 Управление на Съдържанието

Статиите са написани в Markdown и съхранени в content/ директорията:

/content/en/articles/ - Английски статии
/content/bg/articles/ - Български статии
/content/en/static/ - Английски статични страници (като help страници)
/content/bg/static/ - Български статични страници (като help страници)

Формат на Статия

Всяка статия следва тази frontmatter структура:

---
title: "Заглавие на Статията"
date: "2024-02-06T12:01:53.293Z"
draft: false
tags: ["vue", "nuxt"]
slug: "slug-na-statiata"
navigation: false
competence: "frontend"
---

Съдържание на статията тук...

🔍 SEO & Структурирани Данни

Блогът имплементира цялостна SEO оптимизация със JSON-LD структурирани данни:

JSON-LD Имплементация

Приложението включва три типа структурирани данни използвайки Schema.org речника:

Blog Listing (useJsonLdBlogListing):
- Генерира Blog схема за страници с листинг на статии
- Включва всички статии с техните метаданни
- Автоматично се актуализира когато статиите се заредят
Blog Posts (useJsonLdBlogPost):
- Генерира BlogPosting схема за отделни статии
- Включва автор, издател, дати и метаданни на статията
- Поддържа опционални featured изображения
Breadcrumbs (useJsonLdBreadcrumbs):
- Генерира BreadcrumbList схема за навигация
- Работи с Nuxt UI breadcrumb компонентите
- Обработва многоезични маршрути и динамично съдържание

Използване

JSON-LD composables се импортират автоматично и могат да се използват в която и да е страница:

<script setup>
// За листинги на статии
useJsonLdBlogListing(title, description, articles, locale);

// За отделни блог постове
useJsonLdBlogPost(article, locale);

// За breadcrumb навигация
useJsonLdBreadcrumbs(breadcrumbItems);
</script>

Всички структурирани данни са реактивни и се актуализират автоматично при промяна на съдържанието.

Карти на Сайта

Блогът генерира карта на сайта за SEO (Search Engine Optimization) цели, която включва всички статии и статични страници. Картата на сайта се актуализира автоматично, когато се добави ново съдържание, благодарение на Nuxt Sitemap модула.

🚀 Инсталация

Приложението е конфигурирано за инсталация на Cloudflare Workers:

Конфигурирайте Wrangler:

npm run cf-typegen

Инсталирайте:

npm run deploy

🤝 Сътрудничество

Направете fork на хранилището
Създайте feature branch: git checkout -b feature/amazing-feature
Commit-нете промените си: git commit -m 'Add amazing feature'
Push-нете към branch-а: git push origin feature/amazing-feature
Отворете Pull Request

📄 Лиценз

Този проект е лицензиран под MIT лиценза - вижте LICENSE.md файла за подробности.

👤 Автор

howbizarre

GitHub: @howbizarre
Уебсайт: thoughts.bizarre.how

🙏 Благодарности

Построен с Nuxt 4
UI компоненти от Nuxt UI
Съдържание от Nuxt Content
Многоезична поддръжка с Nuxt i18n
Икони от Heroicons
Шрифтове от Google Fonts
Back-end Cloudflare Workers

Name		Name	Last commit message	Last commit date
Latest commit History 120 Commits
.github		.github
app		app
content		content
i18n		i18n
public		public
server		server
.gitignore		.gitignore
LICENSE.md		LICENSE.md
README.md		README.md
README_BG.md		README_BG.md
README_EN.md		README_EN.md
content.config.ts		content.config.ts
env.d.ts		env.d.ts
hbsthoughts.code-workspace		hbsthoughts.code-workspace
nuxt.config.ts		nuxt.config.ts
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
worker-configuration.d.ts		worker-configuration.d.ts
wrangler.jsonc		wrangler.jsonc

License

howbizarre/hbsthoughts

Folders and files

Latest commit

History

Repository files navigation

HB's Thoughts

🌍 Choose Language / Изберете Език

🌐 Live Site

📖 About

✨ Features

🛠 Tech Stack

🚀 Getting Started

Prerequisites

Installation

📝 Available Scripts

📁 Project Structure

🌍 Content Management

Article Format

🔍 SEO & Structured Data

JSON-LD Implementation

Usage

Site Maps

🚀 Deployment

🤝 Contributing

📄 License

👤 Author

🙏 Acknowledgments

🌐 Живо Сайт

📖 За Проекта

✨ Функционалности

🛠 Технологичен Стек

🚀 Започване

Изисквания

Инсталация

📝 Налични Скриптове

📁 Структура на Проекта

🌍 Управление на Съдържанието

Формат на Статия

🔍 SEO & Структурирани Данни

JSON-LD Имплементация

Използване

Карти на Сайта

🚀 Инсталация

🤝 Сътрудничество

📄 Лиценз

👤 Автор

🙏 Благодарности

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Packages