{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/news.css">
{% endblock %}
{% block content %}
<div class="news-page">
<div class="news-header">
<h1>Developer News</h1>
<p class="news-subtitle">Curated signals for developers. Updated hourly.</p>
</div>
{% if articles %}
<div class="news-grid">
{% for item in articles %}
<article class="news-card">
{% if item.image_url %}
<div class="news-card-image">
<img src="{{ item.image_url }}" alt="{{ item.article['title'] }}" loading="lazy" class="image-fallback">
</div>
{% endif %}
<div class="news-card-body">
<div class="news-card-meta">
<span class="news-source">{{ item.article['source_name'] }}</span>
{% if item.grade >= 9 %}
<span class="news-grade news-grade-top">Grade {{ item.grade }}</span>
{% elif item.grade >= 7 %}
<span class="news-grade news-grade-high">Grade {{ item.grade }}</span>
{% else %}
<span class="news-grade">Grade {{ item.grade }}</span>
{% endif %}
<span class="news-time">{{ item.time_ago }}</span>
</div>
<h3 class="news-card-title">
<a href="/news/{{ item.article['slug'] or item.article['uid'] }}">{{ item.article['title'] }}</a>
</h3>
{% if item.article.get('description') %}
<p class="news-card-desc">{{ item.article['description'][:250] }}{% if item.article['description']|length > 250 %}...{% endif %}</p>
{% endif %}
<a href="{{ item.article['url'] }}" target="_blank" rel="noopener" class="news-read-link">
Read on {{ item.article['source_name'] }} &#x2197;
</a>
</div>
</article>
{% endfor %}
</div>
{% include "_load_more.html" %}
{% else %}
<div class="news-empty">
<div class="news-empty-icon">&#x1F4F0;</div>
<h2>No news yet</h2>
<p>Check back soon for curated developer news.</p>
</div>
{% endif %}
</div>
{% endblock %}