blogs.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Blog — HyClans</title>

  <link rel="icon" type="image/png" href="images/logo.png" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;700&family=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet">

  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: 'Roboto Condensed', sans-serif;
      background:#0b1220;
      color:#e6e6e6;
      overflow-x:hidden;
    }

    a {
      color: #ffffff;
      text-decoration: none;
      position: relative;
      transition: color 0.2s ease;
      font-weight: 500;
    }
    a::after {
      content: "";
      position: absolute;
      width: 0;
      height: 2px;
      left: 0;
      bottom: -2px;
      background: #6de0ff;
      transition: width 0.3s ease;
    }
    a:hover { color: #3db8ff; }
    a:hover::after { width: 100%; }

    nav {
      display:flex; justify-content:space-between; align-items:center;
      padding:1.2rem 3rem; position:fixed; width:100%; top:0;
      z-index:1000; backdrop-filter:blur(10px);
      background:rgba(5,10,20,0.4);
      border-bottom:1px solid rgba(255,255,255,0.05);
    }
    .logo { display:flex; align-items:center; gap:12px; font-family:'Unbounded'; font-size:1.4rem; color:#c9d3ff; }
    .logo-nav { width:58px; height:58px; background:url('images/logo.png') center/cover no-repeat; border-radius:8px; }
    .nav-links { display:flex; gap:2rem; }
    header { height:90px; }

    .section {
      padding:5rem 3rem; max-width:1100px; margin:0 auto;
    }
    .section h2 {
      font-family:'Unbounded'; font-size:2.4rem; margin-bottom:1.4rem;
      color:rgba(230,235,255,0.9);
    }

    /* Blog List */
    .blog-list {
      display:flex;
      flex-direction:column;
      gap:2rem;
      margin-top:2rem;
    }

    .blog-entry {
      background:rgba(255,255,255,0.04);
      padding:1.5rem;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.06);
      transition:0.2s ease;
      cursor:pointer;
    }
    .blog-entry:hover {
      background:rgba(109,224,255,0.08);
      border-color:rgba(109,224,255,0.25);
    }
    .blog-entry h3 { font-family:'Unbounded'; }
    .blog-entry p { opacity:0.85; margin-top:0.4rem; }

    /* Full Blog Page */
    .blog-view {
      display:none;
      margin-top:2rem;
      animation:fadeIn 0.4s ease;
    }
    .blog-view.active {
      display:block;
    }
    .blog-view h2 { font-family:'Unbounded'; margin-bottom:1rem; }
    .blog-view p { line-height:1.7; margin-top:1rem; }

    @keyframes fadeIn {
      from { opacity:0; transform:translateY(10px); }
      to { opacity:1; transform:translateY(0); }
    }

    .back-btn {
      margin-top:1rem;
      display:inline-block;
      padding:0.6rem 1rem;
      background:rgba(255,255,255,0.08);
      border-radius:8px;
      transition:0.2s;
    }
    .back-btn:hover {
      background:rgba(109,224,255,0.12);
    }
  </style>
</head>

<body>
  <header>
    <nav>
      <div class="logo">
        <div class="logo-nav"></div>
        HYCLANS
      </div>
      <div class="nav-links">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="blog.html">Blog</a>
        <a href="https://discord.gg/EDaYFTkB66">Discord</a>
      </div>
    </nav>
  </header>

  <section class="section">
    <h2>Developer Logs</h2>
    <p>Updates, progress, and behind‑the‑scenes development notes.</p>

    <!-- Blog List Container -->
    <div class="blog-list" id="blogList"></div>

    <!-- Blog View -->
    <div class="blog-view" id="blogView"></div>
  </section>

  <script>
    // Base path for GitHub Pages repo
    // Your site is served from: https://scapecodes.github.io/HyClans/
    // so all resources must load from "/HyClans/"
    const BASE = "/HyClans";

    // Markdown → HTML (very basic)
    function markdownToHTML(md) {
    return md
        .replace(/^### (.*$)/gim, "<h3>$1</h3>")
        .replace(/^## (.*$)/gim, "<h2>$1</h2>")
        .replace(/^# (.*$)/gim, "<h1>$1</h1>")
        .replace(/\*\*(.*?)\*\*/gim, "<strong>$1</strong>")
        .replace(/\*(.*?)\*/gim, "<em>$1</em>")
        .replace(/\n/g, "<br>");
    }

    // Pagination settings
    const PER_PAGE = 5;
    let blogs = [];
    let currentPage = 1;

    // Load blog index
    async function loadBlogs() {
    console.log("Loading blog index…");

    try {
        const response = await fetch(`${BASE}/blogs/index.json`);
        const blogIndex = await response.json();

        blogs = await Promise.all(
        blogIndex.map(async (file) => {
            const res = await fetch(`${BASE}/blogs/${file}`);
            return await res.json();
        })
        );

        renderList();
    } catch (err) {
        console.error("LoadBlogs Error:", err);
    }
    }

    // Render blog list
    function renderList() {
    const container = document.getElementById("blogList");
    container.innerHTML = "";

    // Pagination
    const start = (currentPage - 1) * PER_PAGE;
    const end = start + PER_PAGE;
    const pageBlogs = blogs.slice(start, end);

    pageBlogs.forEach((data) => {
        const entry = document.createElement("div");
        entry.className = "blog-entry";
        entry.innerHTML = `
        <h3>${data.title}</h3>
        <p>${data.description}</p>
        <p style="opacity:.6; font-size:.9rem;">${data.date}</p>
        <p style="opacity:.6; font-size:.8rem;">Tags: ${data.tags.join(", ")}</p>
        `;
        entry.addEventListener("click", () => openBlog(data));
        container.appendChild(entry);
    });

    renderPagination();
    }

    // Pagination buttons
    function renderPagination() {
    const totalPages = Math.ceil(blogs.length / PER_PAGE);
    const section = document.querySelector(".section");

    let nav = document.getElementById("pagination");
    if (!nav) {
        nav = document.createElement("div");
        nav.id = "pagination";
        nav.style.marginTop = "2rem";
        nav.style.display = "flex";
        nav.style.gap = "1rem";
        section.appendChild(nav);
    }

    nav.innerHTML = `
        <button onclick="prevPage()" ${currentPage === 1 ? "disabled" : ""}>Prev</button>
        <span>Page ${currentPage} / ${totalPages}</span>
        <button onclick="nextPage()" ${currentPage === totalPages ? "disabled" : ""}>Next</button>
    `;
    }

    function nextPage() {
    currentPage++;
    renderList();
    }
    function prevPage() {
    currentPage--;
    renderList();
    }

    // Open full blog post
    function openBlog(data) {
    const view = document.getElementById("blogView");
    view.classList.add("active");
    view.innerHTML = `
        <a class="back-btn" onclick="closeBlog()">← Back</a>
        <h2>${data.title}</h2>
        <p><em>${data.date}</em></p>
        <div>${markdownToHTML(data.content)}</div>
    `;
    document.getElementById("blogList").style.display = "none";
    document.getElementById("pagination").style.display = "none";
    }

    // Close post
    function closeBlog() {
    document.getElementById("blogView").classList.remove("active");
    document.getElementById("blogList").style.display = "flex";
    document.getElementById("pagination").style.display = "flex";
    }

    // Search system
    function searchBlogs(query) {
    query = query.toLowerCase();
    blogs = blogs.filter(
        (b) =>
        b.title.toLowerCase().includes(query) ||
        b.description.toLowerCase().includes(query) ||
        b.tags.join(" ").toLowerCase().includes(query)
    );
    currentPage = 1;
    renderList();
    }

    // Initialize
    loadBlogs();

  </script>
</body>
</html>