blog-balodeplao/README.md

# Balodeplao.com — Family Travel Blog

Welcome to the codebase for [balodeplao.com](https://balodeplao.com) — our family travel blog! Here, we share stories, tips, and experiences from our journeys around the world. This site is built to inspire, inform, and connect with fellow travelers and families who love to explore.

---

## About

This repository hosts the source code for our family travel blog, [balodeplao.com](https://balodeplao.com). The blog features:

- ✈️ Personal travel stories and guides
- 🏝️ Family-friendly destinations and tips
- 📸 Photo galleries and travel inspiration
- 📝 Practical advice for traveling with kids

---

## Tech Stack

This blog is built with modern, high-performance technologies:

- **[Astro](https://astro.build/)** (based on Astro Starter Theme)
- **[Tailwind CSS](https://tailwindcss.com/)**
- **TypeScript**
- **MDX/Markdown** for content

---

## Features

- Responsive, fast, and SEO-optimized
- Dark & Light mode
- Content collections for easy blog management
- Reusable components and layouts
- RSS feed, sitemap, and meta tags for discoverability

---

## Getting Started

To run the blog locally:

```bash
git clone https://github.com/10h30/blog-balodeplao.git
cd blog-balodeplao
npm install
npm run dev
```

---

## Contributing

This is a personal/family project, but suggestions and improvements are welcome! Feel free to open an issue or pull request.

---

## License

This project is licensed under the **MIT** license. See the [LICENSE](./LICENSE) file for details.

---

> _Originally based on Astro Starter Theme. Customized and expanded for our family travel blog._

## Features

- ✅ **Dark & Light Mode**: Clean implementation.
- ✅ **Optimized SEO**: Automatic meta tags, Structured Data (JSON-LD), RSS Feed, Open Graph, Twitter Cards, and native Sitemap.
- ✅ **Native Scroll Animations**: High-performance, JS-light scroll reveal animations using `Intersection Observer`.
- ✅ **Clean Architecture**: Organized and scalable code.
- ✅ **Reusable Components**: Navbar, Footer, and modern Layouts with Tailwind v4.

<br>

<img alt="Image" src="./.github/astro-starter-pro.webp" />

<br>

<img alt="PageSpeed Insights Score 100/100" src="https://github.com/user-attachments/assets/541d4bfc-bcb9-4287-bd91-08564108d706" />

<br>

## Tech Stack

This template is built with modern, high-performance technologies:

- **[Astro 5](https://astro.build/)**: The web framework for building content-driven websites.
- **[Tailwind CSS 4](https://tailwindcss.com/)**: A utility-first CSS framework for rapid UI development.
- **[TypeScript](https://www.typescriptlang.org/)**: Strongly typed programming language that builds on JavaScript.
- **[MDX](https://mdxjs.com/)**: Markdown for the component era, allowing you to use JSX in your markdown content.

<br>

## Project Structure

A quick overview of the folder structure to help you understand where everything is located:

```text
/
├── public/                # Static assets (fonts, favicon, images outside of processing)
├── src/
│   ├── assets/            # Images and assets to be processed by Astro
│   ├── components/        # Reusable UI components (Navbar, Footer, SEO, etc.)
│   ├── config/            # Centralized site configuration (site.ts)
│   ├── content/           # Blog posts and content collections (Markdown/MDX)
│   ├── layouts/           # Base page layouts
│   ├── pages/             # File-based routing (pages and endpoints)
│   ├── styles/            # Global CSS and Tailwind directives
│   ├── types/             # TypeScript type definitions
│   └── content.config.ts  # Astro Content Collections configuration
├── astro.config.mjs       # Astro configuration file
└── tailwind.config.mjs    # Tailwind CSS configuration
```

<br>

## Quick Start

To start with this project locally, clone the repository and install dependencies:

```bash
# Clone the repository
git clone https://github.com/devgelo-labs/astro-starter-pro.git

# If you like it, don't forget to leave a star! ⭐
cd astro-starter-pro
npm install
npm run dev
```

<br>

## Configuration

All global site information is managed in `src/config/site.ts`. Update this file with your data:

```typescript
// src/config/site.ts
import ogImage from "../assets/og-image.png";

export const siteConfig = {
  name: "Astro Starter Pro",
  description:
    "Starter template optimized for SEO and performance. A solid foundation to start your projects with best practices.",
  url: "https://astrostarterpro.com",
  lang: "en",
  locale: "en_US",
  author: "Devgelo",
  twitter: "@Devgelo",
  ogImage: ogImage,
  socialLinks: {
    twitter: "https://twitter.com",
    github: "https://github.com/devgelo-labs/astro-starter-pro",
    discord: "https://discord.com",
  },
  navLinks: [
    { text: "Home", href: "/" },
    { text: "About", href: "/about" },
    { text: "Services", href: "/services" },
    { text: "Blog", href: "/blog" },
    { text: "Contact", href: "/contact" },
    { text: "Widgets", href: "/widgets" },
  ],
};
```

## Content Management

This template uses **Astro Content Collections** to manage blog posts.

To add a new blog post, simply create a new `.md` or `.mdx` file inside the `src/content/blog/` directory.

### Frontmatter Schema

Each blog post must include the following frontmatter at the top of the file:

```yaml
---
title: "Your Post Title"
description: "A brief summary of your post for SEO."
pubDate: 2024-03-20
author: "Author Name"
image: "/images/your-cover-image.webp" # Optional
tags: ["Astro", "Tailwind"] # Optional
category: "Web Development" # Optional
---
Your markdown or MDX content goes here...
```

<br>

## Commands

| Command             | Action                                             |
| :------------------ | :------------------------------------------------- |
| `npm run dev`       | Starts the development server at `localhost:4321`. |
| `npm run build`     | Generates the static site in the `dist/` folder.   |
| `npm run preview`   | Previews the production build locally.             |
| `npm run lint`      | Runs ESLint to ensure code quality.                |
| `npm run format`    | Formats code with Prettier.                        |
| `npm run fix`       | Runs format and lint auto-fix.                     |
| `npm run check`     | Runs astro check for diagnostics.                  |
| `npm run typecheck` | Verifies TypeScript types.                         |

<br>

## Support the Project

If you find this starter useful, please consider giving it a ⭐ on GitHub! It helps more people discover the project.

<br>

## License

This project is under the **MIT** license. See the [LICENSE](./LICENSE) file for more details.

---

Designed by [Devgelo Labs](https://github.com/devgelo-labs)