Introduction

Welcome to the Calabria Motor documentation! This comprehensive guide will help you set up, customize, and maintain your automotive detailing website built with Astro 6.

What You’ll Learn

  • Installing and setting up the theme
  • Understanding the project structure
  • Creating and managing content
  • Customizing design and components
  • Deploying your website
  • Troubleshooting common issues

Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (v18 or higher) - Download here
  • npm or pnpm - Package manager (comes with Node.js)
  • Git - Version control system
  • Code Editor - VS Code recommended

Installation

Step 1: Clone or Download

# Clone the repository
git clone https://github.com/yourusername/automob-astro6.git
cd automob-astro6

Step 2: Install Dependencies

# Using npm
npm install

# Or using pnpm (recommended)
pnpm install

Step 3: Start Development Server

npm run dev

Visit http://localhost:4321 to see your site running!

Quick Start Commands

# Development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Check for errors
npm run check

Project Structure

Understanding the file structure helps you navigate and modify the theme efficiently.

automob-astro6/
├── public/                 # Static assets
│   ├── img/               # Images
│   └── favicon.svg        # Site favicon
├── src/
│   ├── components/        # Reusable components
│   │   ├── sections/      # Page sections
│   │   ├── BlogCard.astro
│   │   ├── Header.astro
│   │   └── Footer.astro
│   ├── content/           # Content collections
│   │   ├── blog/          # Blog posts (MDX)
│   │   ├── service/       # Services (MDX)
│   │   └── pages/         # Legal pages (MDX)
│   ├── layouts/           # Page layouts
│   │   └── MainLayout.astro   # Main layout
│   ├── pages/             # Route pages
│   │   ├── index.astro
│   │   ├── services/
│   │   ├── blogs/
│   │   └── contact.astro
│   ├── helpers/           # Utility functions
│   └── styles/            # Global styles
├── content.config.ts      # Content schema
├── astro.config.mjs       # Astro configuration
├── tailwind.config.mjs    # Tailwind CSS config
└── package.json           # Dependencies

Configuration

Astro Configuration

The astro.config.mjs file controls Astro settings:

export default defineConfig({
  site: 'https://calabriamotor.com',
  integrations: [
    tailwind(),
    mdx(),
    icon(),
  ],
  // Add your custom configuration
});

Tailwind Configuration

Customize colors, fonts, and design tokens in src/styles/style.css:

Content Management

Blog System

Creating Blog Posts

Create new MDX files in src/content/blog/:

---
title: "How to Maintain Your Car's Paint"
cover: "/img/calabria/gallery-05.webp"
date: "January 15, 2025"
category: "Tips & Tricks"
tags: ["Paint Care", "Maintenance", "DIY"]
readTime: 5
authorId: "john-smith"
description: "Learn essential tips for maintaining..."
featured: false
---

## Your Content Here

Write your blog post content using Markdown...

Frontmatter Fields

| Field | Type | Required | Description | |-------|------|----------|-------------| | title | string | Yes | Post title | | cover | string | Yes | Cover image path | | date | string | Yes | Publication date | | category | string | Yes | Post category | | tags | array | Yes | Post tags | | readTime | number | Yes | Reading time (minutes) | | authorId | string | Yes | Author identifier | | description | string | Yes | SEO description | | featured | boolean | No | Featured post flag |

Available Authors

Configure authors in blog components:

  • john-smith - John Smith, Lead Detailer
  • sarah-johnson - Sarah Johnson, Ceramic Specialist
  • michael-chen - Michael Chen, Paint Expert

Categories

Predefined categories:

  • Tips & Tricks
  • Guides
  • Products
  • Maintenance
  • Industry News

Services System

Creating Services

Add service MDX files in src/content/service/:

---
title: "Ceramic Coating Application"
icon: "bi:shield-check"
category: "exterior"
order: 1
featured: true
price: 599
duration: "4-6 hours"
description: "Long-lasting paint protection..."
benefits:
  - "5-year protection"
  - "Hydrophobic coating"
  - "Enhanced gloss"
process:
  - "Paint decontamination"
  - "Paint correction"
  - "Coating application"
  - "Curing time"
---

## Detailed Service Description

Your service content here...

Service Categories

  • exterior - Exterior detailing services
  • interior - Interior detailing services
  • specialized - Specialized services

Create legal pages in src/content/pages/:

---
title: "Privacy Policy"
label: "Privacy"
icon: "bi:shield-check"
date: "December 15, 2024"
description: "Your privacy is important..."
---

## Your Legal Content

Write your legal page content...

Components

Creating Custom Components

Create new components in src/components/:

---
// MyComponent.astro
interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
---

<div class="my-component">
  <h2>{title}</h2>
  {description && <p>{description}</p>}
</div>

<style>
  .my-component {
    @apply p-6 bg-dark-900 rounded-lg;
  }
</style>

Custom Styles

Add global styles in src/styles/style.css:

/* Custom styles */
.fade-in {
  animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Creating Pages

Static Pages

Create Astro files in src/pages/:

---
// src/pages/about.astro
import Layout from '@/layouts/Layout.astro';
---

<Layout title="About Us">
  <main>
    <h1>About Calabria Motor</h1>
    <p>Your content here...</p>
  </main>
</Layout>

Dynamic Pages

Use [slug].astro for dynamic routing:

---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content';
import Layout from '@/layouts/Layout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<Layout title={post.data.title}>
  <Content />
</Layout>

Images

Adding Images

Place images in public/img/calabria/:

public/
└── img/
    └── calabria/
        ├── gallery-01.webp
        ├── gallery-04.webp
        └── gallery-12.webp

Using Images

<!-- Static images -->
<img src="/img/calabria/gallery-12.webp" alt="Logo">

<!-- With helper function -->
---
import { url } from '@src/utils/path';
---
<img src={url('/img/calabria/gallery-12.webp')} alt="Logo">

Optimizing Images

Use appropriate formats:

  • JPG - Photos and complex images
  • PNG - Logos and transparency
  • WebP - Modern format, better compression
  • SVG - Icons and logos

Recommended sizes:

  • Hero images: 1920x1080px
  • Blog covers: 1200x630px
  • Service images: 800x600px
  • Thumbnails: 400x300px

Deployment

Build for Production

npm run build

Output will be in dist/ directory.

Deploy to Vercel

  1. Push code to GitHub
  2. Import project in Vercel
  3. Configure:
    • Framework: Astro
    • Build Command: npm run build
    • Output Directory: dist
  4. Deploy!

Deploy to Netlify

  1. Push code to GitHub
  2. New site from Git in Netlify
  3. Configure:
    • Build command: npm run build
    • Publish directory: dist
  4. Deploy!

Best Practices

Performance

  • Optimize images before uploading
  • Use appropriate image formats
  • Lazy load images below fold
  • Minimize custom JavaScript
  • Use Astro’s built-in optimizations

Theme Updates

When new theme versions are released:

  1. Backup your customizations
  2. Review changelog
  3. Test in development
  4. Deploy updates

Support

Need help? We’re here for you!

Email: lightestcode@gmail.com

Thank you for choosing Calabria Motor! We hope this documentation helps you build an amazing website for your detailing business.