Add ids to tags; use pygments to color JSON

This commit is contained in:
Joakim Hellsén 2025-09-07 22:31:31 +02:00
commit 8f438aca2d
18 changed files with 365 additions and 211 deletions

View file

@ -5,14 +5,14 @@
{% endblock title %}
{% block content %}
<main>
<h1>Twitch Drops</h1>
<h1 id="page-title">Twitch Drops</h1>
<pre>
Drops are sorted alphabetically by organization and game. Click on a campaign or game title to see more details.
Hover over the end time to see the exact date and time.
</pre>
{% if campaigns_by_org_game %}
{% for org_id, org_data in campaigns_by_org_game.items %}
<section>
<section id="org-section-{{ org_id }}">
<h2>
{% if org_data.name %}
{{ org_data.name }}
@ -21,7 +21,7 @@ Hover over the end time to see the exact date and time.
{% endif %}
</h2>
{% for game_id, game_data in org_data.games.items %}
<article>
<article id="game-article-{{ game_id }}">
<header style="margin-bottom: 1rem;">
<h3 style="margin: 0 0 0.5rem 0;">
<a href="{% url 'twitch:game_detail' game_id %}">{{ game_data.name }}</a>
@ -38,7 +38,8 @@ Hover over the end time to see the exact date and time.
<div style="flex: 1; overflow-x: auto;">
<div style="display: flex; gap: 1rem; min-width: max-content;">
{% for campaign in game_data.campaigns %}
<article style="display: flex;
<article id="campaign-article-{{ campaign.id }}"
style="display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
@ -68,13 +69,13 @@ Hover over the end time to see the exact date and time.
text-align: left">
Started {{ campaign.start_at|timesince }} ago
</time>
<time datetime="{{ campaign.created_at|date:'c' }}"
title="{{ campaign.created_at|date:'DATETIME_FORMAT' }}"
<time datetime="{{ campaign.added_at|date:'c' }}"
title="{{ campaign.added_at|date:'DATETIME_FORMAT' }}"
style="font-size: 0.9rem;
color: #666;
display: block;
text-align: left">
Scraped {{ campaign.created_at|timesince }} ago
Scraped {{ campaign.added_at|timesince }} ago
</time>
<time datetime="{{ campaign.start_at|date:'c' }} to {{ campaign.end_at|date:'c' }}"
title="{{ campaign.start_at|date:'DATETIME_FORMAT' }} to {{ campaign.end_at|date:'DATETIME_FORMAT' }}"