Skip to main content
Need assistance with the Arte y Web Creaciones project? This page outlines all available support channels and resources to help you get unstuck.

​
Documentation Resources

Quick Start Guide

Get your development environment set up

Astro Framework

Learn how Astro powers this project

Content Collections

Understand the content structure

Component Architecture

Explore component patterns

​
Official Astro Resources

Since this project is built with Astro, the official Astro documentation is your best friend:

​
Astro Documentation

Astro Docs

Comprehensive documentation for Astro framework
Key sections to explore:

​
Astro Community

Discord Server

Join the Astro Discord community for real-time help

GitHub Discussions

Ask questions and share ideas

​
Technology Stack Resources

The project uses several key technologies. Here are official resources for each:

​
Tailwind CSS

Tailwind CSS Documentation

Complete utility-first CSS framework documentation

​
MDX

MDX Documentation

Markdown with JSX - used for blog posts and content

​
Astro Icon

Astro Icon

Icon system documentation - using Material Design Icons (MDI)
This project uses the @iconify-json/mdi package for Material Design Icons. You can browse available icons at Iconify.

​
Common Questions

Pages in Astro use file-based routing. Create a new .astro file in src/pages/:
src/pages/my-page.astro
---
import Layout from "@/layouts/Layout.astro";
---

<Layout title="My Page" description="Page description">
  <h1>My New Page</h1>
  <p>Content goes here</p>
</Layout>
The page will be available at /my-page.
Create a new Markdown or MDX file in src/content/blog/:
src/content/blog/my-post.md
---
title: "My Blog Post Title"
description: "A compelling description"
pubDate: '2026-03-05'
heroImage: "/img/posts/my-image.webp"
draft: false
tags: ["web design", "tutorial"]
publisher: "Arte y Web Creaciones"
---

Your blog content here...
The post will automatically be available at /blog/my-post.
Styles in this project come from multiple sources:
  1. Tailwind CSS - Utility classes used throughout components
  2. Global styles - src/styles/global.css and src/styles/estiloBase.css
  3. Component styles - Scoped <style> blocks in .astro files
  4. Google Fonts - Inter and Outfit fonts loaded in Layout.astro
Images should be placed in the public/ directory:
  • Blog images: public/img/posts/
  • General images: public/img/
  • Icons/logos: public/img/
Reference them with absolute paths:
<img src="/img/posts/my-image.webp" alt="Description" />
The project uses WebP format for optimized images.
The @/ alias is configured in tsconfig.json to reference the src/ directory:
// Instead of:
import Layout from "../../layouts/Layout.astro";

// You can write:
import Layout from "@/layouts/Layout.astro";
This makes imports cleaner and easier to refactor.
Content collections are defined in src/content.config.ts. To add a new collection:
  1. Define the schema using Zod
  2. Add the collection to the exports
  3. Create a directory in src/content/
Example:
src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const myCollection = defineCollection({
  loader: glob({ 
    base: './src/content/myCollection', 
    pattern: '**/*.{md,mdx}' 
  }),
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
  }),
});

export const collections = {
  // ... existing collections
  myCollection,
};
The project uses Astro Icon with Material Design Icons:
---
import { Icon } from "astro-icon/components";
---

<Icon name="mdi:check-circle" class="w-6 h-6 text-green-500" />
Browse available icons at Iconify - MDI.
  • Components (src/components/) - Smaller, reusable UI elements (buttons, alerts, forms)
  • Sections (src/sections/) - Larger page sections that compose multiple components (Hero, Testimonials, Portfolio)
This is an organizational pattern to keep the codebase structured.

​
Troubleshooting

​
Build Errors

If you encounter build errors:
1

Clear the cache

rm -rf .astro dist
npm run build
2

Reinstall dependencies

rm -rf node_modules package-lock.json
npm install
3

Check Node version

node --version
# Should be v20.x.x

​
Development Server Issues

If the dev server stops responding, restart it with Ctrl+C then npm run dev.
Common fixes:
  • Clear browser cache
  • Try a different port in astro.config.mjs
  • Check for syntax errors in recently edited files

​
Getting Project-Specific Help

​
Codebase Navigation

Use your IDE’s “Go to Definition” feature (F12 in VS Code) to quickly navigate to component definitions and understand how they work.
Key files to understand:
  • src/layouts/Layout.astro - Main layout wrapper with SEO and meta tags
  • src/content.config.ts - Content collection schemas
  • astro.config.mjs - Project configuration
  • src/consts.ts - Global constants and site metadata

​
Reading the Code

1

Start with pages

Pages in src/pages/ show how everything comes together. The homepage (index.astro) is a great starting point.
2

Follow the imports

Trace imports to understand component composition and data flow.
3

Check content collections

Look at examples in src/content/blog/ to understand the content structure.
4

Experiment

Make small changes and see what happens. Astro’s fast refresh makes experimentation easy.

​
Still Stuck?

If you can’t find the answer you need:
  1. Search the Astro docs - Most questions about Astro functionality are answered there
  2. Check existing blog posts - The src/content/blog/ directory has examples of various patterns
  3. Review similar components - Find a similar component and see how it’s implemented
  4. Ask in Astro Discord - The community is helpful and responsive

Astro Discord

Join the Astro community Discord server for real-time help

Build docs developers (and LLMs) love

Get started for freeTalk to us