blog.html

---
layout: base
title: "Blog & Social"
---

<!-- Toggle Buttons as Page Title -->
<div class="blog-toggle-header">
  <button id="btn-blog" class="toggle-btn active" type="button">Blog Posts</button>
  <button id="btn-social" class="toggle-btn" type="button">Social</button>
</div>

<!-- Blog Posts Section -->
<section class="blog-posts" id="section-blog">
  <h2>Latest Posts</h2>
  {% for post in site.posts limit:10 %}
  <div class="post-preview">
    <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
    <p class="post-meta">{{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p>
    <p>{{ post.excerpt }}</p>
    <a href="{{ post.url }}" class="read-more">Read more →</a>
  </div>
  {% endfor %}
</section>

<!-- Social Section -->
<section class="social-section" id="section-social" hidden>
  <h2>Behind the Scenes</h2>
  <!-- <p style="text-align: center; margin-bottom: 30px;">
    Conferences, get-togethers, social events, and more from the NGML Group
  </p> -->

  <div class="social-grid">
    {% if site.social %}
    {% assign sorted_social = site.social | sort: 'date' | reverse %}
    {% for item in sorted_social limit:12 %}
    <div class="social-item">
      {% if item.image %}
      <a href="{{ item.url }}">
        <img src="{{ item.image }}" alt="{{ item.title }}" />
      </a>
      {% endif %}
      <div class="social-caption">
        <h4><a href="{{ item.url }}">{{ item.title }}</a></h4>
        <p class="social-date">{{ item.date | date: "%B %-d, %Y" }}</p>
        {% if item.location %}
        <p class="social-location">📍 {{ item.location }}</p>
        {% endif %}
      </div>
    </div>
    {% endfor %}
    {% else %}
    <p style="text-align: center; color: #888;">No social posts yet. Check back soon!</p>
    {% endif %}
  </div>
</section>