Add skeleton listing page

static/src/scss/_content.scss

@@ -1,3 +1,3 @@
-.content {
+section.content {
   font-size: 1.25rem;
 }

static/src/scss/_listing.scss

@@ -0,0 +1,31 @@
+.listing-item {
+  border-top: none !important;
+
+  .image-column {
+    display: flex;
+    align-items: center;
+  }
+
+  .media img {
+    object-fit: cover;
+    width: 100%;
+    height: 175px;
+  }
+
+  .media {
+    max-height: 175px;
+  }
+
+  .subtitle {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .media-content .content {
+    overflow: hidden;
+  }
+
+  .media-content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

static/src/scss/base.scss

@@ -7,6 +7,7 @@
 @import "footer";
 @import "hero";
 @import "content";
+@import "listing";
 
 html,
 body {

website/common/migrations/0004_listingpage.py

@@ -0,0 +1,46 @@
+# Generated by Django 4.0.5 on 2022-06-19 10:42
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailcore", "0069_log_entry_jsonfield"),
+        ("wagtailimages", "0024_index_image_file_hash"),
+        ("common", "0003_alter_contentpage_hero_image"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="ListingPage",
+            fields=[
+                (
+                    "page_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailcore.page",
+                    ),
+                ),
+                ("subtitle", models.CharField(blank=True, max_length=255)),
+                (
+                    "hero_image",
+                    models.ForeignKey(
+                        blank=True,
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        to="wagtailimages.image",
+                    ),
+                ),
+            ],
+            options={
+                "abstract": False,
+            },
+            bases=("wagtailcore.page",),
+        ),
+    ]

website/common/models.py

@@ -1,3 +1,5 @@
+from typing import Any
+
 from django.db import models
 from django.utils.functional import classproperty
 from wagtail.admin.panels import FieldPanel
@@ -18,13 +20,25 @@ class BasePage(Page):
         return "page-" + cls._meta.db_table.replace("_", "-")
 
 
-class ContentPage(BasePage):
+class BaseContentMixin(models.Model):
     subtitle = models.CharField(max_length=255, blank=True)
     hero_image = models.ForeignKey(
         get_image_model_string(), null=True, blank=True, on_delete=models.SET_NULL
     )
 
-    content_panels = BasePage.content_panels + [
+    content_panels = [
         FieldPanel("subtitle"),
         FieldPanel("hero_image"),
     ]
+
+    class Meta:
+        abstract = True
+
+
+class ContentPage(BasePage, BaseContentMixin):  # type: ignore[misc]
+    subpage_types: list[Any] = []
+    content_panels = BasePage.content_panels + BaseContentMixin.content_panels
+
+
+class ListingPage(BasePage, BaseContentMixin):  # type: ignore[misc]
+    content_panels = BasePage.content_panels + BaseContentMixin.content_panels

website/common/templates/common/content_page.html

@@ -4,8 +4,8 @@
 
 {% include "common/hero.html" %}
 
-<div class="container content">
+<section class="container content">
   {% lorem 10 p %}
-</div>
+</section>
 
 {% endblock content %}

website/common/templates/common/listing-item.html

@@ -0,0 +1,16 @@
+<article class="container media listing-item">
+  <div class="columns">
+    <figure class="media-left column is-3 image-column">
+      <p class="image">
+        <img src="https://placekitten.com/g/600/300">
+      </p>
+    </figure>
+    <div class="media-content column">
+      <div>
+        <h2 class="title is-3"><a href="#">Title</a></h2>
+        <h3 class="subtitle is-6">2022-04-15 4 minutes <a>#programming</a> <a href="#security">#security</a> <a>#website</a></h3>
+        {% lorem 1 p %}
+      </div>
+    </div>
+  </div>
+</article>

website/common/templates/common/listing_page.html

@@ -0,0 +1,13 @@
+{% extends "wagtail_base.html" %}
+
+{% load util_tags %}
+
+{% block content %}
+
+{% include "common/hero.html" %}
+
+{% for i in 3|range %}
+  {% include "common/listing-item.html" %}
+{% endfor %}
+
+{% endblock content %}

website/common/templatetags/util_tags.py

@@ -0,0 +1,8 @@
+from django.template import Library
+
+register = Library()
+
+
+@register.filter(name="range")
+def do_range(stop: int) -> range:
+    return range(stop)