Daniela and Will Travel Blog

Welcome to the Daniela and Will Travel Blog repository! This project contains the source code for our travel blog, where we share our travel experiences, tips, and guides.

Built with Astro and deployed to GitHub Pages.

Project Structure

public/                     Served verbatim at the site root
  assets/files/             Downloadable budget + planning spreadsheets
  assets/fonts/             Self-hosted webfonts
  assets/img/               App icons and the default Open Graph image
  favicon.ico
src/
  assets/img/               Photography — optimized at build time by astro:assets
  components/               Reusable markup (Figure, Card, Navigation, Footer, …)
    styleguide/             Story + Swatch, used only by /styleguide/
  content/posts/<lang>/     Blog posts as .mdx, organised by region
  data/                     Settings, locales, navigation, translations
  layouts/                  Base, Page, Post
  lib/                      Dates, reading time, tags, i18n, image resolution
  pages/                    Routes (see below)
  plugins/                  Markdown pipeline extensions
  scripts/                  The site's client-side JavaScript
  styles/                   The CSS design system
  content.config.ts         Content collection schemas

Routing

Route	Source
/	src/pages/index.astro
/en/<page>/	src/pages/en/<page>.astro
/en/writing/<slug>/	src/content/posts/en/**/<slug>.mdx via src/pages/[...slug].astro
/<lang>/tag/<tag>/	src/pages/[lang]/tag/[tag].astro, generated from post tags
/<lang>/feed/feed.xml, .json, .xsl	src/pages/[lang]/feed/
/sitemap.xml, /robots.txt, /humans.txt	src/pages/*.ts

Directory nesting under a language (asia/, europe/, tools/) is organisational only — it never appears in the URL.

Getting Started

1. Clone the repository

   git clone https://github.com/daniela-and-will-travel/daniela-and-will-travel.github.io.git
   cd daniela-and-will-travel.github.io
   

2. Install dependencies — requires Node.js 22 or newer.

   npm install
   

3. Run the development server at http://localhost:4321.

   npm run dev
   

4. Build the production site into dist/.

   npm run build
   

Command	What it does
npm run dev	Dev server with hot reload. Draft posts are visible here.
npm run build	Production build. Drafts are excluded.
npm run preview	Serve the built dist/ locally.
npm run check	Type-check components and validate every post against the schema.
npm test	Run the regression tests against dist/. Build first.
npm run clean	Remove dist/ and the build caches.

npm test runs against the built output rather than the source, because what it guards only exists after a build. See tests/theme-persistence.test.mjs: Astro's ClientRouter strips every attribute off <html> on a soft navigation, which destroys the data-theme the theme script sets at runtime. The repaint that fixes it lives in src/scripts/site.ts and is invisible to both the type check and the build, so it needs a test.

The first build re-encodes every photograph and takes a few minutes. Later builds reuse the cache in node_modules/.astro and take seconds; CI restores that cache between runs.

Writing Content

Posts are .mdx files under src/content/posts/<lang>/. Front matter is validated by the schema in src/content.config.ts, so a missing or misspelled key fails the build rather than quietly producing a broken card.

---
title: One Week Japan Itinerary
date: 2025-03-10
author: Daniela
tags:
 - asia
 - southeast-asia
 - japan
 - itinerary
 - planning
draft: false
byline: How to visit Japan on a bougie backpacker budget!
heroImage: /assets/img/posts/asia/IMG_0495.jpg
heroImageAlt: A street scene in Japan
seo:
  title: One Week Japan Itinerary
  description: How to visit Japan on a bougie backpacker budget!
---

title, date, tags, byline, heroImage and heroImageAlt are required — the last three are what make a post look right in the card grids on the home page, the countries page and the related-posts strip. seo is optional; set seo.slug to override the URL slug, which otherwise comes from the filename.

modified is optional and deliberately so. It feeds dateModified in the post's JSON-LD and lastmod in the sitemap, so only add it when the content actually changed — refreshed prices, a new visa rule, a rewritten section. Omitted, both fall back to date, which is the honest answer for a post that has never been revised. Don't mirror date into it; the schema rejects a modified earlier than date. It is not derived from the filesystem on purpose: actions/checkout stamps every file with the clone time, and a git last-commit date moves for build-only commits, so either would announce a refresh that never happened.

Static pages under src/pages/ export a meta object that the sitemap reads. Set lastModified (an ISO date) when you change one — it becomes the URL's <lastmod>, the one sitemap hint Google actually reads. It is declared rather than derived for the same reason modified is on posts: the build time would claim every page changed on every deploy, and actions/checkout stamps the whole tree with the clone time. <priority> and <changefreq> are not emitted at all — Google ignores both, and every page here had declared priority 1.0, which makes a relative signal say nothing.

This is the beginning of the README. Read the rest at the original. Read the full README ↗