{% extends 'main/layout.html' %}
{% block title %}{{ post.title }} — {{ blog_user.blog_title }}{% endblock %}
{% block meta_description %}{{ post.body_as_text|truncatewords:16 }}{% endblock %}
{% block head_rsl_license %}
{% include 'partials/rsl_license_head.html' %}
{% endblock head_rsl_license %}
{% block head_extra %}
<style>
/* Light theme */
@media (prefers-color-scheme: light) {
{{ light_css|safe }}
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
{{ dark_css|safe }}
}
</style>
{% endblock head_extra %}
{% block content %}
<main>
{% if blog_user.blog_title %}
<a href="{% url 'index' %}" class="posts-item-brand">{{ blog_user.blog_title }}</a>
{% endif %}
<article itemscope itemtype="http://schema.org/BlogPosting">
<h1 class="posts-item-title" itemprop="name headline">{{ post.title }}</h1>
<div class="posts-item-byline">
{% if post.published_at and post.is_published %}
Published on <time datetime="{{ post.published_at|date:'Y-m-d' }}" itemprop="datePublished">{{ post.published_at|date:'F j, Y' }}</time>
{% elif post.published_at and not post.is_published %}
SCHEDULED for <time datetime="{{ post.published_at|date:'Y-m-d' }}" itemprop="datePublished">{{ post.published_at|date:'F j, Y' }}</time>
{% else %}
DRAFT — Last updated on <time datetime="{{ post.updated_at|date:'Y-m-d' }}" itemprop="dateModified">{{ post.updated_at|date:'F j, Y' }}</time>
{% endif %}
{% if request.user.is_authenticated and request.subdomain == request.user.username %}
| <a href="{% url 'post_update' post.slug %}">Edit post</a>
| <a href="{% url 'post_delete' post.slug %}">Delete post</a>
{% endif %}
{% if post.is_draft %}
<blockquote>
<strong>
⚠️ This post is accessible to anyone with the link!
</strong>
</blockquote>
{% endif %}
</div>
{% if blog_user.reading_time_on %}
<div class="reading-time" style="font-style: italic; margin-top: 1em;">
Estimated reading time: {{ reading_time }} min
</div>
{% endif %}
<div class="posts-item-body" itemprop="articleBody">
{{ post.body_as_html|safe }}
</div>
{% if post.tag_list %}
<hr>
<p><b>Tags</b>:
{% for tag in post.tag_list %}
<a href="{% url 'post_list' %}?tags={{ tag }}" class="tag">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
{% endfor %}
</p>
{% endif %}
</article>
</main>
{% include 'partials/webring.html' %}
{% if blog_user.comments_on %}
<section class="comments">
{% if request.user.is_authenticated and request.subdomain == request.user.username %}
<div class="comments-title">Post comment as blog author</div>
<div class="comments-form">
<form method="post" action="{% url 'comment_create_author' post.slug %}">
{{ form.non_field_errors }}
<p>
{% if form.body.errors %}
{% for error in form.body.errors %}
<span class="form-error">{{ error|escape }}</span><br>
{% endfor %}
{% endif %}
<textarea name="body" id="id_body" cols="60" rows="5"></textarea>
</p>
{% csrf_token %}
<input type="submit" value="Post as {{ request.user.username }}">
</form>
</div>
{% else %}
<div class="comments-title">Thoughts? Leave a comment</div>
<div class="comments-form">
<form method="post" action="{% url 'comment_create' post.slug %}">
{{ form.non_field_errors }}
<p>
<label for="id_name">Name (optional):</label>
{% if form.name.errors %}
{% for error in form.name.errors %}
<span class="form-error">{{ error|escape }}</span><br>
{% endfor %}
{% endif %}
<input type="text" name="name" id="id_name" maxlength="150" value="">
</p>
<p>
<label for="id_email">
Email (optional and
<span title="Only the blog author can see it." style="text-decoration: underline dashed;">private</span>):
</label>
{% if form.email.errors %}
{% for error in form.email.errors %}
<span class="form-error">{{ error|escape }}</span><br>
{% endfor %}
{% endif %}
<input type="email" name="email" id="id_email" value="">
</p>
<p>
<label for="id_body">Comment:</label>
{% if form.body.errors %}
{% for error in form.body.errors %}
<span class="form-error">{{ error|escape }}</span><br>
{% endfor %}
{% endif %}
<textarea name="body" id="id_body" cols="60" rows="5"></textarea>
</p>
{% csrf_token %}
<input type="submit" value="Publish comment">
</form>
</div>
{% endif %}
{% if comments_pending and request.user.is_authenticated and request.subdomain == request.user.username %}
<div class="comments-title">Comments pending ({{ comments_pending|length }})</div>
<ul>
{% for comment in comments_pending %}
<li id="comment-{{ comment.id }}">
<span class="comments-author">
{{ comment.name|default_if_none:"Anonymous" }}
{% if comment.email %}
({{ comment.email }})
{% endif %}—
<a href="#comment-{{ comment.id }}">{{ comment.created_at|date:'M j, Y' }}</a>:
</span>
(<a href="{% url 'comment_approve' post.slug comment.id %}" class="type-approve">approve</a>
/ <a href="{% url 'comment_delete' post.slug comment.id %}" class="type-delete">delete</a>)
<div class="comments-body">{{ comment.body_as_html|safe }}</div>
</li>
{% endfor %}
</ul>
{% endif %}
{% if comments %}
<div class="comments-title">Comments</div>
<ol>
{% for comment in comments %}
<li id="comment-{{ comment.id }}">
{% if comment.is_author %}
<span class="comments-author">
<strong title="Comment by blog author">{{ comment.name }}</strong>
—
<a href="#comment-{{ comment.id }}">{{ comment.created_at|date:'M j, Y' }}</a>:
</span>
{% else %}
<span class="comments-author">
{{ comment.name|default_if_none:"Anonymous" }}
{% if request.user.is_authenticated and request.subdomain == request.user.username and comment.email %}
({{ comment.email }})
{% endif %}—
<a href="#comment-{{ comment.id }}">{{ comment.created_at|date:'M j, Y' }}</a>:
</span>
{% endif %}
{% if request.user.is_authenticated and request.subdomain == request.user.username %}
(<a href="{% url 'comment_delete' post.slug comment.id %}" class="type-delete">delete</a>)
{% endif %}
<div class="comments-body">{{ comment.body_as_html|safe }}</div>
</li>
{% endfor %}
</ol>
{% endif %}
</section>
{% endif %}
{% include 'partials/footer_blog.html' %}
{% endblock content %}
{% block scripts %}
{% if not blog_user.comments_on %}
<script>
window.addEventListener('keypress', function (evt) {
if (evt.key === 'u') {
document.location.assign('/');
} else if (evt.key === 'e') {
let url = document.location.pathname + 'edit';
document.location.assign(url);
}
});
</script>
{% endif %}
{% endblock scripts %}