Merge pull request #357 from davep/copilot/visually-indicate-draft-posts

Visually indicate draft posts with 🚧 emoji and contrasting colour

Author: davep

ChangeLog.md

@@ -7,6 +7,10 @@
 - Replaced the regex-based `extract_first_paragraph` implementation with a
   Markdown-library-powered approach.
   ([#354](https://github.com/davep/blogmore/pull/354))
+- Draft posts now receive a clear visual indicator wherever a post title is
+  rendered: the title is displayed in a contrasting amber colour and a 🚧
+  emoji is appended after the title text.
+  ([#357](https://github.com/davep/blogmore/pull/357))
 
 ## v2.6.0
 

docs/template-api.md

@@ -135,6 +135,33 @@ Helper methods available on `Post`:
 | `safe_tags()` | `list[str]` | Tags sanitised for URL use. |
 | `sorted_tag_pairs()` | `list[tuple[str, str]]` | `(display, safe)` tag pairs sorted alphabetically. |
 
+### Draft post visual indicator
+
+When `post.draft` is `True`, the built-in templates automatically apply a
+clear visual indicator to the post title wherever it is rendered:
+
+- The post title is displayed in the **draft title colour** (`--draft-title-color`
+  CSS custom property, default amber `#cc6600`).
+- A **🚧 emoji** is appended after the title text.
+- The containing `<article>` element receives the CSS class **`draft-post`**
+  (for summary cards and individual post pages) or the link receives the class
+  **`draft-title`** (in the date archive list).
+
+This applies in every listing context (home page, tag pages, category pages,
+date archive) as well as on the individual post page.  Non-draft posts are
+never affected.
+
+Custom templates that render `post.title` should replicate this pattern.  A
+minimal implementation:
+
+```html+jinja
+<h2><a href="{{ post.url }}">{{ post.title }}{% if post.draft %} 🚧{% endif %}</a></h2>
+```
+
+To override the draft title colour, set `--draft-title-color` (and
+`--dark-draft-title-color` for dark mode) in your custom stylesheet.  See
+[Theming](theming.md) for the full CSS variable reference.
+
 ## Page object
 
 `Page` objects represent static pages from the `pages/` directory.

docs/theming.md

@@ -136,6 +136,7 @@ corresponding `--dark-*` values.
 | `--admonition-important-title-color` | `#8250df` | Important admonition title |
 | `--admonition-warning-title-color` | `#9a6700` | Warning admonition title |
 | `--admonition-caution-title-color` | `#d1242f` | Caution admonition title |
+| `--draft-title-color` | `#cc6600` | Draft post title colour |
 
 ### Dark mode palette variables
 
@@ -170,6 +171,7 @@ automatically to both the JavaScript toggle and the CSS media query fallback.
 | `--dark-admonition-important-title-color` | `#a371f7` | Dark important title |
 | `--dark-admonition-warning-title-color` | `#d29922` | Dark warning title |
 | `--dark-admonition-caution-title-color` | `#f85149` | Dark caution title |
+| `--dark-draft-title-color` | `#ffab40` | Dark mode draft post title colour |
 
 ## Example: full colour override
 

examples/themes/modern-compact/templates/_post_summary.html

@@ -16,8 +16,8 @@
         tag_dir (str): URL path segment for tag pages.
 #}
 {% macro post_summary(post, include_category=true) %}
-<article class="post-summary">
-    <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
+<article class="post-summary{% if post.draft %} draft-post{% endif %}">
+    <h2><a href="{{ post.url }}">{{ post.title }}{% if post.draft %} 🚧{% endif %}</a></h2>
     <div class="post-meta-line">
         {% if post.date %}
         <time datetime="{{ post.date.isoformat() }}">{{ post.date|format_date }}</time>

src/blogmore/templates/_post_summary.html

@@ -19,8 +19,8 @@
         tag_dir (str): URL path segment for tag pages.
 #}
 {% macro post_summary(post, include_category=true) %}
-<article class="post-summary">
-    <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
+<article class="post-summary{% if post.draft %} draft-post{% endif %}">
+    <h2><a href="{{ post.url }}">{{ post.title }}{% if post.draft %} 🚧{% endif %}</a></h2>
     {% if post.date %}
     <time datetime="{{ post.date.isoformat() }}">{{ post.date|format_date }}</time>
     {% endif %}

src/blogmore/templates/archive.html

@@ -64,7 +64,7 @@ <h3><a href="/{{ year }}/{{ month_key }}/{{ pagination_page1_suffix }}">{{ ns.ye
                 <ul class="archive-post-list">
                 {% for post in ns.years[year][month_key]['posts'] %}
                     <li>
-                        <a href="{{ post.url }}" class="post-title">{{ post.title }}</a>
+                        <a href="{{ post.url }}" class="post-title{% if post.draft %} draft-title{% endif %}">{{ post.title }}{% if post.draft %} 🚧{% endif %}</a>
                         {% if post.category %}
                         <span class="archive-metadata">
                             <a href="/{{ category_dir }}/{{ post.safe_category }}/{{ pagination_page1_suffix }}" class="category-link">{{ post.category }}</a>

src/blogmore/templates/post.html

@@ -18,7 +18,7 @@
 {% endblock %}
 
 {% block content %}
-<article class="post">
+<article class="post{% if post.draft %} draft-post{% endif %}">
     {% if prev_post or next_post %}
     <nav class="post-navigation post-navigation-top">
         {% if prev_post %}
@@ -37,7 +37,7 @@
     {% endif %}
 
     <header class="post-header">
-        <h1>{{ post.title }}</h1>
+        <h1>{{ post.title }}{% if post.draft %} 🚧{% endif %}</h1>
         {% if post.date %}
         <time datetime="{{ post.date.isoformat() }}">{{ post.date|format_date }}</time>
         {% endif %}

src/blogmore/templates/static/archive.css

@@ -76,6 +76,10 @@
     text-decoration: underline;
 }
 
+.archive-post-list .post-title.draft-title {
+    color: var(--draft-title-color);
+}
+
 .archive-post-list .archive-metadata {
     margin-left: 8px;
 }

src/blogmore/templates/static/style.css

@@ -47,6 +47,7 @@
     --code-lang-color: #888;
     --code-copy-color: #555;
     --code-copy-success-color: #1a7f37;
+    --draft-title-color: #cc6600;
 
     /* ---- Dark mode palette (shared by both dark mode selectors below) ---- */
     --dark-bg-color: #1a1a1a;
@@ -78,6 +79,7 @@
     --dark-code-lang-color: #999;
     --dark-code-copy-color: #bbb;
     --dark-code-copy-success-color: #3fb950;
+    --dark-draft-title-color: #ffab40;
 }
 
 /* Dark mode — applied by system preference (JavaScript disabled fallback).
@@ -116,6 +118,7 @@
         --code-lang-color: var(--dark-code-lang-color);
         --code-copy-color: var(--dark-code-copy-color);
         --code-copy-success-color: var(--dark-code-copy-success-color);
+        --draft-title-color: var(--dark-draft-title-color);
     }
 }
 
@@ -154,6 +157,7 @@
     --code-lang-color: var(--dark-code-lang-color);
     --code-copy-color: var(--dark-code-copy-color);
     --code-copy-success-color: var(--dark-code-copy-success-color);
+    --draft-title-color: var(--dark-draft-title-color);
 }
 
 /* =============================================================================
@@ -998,6 +1002,11 @@ img[src*="#centre"] {
     color: var(--hover-color);
 }
 
+.post-summary.draft-post h2 a,
+.post.draft-post .post-header h1 {
+    color: var(--draft-title-color);
+}
+
 .post-summary time {
     color: var(--text-secondary);
     font-size: 0.9em;

tests/test_renderer.py

@@ -1190,3 +1190,111 @@ def test_listing_meta_tags_omit_description_when_absent(
 
         assert '<meta name="description"' not in html
         assert '<meta property="og:description"' not in html
+
+    def test_draft_post_page_has_emoji_and_class(
+        self, sample_draft_post: Post
+    ) -> None:
+        """Test that a draft post page shows the 🚧 emoji and draft-post class."""
+        renderer = TemplateRenderer()
+        html = renderer.render_post(sample_draft_post, site_title="Test Blog")
+
+        assert "🚧" in html
+        assert "draft-post" in html
+
+    def test_non_draft_post_page_has_no_emoji_or_class(
+        self, sample_post: Post
+    ) -> None:
+        """Test that a non-draft post page does not show the 🚧 emoji or draft-post class."""
+        renderer = TemplateRenderer()
+        html = renderer.render_post(sample_post, site_title="Test Blog")
+
+        assert "🚧" not in html
+        assert "draft-post" not in html
+
+    def test_draft_post_index_has_emoji_and_class(
+        self, sample_draft_post: Post
+    ) -> None:
+        """Test that a draft post in the index shows the 🚧 emoji and draft-post class."""
+        renderer = TemplateRenderer()
+        html = renderer.render_index(
+            posts=[sample_draft_post],
+            page=1,
+            total_pages=1,
+            site_title="Test Blog",
+        )
+
+        assert "🚧" in html
+        assert "draft-post" in html
+
+    def test_non_draft_post_index_has_no_emoji_or_class(
+        self, sample_post: Post
+    ) -> None:
+        """Test that a non-draft post in the index does not show the 🚧 emoji or draft-post class."""
+        renderer = TemplateRenderer()
+        html = renderer.render_index(
+            posts=[sample_post],
+            page=1,
+            total_pages=1,
+            site_title="Test Blog",
+        )
+
+        assert "🚧" not in html
+        assert "draft-post" not in html
+
+    def test_draft_post_tag_page_has_emoji_and_class(
+        self, sample_draft_post: Post
+    ) -> None:
+        """Test that a draft post on a tag page shows the 🚧 emoji and draft-post class."""
+        renderer = TemplateRenderer()
+        html = renderer.render_tag_page(
+            tag="draft",
+            posts=[sample_draft_post],
+            site_title="Test Blog",
+        )
+
+        assert "🚧" in html
+        assert "draft-post" in html
+
+    def test_draft_post_category_page_has_emoji_and_class(
+        self, sample_draft_post: Post
+    ) -> None:
+        """Test that a draft post on a category page shows the 🚧 emoji and draft-post class."""
+        renderer = TemplateRenderer()
+        html = renderer.render_category_page(
+            category="webdev",
+            posts=[sample_draft_post],
+            site_title="Test Blog",
+        )
+
+        assert "🚧" in html
+        assert "draft-post" in html
+
+    def test_draft_post_archive_has_emoji_and_class(
+        self, sample_draft_post: Post
+    ) -> None:
+        """Test that a draft post on the archive page shows the 🚧 emoji and draft-title class."""
+        renderer = TemplateRenderer()
+        # Render the main archive page (no archive_title) to exercise the
+        # compact list view that uses the draft-title CSS class.
+        html = renderer.render_archive(
+            posts=[sample_draft_post],
+            site_title="Test Blog",
+        )
+
+        assert "🚧" in html
+        assert "draft-title" in html
+
+    def test_non_draft_post_archive_has_no_emoji_or_class(
+        self, sample_post: Post
+    ) -> None:
+        """Test that a non-draft post on the archive page does not show the 🚧 emoji or draft-title class."""
+        renderer = TemplateRenderer()
+        # Render the main archive page (no archive_title) to exercise the
+        # compact list view that uses the draft-title CSS class.
+        html = renderer.render_archive(
+            posts=[sample_post],
+            site_title="Test Blog",
+        )
+
+        assert "🚧" not in html
+        assert "draft-title" not in html