blog_post.html

{% extends "base.html" %}

{% block title %}{{ post.title }} · Blog{% endblock %}

{% block og_meta %}
{# ── Blog-post-specific Open Graph / Twitter Card ── #}
{% set post_title    = post.title ~ " · Kishaloy Roy" %}
{% set post_desc     = post.excerpt if post.excerpt else "Read this article on Kishaloy Roy's blog." %}
{% set post_url      = request.url %}
{% if post.cover_image %}
  {% set post_image  = request.url_root ~ "static/uploads/" ~ post.cover_image %}
{% else %}
  {% set post_image  = request.url_root ~ "static/images/profile.png" %}
{% endif %}

{# Open Graph #}
<meta property="og:type"        content="article">
<meta property="og:site_name"   content="Kishaloy Roy">
<meta property="og:title"       content="{{ post_title }}">
<meta property="og:description" content="{{ post_desc }}">
<meta property="og:url"         content="{{ post_url }}">
<meta property="og:image"       content="{{ post_image }}">
<meta property="og:image:alt"   content="{{ post.title }}">
<meta property="og:locale"      content="en_IN">
{% if post.published_at %}
<meta property="article:published_time" content="{{ post.published_at.isoformat() }}">
{% endif %}
{% for tag in post.tags %}
<meta property="article:tag"    content="{{ tag }}">
{% endfor %}

{# Twitter / X Card #}
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="{{ post_title }}">
<meta name="twitter:description" content="{{ post_desc }}">
<meta name="twitter:image"       content="{{ post_image }}">
<meta name="twitter:image:alt"   content="{{ post.title }}">

{# General description #}
<meta name="description" content="{{ post_desc }}">
{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/blog_page.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/code-highlighting.css') }}">
{% endblock %}

{% block content %}
  <div class="blog-post-container">
    <div class="blog-post">
      <div class="blog-post-header">
        <div class="blog-post-header-top">
          <div class="blog-post-title-section">
            <h1>{{ post.title }}</h1>

            <div class="blog-post-meta">
              {% if post.published_at %}
                <span class="blog-post-date">{{ post.published_at.strftime('%d %b %Y') }}</span>
              {% endif %}

              {% if post.tags and post.tags|length > 0 %}
                <div class="blog-item-tags">
                  {% for t in post.tags %}
                    <a class="blog-tag" data-tag="{{ t|lower }}" href="{{ url_for('blog_index', tag=t) }}">{{ t }}</a>
                  {% endfor %}
                </div>
              {% endif %}
            </div>
          </div>

          <div class="blog-actions">
            <input type="hidden" id="postId" value="{{ post.id }}">
            <button class="blog-action-btn" id="likeBtn" data-liked="{{ 1 if has_liked else 0 }}" type="button">
              👍 <span id="likeCount">{{ like_count }}</span>
            </button>
            <button class="blog-action-btn" id="copyLinkBtn" type="button">🔗</button>
          </div>
        </div>
      </div>

      {% if post.cover_image %}
        <div class="blog-cover">
          <img src="{{ url_for('static', filename='uploads/' + post.cover_image) }}" alt="{{ post.title }}">
        </div>
      {% endif %}

      <div class="blog-content">
        {{ post.content_html | safe }}
      </div>

      {% if images and images|length > 0 %}
        <div class="blog-gallery">
          {% for im in images %}
            <figure class="blog-gallery-item">
              <img src="{{ url_for('static', filename='uploads/' + im.filename) }}" alt="{{ post.title }}">
            </figure>
          {% endfor %}
        </div>
      {% endif %}

      <div class="blog-comments">
        <h2 class="blog-comments-header">Comments</h2>

        <form id="commentForm" class="comment-form">
          <input name="display_name" placeholder="Name (optional)" maxlength="40">
          <textarea name="content" placeholder="Write a comment..." maxlength="2000" required></textarea>
          <div class="comment-form-actions">
            <button type="submit">Post comment</button>
            <span id="commentError" class="comment-error"></span>
          </div>
        </form>

        {% if comments|length == 0 %}
          <p class="comment-empty">No comments yet. Be the first to comment!</p>
        {% else %}
          <div class="comment-list">
            {% for c in comments %}
              <div class="comment">
                <div class="comment-header">
                  <span class="comment-author">{{ c.display_name }}</span>
                  <span class="comment-date">{{ c.created_at.strftime('%d %b %Y, %H:%M') }}</span>
                </div>
                <p class="comment-text">{{ c.content }}</p>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <script src="{{ url_for('static', filename='js/blog.js') }}"></script>
{% endblock %}