Content Management - Proyecto Renacer

Overview

Proyecto Renacer uses Astro’s file-based routing system for pages and a centralized data management approach through TypeScript modules. This guide covers how to update existing content, manage application state, add new pages, and handle SEO.

Project Structure

src/
├── assets/          # Static assets (images, icons)
├── components/      # Reusable Astro components
├── data/           # Application state and data
│   └── state.ts    # Central state management
├── layouts/        # Page layouts
│   └── Layout.astro
├── pages/          # File-based routing
│   ├── index.astro
│   ├── proyecto.astro
│   ├── requisitos.astro
│   ├── como-ser-socio.astro
│   ├── noticias.astro
│   └── contacto.astro
└── styles/
    └── global.css

Managing State Data

State Management File

The project uses a centralized state file for dynamic data that changes over time:

src/data/state.ts

export const socios = {
  maximo: 64,
  actual: 32,
  porcentaje: () => Math.round((socios.actual / socios.maximo) * 100),
}

Using State in Pages

Import and use the state data in any page or component:

src/pages/index.astro

---
import { socios } from "../data/state";
---

<p class="text-sm font-medium text-slate-500">
  Más de {socios.actual} familias ya son parte de este sueño.
</p>

When to Update: The state.ts file should be updated whenever the number of partners (socios) changes or other dynamic project metrics need to be reflected across the site.

Extending State

To add more state variables, simply export new objects or values:

src/data/state.ts

export const socios = {
  maximo: 64,
  actual: 32,
  porcentaje: () => Math.round((socios.actual / socios.maximo) * 100),
}

// Add new state data
export const proyecto = {
  añosActivo: 4,
  ubicacion: "Chaupi San Luis, Ambato",
  hectareas: 5.2,
}

export const contacto = {
  whatsapp: "+593999730617",
  email: "info@proyectorenacer.com",
}

Updating Page Content

Page Structure

Each page follows this basic structure:

Example Page Structure

---
// 1. Imports
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
import Button from "../components/Button.astro";
import Footer from "../components/Footer.astro";
import { socios } from "../data/state";

// 2. Page metadata
const title = "Page Title | Proyecto Renacer";
const description = "Page description for SEO";
---

<!-- 3. Template -->
<Layout title={title} description={description}>
  <Header />
  
  <!-- Your content here -->
  
  <Footer />
</Layout>

Editing Text Content

To update text content, simply edit the HTML/template section of the Astro file:

Before
After

src/pages/index.astro

<h1 class="text-4xl md:text-6xl font-black">
  Tu casa propia en Ambato
  <span class="text-primary">empieza aquí</span>
</h1>

src/pages/index.astro

<h1 class="text-4xl md:text-6xl font-black">
  Construye tu futuro en Ambato
  <span class="text-primary">con Renacer</span>
</h1>

Updating Lists and Cards

Example of updating the requirements section:

src/pages/index.astro

<ul class="space-y-6 py-6">
  <li class="flex items-start gap-4">
    <span class="material-symbols-outlined text-secondary bg-secondary/10 p-1 rounded-full">
      check
    </span>
    <span class="text-lg font-medium">
      Personas que NO poseen vivienda propia en Ecuador.
    </span>
  </li>
  <li class="flex items-start gap-4">
    <span class="material-symbols-outlined text-secondary bg-secondary/10 p-1 rounded-full">
      check
    </span>
    <span class="text-lg font-medium">
      Residentes actuales en Ambato bajo modalidad de arriendo.
    </span>
  </li>
  <!-- Add more items as needed -->
</ul>

Adding New Pages

Step 1: Create the Page File

Create a new .astro file in src/pages/. The filename determines the URL:

src/pages/beneficios.astro → /beneficios
src/pages/preguntas-frecuentes.astro → /preguntas-frecuentes

Step 2: Page Template

Use this template for new pages:

src/pages/nueva-pagina.astro

---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";

const title = "Nueva Página | Proyecto Renacer";
const description = "Descripción de la nueva página para SEO";
const OGTitle = "Nueva Página - Proyecto de Vivienda Social Renacer";
const OGDescription = "Descripción específica para compartir en redes sociales";
---

<Layout 
  title={title} 
  description={description}
  OGTitle={OGTitle}
  OGDescription={OGDescription}
>
  <Header />
  
  <div class="relative flex min-h-screen w-full flex-col overflow-x-hidden">
    <main class="flex-1">
      <section class="px-4 md:px-20 lg:px-40 py-12 md:py-20">
        <h1 class="text-4xl md:text-6xl font-black mb-6">
          Título de la Página
        </h1>
        
        <p class="text-lg text-slate-600 dark:text-slate-300 max-w-xl">
          Contenido de la página...
        </p>
      </section>
    </main>
  </div>
  
  <Footer />
</Layout>

Update the navigation component to include the new page:

src/components/Navigation.astro

<NavItem href="/proyecto">Proyecto</NavItem>
<NavItem href="/requisitos">Requisitos</NavItem>
<NavItem href="/como-ser-socio">Cómo ser socio</NavItem>
<NavItem href="/nueva-pagina">Nueva Página</NavItem>
<NavItem href="/contacto">Contacto</NavItem>

Content Organization

Available Pages

Current pages in the project:

index.astro

Homepage with hero, project overview, timeline, and CTA sections

proyecto.astro

Detailed information about the Renacer project

requisitos.astro

Requirements to become a partner

como-ser-socio.astro

Step-by-step guide to join the project

noticias.astro

News and updates about the project

contacto.astro

Contact information and form

landing.astro

Alternative landing page

design-system.astro

Design system showcase and component library

Reusable Components

The project includes several reusable components in src/components/:

// Layout Components
Layout.astro       // Main layout wrapper
Header.astro       // Site header with navigation
Footer.astro       // Site footer
Navigation.astro   // Navigation menu
NavItem.astro      // Individual nav items

// Content Components
CardLg.astro       // Large card component
CardMd.astro       // Medium card component
CardSm.astro       // Small card component
Button.astro       // Button with variants
ButtonTransparent.astro  // Transparent button variant

// SEO Components
Head.astro         // Meta tags and SEO
OpenGraph.astro    // Open Graph tags for social sharing

// Utility Components
Welcome.astro      // Welcome banner
Inprogress.astro   // In-progress indicator

SEO and Meta Tags

Page-Level SEO

Each page should define its own title and description:

src/pages/index.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 y desean obtener su primer terreno. Conoce requisitos y cómo ser socio.";
---

<Layout title={title} description={description}>
  <!-- Page content -->
</Layout>

Layout Meta Tags

The Layout.astro component handles basic meta tags:

src/layouts/Layout.astro

---
const { title, description, image, OGTitle, OGDescription, OGImage } = Astro.props;
---

<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <meta name="robots" content="index,follow" />
    
    <Head />
    
    <OpenGraph
      OGTitle={OGTitle ?? title}
      OGDescription={OGDescription ?? description}
      OGImage={OGImage ?? image}
    />
  </head>
  <!-- ... -->
</html>

Global SEO Settings

Global SEO settings are in src/components/Head.astro:

src/components/Head.astro

<meta name="author" content="Deerhou" />
<meta name="application-name" content="Proyecto de vivienda Renacer" />
<meta name="generator" content="Astro" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

<!-- SEO Básico -->
<meta name="keywords" content="vivienda social Ambato, terrenos en Ambato, proyecto de vivienda Ambato, MIDUVI Ambato, obtener terreno Ambato, comité de vivienda Ambato">
<meta name="language" content="Spanish">
<meta name="geo.region" content="EC-T">
<meta name="geo.placename" content="Ambato">

<link rel="canonical" href="https://proyectoviviendarenacer.netlify.app/">
<meta property="og:locale" content="es_EC">
<meta name="theme-color" content="#2E7D32">

Open Graph Tags

Open Graph tags for social media sharing are in src/components/OpenGraph.astro:

src/components/OpenGraph.astro

---
let {
  OGTitle = "Proyecto de Vivienda Social Renacer | Terrenos en Ambato",
  OGDescription = "¿No tienes casa propia en Ambato? Conoce el proyecto de vivienda social Renacer y descubre cómo obtener tu primer terreno.",
  OGImage = "https://proyectoviviendarenacer.netlify.app/img/mockImg.webp",
} = Astro.props;
---

<!-- Facebook Meta Tags -->
<meta property="og:title" content={OGTitle}>
<meta property="og:description" content={OGDescription}>
<meta property="og:type" content="website">
<meta property="og:url" content="https://proyectoviviendarenacer.netlify.app">
<meta property="og:image" content={OGImage}>
<meta property="og:locale" content="es_EC">
<meta property="og:site_name" content="Proyecto de Vivienda Social Renacer">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content={OGTitle}>
<meta name="twitter:description" content={OGDescription}>
<meta name="twitter:image" content={OGImage}>

Custom Open Graph Per Page

You can customize Open Graph tags for specific pages:

Example

---
const title = "Requisitos | Proyecto Renacer";
const description = "Conoce los requisitos necesarios...";
const OGTitle = "Requisitos para ser socio del Proyecto Renacer";
const OGDescription = "Descubre si calificas para obtener tu terreno en Ambato";
const OGImage = "https://proyectoviviendarenacer.netlify.app/img/requisitos-social.jpg";
---

<Layout 
  title={title} 
  description={description}
  OGTitle={OGTitle}
  OGDescription={OGDescription}
  OGImage={OGImage}
>

Best Practices

Keep State Centralized

Store all dynamic data in src/data/state.ts for easy updates and consistency across the site.

Use Descriptive Filenames

Page filenames should be descriptive and use kebab-case (e.g., como-ser-socio.astro, not page1.astro).

Maintain SEO Standards

Keep titles under 60 characters
Keep descriptions between 150-160 characters
Always provide unique titles and descriptions for each page
Use relevant keywords naturally

Component Reusability

Before creating new components, check if existing ones can be adapted. Use props to make components flexible.

Content Consistency

Maintain consistent tone, voice, and terminology across all pages. The project focuses on warmth, community, and hope.

Quick Reference

Common Tasks

Update partner count

Edit src/data/state.ts and change the actual value

Change homepage hero text

Edit src/pages/index.astro and modify the <h1> element

Add a new requirement

Edit the requirements page and add a new <li> element to the list

Update contact information

Search for phone numbers and emails across components and update as needed

Next Steps

Styling Guide

Learn how to style your content

Deployment

Deploy your changes to production

Astro Pages

Official Astro pages documentation

Components

Explore available components

​Overview

​Project Structure

​Managing State Data

​State Management File

​Using State in Pages

​Extending State

​Updating Page Content

​Page Structure

​Editing Text Content

​Updating Lists and Cards

​Adding New Pages

​Step 1: Create the Page File

​Step 2: Page Template

​Step 3: Add to Navigation

​Content Organization

​Available Pages

index.astro

proyecto.astro

requisitos.astro

como-ser-socio.astro

noticias.astro

contacto.astro

landing.astro

design-system.astro

​Reusable Components

​SEO and Meta Tags

​Page-Level SEO

​Layout Meta Tags

​Global SEO Settings

​Open Graph Tags

​Custom Open Graph Per Page

​Best Practices

​Quick Reference

​Common Tasks

​Next Steps

Styling Guide

Deployment

Astro Pages

Components

Overview

Project Structure

Managing State Data

State Management File

Using State in Pages

Extending State

Updating Page Content

Page Structure

Editing Text Content

Updating Lists and Cards

Adding New Pages

Step 1: Create the Page File

Step 2: Page Template

Step 3: Add to Navigation

Content Organization

Available Pages

Reusable Components

SEO and Meta Tags

Page-Level SEO

Layout Meta Tags

Global SEO Settings

Open Graph Tags

Custom Open Graph Per Page

Best Practices

Quick Reference

Common Tasks

Next Steps