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

Se mejora la detección de los posts y la estructura de estos

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2024-10-23 18:03:17 +02:00
parent effd03c419
commit 492933b9bd
2 changed files with 89 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ImagenMD.astro Normal file
View File

@@ -0,0 +1,12 @@
---
import { Image } from "astro:assets";
const { src, width, height, alt } = Astro.props;
let size;
if (width || height) {
size = `width="${width}" height="${height}"`
} else {
size = `inferSize`
}
---
<Image src={src} alt={alt} inferSize class="img-fluid"/>

132
src/layouts/PostStyle.astro
View File

@@ -5,8 +5,9 @@ import RelatedPosts from '../components/PostsRelacionados.astro'; // Componente
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, content } = Astro.props; const { frontmatter } = Astro.props;
const headings = getHeadings(content);
const headings = Astro.props.headings;
const description = frontmatter.descripcion; const description = frontmatter.descripcion;
@@ -88,7 +89,7 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
} }
.post-meta { .post-meta {
font-size: 0.9rem; font-size: 0.9rem;
color: #666; margin: 0px !important;
} }
blockquote { blockquote {
background-color: #f9f9f9; background-color: #f9f9f9;
@@ -98,39 +99,58 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
font-style: italic; font-style: italic;
} }
.table-of-contents { .table-of-contents {
background-color: #f3f3f3; background-color: #f8f9fa;
padding: 1rem; border-radius: 10px;
border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
margin-bottom: 2rem; border: 1px solid #e9ecef;
} }
.table-of-contents ul {
list-style-type: none;
padding-left: 0;
}
.table-of-contents ul ul {
padding-left: 1rem;
}
.table-of-contents { .table-of-contents h4 {
background-color: #f3f3f3; color: #2c3e50;
padding: 1rem; border-bottom: 2px solid #4CAF50;
border-radius: 5px; font-size: 1.2rem;
margin-bottom: 2rem; }
}
.table-of-contents ul { .table-of-contents ul {
list-style-type: none; list-style-type: none;
padding-left: 0; padding-left: 0;
} }
.table-of-contents ul ul {
padding-left: 1rem; .table-of-contents a {
} color: #495057;
.table-of-contents a { text-decoration: none;
color: #333; display: block;
text-decoration: none; border-radius: 5px;
} transition: all 0.2s ease;
.table-of-contents a:hover { font-size: 0.9rem;
color: #4CAF50; 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; /* Ajusta este valor según la altura de tu navbar */
}
img {
max-width: 100%;
height: auto;
}
</style> </style>
</head> </head>
<body> <body>
@@ -139,15 +159,6 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
<header class="post-header"> <header class="post-header">
<div class="container"> <div class="container">
<h1 class="display-4">{frontmatter.titulo}</h1> <h1 class="display-4">{frontmatter.titulo}</h1>
<p class="post-meta">
<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'})}</>
)}
</p>
</div> </div>
</header> </header>
@@ -160,20 +171,31 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<aside class="sticky-top" style="top: 2rem;"> <aside class="sticky-top" style="top: 2rem;">
<div class="table-of-contents"> <div class="d-none d-lg-block">
<h4>Contenido</h4> <div class="table-of-contents p-3 mb-4">
<ul> <h4 class="mb-3 pb-2 fw-bold">Contenido</h4>
{headings.map(heading => ( <ul class="m-0">
<li style={`margin-left: ${(heading.depth - 1) * 1}rem`}> {headings.map(heading => (
<a href={`#${heading.slug}`}>{heading.text}</a> <li class={`mb-2 toc-level-${heading.depth}`}>
</li> <a href={`#${heading.slug}`} class="py-1 px-2">
))} {heading.text}
</ul> </a>
</li>
))}
</ul>
</div>
</div> </div>
<div class="card mb-4"> <div class="card mb-4">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Sobre el autor</h5> <p class="post-meta">
<p class="card-text">{frontmatter.authorBio}</p> <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'})}</>
)}
</p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">