From a87c3efe1c068a179bbfa9e528cfe3216d531bab Mon Sep 17 00:00:00 2001
From: ZhymabekRoman <robanokssamit@yandex.ru>
Date: Sat, 25 Jan 2025 11:58:13 +0500
Subject: [PATCH] hmmm: yeah, Medium?

---
 medium-parser/medium_parser/core.py     |  2 +-
 medium-parser/tests/templates/post.html |  4 ++--
 web/server/templates/homepage.html      | 18 +++++++++---------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/medium-parser/medium_parser/core.py b/medium-parser/medium_parser/core.py
index d0ab465..4dc5406 100644
--- a/medium-parser/medium_parser/core.py
+++ b/medium-parser/medium_parser/core.py
@@ -361,7 +361,7 @@ class MediumParser:
                 out_paragraphs.append(header_template_rendered)
             elif paragraph["type"] == "IMG":
                 image_template = jinja_env.from_string(
-                    '<div class="mt-7"><img alt="{{ paragraph.metadata.alt }}" class="pt-5 m-auto" role="presentation" referrerpolicy="no-referrer" src="https://miro.medium.com/v2/resize:fit:700/{{ paragraph.metadata.id }}"></div>'
+                    '<div class="mt-7"><img loading="eager" alt="{{ paragraph.metadata.alt }}" class="pt-5 m-auto" role="presentation" referrerpolicy="no-referrer" src="https://miro.medium.com/v2/resize:fit:700/{{ paragraph.metadata.id }}"></div>'
                 )
                 image_caption_template = jinja_env.from_string(
                     "<figcaption class='mt-3 text-sm text-center text-gray-500 dark:text-gray-200'>{{ text }}</figcaption>"
diff --git a/medium-parser/tests/templates/post.html b/medium-parser/tests/templates/post.html
index 13f948f..2acc077 100644
--- a/medium-parser/tests/templates/post.html
+++ b/medium-parser/tests/templates/post.html
@@ -21,7 +21,7 @@
             <div class="flex items-center p-4 space-x-4">
                 <div class="flex-shrink-0">
                     <a href="https://medium.com/@{{ creator.username }}" target="_blank" title="{{ creator.bio }}" class="relative block">
-                        <img src="https://miro.medium.com/v2/resize:fill:88:88/{{ creator.imageId }}"
+                        <img loading="eager" src="https://miro.medium.com/v2/resize:fill:88:88/{{ creator.imageId }}"
                              alt="{{ creator.name }}"
                              referrerpolicy="no-referrer"
                              class="rounded-full h-11 w-11 no-lightense">
@@ -48,7 +48,7 @@
                            title="{{ collection.shortDescription }}"
                            target="_blank"
                            class="flex items-center space-x-1">
-                            <img src="https://miro.medium.com/v2/resize:fill:48:48/{{ collection.avatar.id }}"
+                            <img loading="eager" src="https://miro.medium.com/v2/resize:fill:48:48/{{ collection.avatar.id }}"
                                  alt="{{ collection.name }}"
                                  referrerpolicy="no-referrer"
                                  class="w-4 h-4 rounded-full no-lightense">
diff --git a/web/server/templates/homepage.html b/web/server/templates/homepage.html
index a45e799..2184311 100644
--- a/web/server/templates/homepage.html
+++ b/web/server/templates/homepage.html
@@ -1,18 +1,18 @@
-<div class="p-2 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
+<div class="grid w-full grid-cols-1 gap-4 p-2 md:grid-cols-2 lg:grid-cols-3">
     {% for post in post_list %}
         <div class="p-6 bg-white dark:bg-gray-600 rounded-xl">
             <a class="group" href="/{{ post.post_id }}">
-                <div class="max-h-60 min-h-60 m-auto overflow-hidden flex items-center justify-center">
+                <div class="flex items-center justify-center m-auto overflow-hidden max-h-60 min-h-60">
                     {% if post.preview_image_id %}
-                        <img data-src="https://miro.medium.com/v2/resize:fit:700/{{ post.preview_image_id }}"
-                             class="lazy w-full h-auto hover:scale-105 transition transition-all duration-200 ease-in-out">
+                        <img loading="eager" referrerpolicy="no-referrer" src="https://miro.medium.com/v2/resize:fit:700/{{ post.preview_image_id }}"
+                             class="w-full h-auto transition-all transition duration-200 ease-in-out hover:scale-105">
                     </div>
                 {% else %}
-                    <img data-src="https://images.unsplash.com/photo-1636467204130-edf8ee206dce?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
-                         class="lazy w-full h-auto hover:scale-105 transition transition-all duration-200 ease-in-out">
+                    <img loading="eager" referrerpolicy="no-referrer" src="https://images.unsplash.com/photo-1636467204130-edf8ee206dce?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
+                         class="w-full h-auto transition-all transition duration-200 ease-in-out hover:scale-105">
                 </div>
             {% endif %}
-            <h3 class="mt-6 leading-normal text-gray-800 dark:text-gray-100 group-hover:text-purple-400 font-semibold text-xl lg:text-2xl line-clamp-3 transition translation-all duration-200 ease-in-out">{{ post.title }}</h3>
+            <h3 class="mt-6 text-xl font-semibold leading-normal text-gray-800 transition duration-200 ease-in-out dark:text-gray-100 group-hover:text-purple-400 lg:text-2xl line-clamp-3 translation-all">{{ post.title }}</h3>
         </a>
         <div class="mt-6">
             <div class="flex flex-wrap items-center space-x-2 text-sm text-gray-500 dark:text-white">
@@ -24,7 +24,7 @@
                         <img src="https://miro.medium.com/v2/resize:fill:48:48/{{ post.collection.avatar.id }}"
                              alt="{{ post.collection.name }}"
                              loading="eager"
-                             class="h-4 w-4 rounded-full no-lightense">
+                             class="w-4 h-4 rounded-full no-lightense">
                         <p>{{ post.collection.name }}</p>
                     </a>
                     <span>·</span>
@@ -35,7 +35,7 @@
                 <span class="md:inline dark:text-white">·</span>
                 <span class="text-yellow-500 dark:text-white">Free: {{ post.free_access }}</span>
             </div>
-            <p class="mt-6 leading-normal line-clamp-3 text-gray-600 dark:text-gray-200">{{ post.description }}</p>
+            <p class="mt-6 leading-normal text-gray-600 line-clamp-3 dark:text-gray-200">{{ post.description }}</p>
         </div>
         <a href="/{{ post.post_id }}" class="inline-block mt-6 text-purple-500 hover:text-purple-400">Read More</a>
     </div>