add precom

remove migrations

home/blocks.py

@@ -186,6 +186,25 @@ class Meta:
         template = "blocks/caption.html"
 
 
+class VerticalImageCardBlock(blocks.StreamBlock):
+    images = blocks.StructBlock(
+        [
+            ("image", ImageChooserBlock(required=True, help_text="size: 800X450px")),
+            ("caption", CustomCaption()),
+            (
+                "description",
+                blocks.CharBlock(
+                    max_length=300, required=False, help_text="300 characters limit"
+                ),
+            ),
+            ("link", blocks.URLBlock(required=False)),
+        ]
+    )
+
+    class Meta:
+        template = "blocks/vertical_image_cards_block.html"
+
+
 class RichTextBlock(blocks.StructBlock):
     text = blocks.RichTextBlock(
         max_length=10000,
@@ -224,3 +243,4 @@ class BaseStreamBlock(blocks.StreamBlock):
     video_embed = VideoEmbed()
     table = CustomTableBlock()
     code_block = CodeBlock()
+    vertical_image_cards = VerticalImageCardBlock()

home/templates/home/general_page.html

@@ -6,7 +6,7 @@
 {% block content %}
   <main>
     <div class="container mx-auto flex justify-center">
-      <article class="box max-w-3xl blog-container">
+      <article class="box max-w-4xl blog-container">
         <header>
           <h2 class="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-slate-700 md:text-3xl">
             <a href="{% pageurl page %}">{{ page.title }}</a>

indymeet/templates/blocks/vertical_image_cards_block.html

@@ -0,0 +1,26 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+<div class="flex md:flex-wrap place-content-center">
+{% for child in self %}
+<div class="max-w-sm flex-initial w-80 rounded overflow-hidden shadow-lg my-3 mx-3 ">
+    {% if child.value.link %}
+        <a class="text-black" href="{{ child.value.link }}">
+    {% endif %}
+    {% image child.value.image fill-800x450-c100 as image %}
+    <figure class="overlay">
+        <img class="w-full" src="{{ image.url }}" alt="{{ child.value.image.title }}"/>
+    </figure>
+    {% if child.value.link %}
+        </a>
+    {% endif %}
+    <div class="px-6 py-4">
+      <div class="font-bold mb-2">{{ child.value.caption.text }}</div>
+      <p class="text-gray-700 text-base">
+        {{ child.value.description }}
+      </p>
+    </div>
+    <div class="px-6 pt-4 pb-2">
+    </div>
+  </div>
+{% endfor %}
+
+</div>

indymeet/templates/puput/entry_page.html

@@ -43,7 +43,7 @@
 
 {% block content %}
         <div class="container mx-auto flex justify-center">
-            <article class="box max-w-3xl blog-container"
+            <article class="box max-w-4xl blog-container"
                     {% if self.id %}data-entry-page-update-comments-url="{% url 'entry_page_update_comments' self.id %}{% endif %}">
                 {% include 'puput/entry_page_header.html' with entry=self %}
                 <section>