KKlochko/simple-cljs-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add the lazy loading for articles on the index page.

Browse Source
This commit is contained in:
KKlochko
2024-04-11 14:29:01 +03:00
parent c24fce08f3
commit 76cd096f70
5 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/blog/handlers.cljs
+2 -2
View File
@@ -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
+3 -1
View File
@@ -4,8 +4,10 @@
(defn truncatestring-factory
[]
(fn [text limit]
(if (> (. text -length) limit)
(-> (. text substring 0 limit)
(str "..."))))
(str "..."))
text)))
(defn full-timestamp-factory
[]
views/article_full.hbs
+1
View File
@@ -0,0 +1 @@
{{> article_full article=article }}
views/partials/article_briefly.hbs
+6 -4
View File
@@ -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
+15
View File
@@ -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>