CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

TripGazer is a personal travel blog built with Eleventy (11ty) static site generator. The site is deployed at https://www.tripgazer.com/

Commands

npm run dev      # Start development server with live reload
npm run build    # Build static site to _site/
npm run start    # Alias for dev server

Architecture

Eleventy Configuration

• .eleventy.js - Main config file with plugins, filters, collections, and build settings
• Node version: 14.20.0 (see .nvmrc)
• Template engines: Nunjucks (njk), Markdown, Liquid, HTML
• Output directory: _site/

Content Structure

• post/ - Blog posts, each in its own directory with format post-slug/post-slug.md
  • Posts include frontmatter: title, date, featureImage, summary, categories, tags, permalink
  • Images stored in post-slug/images/ subdirectory
• pages/ - Static pages (about, contact, privacy, destination landing pages)

Templates

• _includes/layouts/ - Page layouts (base.njk is the main template, post.njk for articles)
• _includes/components/ - Reusable components (head, footer, nav, author boxes)
• _includes/assets/ - CSS/JS assets

Data

• _data/metadata.json - Site metadata (title, description, URL)
• _data/env.js - Environment configuration

Key Plugins

• @11ty/eleventy-navigation - Navigation
• eleventy-plugin-lazyimages - Lazy loading images (generates .lazyimages.json cache)
• @aloskutov/eleventy-plugin-external-links - External link handling
• eleventy-plugin-embed-instagram - Instagram embeds

Collections

• categoryList - All unique categories from posts
• authors - Posts grouped by author
• events - Posts with location data

Build Processing

• CSS minification via clean-css (cssmin filter)
• JS minification via uglify-es (jsmin filter)
• HTML minification via html-minifier (automatic transform)
• Markdown with markdown-it, markdown-it-anchor, markdown-it-attrs

Static Assets (passthrough copy)

• static/img/ - Site images
• post/*.jpg and post/**/images/*.jpg - Post images
• favicon.ico, manifest.json, ads.txt, push-worker.js

Content Strategy

Focus areas:

• Packing guides (supports PackMyTrip app)
• Essential apps for [country/region] guides
• Transportation guides (subways, airports, getting around)
• Day trips from specific cities
• Hiking/outdoor activities
• Seasonal travel (cherry blossoms, fall foliage, winter activities)
• Baby/family travel tips

Avoid (too competitive):

• Hotels/resorts (Booking, Expedia dominate)
• "Best restaurants in X" (Yelp, TripAdvisor dominate)
• Generic city guides (too broad, too competitive)

Writing Style Guide

Tone & Voice

• Friendly and conversational, speaking directly to readers ("If you're on the hunt for...", "You won't want to miss...")
• Realistic and balanced - avoid hype words like "blown away", "futuristic", "game-changer"
• Practical and helpful - focuses on actionable information
• Occasional first-person perspective ("My favorite dish is...")
• Acknowledge downsides honestly ("rush hour is brutal", "some areas show their age")
• Add caveats when needed ("not all have this", "quality varies")
• Write as honest travel advice, not a sales pitch

Post Structure

• Brief intro paragraph that sets context and mentions the main keyword
• H2/H3 headings to organize content into scannable sections
• Each place/item gets its own section with address, website link, and 2-4 sentences of description
• End with a call-to-action or recommendation

Content Patterns

• Include personal recommendations and insider tips ("My Tip:", "My recommendation is...")
• Embed Instagram posts for visual content
• Internal links to related articles on the site
• Bold keywords throughout for SEO (location names, key phrases)
• Practical details: addresses, phone numbers, hours, specific menu items
• Invite reader engagement ("What's your favorite place...")

Formatting Conventions

• Images use {.center} class: ![Alt text](/path/to/image.jpg){.center}
• Addresses formatted consistently (pipes or H4 headings)
• Year often included in titles for freshness (e.g., "2026")
• Frontmatter includes: title, date, featureImage, summary, categories, tags, permalink