Compare commits
3 Commits
a41b32ec77
...
2efce4ddff
| Author | SHA1 | Date | |
|---|---|---|---|
| 2efce4ddff | |||
| 96bee13c06 | |||
| 599ec9c92f |
@@ -1,5 +1,9 @@
|
|||||||
---
|
---
|
||||||
import { getCollection, render } from 'astro:content';
|
import { getCollection, render } from 'astro:content';
|
||||||
|
import RelatedPosts from "../../components/PostsRelacionados.astro"; // Componente para posts relacionados
|
||||||
|
import Navbar from "../../components/Navbar.astro";
|
||||||
|
import Footer from "../../components/Footer.astro";
|
||||||
|
|
||||||
// 1. Generate a new path for every collection entry
|
// 1. Generate a new path for every collection entry
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const posts = await getCollection('posts');
|
const posts = await getCollection('posts');
|
||||||
@@ -11,6 +15,263 @@ export async function getStaticPaths() {
|
|||||||
// 2. For your template, you can get the entry directly from the prop
|
// 2. For your template, you can get the entry directly from the prop
|
||||||
const { post } = Astro.props;
|
const { post } = Astro.props;
|
||||||
const { Content } = await render(post);
|
const { Content } = await render(post);
|
||||||
|
|
||||||
|
|
||||||
|
const postMD = await import(/* @vite-ignore */ `../../../${post.filePath}`);
|
||||||
|
const headings = postMD.getHeadings();
|
||||||
|
const description = post.data.descripcion;
|
||||||
|
|
||||||
|
|
||||||
|
// URLs para compartir en redes sociales
|
||||||
|
const shareUrl = new URL(Astro.url.pathname, Astro.site).toString();
|
||||||
|
const facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`;
|
||||||
|
const twitterShareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(post.titulo)}`;
|
||||||
|
const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(post.titulo)}`;
|
||||||
|
|
||||||
|
const blogJsonLd = {
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BlogPosting",
|
||||||
|
"headline": post.data.titulo,
|
||||||
|
"image": post.data.imagen && new URL(post.data.imagen, Astro.site),
|
||||||
|
"datePublished": post.data.fecha,
|
||||||
|
"dateModified": post.data.fecha,
|
||||||
|
"author": {
|
||||||
|
"@type": "Person",
|
||||||
|
"name": post.data.autor
|
||||||
|
},
|
||||||
|
"publisher": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Ecobjetivos",
|
||||||
|
"logo": {
|
||||||
|
"@type": "ImageObject",
|
||||||
|
"url": new URL('/logo.png', Astro.site)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"description": description
|
||||||
|
};
|
||||||
---
|
---
|
||||||
<h1>{post.data.titulo}</h1>
|
|
||||||
<Content />
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>{post.data.titulo} - Ecobjetivos</title>
|
||||||
|
<link rel="icon" type="image/png" href="logo.png" />
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
<link rel="canonical" href={new URL(Astro.url.pathname, Astro.site).toString()} />
|
||||||
|
|
||||||
|
<!-- Open Graph / Facebook -->
|
||||||
|
<meta property="og:type" content="article" />
|
||||||
|
<meta property="og:url" content={Astro.url} />
|
||||||
|
<meta property="og:title" content={post.data.titulo} />
|
||||||
|
<meta property="og:description" content={description} />
|
||||||
|
<meta property="og:image" content={post.data.imagen && new URL(post.data.imagen, Astro.site)} />
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
|
<meta property="twitter:url" content={Astro.url} />
|
||||||
|
<meta property="twitter:title" content={post.data.titulo} />
|
||||||
|
<meta property="twitter:description" content={description} />
|
||||||
|
<meta property="twitter:image" content={post.data.imagen && new URL(post.data.imagen, Astro.site)} />
|
||||||
|
|
||||||
|
<!-- Google tag (gtag.js) -->
|
||||||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag() {
|
||||||
|
dataLayer.push(arguments);
|
||||||
|
}
|
||||||
|
gtag("js", new Date());
|
||||||
|
gtag("config", "G-1JT18RF3R4");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Structured Data for Google -->
|
||||||
|
<script type="application/ld+json" set:html={JSON.stringify(blogJsonLd)} />
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: "Arial", sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.post-header {
|
||||||
|
margin-top: 58px;
|
||||||
|
background-color: #4caf50;
|
||||||
|
color: white;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
.post-content {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
.post-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
.post-meta {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin: 0px !important;
|
||||||
|
}
|
||||||
|
blockquote {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-left: 5px solid #4caf50;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.table-of-contents {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
.table-of-contents h4 {
|
||||||
|
color: #2c3e50;
|
||||||
|
border-bottom: 2px solid #4caf50;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.table-of-contents ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.table-of-contents a {
|
||||||
|
color: #495057;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.table-of-contents a:hover {
|
||||||
|
color: #4caf50;
|
||||||
|
background-color: #e8f5e9;
|
||||||
|
padding-left: 0.6rem;
|
||||||
|
}
|
||||||
|
/* Estilos para la indentación visual */
|
||||||
|
.toc-level-2 { padding-left: 1.1rem; }
|
||||||
|
.toc-level-3 { padding-left: 2.1rem; }
|
||||||
|
.toc-level-4 { padding-left: 3.1rem; }
|
||||||
|
.toc-level-5 { padding-left: 4.1rem; }
|
||||||
|
.toc-level-6 { padding-left: 5.1rem; }
|
||||||
|
/* Líneas verticales para la indentación */
|
||||||
|
.toc-level-2,
|
||||||
|
.toc-level-3,
|
||||||
|
.toc-level-4,
|
||||||
|
.toc-level-5,
|
||||||
|
.toc-level-6 {
|
||||||
|
border-left: 2px solid #e9ecef;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
html { scroll-padding-top: 70px; }
|
||||||
|
img { max-width: 100%; height: auto; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Navbar proyectos="/" />
|
||||||
|
|
||||||
|
<header class="post-header">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="display-4">{post.data.titulo}</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container my-5">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<article class="post-content" data-bs-spy="scroll" data-bs-target="#toc" data-bs-offset="70" tabindex="0">
|
||||||
|
<Content />
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<aside class="sticky-top" style="top: 5rem;">
|
||||||
|
<div class="d-none d-lg-block">
|
||||||
|
<!-- Se añade el id "toc" para ser usado por scrollspy -->
|
||||||
|
<div id="toc" class="table-of-contents p-3 mb-4">
|
||||||
|
<h4 class="mb-3 pb-2 fw-bold">Contenido</h4>
|
||||||
|
<ul class="m-0">
|
||||||
|
{headings.map((heading) => (
|
||||||
|
<li class={`mb-2 toc-level-${heading.depth}`}>
|
||||||
|
<a href={`#${heading.slug}`} class="py-1 px-2">
|
||||||
|
{heading.text}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="post-meta">
|
||||||
|
<i class="fas fa-calendar-alt"></i>
|
||||||
|
{new Date(post.data.fecha).toLocaleDateString("es-ES", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
})}
|
||||||
|
|
|
||||||
|
<i class="fas fa-user"></i>
|
||||||
|
{post.data.autor}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Compartir</h5>
|
||||||
|
<a
|
||||||
|
href={facebookShareUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="btn btn-primary me-2"
|
||||||
|
>
|
||||||
|
<i class="fab fa-facebook-f fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href={twitterShareUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="btn btn-info me-2"
|
||||||
|
>
|
||||||
|
<i class="fab fa-twitter fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href={linkedinShareUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="btn btn-secondary"
|
||||||
|
>
|
||||||
|
<i class="fab fa-linkedin-in fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<RelatedPosts currentPost={post.data} />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, p, a {
|
||||||
|
font-family: "Inter Tight", sans-serif !important;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.londrina-sketch-regular {
|
||||||
|
font-family: "Londrina Sketch", sans-serif !important;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -65,7 +65,7 @@ Para abordar el cambio climático, es necesario adoptar un enfoque integral que
|
|||||||
- **Proteger los ecosistemas naturales**: los bosques, los océanos y otros hábitats son esenciales para la absorción de CO₂.
|
- **Proteger los ecosistemas naturales**: los bosques, los océanos y otros hábitats son esenciales para la absorción de CO₂.
|
||||||
- **Promover un consumo responsable**: reducir el desperdicio, reciclar y optar por productos sostenibles y locales.
|
- **Promover un consumo responsable**: reducir el desperdicio, reciclar y optar por productos sostenibles y locales.
|
||||||
|
|
||||||
<ImagenMD alt="acciones por el cambio climatico" src="http://nuestraesfera.cl/wp-content/uploads/2020/04/unnamed.jpg"/>
|
<ImagenMD alt="acciones por el cambio climatico" src="https://i.ibb.co/G3d0jNfK/medidas-cambio-climatico-reduc.jpg"/>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
---
|
---
|
||||||
titulo: 'ODS 13: Acciones Urgentes por el Clima'
|
titulo: 'ODS 13: Acciones Urgentes por el Clima'
|
||||||
layout: '../layouts/PostStyle.astro'
|
|
||||||
autor: 'Lucas Curiel'
|
autor: 'Lucas Curiel'
|
||||||
fecha: '2024-11-26'
|
fecha: '2024-11-26'
|
||||||
descripcion: 'Descubre cómo el ODS 13 aborda la crisis climática a través de la reducción de emisiones, la resiliencia climática y la cooperación internacional. Aprende por qué la educación, la protección de ecosistemas y la adopción de políticas integradas son esenciales para un futuro más seguro. ¡El momento de actuar es ahora!'
|
descripcion: 'Descubre cómo el ODS 13 aborda la crisis climática a través de la reducción de emisiones, la resiliencia climática y la cooperación internacional. Aprende por qué la educación, la protección de ecosistemas y la adopción de políticas integradas son esenciales para un futuro más seguro. ¡El momento de actuar es ahora!'
|
||||||
|
|||||||
Reference in New Issue
Block a user