From 76cd096f70c9fd5b6dabab1685f97f32449f2ff5 Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Thu, 11 Apr 2024 14:29:01 +0300
Subject: [PATCH] Add the lazy loading for articles on the index page.

---
 src/main/blog/handlers.cljs        |  4 ++--
 src/main/blog/helpers.cljs         |  6 ++++--
 views/article_full.hbs             |  1 +
 views/partials/article_briefly.hbs | 10 ++++++----
 views/partials/article_full.hbs    | 15 +++++++++++++++
 5 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 views/article_full.hbs
 create mode 100644 views/partials/article_full.hbs

diff --git a/src/main/blog/handlers.cljs b/src/main/blog/handlers.cljs
index 2139893..59fe555 100644
--- a/src/main/blog/handlers.cljs
+++ b/src/main/blog/handlers.cljs
@@ -10,7 +10,7 @@
           id (.-id (.-params req))]
       (go
         (try
-          (let [articles (<! (db/get-articles client channel))]
+          (let [articles (<! (db/get-articles-briefly client channel))]
             (res/status 200)
             (.render res "index"
                      (-> {:articles articles}
@@ -49,7 +49,7 @@
                 (res/send (ex-message "404")))
               (do
                 (res/status 200)
-                (.render res "article_briefly"
+                (.render res "article_full"
                          (-> {:article article :layout false}
                              (cljs.core/clj->js))))))
           (catch js/Error err
diff --git a/src/main/blog/helpers.cljs b/src/main/blog/helpers.cljs
index 468fca9..c08d17e 100644
--- a/src/main/blog/helpers.cljs
+++ b/src/main/blog/helpers.cljs
@@ -4,8 +4,10 @@
 (defn truncatestring-factory
   []
   (fn [text limit]
-    (-> (. text substring 0 limit)
-        (str  "..."))))
+    (if (> (. text -length) limit)
+      (-> (. text substring 0 limit)
+          (str  "..."))
+      text)))
 
 (defn full-timestamp-factory
   []
diff --git a/views/article_full.hbs b/views/article_full.hbs
new file mode 100644
index 0000000..ea59663
--- /dev/null
+++ b/views/article_full.hbs
@@ -0,0 +1 @@
+{{> article_full article=article }}
diff --git a/views/partials/article_briefly.hbs b/views/partials/article_briefly.hbs
index fe29253..20f2219 100644
--- a/views/partials/article_briefly.hbs
+++ b/views/partials/article_briefly.hbs
@@ -1,16 +1,18 @@
-<section x-data="{ showArticle: false }">
+<section x-data="{ showArticle: false }" hx-target="this">
   <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6">
     <div class="mx-auto max-w-screen-sm">
       <h2 class="mb-1 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{{ article.title }}</h2>
       <p class="mb-3 text-base text-gray-500 dark:text-gray-400">{{{ article-timestamp article.created }}}</time></p>
 
-      <p x-show="!showArticle" class="mb-4 font-light text-gray-500 lg:mb-8 sm:text-xl dark:text-gray-400"> {{ article.content }} </p>
+      <p x-show="!showArticle" class="mb-4 font-light text-gray-500 lg:mb-8 sm:text-xl dark:text-gray-400"> {{ article.content }} {{ is-brief article.content_length }} </p>
       <p x-show="showArticle" class="mb-4 font-light text-gray-500 lg:mb-8 sm:text-xl dark:text-gray-400"> {{ article.content }} </p>
     </div>
     <div class="text-center">
-      <a x-on:click="showArticle = !showArticle" x-text="showArticle ? 'Show less' : 'Show more...'" class="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+      <a hx-get="/htmx/articles/{{ article.id }}/"
+         hx-swap="outerHTML"
+         x-on:click="showArticle = !showArticle" x-text="showArticle ? 'Show less' : 'Show more...'"
+         class="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
       </a>
     </div>
   </div>
 </section>
-<hr class="w-48 h-1 mx-auto my-4 bg-gray-100 border-0 rounded md:my-10 dark:bg-gray-700">
diff --git a/views/partials/article_full.hbs b/views/partials/article_full.hbs
new file mode 100644
index 0000000..1b98f0e
--- /dev/null
+++ b/views/partials/article_full.hbs
@@ -0,0 +1,15 @@
+<section x-data="{ showArticle: true }">
+  <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6">
+    <div class="mx-auto max-w-screen-sm">
+      <h2 class="mb-1 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{{ article.title }}</h2>
+      <p class="mb-3 text-base text-gray-500 dark:text-gray-400">{{{ article-timestamp article.created }}}</time></p>
+
+      <p x-show="!showArticle" class="mb-4 font-light text-gray-500 lg:mb-8 sm:text-xl dark:text-gray-400"> {{ truncatestring article.content 60 }} </p>
+      <p x-show="showArticle" class="mb-4 font-light text-gray-500 lg:mb-8 sm:text-xl dark:text-gray-400"> {{ article.content }} </p>
+    </div>
+    <div class="text-center">
+      <a x-on:click="showArticle = !showArticle" x-text="showArticle ? 'Show less' : 'Show more...'" class="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+      </a>
+    </div>
+  </div>
+</section>