h4ckx0r/webSostenible
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2024-10-29 11:14:12 +01:00
parent a5c7303c23
commit e04942ab0c
4 changed files with 346 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

183
src/layouts/PostStyle.astro
View File

@@ -1,8 +1,8 @@
---
// src/layouts/PostLayout.astro
import RelatedPosts from '../components/PostsRelacionados.astro'; // Componente para posts relacionados
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';
import RelatedPosts from "../components/PostsRelacionados.astro"; // Componente para posts relacionados
import Navbar from "../components/Navbar.astro";
import Footer from "../components/Footer.astro";
const { frontmatter } = Astro.props;
@@ -19,26 +19,52 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{frontmatter.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()}>
<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={frontmatter.titulo}>
<meta property="og:description" content={description}>
<meta property="og:image" content={frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)}>
<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 -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content={Astro.url}>
<meta property="twitter:title" content={frontmatter.titulo}>
<meta property="twitter:description" content={description}>
<meta property="twitter:image" content={frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)}>
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={frontmatter.titulo} />
<meta property="twitter:description" content={description} />
<meta
property="twitter:image"
content={frontmatter.imagen &&
new URL(frontmatter.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">
@@ -65,17 +91,23 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
}
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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 {
font-family: 'Arial', sans-serif;
font-family: "Arial", sans-serif;
line-height: 1.6;
color: #333;
}
.post-header {
margin-top: 60px;
background-color: #4CAF50;
background-color: #4caf50;
color: white;
padding: 2rem 0;
}
@@ -93,7 +125,7 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
}
blockquote {
background-color: #f9f9f9;
border-left: 5px solid #4CAF50;
border-left: 5px solid #4caf50;
padding: 1rem;
margin: 1rem 0;
font-style: italic;
@@ -107,7 +139,7 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
.table-of-contents h4 {
color: #2c3e50;
border-bottom: 2px solid #4CAF50;
border-bottom: 2px solid #4caf50;
font-size: 1.2rem;
}
@@ -127,20 +159,34 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
}
.table-of-contents a:hover {
color: #4CAF50;
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; }
.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 {
.toc-level-2,
.toc-level-3,
.toc-level-4,
.toc-level-5,
.toc-level-6 {
border-left: 2px solid #e9ecef;
margin-left: 0.5rem;
}
@@ -175,35 +221,82 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
<div 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">
{
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(frontmatter.fecha).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'})}
<i class="fas fa-calendar-alt"></i>
{
new Date(
frontmatter.fecha,
).toLocaleDateString("es-ES", {
year: "numeric",
month: "long",
day: "numeric",
})
}
&nbsp;|&nbsp;
<i class="fas fa-user"></i> {frontmatter.autor}
{frontmatter.lastModified && (
<>&nbsp;|&nbsp;
<i class="fas fa-edit"></i> Última actualización: {new Date(frontmatter.lastModified).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'})}</>
)}
<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 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>
<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>
@@ -215,7 +308,9 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
<Footer />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>

14
src/pages/index.astro
View File

@@ -29,6 +29,20 @@ const animateOnScroll = `
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} />
<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
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."

33
src/pages/posts.astro
View File

@@ -6,11 +6,33 @@ import ListadoPosts from "../layouts/ListadoPosts.astro";
<html lang="es">
<head>
<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} />
<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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<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"
/>
<!-- 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>
</head>
<body>
@@ -18,6 +40,9 @@ import ListadoPosts from "../layouts/ListadoPosts.astro";
<Navbar />
<ListadoPosts />
</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>
</html>