Feature/354 add htmx home page tabs (#362)

* Adding HTMX dependencies
Adding HTMX behaviour to users tab

* HTMX for languages on home page

* Initial tests

* Remove unneccessary trigger

* HTMX HTML

* top rated and tag list

* Touch ups and changing tests

* flake8 fix

* isort fix

cab/tests/tests.py

@@ -1,9 +1,12 @@
 from django.contrib.auth.models import AnonymousUser, User
 from django.template import Context, Template
-from django.test import SimpleTestCase, TestCase
+from django.test import RequestFactory, SimpleTestCase, TestCase
 from django.urls import reverse
 from rest_framework import status
 
+from cab.views.languages import language_list
+from cab.views.popular import top_authors, top_tags
+
 from ..api.serializers import SnippetSerializer
 from ..models import Bookmark, Language, Snippet
 from ..templatetags.markup import safe_markdown
@@ -636,3 +639,26 @@ def test_get_all_snippets(self):
         serializer = SnippetSerializer(snippets, many=True)
         self.assertEqual(response.data, serializer.data)
         self.assertEqual(response.status_code, status.HTTP_200_OK)
+
+
+class HomePageHtmxTestCase(TestCase):
+    def setUp(self):
+        self.factory = RequestFactory()
+
+    def test_users(self):
+        request = self.factory.get("/users")
+        request.htmx = True
+        response = top_authors(request)
+        self.assertEqual(response.status_code, 200)
+
+    def test_languages(self):
+        request = self.factory.get("/languages")
+        request.htmx = True
+        response = language_list(request)
+        self.assertEqual(response.status_code, 200)
+
+    def test_tags(self):
+        request = self.factory.get("/tags")
+        request.htmx = True
+        response = top_tags(request)
+        self.assertEqual(response.status_code, 200)

cab/views/languages.py

@@ -5,6 +5,13 @@
 
 
 def language_list(request):
+    if request.htmx:
+        return object_list(
+            request,
+            queryset=Language.objects.all(),
+            template_name="cab/partials/language_list.html",
+            paginate_by=20,
+        )
     return object_list(
         request,
         queryset=Language.objects.all(),

cab/views/popular.py

@@ -3,6 +3,14 @@
 
 
 def top_authors(request):
+    if request.htmx:
+        return object_list(
+            request,
+            queryset=Snippet.objects.top_authors(),
+            template_name="cab/partials/top_authors.html",
+            paginate_by=20,
+        )
+
     return object_list(
         request, queryset=Snippet.objects.top_authors(), template_name="cab/top_authors.html", paginate_by=20
     )
@@ -15,6 +23,14 @@ def top_languages(request):
 
 
 def top_tags(request):
+    if request.htmx:
+        return object_list(
+            request,
+            queryset=Snippet.objects.top_tags(),
+            template_name="cab/partials/tag_list.html",
+            paginate_by=20,
+        )
+
     return object_list(
         request,
         queryset=Snippet.objects.top_tags(),
@@ -25,6 +41,13 @@ def top_tags(request):
 
 def top_bookmarked(request):
     queryset = Snippet.objects.most_bookmarked()
+    if request.htmx:
+        return month_object_list(
+            request,
+            queryset=queryset,
+            template_name="cab/partials/most_bookmarked.html",
+            paginate_by=20,
+        )
     return month_object_list(
         request,
         queryset=queryset,
@@ -34,6 +57,13 @@ def top_bookmarked(request):
 
 
 def top_rated(request):
+    if request.htmx:
+        return object_list(
+            request,
+            queryset=Snippet.objects.top_rated(),
+            template_name="cab/partials/top_rated.html",
+            paginate_by=20,
+        )
     queryset = Snippet.objects.top_rated()
     return month_object_list(
         request,

djangosnippets/settings/base.py

@@ -63,6 +63,7 @@ def user_url(user):
     "captcha",
     "django_extensions",
     "rest_framework",
+    "django_htmx",
 )
 
 MIDDLEWARE = (
@@ -77,6 +78,7 @@ def user_url(user):
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.contrib.flatpages.middleware.FlatpageFallbackMiddleware",
     "ratelimitbackend.middleware.RateLimitMiddleware",
+    "django_htmx.middleware.HtmxMiddleware",
 )
 
 TEMPLATES = [

djangosnippets/settings/testing.py

@@ -8,6 +8,7 @@
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
+    "django_htmx.middleware.HtmxMiddleware",
 )
 
 

djangosnippets/static/tailwind/site.css

@@ -1,5 +1,22 @@
+
+.htmx-request .results{
+    display:none;
+  }
+
+  #base-container .bars{
+    display:none;
+  }
+  .htmx-request .bars{
+    display:block !important;
+    opacity:1;
+  }
+
+
+
+
 @tailwind base;
 
 @tailwind components;
 
 @tailwind utilities;
+

djangosnippets/templates/base.html

@@ -6,10 +6,9 @@
   <link rel="shortcut icon" type="image/x-icon" href="{% static "img/favicon.ico" %}" />
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">
   <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
-  <link rel="stylesheet" href="{% static "css/main.css" %}" type="text/css" />
   <link rel="alternate" href="{% url 'cab_feed_latest' %}" type="application/atom+xml" title="Feed of latest snippets" />
   <link href="{% static "css/site.css" %}" rel="stylesheet">
-
+  <link rel="stylesheet" href="{% static "css/main.css" %}" type="text/css" />
   {% block feeds %}{% endblock %}
 </head>
 <body class="{% block bodyclass %}{% endblock %}">
@@ -40,11 +39,11 @@
     {% block secondary_nav %}
     <nav id="subnav">
       <ul>
-        <li><a href="{% url 'cab_top_authors' %}">By author</a></li>
-        <li><a href="{% url 'cab_language_list' %}">By language</a></li>
-        <li><a href="{% url 'cab_top_tags' %}">By tag</a></li>
-        <li><a href="{% url 'cab_top_rated' %}">Highest rated</a></li>
-        <li><a href="{% url 'cab_top_bookmarked' %}">Most bookmarked</a></li>
+        <li><a hx-get="{% url 'cab_top_authors' %}" hx-target="#base-container" hx-swap="innerHTML" hx-trigger="click">By author</a></li>
+        <li><a hx-get="{% url 'cab_language_list' %}" hx-target="#base-container" hx-swap="innerHTML" hx-trigger="click" >By language</a></li>
+        <li><a hx-get="{% url 'cab_top_tags' %}" hx-target="#base-container" hx-swap="innerHTML" hx-trigger="click">By tag</a></li>
+        <li><a hx-get="{% url 'cab_top_rated' %}" hx-target="#base-container" hx-swap="innerHTML" hx-trigger="click">Highest rated</a></li>
+        <li><a hx-get="{% url 'cab_top_bookmarked' %}" hx-target="#base-container" hx-swap="innerHTML" hx-trigger="click">Most bookmarked</a></li>
       </ul>
     </nav>
     {% endblock %}
@@ -58,6 +57,7 @@
     {% endfor %}
   {% endif %}
 
+  <div id="base-container">
   <h1>{% block content_header %}{% endblock %}</h1>
   <div id="content">
       {% block content %}
@@ -70,7 +70,7 @@ <h1>{% block content_header %}{% endblock %}</h1>
   {% block extra_content %}
   {% endblock %}
   </div>
-
+</div>
   <footer>
     <p id="copyright">Written by <a href="https://github.com/django-de/djangosnippets.org/graphs/contributors">various people</a>. Hosted by <a href="https://www.heroku.com" class="heroku">Heroku</a>, powered by <a href="http://www.djangoproject.com/">Django</a></p>
     <p class="legal"><a href="/about/">About</a> | <a href="/about/faq/">FAQ</a> | <a href="/about/tos/">Terms of service</a> | <a href="/about/legal/">Legal notices</a></p>

djangosnippets/templates/cab/partials/language_list.html

@@ -0,0 +1,15 @@
+{% load static %}
+
+
+<img class="bars" src="{% static 'img/bars.svg' %}"/> 
+  <h1>All languages</h1>
+  <div id="content">
+  <ul>
+  {% for language in object_list %}
+    <li><a href="{{ language.get_absolute_url }}">{{ language.name }}</a></li>
+  {% endfor %}
+  </ul>
+
+  <p class="pagination">{% if has_previous %}<a href="?page={{ previous }}">&lt; Previous {{ results_per_page }}</a>{% endif %}&nbsp;&nbsp;{% if has_next %}<a href="?page={{ next }}">Next {{ results_per_page }} &gt;</a>{% endif %}</p>
+
+</div>

djangosnippets/templates/cab/partials/most_bookmarked.html

@@ -0,0 +1,69 @@
+
+{% load core_tags %}
+{% load static %}
+
+<h1>Most bookmarked snippets{% if months %} last {{ months }} months{% endif %}</h1>
+
+<div id="content">
+
+
+  {% if object_list %}
+    <table class="snippet_list">
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Author</th>
+          <th>Tags</th>
+          <th>Publication date</th>
+          <th>Rating</th>
+        </tr>
+      </thead>
+      <tbody>
+    {% for snippet in object_list %}
+      <tr>
+        <td><a href="{{ snippet.get_absolute_url }}">{% if not snippet.title|strip %}Untitled{% else %}{{ snippet.title }}{% endif %}</a></td>
+        <td><a href="{{ snippet.author.get_absolute_url }}">{{ snippet.author.username }}</a></td>
+        <td>{% for tag in snippet.tags.all %}<a href="{% url 'cab_snippet_matches_tag' tag.slug %}">{{ tag.name }}</a> {% endfor %}</td>
+        <td>{{ snippet.pub_date }}</td>
+        <td><span class="rating-{% if snippet.rating_score >= 0 %}positive{% else %}negative{% endif %}">{% if snippet.rating_score >= 0 %}+{% endif %}{{ snippet.rating_score }}</span></td>
+      </tr>
+    {% endfor %}
+      </tbody>
+    </table>
+    <p class="pagination">
+      {% if has_previous %}
+        <a href="?page={{ previous }}{% if months %}&amp;months={{ months }}{% endif %}">&lt; Previous {{ results_per_page }}</a>
+      {% endif %}
+      &nbsp;&nbsp;
+      {% if has_next %}
+        <a href="?page={{ next }}{% if months %}&amp;months={{ months }}{% endif %}">Next {{ results_per_page }} &gt;</a>
+      {% endif %}
+    </p>
+    <p class="count">{{ hits }} snippet{{ hits|pluralize }} posted so far.</p>
+  {% else %}
+    <p class="empty">No snippets posted yet.</p>
+  {% endif %}
+</div>
+
+
+<div id="sidebar">
+<p>You're looking at the most-bookmarked snippets on the site; {% if user.is_authenticated %}you can help useful snippets show up here by clicking the "bookmark this snippet" link on their pages and ading them to <a href="{% url 'cab_user_bookmarks' %}">your bookmarks</a>{% else %}if you'd like to help useful snippets show up here, <a href="{% url 'account_login' %}">sign up for an account</a> and you'll get your own bookmarks list{% endif %}.</p>
+
+  <nav class="filter">
+    <h3>Filter by date</h3>
+    <ul>
+      <li{% if not months %} class="active"{% endif %}><a href="{{ request.path }}">Any time</a></li>
+      <li{% if months == 3 %} class="active"{% endif %}><a href="{{ request.path }}?months=3">3 months</a></li>
+      <li{% if months == 6 %} class="active"{% endif %}><a href="{{ request.path }}?months=6">6 months</a></li>
+      <li{% if months == 12 %} class="active"{% endif %}><a href="{{ request.path }}?months=12">1 year</a></li>
+    </ul>
+  </nav>
+
+  <p><a rel="alternate" href="{% url 'cab_feed_latest' %}" type="application/atom+xml"><i class="fa fa-fw fa-rss-square"></i>Feed of latest snippets</a></p>
+</div>
+
+
+
+
+
+

djangosnippets/templates/cab/partials/tag_list.html

@@ -0,0 +1,27 @@
+
+{% load core_tags %}
+<h1>All tags</h1>
+<div id="content">
+  {% if object_list %}
+    <ul>
+    {% for tag in object_list %}
+      <li><a href="{% url 'cab_snippet_matches_tag' tag.slug %}">{{ tag.name }}</a></li>
+    {% endfor %}
+    </ul>
+
+    <p class="pagination">{% if has_previous %}<a href="?page={{ previous }}">&lt; Previous {{ results_per_page }}</a>{% endif %}&nbsp;&nbsp;{% if has_next %}<a href="?page={{ next }}">Next {{ results_per_page }} &gt;</a>{% endif %}</p>
+  {% else %}
+    <p>No tags have been used yet.</p>
+  {% endif %}
+
+</div>
+<div id="sidebar">  
+<h2>Most popular tags</h2>
+
+  <ol>
+  {% for tag in "cab.snippet"|call_manager:"top_tags"|slice:":5" %}
+    <li><a href="{% url 'cab_snippet_matches_tag' tag.slug %}">{{ tag.name }}</a></li>
+  {% endfor %}
+  </ol>
+</div>
+

djangosnippets/templates/cab/partials/top_authors.html

@@ -0,0 +1,21 @@
+{% load static %}
+
+<img class="bars" src="{% static 'img/bars.svg' %}"/>
+<h1>Top authors</h1>
+  <div id="content">
+    <table>
+      <thead>
+          <tr>
+              <th>Name</th>
+              <th>Number of snippets</th>
+          </tr>
+      </thead>
+      <tbody>
+  {% for author in object_list %}
+    <tr><td><a href="{{ author.get_absolute_url }}">{{ author.username }}</a></td><td>({{ author.snippet_set.count }} snippet{{ author.snippet_set.count|pluralize }})</td></tr>
+  {% endfor %}
+      </tbody>
+  </table>
+  </div>
+
+