Merge pull request #1055 from thunderstore-io/communities-list

Add community list view

builder/src/scss/navbar.scss

@@ -6,7 +6,7 @@
         padding: 1.5rem 1.75rem;
 
         .grid {
-            column-count: 4;
+            column-count: 2;
 
             @media (max-width: 1500px) {
                 column-count: 3;
@@ -43,5 +43,10 @@
             opacity: 0.5;
             margin-bottom: 0.75rem;
         }
+
+        .link {
+            padding: 0 0.25rem;
+            margin-bottom: 0.75rem;
+        }
     }
 }

django/thunderstore/community/templates/community/community_list.html

@@ -0,0 +1,46 @@
+{% extends 'base.html' %}
+{% load cache %}
+{% load thumbnail %}
+
+{% block title %}All communities{% endblock %}
+
+{% block content %}
+{% cache 300 templates.community.list %}
+
+<div class="row">
+    <h3 class="col-12 mt-4">{{ page_title }}</h3>
+</div>
+
+{% if object_list %}
+    <div class="d-flex flex-row flex-wrap mb-3 package-list">
+        {% for object in object_list %}
+            <div class="col-6 col-md-4 col-lg-3 mb-2 p-1 d-flex flex-column">
+                <div class="p-0 bg-light">
+                    <a href="{{ object.full_url }}">
+                        {% if object.cover_image %}
+                        <img class="w-100" src="{% thumbnail object.cover_image 360x480 crop %}" alt="{{ object.name }} icon">
+                        {% else %}
+                        <img class="w-100" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAHgAQMAAACyyGUjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAADUExURSMfNp+RXmQAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAtSURBVHja7cExAQAAAMKg9U9tDQ8gAAAAAAAAAAAAAAAAAAAAAAAAAAAADtUAVkAAAQ2c1aEAAAAASUVORK5CYII=" alt="{{ object.name }} icon">
+                        {% endif %}
+                    </a>
+                </div>
+                <div class="bg-light p-2">
+                    <h5 class="mb-1 overflow-hidden text-nowrap w-100" title="{{ object.name }}">{{ object.name }}</h5>
+                    <div class="row mb-0">
+                        <div class="col-6" title="Packages">
+                            <span><i class="fas fa-cube text-dark mr-1"></i>&nbsp;{{ object.aggregated_fields.package_count }}</span>
+                        </div>
+                        <div class="col-6 text-right" title="Downloads">
+                            {{ object.aggregated_fields.download_count }}&nbsp;<i class="fas fa-download text-dark ml-1"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+{% else %}
+    <li class="my-4">No communities available</li>
+{% endif %}
+
+{% endcache %}
+{% endblock %}

django/thunderstore/community/tests/test_views.py

@@ -1,4 +1,5 @@
 import pytest
+from django.urls import reverse
 
 
 @pytest.mark.django_db
@@ -19,3 +20,15 @@ def test_package_dependants_view(client, active_package_listing, community_site)
         active_package_listing.dependants_url, HTTP_HOST=community_site.site.domain
     )
     assert response.status_code == 200
+
+
+@pytest.mark.django_db
+def test_community_list_view(client, community_site):
+    response = client.get(
+        reverse("communities"),
+        HTTP_HOST=community_site.site.domain,
+    )
+    assert response.status_code == 200
+    data = response.content.decode()
+    assert community_site.community.name in data
+    assert community_site.community.full_url in data

django/thunderstore/community/views.py

@@ -1,8 +1,21 @@
 from django.conf import settings
+from django.db.models import QuerySet
 from django.shortcuts import redirect
 from django.views import View
+from django.views.generic import ListView
+
+from thunderstore.community.models import Community
 
 
 class FaviconView(View):
     def get(self, *args, **kwargs):
         return redirect(f"{settings.STATIC_URL}favicon.ico")
+
+
+class CommunityListView(ListView):
+    model = Community
+
+    def get_queryset(self) -> QuerySet[Community]:
+        return Community.objects.listed().order_by(
+            "-aggregated_fields__package_count", "-datetime_created"
+        )

django/thunderstore/core/urls.py

@@ -8,6 +8,7 @@
 from rest_framework import permissions
 
 from thunderstore.community.urls import community_urls
+from thunderstore.community.views import CommunityListView
 from thunderstore.frontend.views import (
     ManifestV1ValidatorView,
     MarkdownPreviewView,
@@ -37,6 +38,7 @@
     path("logout/", LogoutView.as_view(), kwargs={"next_page": "/"}, name="logout"),
     path("package/", include((legacy_package_urls, "old_urls"), namespace="old_urls")),
     path("c/", include((community_urls, "communities"), namespace="communities")),
+    path("communities/", CommunityListView.as_view(), name="communities"),
     path("settings/", include(settings_urls)),
     path("moderation/", include(moderation_urls)),
     path("favicon.ico", FaviconView.as_view()),

django/thunderstore/frontend/templates/base.html

@@ -58,16 +58,9 @@ <h6 class="title">Popular communities</h6>
                                     {% endfor %}
                                 </div>
                             </div>
-                            {% if selectable_communities|length > 6 %}
-                                <div class="section">
-                                    <h6 class="title">Other communities</h6>
-                                    <div class="grid" role="list">
-                                        {% for community in selectable_communities|slice:"8:"|dictsort:"name" %}
-                                            <a class="grid-item" href="{{ community.full_url }}" role="listitem">{{ community.name }}</a>
-                                        {% endfor %}
-                                    </div>
-                                </div>
-                            {% endif %}
+                            <div class="section">
+                                <a class="link" href="{% url 'communities' %}">View all communities ({{ selectable_communities|length }})</a>
+                            </div>
                         </div>
                         {% endif %}
                     </div>