Refactor convert pagination to django-components structure.

Author: Antoliny0919

.gitignore

@@ -198,7 +198,6 @@ cython_debug/
 # $GIT_DIR/info/exclude or the core.excludesFile configuration variable as
 # described in https://git-scm.com/docs/gitignore
 *.pyc
-src
 *DS_Store
 *~
 *.db

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: 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=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/templatetags/components.py

@@ -1,4 +1,5 @@
 import os
+from pathlib import Path
 
 import dj_database_url
 from django.contrib import messages
@@ -13,6 +14,7 @@ def user_url(user):
 
 
 PROJECT_ROOT = os.path.join(os.path.dirname(os.path.abspath(__file__)), os.pardir)
+BASE_DIR = Path(__file__).resolve().parent.parent.parent
 
 SITE_ID = 1
 SITE_NAME = "djangosnippets.org"
@@ -68,6 +70,7 @@ def user_url(user):
     "theme",
     "django_recaptcha",
     "django_extensions",
+    "django_components",
     "rest_framework",
     "django_htmx",
 )
@@ -92,7 +95,6 @@ def user_url(user):
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
         "DIRS": [os.path.join(PROJECT_ROOT, "templates")],
-        "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [
                 "django.contrib.auth.context_processors.auth",
@@ -102,13 +104,32 @@ def user_url(user):
                 "django.contrib.messages.context_processors.messages",
                 "django.template.context_processors.request",
             ],
+            "loaders": [
+                (
+                    "django.template.loaders.cached.Loader",
+                    [
+                        "django.template.loaders.filesystem.Loader",
+                        "django.template.loaders.app_directories.Loader",
+                        "django_components.template_loader.Loader",
+                    ],
+                )
+            ],
+            "builtins": [
+                "django_components.templatetags.component_tags",
+            ],
         },
     }
 ]
 
 STATIC_URL = "/assets/static/"
 STATIC_ROOT = os.path.join(PROJECT_ROOT, "..", "assets", "static")
 STATICFILES_DIRS = (os.path.join(PROJECT_ROOT, "static"),)
+STATICFILES_FINDERS = [
+    "django.contrib.staticfiles.finders.FileSystemFinder",
+    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
+    "django_components.finders.ComponentsFileSystemFinder",
+]
+
 TAILWIND_APP_NAME = "theme"
 
 SESSION_ENGINE = "django.contrib.sessions.backends.cached_db"

djangosnippets/settings/base.py

@@ -9,3 +9,9 @@
 CACHE_BACKEND = "dummy://"
 
 INSTALLED_APPS = INSTALLED_APPS
+
+TEMPLATES[0]["OPTIONS"]["loaders"] = [
+    "django.template.loaders.filesystem.Loader",
+    "django.template.loaders.app_directories.Loader",
+    "django_components.template_loader.Loader",
+]

djangosnippets/settings/development.py

@@ -22,6 +22,7 @@
     "django.contrib.sessions",
     "django.contrib.sites",
     "django.contrib.staticfiles",
+    "django_components",
     "allauth",
     "allauth.account",
     "allauth.socialaccount",
@@ -53,13 +54,20 @@
             os.path.join(os.path.dirname(__file__), os.pardir, os.pardir, "cab", "tests", "templates"),
             SNIPPETS_TEMPLATES_DIR,
         ],
-        "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
                 "django.template.context_processors.request",
             ],
+            "loaders": [
+                "django.template.loaders.filesystem.Loader",
+                "django.template.loaders.app_directories.Loader",
+                "django_components.template_loader.Loader",
+            ],
+            "builtins": [
+                "django_components.templatetags.component_tags",
+            ],
         },
     }
 ]

djangosnippets/settings/testing.py

@@ -359,61 +359,6 @@ body.simple {
     }
 }
 
-nav.pagination {
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    ul {
-        margin-left: 1rem;
-        margin-right: 1rem;
-    }
-    li {
-        display: inline-block;
-        a, em, span {
-            padding: 5px 10px;
-            line-height: 20px;
-            border: 1px solid transparent;
-            border-radius: 6px;
-            transition: border-color .2s cubic-bezier(0.3, 0, 0.5, 1);
-            cursor: pointer;
-        }
-        a:hover {
-            border-color: $secondary-color;
-            text-decoration: none;
-        }
-        em {
-            font-style: normal;
-            cursor: default;
-        }
-        .current-page {
-            font-weight: bold;
-            color: white;
-            background-color: $secondary-color;
-        }
-        .disabled {
-            color: gray;
-            cursor: default;
-            border-color: transparent;
-        }
-    }
-    .previous-page::before, .next-page::after {
-        display: inline-block;
-        width: 1rem;
-        height: 1rem;
-        vertical-align: text-bottom;
-        content: "";
-        background-color: currentColor;
-    }
-    .previous-page::before {
-        clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px);
-        margin-right: 4px;
-    }
-    .next-page::after {
-        clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px);
-        margin-left: 4px;
-    }
-}
-
 footer {
     padding: 30px 0 30px 0;
     clear: both;

djangosnippets/static/scss/main.scss

@@ -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 %}