articles.html

---
layout: default
title: News
permalink: /articles
---

<section class="featured-news">
    <h1 class="featured-title">Featured News</h1>
    <div class="featured-grid">
        {% assign featured_news = site.articles | where: "featured", true | sort: "date" | reverse %}
        {% for article in featured_news %}
        <div class="article-card"
             data-date="{{ article.date | date: '%Y-%m-%d' }}"
             data-type="{{ article.type }}"
             data-title="{{ article.title }}">
            <a href="{{ article.url | relative_url }}">
                <div class="banner" style="background-image: url('{{ article.banner | relative_url }}');"></div>
                <div class="card-content">
                    <span class="type-label">{{ article.type }}</span>
                    <h2>{{ article.title }}</h2>
                    <p>{{ article.summary | strip_html | truncate: 120 }}</p>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
</section>

<section class="articles-section">
    <div class="articles-header">
        <h1 class="articles-title">Newest News</h1>
        <div class="sort-controls">
            <label for="sort-select">Sort by:</label>
            <select id="sort-select">
                <option value="date-desc">Newest first</option>
                <option value="date-asc">Oldest first</option>
                <option value="type">Type</option>
                <option value="title">Title</option>
            </select>
        </div>
    </div>

    <div class="article-grid" id="articleGrid">
        {% for article in site.articles %}
        <div class="article-card"
             data-date="{{ article.date | date: '%Y-%m-%d' }}"
             data-type="{{ article.type }}"
             data-title="{{ article.title }}">
            <a href="{{ article.url | relative_url }}">
                <div class="banner" style="background-image: url('{{ article.banner | relative_url }}');"></div>
                <div class="card-content">
                    <span class="type-label">{{ article.type }}</span>
                    <h2>{{ article.title }}</h2>
                    <p>{{ article.summary | strip_html | truncate: 120 }}</p>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
</section>

<script>
  document.getElementById('sort-select').addEventListener('change', function () {
  const sortBy = this.value;
  const grid = document.getElementById('articleGrid');
  const cards = Array.from(grid.querySelectorAll('.article-card'));

  let sortedCards = cards;

  if (sortBy === 'date-desc') {
    sortedCards = cards.sort((a, b) =>
      b.dataset.date.localeCompare(a.dataset.date)
    );
  } else if (sortBy === 'date-asc') {
    sortedCards = cards.sort((a, b) =>
      a.dataset.date.localeCompare(b.dataset.date)
    );
  } else if (sortBy === 'type') {
    sortedCards = cards.sort((a, b) =>
      a.dataset.type.localeCompare(b.dataset.type)
    );
  } else if (sortBy === 'title') {
    sortedCards = cards.sort((a, b) =>
      a.dataset.title.localeCompare(b.dataset.title)
    );
  }

  // Clear and re-append sorted cards
  grid.innerHTML = '';
  sortedCards.forEach(card => grid.appendChild(card));
  });
</script>
<script>
    window.addEventListener('DOMContentLoaded', () => {
        const sortSelect = document.getElementById('sort-select');
        sortSelect.value = 'date-desc'; // set default to newest first
        sortSelect.dispatchEvent(new Event('change')); // trigger sorting once
    });
</script>