Se mejora la detección de los posts y la estructura de estos
This commit is contained in:
12
src/components/ImagenMD.astro
Normal file
12
src/components/ImagenMD.astro
Normal 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"/>
|
||||
@@ -5,8 +5,9 @@ import RelatedPosts from '../components/PostsRelacionados.astro'; // Componente
|
||||
import Navbar from '../components/Navbar.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
|
||||
const { frontmatter, content } = Astro.props;
|
||||
const headings = getHeadings(content);
|
||||
const { frontmatter } = Astro.props;
|
||||
|
||||
const headings = Astro.props.headings;
|
||||
|
||||
const description = frontmatter.descripcion;
|
||||
|
||||
@@ -88,7 +89,7 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
|
||||
}
|
||||
.post-meta {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
margin: 0px !important;
|
||||
}
|
||||
blockquote {
|
||||
background-color: #f9f9f9;
|
||||
@@ -98,38 +99,57 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
|
||||
font-style: italic;
|
||||
}
|
||||
.table-of-contents {
|
||||
background-color: #f3f3f3;
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.table-of-contents ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.table-of-contents ul ul {
|
||||
padding-left: 1rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.table-of-contents {
|
||||
background-color: #f3f3f3;
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 2rem;
|
||||
.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 ul ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.table-of-contents a {
|
||||
color: #333;
|
||||
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; /* Ajusta este valor según la altura de tu navbar */
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -139,15 +159,6 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
|
||||
<header class="post-header">
|
||||
<div class="container">
|
||||
<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'})}
|
||||
|
|
||||
<i class="fas fa-user"></i> {frontmatter.autor}
|
||||
{frontmatter.lastModified && (
|
||||
<> |
|
||||
<i class="fas fa-edit"></i> Última actualización: {new Date(frontmatter.lastModified).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'})}</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -160,20 +171,31 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<aside class="sticky-top" style="top: 2rem;">
|
||||
<div class="table-of-contents">
|
||||
<h4>Contenido</h4>
|
||||
<ul>
|
||||
<div class="d-none d-lg-block">
|
||||
<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 style={`margin-left: ${(heading.depth - 1) * 1}rem`}>
|
||||
<a href={`#${heading.slug}`}>{heading.text}</a>
|
||||
<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">
|
||||
<h5 class="card-title">Sobre el autor</h5>
|
||||
<p class="card-text">{frontmatter.authorBio}</p>
|
||||
<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-user"></i> {frontmatter.autor}
|
||||
{frontmatter.lastModified && (
|
||||
<> |
|
||||
<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 class="card">
|
||||
|
||||
Reference in New Issue
Block a user