---
export const prerender = false;

import Base from '../layouts/Base.astro';
import Header from '../components/layout/Header.astro';
import Footer from '../components/layout/Footer.astro';
import PostCard from '../components/content/PostCard.astro';
import { getLiveCollection } from 'astro:content';

const feedResult = await getLiveCollection('feed');
const mergedPosts = (feedResult.entries ?? [])
  .map((entry) => entry.data)
  .sort((a, b) => (b.publishedAt ?? b.sharedAt).getTime() - (a.publishedAt ?? a.sharedAt).getTime());
---

<Base title="Community Content" description="Blog posts and articles from across the AT Protocol community.">
  <Header slot="header" />

  <section class="content-page section">
    <div class="container">
      <h1>Community content</h1>
      <p class="content-sub">
        Blog posts and articles shared by community members across the Atmosphere.
        Content is aggregated from the atmosphere.community <a
          href="https://blog.atmosphere.community"
          rel="noopener noreferrer"
          target="_blank">Offprint</a
        >
        and community accounts via <a
          href="https://opensocial.community"
          rel="noopener noreferrer"
          target="_blank">OpenSocial</a
        >.
      </p>

      {mergedPosts.length > 0 ? (
        <div class="posts-list">
          {mergedPosts.map((post) => <PostCard {...post} />)}
        </div>
      ) : (
        <div class="content-empty">
          <p>
            No community content yet. <a href="https://blog.atmosphere.community">Visit the
              blog</a
            > or share content via your community account.
          </p>
        </div>
      )}
    </div>
  </section>

  <Footer slot="footer" />
</Base>

<style>
  .content-page h1 {
    margin-bottom: var(--space-sm);
  }

  .content-sub {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    max-width: 55ch;
    line-height: var(--leading-relaxed);
  }

  .posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-xl);
  }

  .content-empty {
    margin-top: var(--space-xl);
    padding: var(--space-2xl);
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--neutral-100);
    border-radius: var(--radius-md);
  }
</style>