index.html

---
layout: default
title: Home
---

{% assign lang_data = site.data["ko"] %}

<div class="blog-hero" style="background-image: url('{{ site.hero_image }}')">
  <div class="hero-overlay">
    <div class="container">
      <div class="hero-text">
        <h1>{{ lang_data.site.title | default: site.title }}</h1>
        <p class="hero-subtitle">{{ lang_data.site.description | default: site.description }}</p>
      </div>
    </div>
  </div>
</div>

<main class="blog-main">
  <div class="container">
    <div class="blog-layout">
      <section class="posts-feed">
        <div class="section-header">
          <h2>{{ lang_data.posts.recent }}</h2>
          <a href="/archive" class="view-all-link">{{ lang_data.posts.view_all }} →</a>
        </div>

        <div class="posts-list">
          {% assign korean_posts = site.posts | where: "lang", "ko" %}
          {% for post in korean_posts %}
            <article class="post-item">
              <h3 class="post-title">
                <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
              </h3>
              <div class="post-meta">
                <time class="post-date">{{ post.date | date: lang_data.posts.date_format }}</time>
                {% if post.categories and post.categories.size > 0 %}
                  <span class="post-category">
                    <a href="/categories#{{ post.categories[0] | slugify }}">{{ post.categories[0] }}</a>
                  </span>
                {% endif %}
              </div>
              {% if post.excerpt %}
                <div class="post-excerpt">
                  {{ post.excerpt | strip_html | truncate: 120 }}
                </div>
              {% endif %}
            </article>
          {% endfor %}
        </div>

        <nav class="pagination" id="pagination-nav" style="display:none">
          <a href="#" class="pagination-btn pagination-prev" id="prev-btn">← {{ lang_data.posts.prev_page }}</a>
          <span class="pagination-info" id="page-info"></span>
          <a href="#" class="pagination-btn pagination-next" id="next-btn">{{ lang_data.posts.next_page }} →</a>
        </nav>
      </section>
    </div>
  </div>
</main>

<script>
(function() {
  var POSTS_PER_PAGE = 10;
  var posts = document.querySelectorAll('.posts-list .post-item');
  if (posts.length <= POSTS_PER_PAGE) return;

  var totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
  var params = new URLSearchParams(window.location.search);
  var currentPage = parseInt(params.get('page')) || 1;
  currentPage = Math.max(1, Math.min(currentPage, totalPages));

  var nav = document.getElementById('pagination-nav');
  var prevBtn = document.getElementById('prev-btn');
  var nextBtn = document.getElementById('next-btn');
  var pageInfo = document.getElementById('page-info');
  var basePath = window.location.pathname;

  function showPage(page) {
    var start = (page - 1) * POSTS_PER_PAGE;
    var end = start + POSTS_PER_PAGE;
    for (var i = 0; i < posts.length; i++) {
      posts[i].style.display = (i >= start && i < end) ? '' : 'none';
    }
    pageInfo.textContent = page + ' / ' + totalPages;

    if (page > 1) {
      prevBtn.href = page === 2 ? basePath : basePath + '?page=' + (page - 1);
      prevBtn.classList.remove('disabled');
    } else {
      prevBtn.removeAttribute('href');
      prevBtn.classList.add('disabled');
    }

    if (page < totalPages) {
      nextBtn.href = basePath + '?page=' + (page + 1);
      nextBtn.classList.remove('disabled');
    } else {
      nextBtn.removeAttribute('href');
      nextBtn.classList.add('disabled');
    }
  }

  nav.style.display = '';
  showPage(currentPage);
  window.scrollTo(0, 0);
})();
</script>