80 lines
2.8 KiB
HTML
80 lines
2.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ blogpost.title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
{% if blogpost.draft %}
|
|
<div class="bg-yellow-500/20 border-b border-yellow-400/40 text-yellow-300 px-6 py-3 flex items-center justify-between gap-4">
|
|
<span class="font-semibold">⚠ This post is a draft — only you can see it.</span>
|
|
<div class="flex gap-3">
|
|
<a href="{{ url_for('edit_blog', slug=blogpost.slug) }}"
|
|
class="bg-white/10 hover:bg-white/20 text-white text-sm px-4 py-1.5 rounded transition">Edit</a>
|
|
<form action="{{ url_for('publish_blog', slug=blogpost.slug) }}" method="post">
|
|
<button type="submit"
|
|
class="bg-orange-500 hover:bg-orange-600 text-white text-sm px-4 py-1.5 rounded transition">
|
|
Publish Post
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Hero -->
|
|
<section class="py-20 text-center text-white bg-gradient-to-br from-orange-500/20 via-rose-500/10 to-fuchsia-500/10 backdrop-blur border-b border-white/10">
|
|
<div class="max-w-3xl mx-auto px-6">
|
|
<h1 class="text-5xl md:text-6xl font-archivo font-extrabold mb-3">{{ blogpost.title }}</h1>
|
|
|
|
{% if blogpost.category %}
|
|
<p class="text-white/80 italic text-lg">{{ blogpost.category }}</p>
|
|
{% endif %}
|
|
|
|
{% if blogpost.tags %}
|
|
<div class="mt-4 flex justify-center flex-wrap gap-2">
|
|
{% for tag in blogpost.tags.split(',') %}
|
|
{% set t = tag.strip() %}
|
|
{% if t %}
|
|
<a href="{{ url_for('view_tag', tag=t) }}"
|
|
class="text-xs px-3 py-1 rounded-full border border-white/15 bg-white/5 hover:bg-white/10 transition">
|
|
#{{ t }}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Body -->
|
|
<section class="py-16">
|
|
<div class="container-page space-y-10">
|
|
|
|
{% if blogpost.images %}
|
|
<!-- Simple static gallery (no extra routes) -->
|
|
<div class="card bg-[rgb(var(--card))]">
|
|
<h3 class="text-xl font-semibold text-white mb-4">Gallery</h3>
|
|
<div class="grid gap-6 sm:grid-cols-2">
|
|
{% for image in blogpost.images|from_json %}
|
|
<div class="overflow-hidden rounded-xl border border-[rgb(var(--border))] bg-[rgb(var(--card))] hover:scale-[1.02] transition-transform duration-300 shadow-glass">
|
|
<img src="{{ url_for('static', filename='uploads/' + image) }}"
|
|
alt="Blog image {{ loop.index }}"
|
|
class="w-full h-64 object-cover">
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Content -->
|
|
<article class="prose prose-invert max-w-none leading-relaxed">
|
|
{{ blogpost.content | markdown | safe }}
|
|
</article>
|
|
|
|
<div class="pt-2">
|
|
<a href="{{ url_for('blog') }}" class="btn btn-ghost">← Back to Blog</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{% endblock %}
|
|
|