From 23985a3263ac83aab2f72e90ec98bfea4632a7fc Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Thu, 20 Aug 2020 15:45:39 +0200
Subject: [PATCH] Highlight targeted comment & add permalink

---
 articles/static/style.css                     |  8 +++++
 .../templates/articles/article_detail.html    | 32 +------------------
 .../templates/articles/comment_snippet.html   | 32 +++++++++++++++++++
 3 files changed, 41 insertions(+), 31 deletions(-)
 create mode 100644 articles/templates/articles/comment_snippet.html

diff --git a/articles/static/style.css b/articles/static/style.css
index b4b5582..99f1819 100644
--- a/articles/static/style.css
+++ b/articles/static/style.css
@@ -229,6 +229,14 @@ textarea, input {
     color: var(--main3);
 }
 
+.comment:target {
+    background-color: var(--warning-background);
+}
+
+.permalink {
+    font-size: 80%;
+}
+
 /* MESSAGES */
 .messages p {
     background-color: var(--background2);
diff --git a/articles/templates/articles/article_detail.html b/articles/templates/articles/article_detail.html
index caa74b9..18956d4 100644
--- a/articles/templates/articles/article_detail.html
+++ b/articles/templates/articles/article_detail.html
@@ -11,35 +11,5 @@
             {{ article.get_formatted_content|safe }}
         </div>
     </article>
-    <section class="comments">
-        <h2>Comments</h2>
-        {% for comment in comments %}
-            <article id="{{ comment.id }}" class="comment">
-                <p class="metadata">
-                    <span class="username">{{ comment.username }}</span> |
-                    <time datetime="{{ comment.created_at|date:'c' }}">
-                        {{ comment.created_at|date:"DATETIME_FORMAT" }}
-                    </time>
-                    {% include "articles/admin_link_snippet.html" with article=comment %}
-                </p>
-                <p class="content">
-                    {{ comment.content|linebreaksbr }}
-                </p>
-            </article>
-        {% empty %}
-            No reaction yet, write your own!
-        {% endfor %}
-        <form id="comment-form" action="{% url 'create-comment' slug=article.slug %}" method="post">
-            {% csrf_token %}
-            <table>
-                {{ form.as_table }}
-            </table>
-            <button type="submit">Submit</button>
-            <p class="helptext">
-                Your comment may not be approved if it's not respectful, on topic or spammy.
-                If you feel I've made a mistake with your comment, please
-                <a href="/about-me/">send me a message</a>!
-            </p>
-        </form>
-    </section>
+    {% include 'articles/comment_snippet.html' %}
 {% endblock %}
diff --git a/articles/templates/articles/comment_snippet.html b/articles/templates/articles/comment_snippet.html
new file mode 100644
index 0000000..2ac2681
--- /dev/null
+++ b/articles/templates/articles/comment_snippet.html
@@ -0,0 +1,32 @@
+<section class="comments">
+    <h2>Comments</h2>
+    {% for comment in comments %}
+        <article id="{{ comment.id }}" class="comment">
+            <p class="metadata">
+                <a class="permalink" title="Permalink" href="#{{ comment.id }}">🔗</a>
+                <span class="username">{{ comment.username }}</span> |
+                <time datetime="{{ comment.created_at|date:'c' }}">
+                    {{ comment.created_at|date:"DATETIME_FORMAT" }}
+                </time>
+                {% include "articles/admin_link_snippet.html" with article=comment %}
+            </p>
+            <p class="content">
+                {{ comment.content|linebreaksbr }}
+            </p>
+        </article>
+    {% empty %}
+        No reaction yet, write your own!
+    {% endfor %}
+    <form id="comment-form" action="{% url 'create-comment' slug=article.slug %}" method="post">
+        {% csrf_token %}
+        <table>
+            {{ form.as_table }}
+        </table>
+        <button type="submit">Submit</button>
+        <p class="helptext">
+            Your comment may not be approved if it's not respectful, on topic or spammy.
+            If you feel I've made a mistake with your comment, please
+            <a href="/about-me/">send me a message</a>!
+        </p>
+    </form>
+</section>