post.html

<include src="layout.html">
  <template name="head">
    <title th:text="|${post.spec.title} - ${site.title}|"></title>
    <script type="module" src="./assets/post.ts"></script>
    <script type="module">
      import { generateToc } from "./assets/utils/toc.ts";
      generateToc("content", ".toc", ".toc-container");
    </script>
  </template>
  <template name="hero">
    <section th:if="${theme.config.layout.content_header}" th:unless="${#strings.isEmpty(post.spec.cover)}">
      <div class="relative flex items-center" th:styleappend="|height:${theme.config.post.cover_height ?: '24rem'}|">
        <div
          class="before:z-1 relative size-full bg-cover bg-center bg-no-repeat before:absolute before:inset-0 before:bg-black/40"
          th:style="|background-image: url('${post.spec.cover}')|"
        ></div>
        <header
          class="pattern-header-text absolute top-1/3 mx-auto flex w-full flex-col items-center justify-center gap-3"
          th:if="${theme.config.post.title_position == 'cover'}"
        >
          <h1 class="text-center text-2xl text-white sm:text-5xl" th:text="${post.spec.title}"></h1>
        </header>
      </div>
    </section>
  </template>
  <section
    class="mx-auto mt-6 grid max-w-7xl grid-cols-1 gap-6 px-4 md:grid-cols-[1fr_18rem] lg:px-6"
    th:classappend="${theme.config.layout.content_header} and ${not #strings.isEmpty(post.spec.cover)} ? '!-mt-20' : ''"
  >
    <div class="z-0 min-w-0">
      <div x-data="upvote('post','content.halo.run','posts')" class="rounded-xl bg-white p-4 dark:bg-slate-800">
        <div
          th:attr="x-data=|{name:'${post.metadata.name}'}|"
          class="flex flex-col items-center justify-between gap-2 sm:flex-row"
        >
          <div class="flex w-full items-center justify-start gap-2">
            <a
              th:unless="${#strings.isEmpty(post.owner.avatar)}"
              th:href="@{${post.owner.permalink}}"
              th:title="${post.owner.displayName}"
            >
              <img th:src="${post.owner.avatar}" class="size-10 rounded-full" th:alt="${post.owner.displayName}" />
            </a>
            <div class="flex flex-col gap-0.5">
              <a
                th:href="@{${post.owner.permalink}}"
                th:title="${post.owner.displayName}"
                class="text-sm font-semibold text-gray-900 hover:text-gray-600 dark:text-slate-100 dark:hover:text-slate-200"
                th:text="${post.owner.displayName}"
              ></a>
              <div class="flex items-center gap-2 text-xs font-light text-gray-600 dark:text-slate-100">
                <span th:text="#{common.publishedOn(${#dates.format(post.spec.publishTime,'yyyy-MM-dd')})}"></span>
                <span class="text-gray-300 dark:text-slate-200">/</span>
                <span th:text="#{common.visitCount(${post.stats?.visit ?:0})}"></span>
              </div>
            </div>
          </div>
          <div class="flex flex-row items-center gap-1.5 self-end">
            <div
              sec:authorize="isAuthenticated()"
              th:attr="x-data=|uiPermission('${#authentication.name}','system:posts:manage')|"
              class="flex items-center justify-between"
              id="edit-button"
            >
              <template x-if="shouldDisplay">
                <a
                  th:href="|/console/posts/editor?name=${post.metadata.name}&returnToView=true|"
                  class="inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
                >
                  <span class="i-tabler-edit text-lg transition-all group-hover:-translate-x-1"></span>
                  <span th:text="#{common.edit}"></span>
                </a>
              </template>
            </div>
            <div
              th:if="${theme.config.post.show_upvote_button}"
              @click="handleUpvote(name)"
              class="group inline-flex cursor-pointer items-center rounded-lg"
            >
              <div
                class="inline-flex items-center justify-center rounded-full p-2 transition-all group-hover:bg-gray-100 dark:group-hover:bg-slate-700"
              >
                <div
                  class="i-tabler-heart text-lg text-gray-600 group-hover:text-red-600 dark:text-slate-500"
                  x-show="!upvoted(name)"
                  x-cloak
                ></div>
                <div class="i-tabler-heart-filled text-lg text-red-600" x-show="upvoted(name)" x-cloak></div>
              </div>
              <span
                th:attr="data-upvote-post-name=${post.metadata.name}"
                class="text-sm text-gray-600 group-hover:text-red-600 dark:text-slate-500"
                th:text="${post.stats?.upvote ?:0}"
              ></span>
            </div>
            <a
              th:if="${haloCommentEnabled}"
              href="#comment"
              class="group inline-flex cursor-pointer items-center gap-0.5 rounded-lg"
            >
              <div
                class="inline-flex items-center justify-center rounded-full p-2 transition-all group-hover:bg-gray-100 dark:group-hover:bg-slate-700"
              >
                <div
                  class="i-tabler-message-circle text-lg text-gray-600 group-hover:text-indigo-500 dark:text-slate-500"
                ></div>
              </div>
              <span
                class="text-sm text-gray-600 group-hover:text-indigo-500 dark:text-slate-500"
                th:text="${post.stats?.comment ?:0}"
              ></span>
            </a>

            <div
              th:if="${theme.config.post.show_share_button}"
              th:attr="x-data=|share(${theme.config.post.share_item_ids})|"
              class="group inline-flex cursor-pointer items-center gap-0.5 rounded-lg"
              @click="shareModal = true"
            >
              <div
                class="inline-flex items-center justify-center rounded-full p-2 transition-all group-hover:bg-gray-100 dark:group-hover:bg-slate-700"
              >
                <div class="i-tabler-share text-lg text-gray-600 group-hover:text-green-500 dark:text-slate-500"></div>
              </div>
              <th:block th:replace="~{modules/share-modal}" />
            </div>
          </div>
        </div>
        <h1
          th:if="${#strings.isEmpty(post.spec.cover)} or ${theme.config.post.title_position == 'content'}  or ${not theme.config.layout.content_header}"
          class="mt-3 text-3xl font-medium dark:text-slate-50"
          th:text="${post.spec.title}"
        ></h1>
        <div class="my-3 flex flex-wrap gap-2">
          <a
            th:each="tag : ${post.tags}"
            th:href="@{${tag.status.permalink}}"
            th:title="${tag.spec.displayName}"
            th:text="|#${tag.spec.displayName}|"
            class="cursor-pointer text-sm italic text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-500"
          >
          </a>
        </div>
        <article
          id="content"
          class="!max-w-none break-words"
          th:classappend="${theme.config.post.content_style == 'github' ? 'markdown-body' : 'tailwind-typography'}"
          th:utext="${post.content.content}"
        ></article>
        <div
          class="mt-10 flex flex-col sm:flex-row sm:justify-between"
          th:with="postCursor = ${postFinder.cursor(post.metadata.name)}"
        >
          <div class="flex justify-start">
            <a
              th:if="${postCursor.hasPrevious()}"
              role="navigation"
              class="group inline-flex items-center gap-2 truncate text-sm text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-200"
              th:href="@{${postCursor.previous.status.permalink}}"
              th:title="${postCursor.previous.spec.title}"
            >
              <span
                class="i-tabler-chevron-left translate-x-1 text-lg transition-all group-hover:-translate-x-0"
              ></span>
              <span th:text="${#strings.abbreviate(postCursor.previous.spec.title,20)}"></span>
            </a>
          </div>
          <div class="flex justify-end">
            <a
              th:if="${postCursor.hasNext()}"
              role="navigation"
              class="group inline-flex items-center gap-2 truncate text-sm text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-200"
              th:href="@{${postCursor.next.status.permalink}}"
              th:title="${postCursor.next.spec.title}"
            >
              <span th:text="${#strings.abbreviate(postCursor.next.spec.title,20)}"></span>
              <span
                class="i-tabler-chevron-right -translate-x-1 text-lg transition-all group-hover:translate-x-0"
              ></span>
            </a>
          </div>
        </div>
        <hr th:if="${haloCommentEnabled}" class="my-10 dark:border-slate-700" />
        <div id="comment" th:if="${haloCommentEnabled}">
          <h2 class="mb-2 text-base font-medium text-gray-900 dark:text-slate-50" th:text="#{common.comment}"></h2>
          <halo:comment group="content.halo.run" kind="Post" th:attr="name=${post.metadata.name}" />
        </div>
      </div>
    </div>
    <th:block th:replace="~{modules/sidebar :: sidebar(prepend = ~{::sidebar_prepend})}">
      <th:block th:fragment="sidebar_prepend">
        <div
          class="toc-container sticky top-20 z-[5] w-full cursor-pointer rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800"
        >
          <h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
            <span class="i-tabler-list text-lg"></span>
            <th:block th:text="#{page.post.toc}"></th:block>
          </h2>
          <div class="toc mt-2 max-h-64 overflow-auto"></div>
        </div>
      </th:block>
    </th:block>
  </section>
</include>