post.html

<!DOCTYPE html>
<html>
<head>
  <title>Post</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Poppins:wght@400;500&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="componentes/components.js"></script>
</head>
<body>
  <header-component></header-component>

  <main class="main-content">
    <div class="post">
      <a href="blog.html" class="volver-btn">Volver al Blog</a>
      <h1 id="post-title"></h1>
      <div class="post-meta" id="post-meta"></div>
      <div class="post-content" id="post-content"></div>
    </div>
  </main>

  <footer-component></footer-component>

  <script>
    const API_KEY = 'AIzaSyBFBbH1SQkSZf1LJzammWAe2karh5mG9rQ';
    const BLOG_ID = '2756493429384988662';

    function obtenerParametroURL(nombre) {
      const params = new URLSearchParams(window.location.search);
      return params.get(nombre);
    }

    function formatearFecha(fecha) {
      return new Date(fecha).toLocaleDateString('es-ES', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
    }

    function crearSlug(texto) {
      return texto
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/-+/g, '-')
        .replace(/^-+|-+$/g, '')
        .substring(0, 100);
    }

    function mostrarError(mensaje) {
      document.querySelector('main').innerHTML = `
        <div class="error-container">
          <h1>${mensaje}</h1>
          <p>No se pudo cargar el contenido del post.</p>
          <a href="blog.html" class="volver-btn">Volver al Blog</a>
        </div>
      `;
    }

    async function obtenerPost() {
      const postId = obtenerParametroURL('id');
      const slug = obtenerParametroURL('slug');
      
      if (!postId) {
        mostrarError('Post no encontrado');
        return;
      }

      try {
        const url = `https://www.googleapis.com/blogger/v3/blogs/${BLOG_ID}/posts/${postId}?key=${API_KEY}`;
        const response = await fetch(url);
        
        if (!response.ok) {
          throw new Error('Post no encontrado');
        }
        
        const post = await response.json();
        
        // Actualizar el título de la página
        document.title = post.title;
        
        // Actualizar el contenido
        document.getElementById('post-title').textContent = post.title;
        document.getElementById('post-meta').textContent = `Publicado el ${formatearFecha(post.published)}`;
        
        // Procesar el contenido
        let contenido = post.content;

        // Mejorar la visualización de imágenes
        contenido = contenido.replace(/<img/g, '<img class="post-image"');

        document.getElementById('post-content').innerHTML = contenido;

        // Aplicar estilos adicionales a las imágenes
        const imagenes = document.querySelectorAll('.post-image');
        imagenes.forEach(img => {
          img.style.maxWidth = '100%';
          img.style.height = 'auto';
          img.style.display = 'block';
          img.style.margin = '20px auto';
          img.style.borderRadius = '8px';
        });

        // Mejorar la visualización de bloques de código
        const bloquesCodigo = document.querySelectorAll('pre, code');
        bloquesCodigo.forEach(bloque => {
          bloque.style.backgroundColor = '#f5f5f5';
          bloque.style.padding = '15px';
          bloque.style.borderRadius = '5px';
          bloque.style.overflow = 'auto';
          bloque.style.fontSize = '14px';
          bloque.style.lineHeight = '1.5';
          bloque.style.fontFamily = 'Consolas, Monaco, monospace';
        });

        // Actualizar URL si es necesario
        const slugEsperado = crearSlug(post.title);
        if (slug !== slugEsperado) {
          const nuevaURL = `post.html?slug=${slugEsperado}&id=${postId}`;
          window.history.replaceState({}, post.title, nuevaURL);
        }

      } catch (error) {
        console.error('Error al obtener el post:', error);
        mostrarError('Error al cargar el post');
      }
    }

    // Cargar el post
    obtenerPost();
  </script>
</body>
</html>