You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
19 lines
1.3 KiB
19 lines
1.3 KiB
<section x-data="{ showArticle: false }" hx-target="this">
|
|
<div class="py-8 px-4 mx-auto max-w-screen-xl 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 text-center">{{ article.title }}</h2>
|
|
<p class="mb-3 text-base text-gray-500 dark:text-gray-400 text-center">{{{ 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 }} {{ 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 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>
|