This commit is contained in:
2024-11-13 23:04:06 +01:00
12 changed files with 736 additions and 562 deletions

923
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,7 +1,7 @@
{
"name": "websostenible",
"type": "module",
"version": "0.3.0",
"version": "0.3.4",
"scripts": {
"dev": "astro dev",
"devhost": "astro dev --host",
@@ -11,8 +11,8 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/mdx": "^3.1.8",
"@astrojs/mdx": "^3.1.9",
"@astrojs/sitemap": "^3.2.1",
"astro": "^4.16.3"
"astro": "^4.16.10"
}
}

View File

@@ -1,28 +1,69 @@
---
const { currentPost } = Astro.props;
// Aquí deberías implementar la lógica para obtener posts relacionados
// Por ejemplo, basándote en categorías, tags, o algún otro criterio
const relatedPosts = [{ title: "Prueba", excerpt: "Prueba", url: "Prueba" }];
const posts = await Astro.glob('../pages/posts/*.mdx');
const relatedPosts = posts.filter(post =>
currentPost.relacionados?.includes(post.file.split('/').pop().replace('.mdx', ''))
).map(post => ({
title: post.frontmatter.titulo,
excerpt: post.frontmatter.descripcion,
url: post.url,
imagen: post.frontmatter.imagen
}));
---
<section class="related-posts mt-5">
<h2>Posts Relacionados</h2>
<div class="row">
<section class="related-posts mt-5 col-lg-8">
<h4 class="mb-3">Posts Relacionados</h4>
<ul class="list-group">
{
relatedPosts.map((post) => (
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">{post.title}</h5>
<p class="card-text">{post.excerpt}</p>
<a href={post.url} class="btn btn-primary">
Leer más
</a>
<li class="list-group-item list-group-item-action">
<a href={post.url} class="text-decoration-none">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img
src={post.imagen}
alt={post.title}
class="related-post-img"
/>
</div>
<div class="flex-grow-1 ms-3">
<h6 class="mb-1">{post.title}</h6>
<small class="text-muted excerpt-text">{post.excerpt}</small>
</div>
<div class="ms-auto">
<i class="fas fa-chevron-right text-muted"></i>
</div>
</div>
</div>
</div>
</a>
</li>
))
}
</div>
</ul>
</section>
<style>
.related-post-img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 4px;
}
.list-group-item {
transition: background-color 0.2s;
}
.list-group-item:hover {
background-color: #f8f9fa;
}
.excerpt-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
</style>

View File

@@ -255,13 +255,13 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
<i class="fas fa-user"></i>
{frontmatter.autor}
{
frontmatter.lastModified && (
frontmatter.fecha && (
<>
&nbsp;|&nbsp;
<i class="fas fa-edit" /> Última
actualización:{" "}
{new Date(
frontmatter.lastModified,
frontmatter.fecha,
).toLocaleDateString("es-ES", {
year: "numeric",
month: "long",

View File

@@ -31,6 +31,7 @@ const animateOnScroll = `
<link rel="sitemap" href="/sitemap-index.xml" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"></script>
<meta name="google-site-verification" content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk" />
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
@@ -116,7 +117,7 @@ const animateOnScroll = `
<div class="row justify-content-center text-center">
{
[
{ number: "100+", description: "Personas a las que hemos concienciado." },
{ number: "500+", description: "Personas a las que hemos concienciado." },
{ number: "5+", description: "Proyectos creados para fomentar la sostenibilidad." }
].map((impact, index) => (
<div class="col-md-3 mb-4 animate-on-scroll">

View File

@@ -5,21 +5,21 @@ import Footer from "../components/Footer.astro";
// Lista ampliada de mensajes sobre sostenibilidad
const mensajes = [
"¡Únete al cambio! 🌍 Cada acción cuenta para un futuro sostenible.",
"La sostenibilidad comienza contigo. Comparte y actúa hoy. 🌱",
"Pequeños pasos, grandes cambios. Contribuye a un mundo mejor. 🌿",
"La Tierra es nuestro hogar. Protejámosla juntos. 🌎",
"Actúa localmente, impacta globalmente. Sé parte del cambio. 🌐",
"Cada gota cuenta. Conserva el agua y protege el futuro. 💧",
"La energía renovable es el camino hacia un mañana más limpio. ⚡",
"Reciclar es más que una acción, es un compromiso. ♻️",
"El cambio climático es real. Actúa ahora, no mañana. 🌡️",
"La biodiversidad es vida. Presérvala. 🐾",
"Compra local, apoya a tu comunidad y reduce tu huella de carbono. 🛒",
"La educación es clave para un desarrollo sostenible. 📚",
"La naturaleza no necesita a las personas, las personas necesitan a la naturaleza. 🌳",
"Invierte en nuestro planeta. Es el único hogar que tenemos. 🏡",
"El futuro es verde. Haz tu parte para que así sea. 🌿"
"¿Sabías que cada pequeña acción cuenta? ¡Juntos podemos crear un futuro más verde! 🌍",
"Hoy es el día perfecto para empezar a cuidar nuestro planeta 🌱",
"Tu granito de arena marca la diferencia. ¿Te animas a ser parte del cambio? 🌿",
"Nuestro planeta nos necesita más que nunca. ¿Qué harás hoy por él? 🌎",
"¡Genial! Actuando localmente creamos impacto global 🌐",
"El agua es vida. ¿Cómo la proteges tú? 💧",
"Imagina un futuro con energía limpia. ¡Está más cerca de lo que crees! ⚡",
"El reciclaje es como una cadena: cada eslabón importa ♻️",
"El planeta no puede esperar. ¿Nos ayudas a protegerlo? 🌡️",
"Cada especie cuenta. ¿Qué tal si hoy aprendemos más sobre biodiversidad? 🐾",
"Apoyar lo local es apoyar nuestro futuro. ¿Te unes? 🛒",
"Compartir conocimiento es multiplicar el impacto. ¡Cuéntanos tus ideas! 📚",
"La naturaleza nos habla. ¿Estamos escuchando? 🌳",
"Este es nuestro único hogar. ¿Cómo lo cuidas tú? 🏡",
"¡Construyamos juntos un futuro s verde! ¿Te apuntas? 🌿",
];
// Función para obtener un mensaje aleatorio
@@ -33,82 +33,189 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
---
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Participa Ahora | Ecobjetivos</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.container {
flex: 1;
padding-top: 60px; /* Ajusta el padding superior para separar del navbar */
}
footer {
margin-top: auto;
}
</style>
</head>
<body>
<Navbar />
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Participa Ahora | Ecobjetivos</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
rel="stylesheet"
/>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.container {
flex: 1;
padding-top: 60px; /* Ajusta el padding superior para separar del navbar */
}
footer {
margin-top: auto;
}
</style>
</head>
<body>
<Navbar />
<div class="container py-5">
<h1 class="text-center mb-4 mt-4">¡Participa Ahora!</h1>
<p class="lead text-center mb-5">Descubre cómo puedes contribuir a un futuro sostenible y comparte el mensaje.</p>
<div class="container py-5">
<h1 class="text-center mb-4 mt-4">¡Participa Ahora!</h1>
<p class="lead text-center mb-5">
Descubre cómo puedes contribuir a un futuro sostenible y comparte el
mensaje.
</p>
<div class="text-center mb-4">
<blockquote class="blockquote">
<p id="mensaje" class="mb-0">{mensajeActual}</p>
</blockquote>
<button class="btn btn-primary mt-3" id="nuevoMensaje">
Obtener otro mensaje
</button>
<div class="text-center mb-4">
<blockquote class="blockquote">
<p id="mensaje" class="mb-0">{mensajeActual}</p>
</blockquote>
<button class="btn btn-primary mt-3" id="nuevoMensaje">
Obtener otro mensaje
</button>
</div>
<div class="text-center">
<h3>Comparte en tus redes sociales:</h3>
<a href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(mensajeActual + " " + urlSitio)}`} target="_blank" class="btn btn-info m-2">
<i class="fab fa-twitter"></i> Twitter
</a>
<button class="btn btn-primary m-2" data-bs-toggle="modal" data-bs-target="#facebookModal">
<i class="fab fa-facebook"></i> Facebook
</button>
<button class="btn btn-secondary m-2" data-bs-toggle="modal" data-bs-target="#linkedinModal">
<i class="fab fa-linkedin"></i> LinkedIn
</button>
</div>
</div>
<Footer />
<!-- Modal Facebook -->
<div class="modal fade" id="facebookModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Compartir en Facebook</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Copia este mensaje para compartirlo:</p>
<div class="input-group mb-3">
<input type="text" class="form-control" id="textoFacebook" readonly>
<button class="btn btn-primary" type="button" id="copiarFacebook">Copiar</button>
</div>
</div>
<div class="modal-footer">
<a href={`https://www.facebook.com/share.php?u=${encodeURIComponent(urlSitio)}&t=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-primary">Ir a Facebook</a>
</div>
</div>
</div>
</div>
<div class="text-center">
<h3>Comparte en tus redes sociales:</h3>
<a href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(mensajeActual + " " + urlSitio)}`} target="_blank" class="btn btn-info m-2">
<i class="fab fa-twitter"></i> Twitter
</a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=${urlSitio}&quote=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-primary m-2">
<i class="fab fa-facebook"></i> Facebook
</a>
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=${urlSitio}&title=Ecobjetivos&summary=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-secondary m-2">
<i class="fab fa-linkedin"></i> LinkedIn
</a>
<!-- Modal LinkedIn -->
<div class="modal fade" id="linkedinModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Compartir en LinkedIn</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Copia este mensaje para compartirlo:</p>
<div class="input-group mb-3">
<input type="text" class="form-control" id="textoLinkedin" readonly>
<button class="btn btn-primary" type="button" id="copiarLinkedin">Copiar</button>
</div>
</div>
<div class="modal-footer">
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(urlSitio)}&title=Sostenibilidad&summary=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-primary">Ir a LinkedIn</a>
</div>
</div>
</div>
</div>
</div>
<Footer />
<script>
document.getElementById('nuevoMensaje').addEventListener('click', () => {
<script>
const mensajes = [
"¡Únete al cambio! 🌍 Cada acción cuenta para un futuro sostenible.",
"La sostenibilidad comienza contigo. Comparte y actúa hoy. 🌱",
"Pequeños pasos, grandes cambios. Contribuye a un mundo mejor. 🌿",
"La Tierra es nuestro hogar. Protejámosla juntos. 🌎",
"Actúa localmente, impacta globalmente. Sé parte del cambio. 🌐",
"Cada gota cuenta. Conserva el agua y protege el futuro. 💧",
"La energía renovable es el camino hacia un mañana más limpio. ⚡",
"Reciclar es más que una acción, es un compromiso. ♻️",
"El cambio climático es real. Actúa ahora, no mañana. 🌡️",
"La biodiversidad es vida. Presérvala. 🐾",
"Compra local, apoya a tu comunidad y reduce tu huella de carbono. 🛒",
"La educación es clave para un desarrollo sostenible. 📚",
"La naturaleza no necesita a las personas, las personas necesitan a la naturaleza. 🌳",
"Invierte en nuestro planeta. Es el único hogar que tenemos. 🏡",
"El futuro es verde. Haz tu parte para que así sea. 🌿"
"¿Sabías que cada pequeña acción cuenta? ¡Juntos podemos crear un futuro más verde! 🌍",
"Hoy es el día perfecto para empezar a cuidar nuestro planeta 🌱",
"Tu granito de arena marca la diferencia. ¿Te animas a ser parte del cambio? 🌿",
"Nuestro planeta nos necesita más que nunca. ¿Qué harás hoy por él? 🌎",
"¡Genial! Actuando localmente creamos impacto global 🌐",
"El agua es vida. ¿Cómo la proteges tú? 💧",
"Imagina un futuro con energía limpia. ¡Está más cerca de lo que crees! ⚡",
"El reciclaje es como una cadena: cada eslabón importa ♻️",
"El planeta no puede esperar. ¿Nos ayudas a protegerlo? 🌡️",
"Cada especie cuenta. ¿Qué tal si hoy aprendemos más sobre biodiversidad? 🐾",
"Apoyar lo local es apoyar nuestro futuro. ¿Te unes? 🛒",
"Compartir conocimiento es multiplicar el impacto. ¡Cuéntanos tus ideas! 📚",
"La naturaleza nos habla. ¿Estamos escuchando? 🌳",
"Este es nuestro único hogar. ¿Cómo lo cuidas tú? 🏡",
"¡Construyamos juntos un futuro s verde! ¿Te apuntas? 🌿",
];
const mensajeActual = mensajes[Math.floor(Math.random() * mensajes.length)];
document.getElementById('mensaje').textContent = mensajeActual;
});
</script>
</body>
function copiarAlPortapapeles(texto, botonId) {
navigator.clipboard.writeText(texto).then(() => {
const boton = document.getElementById(botonId);
if (boton) {
boton.textContent = '¡Copiado!';
setTimeout(() => {
boton.textContent = 'Copiar';
}, 2000);
}
});
}
// Inicialización al cargar la página
document.addEventListener('DOMContentLoaded', () => {
const mensajeActual = document.getElementById('mensaje')?.textContent || '';
const textoFacebookElement = document.getElementById('textoFacebook');
const textoLinkedinElement = document.getElementById('textoLinkedin');
if (textoFacebookElement) {
textoFacebookElement.value = mensajeActual;
}
if (textoLinkedinElement) {
textoLinkedinElement.value = mensajeActual;
}
});
document.getElementById('nuevoMensaje')?.addEventListener('click', () => {
const mensajeActual = mensajes[Math.floor(Math.random() * mensajes.length)];
const mensajeElement = document.getElementById('mensaje');
const textoFacebookElement = document.getElementById('textoFacebook');
const textoLinkedinElement = document.getElementById('textoLinkedin');
if (mensajeElement) {
mensajeElement.textContent = mensajeActual;
}
if (textoFacebookElement) {
textoFacebookElement.value = mensajeActual;
}
if (textoLinkedinElement) {
textoLinkedinElement.value = mensajeActual;
}
});
document.getElementById('copiarFacebook')?.addEventListener('click', () => {
const textoFacebook = document.getElementById('textoFacebook');
if (textoFacebook) {
copiarAlPortapapeles(textoFacebook.value, 'copiarFacebook');
}
});
document.getElementById('copiarLinkedin')?.addEventListener('click', () => {
const textoLinkedin = document.getElementById('textoLinkedin');
if (textoLinkedin) {
copiarAlPortapapeles(textoLinkedin.value, 'copiarLinkedin');
}
});
</script>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

View File

@@ -27,7 +27,7 @@ Este aspecto busca que todas las personas, sin importar su género, edad, raza,
### 3. Políticas y Normativas Inclusivas
Es fundamental que los países adopten y mantengan políticas justas que promuevan la igualdad y no favorezcan a unos pocos. Esto incluye leyes que defiendan los derechos de los grupos más vulnerables y que aseguren que todos tengan acceso a los recursos y oportunidades necesarios para prosperar.
<ImagenMD alt="politicas inclusivas" src="https://www.acnur.org/sites/default/files/legacy-images/631773434.jpg"/>
<ImagenMD alt="politicas inclusivas" src="https://i.ibb.co/CWNx3VY/image.png"/>
### 4. Regulación de los Mercados Financieros
Mejorar la regulación de los bancos y las instituciones financieras es crucial para evitar crisis que afectan principalmente a los sectores más vulnerables. Una regulación adecuada protege a las personas y reduce el impacto negativo de las crisis económicas en quienes más lo necesitan.

View File

@@ -42,7 +42,7 @@ La educación y la concienciación sobre el cambio climático y las prácticas s
El ODS 13 impulsa la colaboración global y la movilización de recursos financieros para que los países en desarrollo implementen acciones de mitigación y adaptación. Esto es crucial para cumplir con acuerdos internacionales como el Acuerdo de París.
### 6. Políticas Integradas
<ImagenMD alt="reunion politica" src="https://www.cancilleria.gov.co/sites/default/files/fotos/SEP/canciller_participo_en_la_reunion_consejo_nacional_de_politica_economica_y_social_encabezado_por_el_presidente.jpg"/>
<ImagenMD alt="reunion politica" src="https://i.ibb.co/FgPZ3wj/image.png"/>
Es importante incluir medidas climáticas en las políticas nacionales y locales, con un enfoque en la sostenibilidad y la planificación a largo plazo. Solo un enfoque coordinado y bien planificado puede lograr un impacto real en la lucha contra el cambio climático.

View File

@@ -6,6 +6,7 @@ fecha: '10/29/24'
descripcion: 'Este objetivo busca erradicar la pobreza extrema garantizando acceso a recursos básicos, oportunidades económicas y una vida digna para todos. Descubre en detalle el ODS 1 en el siguiente post:'
imagen: 'https://upload.wikimedia.org/wikipedia/commons/f/f1/Sustainable_Development_Goal-es-17.jpg'
hashtags: ['ODS1', 'Erradicación de la Pobreza', 'Desarrollo Sostenible', 'Igualdad de Derechos', 'Protección Social']
relacionados: ['ODS2', 'ODS10', 'ODS8', 'ODS3']
---
import ImagenMD from "../../components/ImagenMD.astro"

View File

@@ -6,6 +6,7 @@ fecha: '10/29/24'
descripcion: 'Este objetivo busca erradicar la pobreza extrema garantizando acceso a recursos básicos, oportunidades económicas y una vida digna para todos. Descubre en detalle el ODS 2 en el siguiente post:'
imagen: 'https://upload.wikimedia.org/wikipedia/commons/8/80/Sustainable_Development_Goal-es-16.jpg'
hashtags: ['Hambre Cero', 'Seguridad Alimentaria', 'Nutricion', 'Agricultura Sostenible']
relacionados: []
---
import ImagenMD from "../../components/ImagenMD.astro"

View File

@@ -5,6 +5,7 @@ autor: 'José Antonio Marín'
fecha: '10/29/24'
descripcion: 'Este objetivo busca mejorar la salud y la calidad de vida general de todos los seres humanos, involucrando una serie de políticas y de acciones tanto gubernamentales y civiles para lograr dicho objetivo. Descubre qué implica exactamente en este artículo:'
imagen: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Sustainable_Development_Goal-es-15.jpg/1024px-Sustainable_Development_Goal-es-15.jpg'
relacionados: []
---
import ImagenMD from "../../components/ImagenMD.astro"

View File

@@ -5,6 +5,7 @@ autor: 'José Antonio Marín'
fecha: '10/29/24'
descripcion: 'Este objetivo busca garantizar una educación inclusiva, equitativa y de calidad para todos los los ciudadanos del mundo a lo largo de sus vidas. Descubre qué es lo que implica en este post:'
imagen: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Sustainable_Development_Goal-es-14.jpg/480px-Sustainable_Development_Goal-es-14.jpg'
relacionados: []
---
import ImagenMD from "../../components/ImagenMD.astro"