tbrlpld · tbrlpld · Aug 5, 2023 · Aug 5, 2023 · Aug 5, 2023 · Aug 5, 2023
diff --git a/lpld/home/models.py b/lpld/home/models.py
@@ -1,12 +1,18 @@
-from django.apps import apps
+import dataclasses
+
 from django.db import models
 from django.utils import html as html_utils
 
 from wagtail import fields
 from wagtail import images as wagtail_images
 from wagtail.admin import panels
+from wagtail.templatetags import wagtailcore_tags
 
 from lpld.core import models as core_models
+from lpld.templates.atoms.heading import heading
+from lpld.templates.molecules import section
+from lpld.templates.organisms import prose
+from lpld.templates.organisms.teaser_grid import teaser_grid
 
 
 class HomePage(core_models.BasePage):
@@ -31,14 +37,35 @@ class HomePage(core_models.BasePage):
     def get_context(self, request):
         context = super().get_context(request)
 
-        ProjectPage = apps.get_model("projects", "ProjectPage")
-        context["projects"] = ProjectPage.objects.all()
+        extra_context = {
+            "title": heading.Heading(text=self.title),
+            "introduction": prose.Prose(
+                children=wagtailcore_tags.richtext(self.introduction),
+            ),
+            "profile_image": self.profile_image,
+            "projects": self.get_projects_section(),
+        }
 
-        return context
+        return {**context, **extra_context}
 
-    def get_meta_description(self):
+    def get_meta_description(self) -> str:
         return self.search_description or self.get_introduction_without_tags() or ""
 
-    def get_introduction_without_tags(self):
+    def get_introduction_without_tags(self) -> str:
         """Return introduction but without the HTMl tags."""
         return html_utils.strip_tags(self.introduction)
+
+    def get_projects_section(self) -> section.Section:
+        return section.Section(
+            html_id="projects",
+            html_class="mt-16 lg:mt-32 pt-16 lg:mt-32",
+            children=[
+                heading.Heading(
+                    text="These are things I have build before",
+                    level=2,
+                    size="md",
+                    extra_class="max-w-lg lg:max-w-2xl",
+                ),
+                teaser_grid.TeaserGrid.from_project_pages()
+            ]
+        )
diff --git a/lpld/settings.py b/lpld/settings.py
@@ -42,10 +42,16 @@
 
 if DEBUG:
     # The internal ips settings is needed to activate the debug toolbar.
-    INTERNAL_IPS = [
+    # https://django-debug-toolbar.readthedocs.io/en/latest/installation.html#configure-internal-ips
+    # We also need to find the internal IPs when this is running in a container.
+    import socket  # only if you haven't already imported this
+    hostname, _, ips = socket.gethostbyname_ex(socket.gethostname())
+    docker_ips = [ip[: ip.rfind(".")] + ".1" for ip in ips]
+    local_ips = ["127.0.0.1", "10.0.2.2"]
+    custom_ips = [
         ip.strip() for ip in os.environ.get("INTERNAL_IPS", "").split(",") if ip
     ]
-
+    INTERNAL_IPS = [*docker_ips, *local_ips, *custom_ips]
 
 # Application definition
 
@@ -59,6 +65,7 @@
     "lpld.navigation",
     "lpld.projects",
     "lpld.technologies",
+    "lpld.templex",
     "lpld.utils",
     "django.contrib.admin",
     "django.contrib.auth",

diff --git a/lpld/templates/__init__.py b/lpld/templates/__init__.py
diff --git a/lpld/templates/atoms/__init__.py b/lpld/templates/atoms/__init__.py
diff --git a/lpld/templates/atoms/heading/__init__.py b/lpld/templates/atoms/heading/__init__.py
diff --git a/lpld/templates/atoms/heading/heading.html b/lpld/templates/atoms/heading/heading.html
@@ -1,4 +1,4 @@
-{% load slippers %}
+{% load slippers templex %}
 {% var level=level|default:"1" %}
 {% var size=size|default:"lg" %}
 {% spaceless %}
@@ -17,6 +17,7 @@
               {{ extra_class }}
              "
     >
-        {{ children }}
+        {{ text }}
+        {% templex children %}
     </h{{ level }}>
 {% endspaceless %}
diff --git a/lpld/templates/atoms/heading/heading.py b/lpld/templates/atoms/heading/heading.py
@@ -0,0 +1,16 @@
+import dataclasses
+from typing import Union, Iterable
+
+from lpld import templex
+
+
+@dataclasses.dataclass
+class Heading(templex.Templex):
+    template = "atoms/heading/heading.html"
+
+    text: str
+    level: int = 1
+    size: str = ""
+    extra_class: str = ""
+
+
diff --git a/lpld/templates/base.html b/lpld/templates/base.html
@@ -31,7 +31,9 @@
     </head>
     <body>
         {% block body %}
-            {{ pattern_library_rendered_pattern }}
+            <div class="p-12">
+                {{ pattern_library_rendered_pattern }}
+            </div>
         {% endblock body %}
         {{ sentry_settings|json_script:"sentry-settings" }}
     </body>

diff --git a/lpld/templates/molecules/__init__.py b/lpld/templates/molecules/__init__.py
diff --git a/lpld/templates/molecules/project-card/project-card.html b/lpld/templates/molecules/project-card/project-card.html
diff --git a/lpld/templates/molecules/project-card/project-card.yaml b/lpld/templates/molecules/project-card/project-card.yaml
diff --git a/lpld/templates/molecules/section/__init__.py b/lpld/templates/molecules/section/__init__.py
@@ -0,0 +1,13 @@
+import dataclasses
+
+from lpld import templex
+
+
+@dataclasses.dataclass(frozen=True)
+class Section(templex.Templex):
+    template="molecules/section/section.html"
+
+    children: templex.TemplexRenderable
+    html_id: str = ""
+    html_class: str = ""
+
diff --git a/lpld/templates/molecules/section/section.html b/lpld/templates/molecules/section/section.html
@@ -0,0 +1,8 @@
+{% load templex %}
+
+<section
+    {% if html_id %}id="{{ html_id }}"{% endif %}
+    {% if html_class %}class="{{ html_class }}"{% endif %}
+>
+    {% templex children %}
+</section>
diff --git a/lpld/templates/molecules/teaser/__init__.py b/lpld/templates/molecules/teaser/__init__.py
diff --git a/lpld/templates/molecules/teaser/teaser.html b/lpld/templates/molecules/teaser/teaser.html
@@ -0,0 +1,45 @@
+{% load l10n wagtailcore_tags wagtailimages_tags %}
+
+<a class="flex flex-row items-start group no-underline" href="{{ href }}">
+    {% if video or image %}
+        <div class="mr-4 shrink-0 w-24 sm:w-32 xl:w-48 {% if image_shadow %} px-0.5 sm:px-1 xl:px-2 {% endif %} ">
+            {% if video %}
+                <video
+                    src="{{ video.url }}"
+                    width="{{ video.width | unlocalize }}"
+                    height="{{ video.height | unlocalize }}"
+                    class="w-full {% if image_shadow %} rounded shadow-md {% endif %}"
+                    autoplay
+                    loop
+                >Animation of {{ title }}</video>
+            {% elif image %}
+                <picture>
+                    {% image image width-96 as image_fallback %}
+                    {% image_url image "width-96|format-webp" as image_96 %}
+                    {% image_url image "width-128|format-webp" as image_128 %}
+                    {% image_url image "width-192|format-webp" as image_192 %}
+                    {% image_url image "width-256|format-webp" as image_256 %}
+                    {% image_url image "width-384|format-webp" as image_384 %}
+                    <source media="(min-width: 1280px)" srcset="{{ image_192 }}, {{ image_384 }} 2x" type="image/webp">
+                    <source media="(min-width: 640px)" srcset="{{ image_128 }}, {{ image_256 }} 2x" type="image/webp">
+                    <source srcset="{{ image_96 }}, {{ image_192 }} 2x" type="image/webp">
+                    <img
+                        src="{{ image_fallback.url }}"
+                        alt="Screenshot of {{ title }}"
+                        class="w-full {% if image_shadow %} rounded shadow-md {% endif %}"
+                        loading="lazy"
+                        width="{{ image_fallback.width }}"
+                        height="{{ image_fallback.height }}"
+                    />
+                </picture>
+            {% endif %}
+        </div>
+    {% endif %}
+
+    <div>
+        <span class="text-neutral-700 group-hover:text-neutral-800 group-active:text-neutral-900">
+            <h3 class="decoration-3 group-hover:underline underline-offset-2 mb-3 mt-2 text-xl sm:text-2xl font-bold">{{ heading }}</h3>
+        </span>
+        <p class="text-sm sm:text-base xl:text-lg text-neutral-500">{{ introduction }}</p>
+    </div>
+</a>
diff --git a/lpld/templates/molecules/teaser/teaser.py b/lpld/templates/molecules/teaser/teaser.py
@@ -0,0 +1,33 @@
+import dataclasses
+from typing import Optional, TYPE_CHECKING
+
+from wagtail.images import models as images_models
+from wagtailmedia import models as media_models
+
+from lpld import templex
+
+if TYPE_CHECKING:
+    from lpld.projects import models as projects_models
+
+
+@dataclasses.dataclass(frozen=True)
+class Teaser(templex.Templex):
+    template="molecules/teaser/teaser.html"
+
+    heading: str
+    introduction: str
+    href: str
+    image: Optional[images_models.AbstractImage]
+    image_shadow: bool
+    video: Optional[media_models.AbstractMedia]
+
+    @classmethod
+    def from_project_page(cls, project_page: "projects_models.ProjectPage") -> "Teaser":
+        return cls(
+            heading=project_page.title,
+            introduction=project_page.introduction,
+            href=project_page.get_url(),
+            image=project_page.image,
+            image_shadow=project_page.image_shadow,
+            video=project_page.video,
+        )
diff --git a/lpld/templates/molecules/teaser/teaser.yaml b/lpld/templates/molecules/teaser/teaser.yaml
@@ -0,0 +1,33 @@
+context:
+  image: True
+  image_shadow: True
+  heading: "Remember Me"
+  introduction: "Developed for fun in my spare time."
+  href: "https://example.com"
+
+tags:
+  image:
+    "image width-96 as image_fallback":
+      target_var: "image_fallback"
+      raw:
+        url: "https://via.placeholder.com/96x120/"
+        width: 96
+        height: 120
+  image_url:
+    'image "width-96|format-webp" as image_96':
+      target_var: "image_96"
+      raw: "https://via.placeholder.com/96x120/"
+    'image "width-128|format-webp" as image_128':
+      target_var: "image_128"
+      raw: "https://via.placeholder.com/128x160/"
+    'image "width-192|format-webp" as image_192':
+      target_var: "image_192"
+      raw: "https://via.placeholder.com/192x240/"
+    'image "width-256|format-webp" as image_256':
+      target_var: "image_256"
+      raw: "https://via.placeholder.com/256x320/"
+    'image "width-384|format-webp" as image_384':
+      target_var: "image_384"
+      raw: "https://via.placeholder.com/384x480/"
+
+
diff --git a/lpld/templates/organisms/__init__.py b/lpld/templates/organisms/__init__.py
diff --git a/lpld/templates/organisms/prose/__init__.py b/lpld/templates/organisms/prose/__init__.py
@@ -0,0 +1,10 @@
+import dataclasses
+
+from lpld import templex
+
+
+@dataclasses.dataclass(frozen=True)
+class Prose(templex.Templex):
+    template = "organisms/prose/prose.html"
+
+    children: templex.TemplexRenderable
diff --git a/lpld/templates/organisms/prose/prose.html b/lpld/templates/organisms/prose/prose.html
@@ -1,3 +1,4 @@
+{% load templex %}
 <div class="
             prose
             xl:prose-xl
@@ -12,6 +13,5 @@
             {% endif %}
             {{ extra_class }}
            ">
-    {{ children }}
+    {% templex children %}
 </div>
-
diff --git a/lpld/templates/organisms/teaser_grid/__init__.py b/lpld/templates/organisms/teaser_grid/__init__.py
diff --git a/lpld/templates/organisms/teaser_grid/teaser-grid.html b/lpld/templates/organisms/teaser_grid/teaser-grid.html
@@ -0,0 +1,7 @@
+<ul class="mt-16 grid grid-cols-1 md:grid-cols-2 md:gap-x-12 gap-y-12 sm:gap-y-16 ">
+    {% for teaser in teasers  %}
+        <li>
+            {{ teaser.render }}
+        </li>
+    {% endfor %}
+</ul>