Refactored convert pagination to django-components structure.

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

djangosnippets/settings/base.py

@@ -104,15 +104,18 @@ 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',
+            "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",
             ],
         },
     }

djangosnippets/settings/production.py

@@ -7,7 +7,7 @@
 import sentry_sdk
 from sentry_sdk.integrations.django import DjangoIntegration
 
-from .base import *  # noqa: F403
+from .base import *  # noqa
 
 
 def env_to_bool(input):
@@ -23,18 +23,6 @@ def env_to_bool(input):
 
 DEBUG = env_to_bool(os.environ.get("DEBUG", False))
 
-# Use the cached template loader.
-del TEMPLATES[0]["APP_DIRS"]
-TEMPLATES[0]["OPTIONS"]["loaders"] = (
-    (
-        "django.template.loaders.cached.Loader",
-        (
-            "django.template.loaders.filesystem.Loader",
-            "django.template.loaders.app_directories.Loader",
-        ),
-    ),
-)
-
 AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID", "")
 AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY", "")
 AWS_STORAGE_BUCKET_NAME = os.environ.get("AWS_STORAGE_BUCKET_NAME", "")

djangosnippets/settings/testing.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/static/scss/main.scss

@@ -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/templates/cab/language_list.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/partials/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>

djangosnippets/templates/cab/partials/most_bookmarked.html

@@ -1,5 +1,5 @@
 
-{% load core_tags components %}
+{% load core_tags %}
 {% load static %}
 
 <h1>Most bookmarked snippets{% if months %} last {{ months }} months{% endif %}</h1>
@@ -30,7 +30,7 @@ <h1>Most bookmarked snippets{% if months %} last {{ months }} months{% endif %}<
     {% endfor %}
       </tbody>
     </table>
-    {% pagination pagination %}
+    {% component "pagination" pagination_obj=pagination / %}
     <p class="count">{{ hits }} snippet{{ hits|pluralize }} posted so far.</p>
   {% else %}
     <p class="empty">No snippets posted yet.</p>

djangosnippets/templates/cab/partials/tag_list.html

@@ -1,5 +1,5 @@
 
-{% load core_tags components %}
+{% load core_tags %}
 <h1>All tags</h1>
 <div id="content">
   {% if object_list %}
@@ -9,7 +9,7 @@ <h1>All tags</h1>
     {% endfor %}
     </ul>
 
-    {% pagination pagination %}
+    {% component "pagination" pagination_obj=pagination / %}
   {% else %}
     <p>No tags have been used yet.</p>
   {% endif %}

djangosnippets/templates/cab/partials/top_rated.html

@@ -1,6 +1,6 @@
 
 {% load static %}
-{% load core_tags components %}
+{% load core_tags %}
 
 
 <h1>Top-rated snippets{% if months %} last {{ months }} months{% endif %}</h1>
@@ -28,7 +28,7 @@ <h1>Top-rated snippets{% if months %} last {{ months }} months{% endif %}</h1>
   {% endfor %}
     </tbody>
   </table>
-  {% pagination pagination %}
+  {% component "pagination" pagination_obj=pagination / %}
   <p class="count">{{ hits }} snippet{{ hits|pluralize }} posted so far.</p>
 {% else %}
   <p class="empty">No snippets posted yet.</p>

djangosnippets/templates/cab/snippet_list.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load core_tags components %}
+{% load core_tags %}
 {% load static %}
 {% block bodyclass %}snippet-list{% endblock %}
 {% block head_title %}All snippets{% if months %} last {{ months }} months{% endif %}{% endblock %}
@@ -30,7 +30,7 @@
     {% endfor %}
       </tbody>
     </table>
-    {% pagination pagination %}
+    {% component "pagination" pagination_obj=pagination / %}
     <p class="count">{{ hits }} snippet{{ hits|pluralize }} posted so far.</p>
   {% else %}
     <p class="empty">No snippets posted yet.</p>