Content Schema Reference

Overview

Zubd.io is a static Astro site. Content is stored as MDX files (Markdown + JSX) inside src/content/products/ and src/content/articles/. Each content type has a Zod schema that validates frontmatter at build time — if a required field is missing or wrong, the build fails with a clear error.

Every piece of content exists in two files: one in en/ and one in ar/. Both must have the same handle value (which must also match the filename).

Product Schema

File path: src/content/products/en/{handle}.mdx

User Review Object

Full Product Template

---
title: "Product Name"
handle: "product-name"
locale: "en"
brand: "Brand Name"
model: "Model Variant"
category: "category-slug"
tags: ["tag1", "tag2"]
image: "https://images.unsplash.com/photo-XXXXX?w=480&auto=format&fit=crop&q=80"
imageAlt: "Descriptive alt text"
rating: 4.5
reviewCount: 120
affiliateUrl: "https://amzn.to/XXXXXX"
affiliateLabel: "Buy on Amazon"
price: "$49.99"
priceUpdated: "2025-04-07"
metaDescription: "Short description under 160 chars for SEO."
pros:
  - "First pro"
  - "Second pro"
cons:
  - "First con"
userReviews:
  - author: "Jane D."
    rating: 5
    date: "2025-03-01"
    text: "Great product!"
    source: "amazon"
publishedAt: "2025-04-07"
draft: false
---

## Overview

Your review body in Markdown here...

Article Schema

File path: src/content/articles/en/{handle}.mdx

Full Article Template

---
title: "Top 10 [Products] for [Use Case] (2025)"
handle: "top-10-products-use-case"
locale: "en"
category: "category-slug"
tags: ["tag1", "tag2"]
heroImage: "https://images.unsplash.com/photo-XXXXX?w=1200&auto=format&fit=crop&q=80"
heroImageAlt: "Descriptive hero image alt text"
excerpt: "Concise summary of what the article covers (max 300 chars)."
featuredProducts:
  - "product-handle-1"
  - "product-handle-2"
  - "product-handle-3"
metaTitle: "10 Best [Products] for [Use Case] (2025)"
metaDescription: "SEO description under 160 chars."
author: "Zubd Editorial"
publishedAt: "2025-04-07"
draft: false
---

## Why Trust This List?

Methodology paragraph...

## What to Look For

Key buying criteria...

Categories

Categories are automatically derived from the category field in your article frontmatter. There is no separate category file to create. When you publish an article with category: "fitness", the page /en/categories/fitness is automatically built and shows all articles in that category.

To add a new category, simply use a new category value in your article frontmatter. To add a human-readable label for it, add an entry to src/lib/utils.ts in the getCategoryLabel() function:

// src/lib/utils.ts → getCategoryLabel()
fitness: { en: 'Fitness', ar: 'اللياقة البدنية' },
food:    { en: 'Food & Kitchen', ar: 'الطعام والمطبخ' },
// Add your new category here:

Images (Unsplash)

All product and article images use Unsplash URLs directly — no image hosting required. Use this URL format:

https://images.unsplash.com/photo-{PHOTO_ID}?w=1200&auto=format&fit=crop&q=80

Common sizes:

• Article hero: ?w=1200&h=630&fit=crop
• Product image: ?w=480&h=480&fit=crop
• OG image: ?w=1200&h=630&fit=crop

Find images at unsplash.com — copy the photo ID from the URL.

Publishing Workflow

1. Create src/content/products/en/your-product.mdx
2. Create src/content/products/ar/your-product.mdx (same filename)
3. Add the product handle to an article's featuredProducts list
4. Create src/content/articles/en/your-article.mdx
5. Create src/content/articles/ar/your-article.mdx
6. Run npm run build — Zod validates all frontmatter
7. Push to main → Cloudflare Pages auto-deploys

URL Structure