Add the lazy loading for articles on the index page.

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

src/main/blog/helpers.cljs

@@ -4,8 +4,10 @@
 (defn truncatestring-factory
   []
   (fn [text limit]
-    (-> (. text substring 0 limit)
+    (if (> (. text -length) limit)
-        (str  "..."))))
+      (-> (. text substring 0 limit)
+          (str  "..."))
+      text)))
 
 (defn full-timestamp-factory
   []

views/article_full.hbs

@@ -0,0 +1 @@
+{{> article_full article=article }}

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">

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>