Updated SnippetList new feature.

Author: Antoliny0919

base/components/components.py

@@ -0,0 +1,51 @@
+from typing import Literal, Optional
+
+from django_components import Component, register
+from pydantic import BaseModel
+
+from base.pagination import PAGE_VAR, Pagination
+from base.templatetags.base_templatetags import querystring
+
+
+class PaginationItem(BaseModel):
+    kind: Literal["current", "ellipsis", "number"]
+    text: Optional[str | int] = None
+    attrs: Optional[dict] = None
+
+
+@register("pagination")
+class PaginationComponent(Component):
+    template_file = "pagination.html"
+
+    class Kwargs(BaseModel):
+        pagination_obj: Pagination
+        model_config = {"arbitrary_types_allowed": True}
+
+    def pagination_number(self, pagination: Pagination, num: str | int) -> PaginationItem:
+        """
+        Generates a list of `PaginatedItem`, each representing an individual page with
+        its associated properties in a pagination navigation list.
+        """
+        if num == pagination.paginator.ELLIPSIS:
+            return PaginationItem(kind="ellipsis", text=str(pagination.paginator.ELLIPSIS))
+        elif num == pagination.page_num:
+            return PaginationItem(kind="current", text=num)
+        else:
+            link = querystring(None, {**pagination.params, PAGE_VAR: num})
+            return PaginationItem(
+                kind="number",
+                text=num,
+                attrs={"href": link},
+            )
+
+    def get_template_data(self, args, kwargs, slots, context):
+        pagination = kwargs.pagination_obj
+        page_elements = [self.pagination_number(pagination, page_num) for page_num in pagination.page_range]
+        previous_page_link = f"?{PAGE_VAR}={pagination.page_num - 1}" if pagination.page.has_previous() else ""
+        next_page_link = f"?{PAGE_VAR}={pagination.page_num + 1}" if pagination.page.has_next() else ""
+        return {
+            "pagination": pagination,
+            "previous_page_link": previous_page_link,
+            "next_page_link": next_page_link,
+            "page_elements": page_elements,
+        }

base/components/pagination.html

@@ -0,0 +1,30 @@
+{% if pagination.multi_page %}
+<nav class="justify-center my-8" aria-labelledby="pagination">
+    <h2 id="pagination" class="sr-only">Pagination {{ pagination.opts.verbose_name_plural }}</h2>
+    <ul class="flex justify-center gap-2 transition-colors duration-200 ease-out ml-0">
+        <li>
+            <a class="py-[5px] px-[10px] mr-2 no-underline rounded-lg border-1 border-transparent text-base hover:border-base-orange-400 {% if previous_page_link == '' %}text-base-gray-400 hover:border-transparent cursor-default{% endif %}" href="{{ previous_page_link }}" rel="prev" aria-label="Previous page">
+                <span class="arrow-left inline-flex items-center">Previous</span>
+            </a>
+        </li>
+        {% with page_link_css="py-[5px] px-[10px] border-1 border-transparent rounded-lg no-underline hover:border-base-orange-400" %}
+        {% for page_item in page_elements %}
+        <li class="inline-block">
+            {% if page_item.kind == 'ellipsis' %}
+            {{ page_item.text }}
+            {% elif page_item.kind == 'current' %}
+            <a href="" class="{{ page_link_css }} bg-base-orange-400 text-base-white-400 cursor-default" aria-current="page">{{ page_item.text }}</a>
+            {% else %}
+            <a {% html_attrs page_item.attrs class=page_link_css %}>{{ page_item.text }}</a>
+            {% endif %}
+        </li>
+        {% endfor %}
+        {% endwith %}
+        <li>
+            <a class="py-[5px] px-[10px] ml-2 no-underline rounded-lg border-1 border-transparent text-base hover:border-base-orange-400 {% if next_page_link == '' %}text-base-gray-400 hover:border-transparent cursor-default{% endif %}" href="{{ next_page_link }}" rel="next" aria-label="Next page">
+                <span class="arrow-right inline-flex items-center">Next</span>
+            </a>
+        </li>
+    </ul>
+</nav>
+{% endif %}

base/main.py

@@ -0,0 +1,28 @@
+from .pagination import PAGE_VAR, Pagination
+
+
+class ObjectList:
+    pagination_class = Pagination
+
+    def __init__(self, request, model, queryset, list_per_page):
+        self.model = model
+        self.queryset = queryset
+        self.list_per_page = list_per_page
+        self.params = dict(request.GET.lists())
+        if PAGE_VAR in self.params:
+            del self.params[PAGE_VAR]
+        self.result_objects = self.get_objects(request)
+
+    def paginate(self, request, queryset):
+        pagination = self.pagination_class(
+            request,
+            self.model,
+            queryset,
+            self.list_per_page,
+        )
+        self.pagination = pagination
+        return pagination.get_objects()
+
+    def get_objects(self, request):
+        paginate_result = self.paginate(request, self.queryset)
+        return paginate_result

base/templatetags/components.py

@@ -0,0 +1,19 @@
+from django_components import Component, register
+from pydantic import BaseModel
+
+from base.main import ObjectList
+
+
+@register("snippet_list")
+class SnippetListComponent(Component):
+
+    template_file = "templates/snippet_list.html"
+
+    class Kwargs(BaseModel):
+        snippet_list: ObjectList
+        model_config = {"arbitrary_types_allowed": True}
+
+    def get_template_data(self, args, kwargs, slots, context):
+        return {
+            "snippet_list": kwargs.snippet_list.result_objects,
+        }

cab/components/components.py

@@ -0,0 +1,30 @@
+<section class="border-2 border-base-green-400 rounded-sm" aria-labelledby="snippet-list-title">
+    <h2 id="snippet-list-title" class="sr-only">Snippet List</h2>
+    {% for snippet in snippet_list %}
+    <article class="relative flex flex-col px-8 pt-4 pb-1 border-b-2 border-base-green-400 last:border-b-0 lg:flex-row">
+        <div class="flex flex-row justify-start gap-3 text-sm md:text-base lg:my-6 lg:w-1/5 lg:flex-col">
+            <span>{{ snippet.rating_score }} rating</span>
+            <span>{{ snippet.bookmark_count }} bookmark</span>
+        </div>
+        <div class="flex flex-col lg:w-4/5">
+            <h3 class="py-2 my-0 text-lg md:text-2xl">
+                <a href="{{ snippet.get_absolute_url }}" class="text-base-green-400 hover:text-base-green-800 underline underline-offset-8 decoration-3 decoration-base-orange-400 hover:decoration-10 duration-500">{{ snippet.title|truncatechars:"80" }}</a>
+            </h3>
+            <p class="mb-0 py-4 min-h-[4rem] text-xs md:text-sm">{{ snippet.description|truncatechars:"250" }}</p>
+            <footer class="flex flex-col flex-wrap py-2 text-xs md:text-sm">
+                <div class="my-1">
+                    <strong class="text-sm md:text-base mr-2">Tags : </strong>
+                    <ul class="inline-flex gap-2 flex-wrap list-none m-0 text-xs md:text-sm">{% for tag in snippet.tags.all %}<li class="my-2 inline"><a href="{% url 'cab_snippet_matches_tag' tag.slug %}" class="py-1.5 px-2 text-white border-2 bg-base-green-400 border-base-green-400 rounded-lg hover:bg-base-white hover:text-base-green-400 duration-500 transition-colors no-underline">{{ tag.name }}</a></li>{% endfor %}</ul>
+                </div>
+                <p class="text-start">
+                    <strong class="text-sm md:text-base">Author : </strong>
+                    <a href="{{ snippet.author.get_absolute_url }}" class="text-base-green-400 underline underline-offset-4 hover:text-base-green-800">{{ snippet.author.username }}</a>
+                    <span class="mx-2" aria-hidden="true"> | </span>
+                    <strong class="text-sm md:text-base">Updated : </strong>
+                    <time>{{ snippet.updated_date }}</time>
+                </p>
+            </footer>
+        </div>
+    </article>
+    {% endfor %}
+</section>

cab/components/templates/snippet_list.html

@@ -7,6 +7,7 @@
 from django.utils.safestring import mark_safe
 from markdown import markdown as markdown_func
 
+from base.main import ObjectList
 from base.pagination import Pagination
 
 
@@ -35,23 +36,29 @@ def object_list(
         hits
             number of objects, total
     """
+    from cab.models import Snippet
+
     if extra_context is None:
         extra_context = {}
     queryset = queryset._clone()
     model = queryset.model
     opts = model._meta
     if paginate_by:
-        pagination = Pagination(request, model, queryset, paginate_by)
-        object_list = pagination.get_objects()
+        if queryset.model == Snippet:
+            object_list = ObjectList(request, queryset.model, queryset, 15)
+            pagination = object_list.pagination
+        else:
+            pagination = Pagination(request, model, queryset, paginate_by)
+            object_list = pagination.get_objects()
 
         context = {
-            "%s_list" % template_object_name: object_list,
+            "object_list": object_list,
             "pagination": pagination,
             "hits": pagination.result_count,
         }
     else:
         context = {
-            "%s_list" % template_object_name: object_list,
+            "object_list": queryset,
         }
         if not allow_empty and len(queryset) == 0:
             raise Http404

cab/utils.py

@@ -35,7 +35,7 @@
       </ul>
     </nav>
   </div></header>
-  <div id="main">
+  <div id="main" class="container mb-auto mx-auto w-7/8">
     {% block secondary_nav %}
     <nav id="subnav">
       <ul>
@@ -59,14 +59,16 @@
 
   <div id="base-container">
   <h1>{% block content_header %}{% endblock %}</h1>
-  <div id="content">
+  {% with current_url_name=request.resolver_match.url_name %}
+  <div id="content" class="{% if current_url_name == 'home' %}w-1/2{% else %}w-full md:w-3/4{% endif %}">
       {% block content %}
       {% endblock %}
   </div>
-  <div id="sidebar">
+  <div id="sidebar" class="{% if current_url_name == 'home' %}w-1/2{% else %}hidden md:block md:w-1/4{% endif %}">
     {% block sidebar %}
     {% endblock %}
   </div>
+  {% endwith %}
   {% block extra_content %}
   {% endblock %}
   </div>

djangosnippets/templates/base.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load core_tags components %}
+{% load core_tags %}
 
 {% block head_title %}All languages{% endblock %}
 
@@ -12,6 +12,6 @@
   {% endfor %}
   </ul>
 
-  {% pagination pagination %}
+  {% component "pagination" pagination_obj=pagination / %}
 
 {% endblock %}

djangosnippets/templates/cab/language_list.html

@@ -1,4 +1,4 @@
-{% load static components %}
+{% load static %}
 
 
 <img class="bars" src="{% static 'img/bars.svg' %}"/>
@@ -10,5 +10,5 @@ <h1>All languages</h1>
   {% endfor %}
   </ul>
 
-  {% pagination pagination %}
+  {% component "pagination" pagination_obj=pagination / %}
 </div>