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.
Layout
The Layout.astro component is the main layout wrapper for all pages in Proyecto Renacer. It provides the HTML structure, meta tags, font loading, and integrates SEO components.
Location
src/layouts/Layout.astro
Props
Page title displayed in browser tab and used for SEO
Page description used for meta description tag and SEO
Default image URL for social media sharing (used as fallback for OGImage)
Custom OpenGraph title. Falls back to title if not provided
Custom OpenGraph description. Falls back to description if not provided
Custom OpenGraph image. Falls back to image if not provided
Features
Font Loading
The layout loads Google Fonts:
- Public Sans (weights: 300-900) - Primary font family
- Material Symbols Outlined - Icon font used throughout the site
Global Styles
Imports src/styles/global.css with Tailwind configuration and custom utilities.
Analytics
Integrates Ahrefs Analytics with async loading for performance.
SEO Components
Automatically includes:
<Head /> - Basic meta tags, favicon, and SEO setup<OpenGraph /> - Social media meta tags for sharing
Dark Mode Support
Body classes include Tailwind dark mode variants:
<body class="bg-light dark:bg-dark font-display text-slate-900 dark:text-slate-100">
Usage
Basic Example
---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
const title = "Proyecto de Vivienda Social Renacer | Terrenos en Ambato";
const description = "Proyecto de vivienda social Renacer en Ambato. Una oportunidad para personas que no tienen vivienda propia.";
---
<Layout title={title} description={description}>
<Header />
<main>
<!-- Your page content here -->
</main>
<Footer />
</Layout>
With Custom OpenGraph Data
---
import Layout from "../layouts/Layout.astro";
const pageData = {
title: "Requisitos | Proyecto Renacer",
description: "Conoce los requisitos para ser socio del proyecto.",
OGTitle: "¿Quieres tu terreno en Ambato? | Proyecto Renacer",
OGDescription: "Descubre si cumples los requisitos para obtener tu primer terreno.",
OGImage: "https://proyectoviviendarenacer.netlify.app/img/requisitos-og.webp"
};
---
<Layout {...pageData}>
<!-- Content -->
</Layout>
Implementation Details
HTML Structure
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
<!-- Font loading -->
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<!-- Meta description -->
<meta name="description" content={description} />
<meta name="robots" content="index,follow" />
<!-- SEO Components -->
<Head />
<OpenGraph OGTitle={OGTitle ?? title} OGDescription={OGDescription ?? description} OGImage={OGImage ?? image} />
</head>
<body class="bg-light font-display text-slate-900 dark:text-slate-100 dark:bg-dark">
<slot />
</body>
</html>
Custom Styles
The layout includes custom styles for Material Symbols:
.material-symbols-outlined {
font-variation-settings:
"FILL" 0,
"wght" 400,
"GRAD" 0,
"opsz" 24;
}
Best Practices
- Always provide title and description - These are required for SEO
- Use custom OG props for social sharing - Optimize titles and descriptions for different contexts
- Include Header and Footer - Use consistent navigation across pages
- Leverage dark mode classes - The layout supports dark mode via Tailwind classes
- Head - Basic meta tags and SEO
- Header - Site navigation header
- OpenGraph - Social media meta tags
