feat(ui): implement line numbering feature for post content with dynamic updates

templates/index.html

@@ -12,7 +12,7 @@
       <div class="posts">
         <div class="post on-list" th:each="post : ${posts.items}">
           <h1 class="post-title">
-            <a th:text="'<' + ${post.spec.title} + '>'" th:href="${post.status.permalink}">Post Title</a>
+            <a th:text="'< ' + ${post.spec.title} + ' >'" th:href="${post.status.permalink}">Post Title</a>
           </h1>
           <div class="post-meta">
             <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">

templates/post.html

@@ -4,8 +4,8 @@
   th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
 >
   <th:block th:fragment="content">
-    <div class="post">
-      <h1 class="post-title" th:text="'<' + ${post.spec.title} + '>'">Post Title</h1>
+    <div class="post" x-data="lineNumbers" x-init="init()">
+      <h1 class="post-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
       <div class="post-meta">
         <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
         <span class="post-separator">
@@ -25,8 +25,11 @@
           >#Tag</a
         >
       </span>
-      <div class="post-content">
-        <div th:utext="${post.content.content}">Post Content</div>
+      <div class="post-body">
+        <div class="post-line-gutter"></div>
+        <div class="post-content">
+          <div th:utext="${post.content.content}">Post Content</div>
+        </div>
       </div>
     </div>
     <div class="comment-wrap" th:if="${haloCommentEnabled}">