Se añaden analíticas de google
All checks were successful
Verificar versión, Compilar y Desplegar / check-version (push) Successful in 10s
Verificar versión, Compilar y Desplegar / build (push) Successful in 26s
Verificar versión, Compilar y Desplegar / deploy (push) Successful in 10s

This commit is contained in:
2024-10-29 11:14:12 +01:00
parent a5c7303c23
commit e04942ab0c
4 changed files with 346 additions and 212 deletions

View File

@@ -1,7 +1,7 @@
{ {
"name": "websostenible", "name": "websostenible",
"type": "module", "type": "module",
"version": "0.2.2", "version": "0.2.3",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"devhost": "astro dev --host", "devhost": "astro dev --host",

View File

@@ -1,8 +1,8 @@
--- ---
// src/layouts/PostLayout.astro // src/layouts/PostLayout.astro
import RelatedPosts from '../components/PostsRelacionados.astro'; // Componente para posts relacionados import RelatedPosts from "../components/PostsRelacionados.astro"; // Componente para posts relacionados
import Navbar from '../components/Navbar.astro'; import Navbar from "../components/Navbar.astro";
import Footer from '../components/Footer.astro'; import Footer from "../components/Footer.astro";
const { frontmatter } = Astro.props; const { frontmatter } = Astro.props;
@@ -18,227 +18,322 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
--- ---
<html lang="es"> <html lang="es">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{frontmatter.titulo} - Ecobjetivos</title> <title>{frontmatter.titulo} - Ecobjetivos</title>
<link rel="icon" type="image/png" href="logo.png" /> <link rel="icon" type="image/png" href="logo.png" />
<meta name="description" content={description}> <meta name="description" content={description} />
<link rel="canonical" href={new URL(Astro.url.pathname, Astro.site).toString()}> <link
rel="canonical"
<!-- Open Graph / Facebook --> href={new URL(Astro.url.pathname, Astro.site).toString()}
<meta property="og:type" content="article"> />
<meta property="og:url" content={Astro.url}>
<meta property="og:title" content={frontmatter.titulo}>
<meta property="og:description" content={description}>
<meta property="og:image" content={frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)}>
<!-- Twitter --> <!-- Open Graph / Facebook -->
<meta property="twitter:card" content="summary_large_image"> <meta property="og:type" content="article" />
<meta property="twitter:url" content={Astro.url}> <meta property="og:url" content={Astro.url} />
<meta property="twitter:title" content={frontmatter.titulo}> <meta property="og:title" content={frontmatter.titulo} />
<meta property="twitter:description" content={description}> <meta property="og:description" content={description} />
<meta property="twitter:image" content={frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)}> <meta
property="og:image"
content={frontmatter.imagen &&
new URL(frontmatter.imagen, Astro.site)}
/>
<!-- Structured Data for Google --> <!-- Twitter -->
<script type="application/ld+json"> <meta property="twitter:card" content="summary_large_image" />
{ <meta property="twitter:url" content={Astro.url} />
"@context": "https://schema.org", <meta property="twitter:title" content={frontmatter.titulo} />
"@type": "BlogPosting", <meta property="twitter:description" content={description} />
"headline": "${frontmatter.titulo}", <meta
"image": "${frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)}", property="twitter:image"
"datePublished": "${frontmatter.fecha}", content={frontmatter.imagen &&
"dateModified": "${frontmatter.fecha}", new URL(frontmatter.imagen, Astro.site)}
"author": { />
"@type": "Person",
"name": "${frontmatter.autor}"
},
"publisher": {
"@type": "Organization",
"name": "Ecobjetivos",
"logo": {
"@type": "ImageObject",
"url": "${new URL('/logo.png', Astro.site)}"
}
},
"description": "${description}"
}
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Google tag (gtag.js) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <script
<style> async
body { src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
font-family: 'Arial', sans-serif; ></script>
line-height: 1.6; <script>
color: #333; window.dataLayer = window.dataLayer || [];
} function gtag() {
.post-header { dataLayer.push(arguments);
margin-top: 60px; }
background-color: #4CAF50; gtag("js", new Date());
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 { gtag("config", "G-1JT18RF3R4");
color: #2c3e50; </script>
border-bottom: 2px solid #4CAF50;
font-size: 1.2rem;
}
.table-of-contents ul { <!-- Structured Data for Google -->
list-style-type: none; <script type="application/ld+json">
padding-left: 0; {
} "@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "${frontmatter.titulo}",
"image": "${frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)}",
"datePublished": "${frontmatter.fecha}",
"dateModified": "${frontmatter.fecha}",
"author": {
"@type": "Person",
"name": "${frontmatter.autor}"
},
"publisher": {
"@type": "Organization",
"name": "Ecobjetivos",
"logo": {
"@type": "ImageObject",
"url": "${new URL('/logo.png', Astro.site)}"
}
},
"description": "${description}"
}
</script>
.table-of-contents a { <link
color: #495057; href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
text-decoration: none; rel="stylesheet"
display: block; />
border-radius: 5px; <link
transition: all 0.2s ease; href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
font-size: 0.9rem; rel="stylesheet"
position: relative; />
} <style>
body {
font-family: "Arial", sans-serif;
line-height: 1.6;
color: #333;
}
.post-header {
margin-top: 60px;
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 a:hover { .table-of-contents h4 {
color: #4CAF50; color: #2c3e50;
background-color: #e8f5e9; border-bottom: 2px solid #4caf50;
padding-left: 0.6rem; font-size: 1.2rem;
} }
/* Estilos para la indentación visual */ .table-of-contents ul {
.toc-level-2 { padding-left: 1.1rem; } list-style-type: none;
.toc-level-3 { padding-left: 2.1rem; } padding-left: 0;
.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 */ .table-of-contents a {
.toc-level-2, .toc-level-3, .toc-level-4, .toc-level-5, .toc-level-6 { color: #495057;
border-left: 2px solid #e9ecef; text-decoration: none;
margin-left: 0.5rem; display: block;
} border-radius: 5px;
html { transition: all 0.2s ease;
scroll-padding-top: 70px; /* Ajusta este valor según la altura de tu navbar */ font-size: 0.9rem;
} position: relative;
img { }
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<Navbar proyectos="/" />
<header class="post-header"> .table-of-contents a:hover {
<div class="container"> color: #4caf50;
<h1 class="display-4">{frontmatter.titulo}</h1> background-color: #e8f5e9;
</div> padding-left: 0.6rem;
</header> }
<main class="container my-5"> /* Estilos para la indentación visual */
<div class="row"> .toc-level-2 {
<div class="col-lg-8"> padding-left: 1.1rem;
<article class="post-content"> }
<slot /> .toc-level-3 {
</article> 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; /* Ajusta este valor según la altura de tu navbar */
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<Navbar proyectos="/" />
<header class="post-header">
<div class="container">
<h1 class="display-4">{frontmatter.titulo}</h1>
</div> </div>
<div class="col-lg-4"> </header>
<aside class="sticky-top" style="top: 2rem;">
<div class="d-none d-lg-block"> <main class="container my-5">
<div class="table-of-contents p-3 mb-4"> <div class="row">
<h4 class="mb-3 pb-2 fw-bold">Contenido</h4> <div class="col-lg-8">
<ul class="m-0"> <article class="post-content">
{headings.map(heading => ( <slot />
<li class={`mb-2 toc-level-${heading.depth}`}> </article>
<a href={`#${heading.slug}`} class="py-1 px-2"> </div>
{heading.text} <div class="col-lg-4">
</a> <aside class="sticky-top" style="top: 2rem;">
</li> <div class="d-none d-lg-block">
))} <div class="table-of-contents p-3 mb-4">
</ul> <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>
</div> <div class="card mb-4">
<div class="card mb-4"> <div class="card-body">
<div class="card-body"> <p class="post-meta">
<p class="post-meta"> <i class="fas fa-calendar-alt"></i>
<i class="fas fa-calendar-alt"></i> {new Date(frontmatter.fecha).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'})} {
&nbsp;|&nbsp; new Date(
<i class="fas fa-user"></i> {frontmatter.autor} frontmatter.fecha,
{frontmatter.lastModified && ( ).toLocaleDateString("es-ES", {
<>&nbsp;|&nbsp; year: "numeric",
<i class="fas fa-edit"></i> Última actualización: {new Date(frontmatter.lastModified).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'})}</> month: "long",
)} day: "numeric",
</p> })
}
&nbsp;|&nbsp;
<i class="fas fa-user"></i>
{frontmatter.autor}
{
frontmatter.lastModified && (
<>
&nbsp;|&nbsp;
<i class="fas fa-edit" /> Última
actualización:{" "}
{new Date(
frontmatter.lastModified,
).toLocaleDateString("es-ES", {
year: "numeric",
month: "long",
day: "numeric",
})}
</>
)
}
</p>
</div>
</div> </div>
</div> <div class="card">
<div class="card"> <div class="card-body">
<div class="card-body"> <h5 class="card-title">Compartir</h5>
<h5 class="card-title">Compartir</h5> <a
<a href={facebookShareUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary me-2"><i class="fab fa-facebook-f fa-fw"></i></a> href={facebookShareUrl}
<a href={twitterShareUrl} target="_blank" rel="noopener noreferrer" class="btn btn-info me-2"><i class="fab fa-twitter fa-fw"></i></a> target="_blank"
<a href={linkedinShareUrl} target="_blank" rel="noopener noreferrer" class="btn btn-secondary"><i class="fab fa-linkedin-in fa-fw"></i></a> 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> </div>
</div> </aside>
</aside> </div>
</div> </div>
</div>
<RelatedPosts currentPost={frontmatter} /> <RelatedPosts currentPost={frontmatter} />
</main> </main>
<Footer/> <Footer />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <script
</body> src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html> </html>
<style is:global> <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=Inter+Tight:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6, h6,
p, p,
a { a {
font-family: "Inter Tight", sans-serif !important; font-family: "Inter Tight", sans-serif !important;
font-optical-sizing: auto; font-optical-sizing: auto;
font-weight: 400 !important; font-weight: 400 !important;
font-style: normal; font-style: normal;
} }
.londrina-sketch-regular { .londrina-sketch-regular {
font-family: "Londrina Sketch", sans-serif !important; font-family: "Londrina Sketch", sans-serif !important;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
</style> </style>

View File

@@ -29,6 +29,20 @@ const animateOnScroll = `
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<link rel="sitemap" href="/sitemap-index.xml" /> <link rel="sitemap" href="/sitemap-index.xml" />
<!-- 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>
<meta <meta
name="description" name="description"
content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible." content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible."

View File

@@ -6,18 +6,43 @@ import ListadoPosts from "../layouts/ListadoPosts.astro";
<html lang="es"> <html lang="es">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<link rel="icon" type="image/png" href="logo.png" /> <link rel="icon" type="image/png" href="logo.png" />
<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
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/> 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"
/>
<!-- 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>
<title>Ecobjetivos | Posts</title> <title>Ecobjetivos | Posts</title>
</head> </head>
<body> <body>
<main> <main>
<Navbar/> <Navbar />
<ListadoPosts/> <ListadoPosts />
</main> </main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</body> </body>
</html> </html>