Documentation Guide

Welcome to the Dentist Astro Documentation. This guide covers setup, installation, customization, content management, and deployment.

Setup and Installation

Dentist is an Astro template designed for Lawyers and Attorney websites. Follow the steps below to get your local environment running.

Step 1: Prepare Your Tools

Ensure you have the following installed:

Node.js 22.12.0 or higher — Download from nodejs.org (includes npm). Verify with node -v.
npm — Installed with Node.js. Verify with npm -v.
Visual Studio Code — Recommended editor at code.visualstudio.com.

Step 2: Clone and Open the Project

Download and unzip the project folder.
Open the folder in VS Code or your preferred editor.
Open a terminal (Terminal > New Terminal) and navigate to the project root.

Step 3: Install Dependencies and Run

npm install
npm run dev
npm run build

Astro v6 note: If upgrading an existing project, run npx @astrojs/upgrade first to update Astro and all official integrations together.

Open http://localhost:4321 to preview the portal.
npm run build generates optimized production files in the dist/ folder, ready for deployment.

Project Folder Structure

src/
 ├── components/       # Reusable UI components
 ├── content/          # MDX content files
 │   ├── blog/         # Article MDX files
 │   ├── services/     # Services MDX files
 │   └── pages/        # Static pages (docs, privacy, terms, etc.)
 ├── content.config.ts # Content collection definitions (Astro v6+)
 ├── data/             # Author registry (authors.ts)
 ├── layouts/          # Layout components (MainLayout, etc.)
 ├── pages/            # Astro route files
 └── styles/           # Global styles and Tailwind config

Customization

Brand Colors & Fonts

Edit src/styles/style.css to change the primary color, fonts, and other global tokens:

@import "tailwindcss";
@theme {
    --font-body: 'DM Sans', sans-serif;
    --font-heading: 'Playfair Display', sans-serif;

    --color-primary: #004367;
    --color-primary-light: #005f7f;
    --color-primary-dark: #003548;
    --color-primary-darknest: #001f2f;

    --color-primary-50: #e6f4f8;
    --color-primary-100: #b3dce8;
    --color-primary-200: #80c4d8;

    --color-accent: #1ae4ff;
    --color-accent-dark: #00c8e0;
    --color-accent-light: #7ef0ff;

    --color-neutral-dark: #111827;
    --color-neutral-gray: #6B7280;
    --color-soft: #E5E7EB;
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-soft, currentColor);
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--color-neutral-gray);
  }
  button, [role="button"] {
    cursor: pointer;
  }
}
@custom-variant dark (&:where(.dark, .dark *));

Tailwind Utility Classes

Modify Tailwind classes directly in .astro files inside /src. Refer to the Tailwind CSS docs for available utilities.

Content Collections

Collections are defined in src/content.config.ts using Astro’s Content Layer API (introduced in Astro v5, required in v6). Each collection uses a glob() loader that automatically picks up all MDX files in the specified folder.

import { defineCollection } from "astro:content";
import { glob } from "astro/loaders";
import { z } from "astro/zod";

const blog = defineCollection({
  loader: glob({ pattern: "**/*.mdx", base: "./src/content/blog" }),
  schema: z.object({
    title: z.string(),
    // ...
  }),
});

This theme includes four collections out of the box:

Collection	Folder	Description
`blog`	`src/content/blog/`	Article posts
`services`	`src/content/service/`	services area pages
`pages`	`src/content/pages/`	Static content pages

To add new content, simply drop a new .mdx file into the appropriate folder with the required frontmatter fields.

MDX Frontmatter Format

Articles are written in MDX and placed in src/content/blog/. The required frontmatter fields are:

---
title: "Your Article Title"
cover: "/img/your-cover.jpg"
date: "2026-06-01"
category: "technology"
tags:
  - Tag1
  - Tag2
readTime: 7
featured: false
authorId: "your-author-id"
excerpt: |
  A brief 1–2 sentence description of your article.
---

Field	Type	Required	Notes
`title`	string	✅	Article headline
`cover`	string	✅	Path to cover image in `/public/img/`
`date`	string	✅	Format: `YYYY-MM-DD`
`category`	string	✅	Lowercase, matches existing categories
`tags`	array	✅	Array of tag strings
`readTime`	number	✅	Estimated read time in minutes
`featured`	boolean	✅	`true` to highlight in featured sections
`authorId`	string	✅	Must match an `id` in `authors.ts`
`excerpt`	string	✅	Short description for cards and SEO

Author Profiles

Author data is centrally managed in src/data/authors.ts. Each author has a unique id in kebab-case that is referenced in article frontmatter via authorId.

"james-carter": {
  id:       string;
  name:     string;
  job:      string;
  avatar:   string;
  verified: boolean;
  href?:    string;        // Link to team profile page
  articles?: number;       // Article count (static / CMS-managed)
}

To register as a new author, add an entry to authors.ts following the same structure.

Deployment

Platform	Notes
Vercel	Seamless Astro integration — vercel.com
Netlify	Continuous deployment + edge functions — netlify.com
Custom Server	Upload `dist/` via FTP, SSH, or CI/CD

Best Practices

Keep components small and reusable for easier maintenance.
Always set SEO title and description in your layout for discoverability.
Use descriptive authorId values matching entries in authors.ts.
Use lowercase category names in frontmatter to match URL routes.

Changelog

v1.0.0 — March 11, 2026

Migrated to Astro v6

This release upgrades the theme to be fully compatible with Astro v6. No changes are required to your MDX content files or frontmatter.

Breaking changes addressed:

Content Layer API — All collections (blog, attorneys, practice, pages) migrated from the legacy type: "content" format to the new glob() loader. The collection config file has moved from src/content/config.ts to src/content.config.ts.
render() API — Replaced entry.render() with the new standalone render(entry) function imported from astro:content, across all dynamic and static pages.
Entry ID — Replaced entry.slug with entry.id (which now includes the file extension, e.g. personal-injury.mdx). All URL generation now strips the extension via .replace(/\.mdx?$/, "") to preserve the same clean URLs as before.
Zod import — z is no longer exported from astro:content. Schemas now import z directly from astro/zod.

Dependency upgrades:

Astro v5 → v6
Vite v6 → v7
Zod v3 → v4
Minimum Node.js version: 22.12.0

Support

Found a bug or need help?

Technical support: techdasmin@gmail.com