Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/DavidEspinozaRomero/Proyecto-de-vivienda-social-renacer/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

Proyecto Renacer is built with Astro, a modern static site generator optimized for content-focused websites. The project uses Astro’s file-based routing, component architecture, and Tailwind CSS for styling.

​
Directory Structure

proyecto-renacer/
├── .git/                  # Git version control
├── .vscode/               # VS Code settings
├── public/                # Static assets
│   ├── img/              # Image files
│   ├── favicon.ico       # Browser icon
│   └── favicon.svg       # SVG icon
├── src/                   # Source code
│   ├── assets/           # Optimized assets (images, etc.)
│   │   ├── astro.svg
│   │   ├── background.svg
│   │   └── mockImg.webp
│   ├── components/       # Reusable Astro components
│   ├── data/             # Application state and data
│   ├── layouts/          # Page layout templates
│   ├── pages/            # File-based routing pages
│   └── styles/           # Global CSS styles
├── astro.config.mjs      # Astro configuration
├── package.json          # Dependencies
├── tsconfig.json         # TypeScript configuration
├── LICENSE               # Project license
└── README.md             # Project documentation

​
Core Directories Explained

​
/public/

Static assets served directly without processing. Files here are copied to the build output as-is. Contents:
  • favicon.ico and favicon.svg - Site icons
  • img/ - Image directory for static images
Usage: 
<!-- Reference public files with absolute paths -->
<img src="/img/photo.jpg" alt="Photo" />

​
/src/

All source code, components, and pages. This is where development happens.

​
/src/assets/

Optimized assets processed by Astro’s image optimization. Use for images that need optimization. Contents:
  • mockImg.webp - Mock imagery for cards
  • astro.svg, background.svg - Vector graphics
Usage: 
---
import { Image } from 'astro:assets';
import img from '../assets/mockImg.webp';
---
<Image src={img} alt="Description" />

​
/src/components/

Reusable UI components. See Components for details.

​
/src/data/

Application state and shared data. Example - state.ts: 
export const socios = {
  maximo: 64,
  actual: 32,
  porcentaje: () => Math.round((socios.actual / socios.maximo) * 100),
}

​
/src/layouts/

Page layout templates. See Layouts for details.

​
/src/pages/

File-based routing pages. See Pages for details.

​
/src/styles/

Global CSS and styling configurations.

​
Configuration Files

​
astro.config.mjs

Astro configuration with Tailwind CSS integration: 
// @ts-check
import { defineConfig } from 'astro/config';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});
Key features:
  • Tailwind CSS integration via Vite plugin
  • Standard Astro configuration
  • TypeScript support enabled

​
package.json

Project dependencies and scripts: 
{
  "name": "proyecto-renacer",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro"
  }
}
Available commands:
  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build

​
tsconfig.json

TypeScript configuration for the project. Enables type checking for .ts files and provides IDE support.

​
Build Output

When you run npm run build, Astro generates a static site in the dist/ directory: 
dist/
├── index.html
├── como-ser-socio.html
├── proyecto.html
├── requisitos.html
├── contacto.html
├── noticias.html
├── _astro/           # Optimized CSS, JS, images
└── img/              # Static images from public/

​
Development Workflow

1

Start Dev Server

Run npm run dev to start the development server at http://localhost:4321
2

Make Changes

Edit files in /src/ - the server hot-reloads automatically
3

Add Pages

Create .astro files in /src/pages/ for new routes
4

Build

Run npm run build to create production-ready static files

​
Key Technologies

Astro

Static site generator with component islands architecture

Tailwind CSS

Utility-first CSS framework for rapid UI development

TypeScript

Type-safe JavaScript for better developer experience

Material Symbols

Icon font from Google for UI elements

​
Next Steps

Pages

Learn about the routing system and page structure

Components

Explore reusable UI components

Layouts

Understand layout templates and page wrapping

Build docs developers (and LLMs) love

Get started for freeTalk to us