Tags are now available on the blog

10 files changed, 100 insertions, 9 deletions

diff --git a/blog/urls.py b/blog/urls.py
index eda17e20..e21ed5de 100644
--- a/blog/urls.py
+++ b/blog/urls.py
@@ -21,6 +21,8 @@ urlpatterns = [
     path('archives/<str:date>', views.articles, name='archive_posts'),
     path('categories', views.categories, name='categories'),
     path('categories/<str:cg>', views.articles, name='category_posts'),
+    path('tags', views.tags, name='tags'),
+    path('tags/<str:tag_slug>', views.tag_posts, name='tag_posts'),
     path('~<str:username>', views.user_activity, name='user_activity'),
     path('policy', views.policy, name='policy'),
     path('socialify', views.socialify, name='socialify'),
diff --git a/blog/views.py b/blog/views.py
index d3539dda..ce04688d 100644
--- a/blog/views.py
+++ b/blog/views.py
@@ -26,7 +26,7 @@ from users.tokens import CaptchaTokenGenerator
 from .context_processors import (add_excerpt, add_num_comments, avatar_list,
                                  check_spam, comment_processor,
                                  highlight_code_blocks, recent_posts)
-from .models import AnonymousCommentUser, Category, Comment, Post
+from .models import AnonymousCommentUser, Category, Comment, Post, Tag
 from .recommender import next_read
 
 load_dotenv()
@@ -50,6 +50,24 @@ def home(request):
     announcements = announcements if len(announcements) > 0 else None
     return render(request, 'blog/home.html', {'title': 'Home', 'posts': recent_posts(), 'announcements': announcements})
 
+def tags(request):
+    tags = Tag.objects.all()
+    # add occurance count to each tag
+    for tag in tags:
+        tag.count = len(Post.objects.filter(tags__name__in=[tag.name]))
+        tag.pxs = 10 + tag.count * 2 if tag.count < 10 else 30 + tag.count
+        tag.pxs = min(tag.pxs, 36)
+    tags = sorted(tags, key=lambda x: x.count, reverse=True)
+    return render(request, 'blog/tags.html', {'title': 'Tags', 'tags': tags})
+
+def tag_posts(request, tag_slug):
+    tag = Tag.objects.get(slug=tag_slug)
+    posts = Post.objects.filter(tags__name__in=[tag.name]).order_by('views')
+    for post in posts:
+        post.excerpt = add_excerpt(post)
+        post.num_comments = add_num_comments(post)
+    return render(request, 'blog/tagged.html', {'title': 'Posts Tagged With: ' + tag.name, 'posts': posts, 'tag': tag})
+
 def account(request):
     user = request.user
     avatarlist = avatar_list()
diff --git a/static/css/phone_compatibility.css b/static/css/phone_compatibility.css
index c38112f6..f329c68e 100644
--- a/static/css/phone_compatibility.css
+++ b/static/css/phone_compatibility.css
@@ -141,6 +141,11 @@ I am not sure yet.
         border-radius: 8px;
     }
 
+    .post-actions > span {
+        display: block !important;
+        float: none !important;
+    }
+
     #ハンバーガー {
         display: block !important;
     }
diff --git a/static/css/sidebar.css b/static/css/sidebar.css
index e43c3b07..35e7a853 100644
--- a/static/css/sidebar.css
+++ b/static/css/sidebar.css
@@ -81,9 +81,9 @@
 }
 
 #user-area > ul {
-    position: relative;
+    position: absolute;
     left: 110px;
-    top: 45px;
+    top: 58px;
 }
 
 #navigation-area h2,
diff --git a/static/css/styles.css b/static/css/styles.css
index 7f9fc550..526a4fc9 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -461,6 +461,26 @@ blockquote {
     margin-right: 11px;
 }
 
+.tag {
+    display: inline-block;
+    margin: 5px 2px;
+    padding: 2px 10px;
+    font-size: 11px;
+    font-weight: normal;
+    text-transform: capitalize;
+    background-color: #311b4f;
+    color: #dddddd;
+    border-radius: 10px;
+}
+
+.tag:nth-child(1) {
+    margin-left: 0px;
+}
+
+.tag:nth-child(n) {
+    margin-right: 0px;
+}
+
 #article>h1 {
     font-size: 32px;
     margin-bottom: 10px;
diff --git a/templates/blog/partials/post_list.html b/templates/blog/partials/post_list.html
index cdab9c41..d72bd723 100644
--- a/templates/blog/partials/post_list.html
+++ b/templates/blog/partials/post_list.html
@@ -30,8 +30,16 @@
             {{ post.excerpt | safe }}
         </div>
         <div class="post-actions" style="clear: both;">
-            <a href="{% url 'blog:post' post.slug %}">Continue Reading</a> | <a href="{% url 'blog:post' post.slug %}#comments">{{ post.num_comments }} 
-            Comment{% if not post.num_comments == 1 %}s{% endif %}</a>
+            <span style="float: left; margin: 8px 0 0 0;">
+                <a href="{% url 'blog:post' post.slug %}">Continue Reading</a> | <a href="{% url 'blog:post' post.slug %}#comments">{{ post.num_comments }} 
+                    Comment{% if not post.num_comments == 1 %}s{% endif %}</a>
+            </span>
+            {% comment %} tags {% endcomment %}
+            <span style="float: right;">
+                {% for tag in post.tags.all %}
+                    <a class="tag" href="{% url 'blog:tag_posts' tag.slug %}">{{ tag.name }}</a>
+                {% endfor %}
+            </span>
         </div>
     </div>
 {% endfor %}
\ No newline at end of file
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index 68018db5..0944cc89 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -38,7 +38,7 @@
 {% endif %}
 
 {% if user.is_authenticated %}
-<div id="user-area">
+<div id="user-area" style="position: relative">
     <h2>Hello, {{ user.username }}!</h2>
     <ul>
         <li>
@@ -118,16 +118,16 @@
                 </a>
             </span>
         </li>
-        {% comment %} <li>
+        <li>
             <span>
                 <img src="{% static 'images/site/icons/issues.gif' %}" alt="Tags" border="0">
             </span>
             <span>
-                <a href="#">
+                <a href="{% url 'blog:tags' %}">
                     Tags
                 </a>
             </span>
-        </li> {% endcomment %}
+        </li>
         <li>
             <span>
                 <img src="{% static 'images/site/icons/translate.png' %}" alt="Translate" border="0">
diff --git a/templates/blog/post.html b/templates/blog/post.html
index 1c27eb4f..8769c253 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -39,7 +39,13 @@
         <span style="margin-left: 4px;">{% localtime on %}{{ post.date | date:"M d, Y" }}{% endlocaltime %}</span>
         <span style="margin-left: 4px;"><b>|</b></span>
         <span style="margin-left: 4px;">{{ post.views }} view{% if not post.views == 1%}s{% endif %}</span>
+
     </div>
+    <p>
+        {% for tag in post.tags.all %}
+            <a class="tag" href="{% url 'blog:tag_posts' tag.slug %}">{{ tag.name }}</a>
+        {% endfor %}
+    </p>
 
     <div id="article-body">
         {{ post.first_paragraph | safe }}
diff --git a/templates/blog/tagged.html b/templates/blog/tagged.html
new file mode 100644
index 00000000..192ef2ee
--- /dev/null
+++ b/templates/blog/tagged.html
@@ -0,0 +1,12 @@
+{% extends 'blog/partials/base.html' %} {% block content %}
+{% load static %}
+<h2 style="margin-top:15px;">Posts Tagged With "{{ tag.name }}"</h2>
+{% if posts %}
+<div style="margin-top: -10px;">
+    {% include 'blog/partials/post_list.html' %}
+</div>
+{% else %}
+<p>There are no posts tagged with "{{ tag.name }}".</p>
+{% endif %}
+{% endblock %}
+
diff --git a/templates/blog/tags.html b/templates/blog/tags.html
new file mode 100644
index 00000000..44dcac61
--- /dev/null
+++ b/templates/blog/tags.html
@@ -0,0 +1,20 @@
+{% extends 'blog/partials/base.html' %} {% block content %}
+<h2 style="margin-top:15px;">All Tags</h2>
+{% load static %}
+{% if tags %}
+{% comment %} Varying font sizes based on tag.count {% endcomment %}
+{% comment %} <ol> {% endcomment %}
+<center>
+{% for tag in tags %}
+    <span style="margin-bottom:8px;">
+        <a class="tag" style="font-size:{{ tag.pxs }}px;" href="{% url 'blog:tag_posts' tag.slug %}">{{ tag.name }} ({{ tag.count }} post{{ tag.count|pluralize }})</a>
+    </span>
+{% endfor %}
+</center>
+{% comment %} </ol> {% endcomment %}
+{% else %}
+<p>No Tags found.</p>
+{% endif %}
+
+{% endblock %}
+