adding changelog to pages/routes
This commit is contained in:
136
app/templates/changelog.html
Normal file
136
app/templates/changelog.html
Normal file
@@ -0,0 +1,136 @@
|
||||
{# templates/changelog.html #}
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Changelog{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="mx-auto max-w-6xl px-4 py-6">
|
||||
<!-- Header -->
|
||||
<div class="mb-6 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight">SneakyScope Changelog</h1>
|
||||
{% if updated %}
|
||||
<p class="text-sm text-gray-400">Last updated: {{ updated }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Unreleased #}
|
||||
{% set ur = changelog.unreleased %}
|
||||
{% if ur.features or ur.refactors or ur.fixes %}
|
||||
<section class="mb-8 rounded-2xl border border-gray-700 bg-gray-900 p-5">
|
||||
<div class="mb-3 flex items-center gap-3">
|
||||
<h2 class="text-xl font-semibold">Unreleased</h2>
|
||||
<span class="badge badge-warn">WIP</span>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-3">
|
||||
{% for title, items, icon in [
|
||||
("✨ Features", ur.features, "✨"),
|
||||
("🛠️ Refactors", ur.refactors, "🛠️"),
|
||||
("🐛 Fixes", ur.fixes, "🐛"),
|
||||
] %}
|
||||
<div class="rounded-xl border border-gray-800 bg-gray-950 p-4">
|
||||
<h3 class="mb-2 text-sm font-semibold text-gray-200">{{ title }}</h3>
|
||||
{% if items and items|length %}
|
||||
<ul class="space-y-3">
|
||||
{% for it in items %}
|
||||
<li class="rounded-lg border border-gray-800 bg-gray-900 p-3">
|
||||
<div class="mb-1 font-medium">{{ it.title }}</div>
|
||||
{% if it.details %}
|
||||
<ul class="ml-5 list-disc text-sm text-gray-300">
|
||||
{% for d in it.details %}
|
||||
<li>{{ d }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p class="text-sm text-gray-400">Nothing yet — add upcoming {{ title.split(' ')[1] | lower }} here.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Versions Accordion #}
|
||||
<section>
|
||||
<div id="changelog-accordion" data-accordion="collapse" class="divide-y rounded-2xl border border-gray-700 bg-gray-900">
|
||||
{% for v in changelog.versions %}
|
||||
<h2 id="acc-head-{{ loop.index }}">
|
||||
<button type="button"
|
||||
class="flex w-full items-center justify-between px-5 py-4 text-left hover:bg-gray-800"
|
||||
data-accordion-target="#acc-body-{{ loop.index }}"
|
||||
aria-expanded="{{ 'true' if loop.first else 'false' }}"
|
||||
aria-controls="acc-body-{{ loop.index }}">
|
||||
<span class="flex items-center gap-3">
|
||||
<span class="font-semibold">{{ v.version }}</span>
|
||||
{% if v.notes and not (v.features or v.refactors or v.fixes) %}
|
||||
<span class="badge badge-ok">Notes only</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-300" aria-hidden="true" fill="none" viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div id="acc-body-{{ loop.index }}"
|
||||
class="{{ '' if loop.first else 'hidden' }}"
|
||||
aria-labelledby="acc-head-{{ loop.index }}">
|
||||
<div class="space-y-8 px-5 pb-5 pt-1">
|
||||
|
||||
{% if v.notes and v.notes|length %}
|
||||
<div>
|
||||
<h3 class="mb-2 text-sm font-semibold text-gray-200">Notes</h3>
|
||||
<ul class="ml-6 list-disc text-sm text-gray-300">
|
||||
{% for n in v.notes %}
|
||||
<li>{{ n }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% for section_title, items in [
|
||||
("✨ Features", v.features),
|
||||
("🛠️ Refactors", v.refactors),
|
||||
("🐛 Fixes", v.fixes),
|
||||
] %}
|
||||
{% if items and items|length %}
|
||||
<div>
|
||||
<h3 class="mb-2 text-sm font-semibold text-gray-200">{{ section_title }}</h3>
|
||||
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
{% for it in items %}
|
||||
<article class="rounded-2xl border border-gray-800 bg-gray-950 p-4">
|
||||
<h4 class="mb-1 font-semibold leading-snug">{{ it.title }}</h4>
|
||||
{% if it.details %}
|
||||
<ul class="ml-5 list-disc text-sm text-gray-300">
|
||||
{% for d in it.details %}
|
||||
<li>{{ d }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{# If you’re not auto-initializing Flowbite elsewhere, ensure its JS is loaded globally. #}
|
||||
<script>
|
||||
/* Optional: if you ever render details as HTML snippets, ensure they are trusted or sanitized server-side. */
|
||||
/* No extra JS needed here if Flowbite handles [data-accordion]. */
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user