Welcome to the codebase for 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. 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 (based on Astro Starter Theme)
Tailwind CSS
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:

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 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.

Tech Stack

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

Astro 5: The web framework for building content-driven websites.
Tailwind CSS 4: A utility-first CSS framework for rapid UI development.
TypeScript: Strongly typed programming language that builds on JavaScript.
MDX: Markdown for the component era, allowing you to use JSX in your markdown content.

Project Structure

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

/
├── 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

Quick Start

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

# 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

Configuration

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

// 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:

---
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...

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.

Support the Project

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

License

This project is under the MIT license. See the LICENSE file for more details.