script.js

const postsContainer = document.querySelector("#posts");
const emptyState = document.querySelector("#empty-state");
const postCount = document.querySelector("#post-count");

const formatter = new Intl.DateTimeFormat("zh-CN", {
  year: "numeric",
  month: "long",
  day: "numeric"
});

function formatDate(value) {
  return formatter.format(new Date(value));
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

function renderPosts(items) {
  postsContainer.innerHTML = items.map((post, index) => {
    const tags = post.tags.map((tag) => `<span class="tag">${escapeHtml(tag)}</span>`).join("");
    const href = post.url || "#";
    const featured = index === 0 ? " featured" : "";

    return `
      <article class="post-item${featured}">
        <time class="post-date" datetime="${escapeHtml(post.date)}">${formatDate(post.date)}</time>
        <div class="post-body">
          <a class="post-title" href="${escapeHtml(href)}">${escapeHtml(post.title)}</a>
          <p class="post-summary">${escapeHtml(post.summary)}</p>
          <div class="tags">${tags}</div>
        </div>
      </article>
    `;
  }).join("");

  emptyState.hidden = items.length > 0;
  postCount.textContent = `${items.length} 篇文章`;
}

async function loadPosts() {
  try {
    const response = await fetch("posts.json?v=2026080404");
    if (!response.ok) throw new Error("posts.json not found");

    const posts = await response.json();
    posts.sort((a, b) => new Date(b.date) - new Date(a.date));
    renderPosts(posts);
  } catch (error) {
    postsContainer.innerHTML = "";
    emptyState.hidden = false;
    emptyState.textContent = "文章加载失败，请检查 posts.json 是否已经上传。";
    postCount.textContent = "加载失败";
  }
}

loadPosts();