v0.1.40 홈 피드 및 문서 버전 정리

Made-with: Cursor

assets/built/screen.css

@@ -118,6 +118,11 @@ menu {
     background: var(--bg);
 }
 
+.sidebar--left {
+    overflow: hidden;
+    transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.24s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .sidebar--right {
     border-right: 0;
     border-left: 1px solid var(--border);
@@ -131,13 +136,24 @@ menu {
     overflow-y: auto;
 }
 
+.sidebar--left .sidebar__inner {
+    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 body.left-sidebar-collapsed .site-shell {
     width: calc(var(--content-column) + var(--sidebar-right));
-    grid-template-columns: minmax(0, var(--content-column)) var(--sidebar-right);
+    grid-template-columns: 0 minmax(0, var(--content-column)) var(--sidebar-right);
 }
 
 body.left-sidebar-collapsed .sidebar--left {
-    display: none;
+    opacity: 0;
+    pointer-events: none;
+    border-right-color: transparent;
+}
+
+body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
+    opacity: 0;
+    transform: translateX(-14px);
 }
 
 .sidebar__inner--right {
@@ -247,7 +263,6 @@ body.left-sidebar-collapsed .sidebar--left {
     gap: 3px;
     margin-left: 14px;
     margin-top: 3px;
-    border-left: 1px solid var(--border);
     padding-left: 0;
 }
 
@@ -1359,8 +1374,8 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 
 .post-article {
     max-width: var(--content-header);
-    margin: 0 auto;
-    padding: 18px 0 10px;
+    margin: 0 auto 3rem;
+    word-break: break-word;
 }
 
 .post-header {
@@ -1572,6 +1587,40 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     color: var(--text-soft);
 }
 
+.pagination--load-more {
+    justify-content: center;
+    padding-top: 28px;
+}
+
+.pagination__load-more {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 96px;
+    min-height: 34px;
+    padding: 8px 16px;
+    border: 1px solid #2f2f2f;
+    border-radius: 8px;
+    background: linear-gradient(180deg, #4a4a4a 0%, #242424 100%);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    cursor: pointer;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.pagination__load-more:hover {
+    transform: translateY(-1px);
+    opacity: 0.9;
+}
+
+.pagination__load-more:disabled {
+    opacity: 0.7;
+    cursor: wait;
+}
+
 .search-modal[hidden] {
     display: none;
 }

assets/built/theme.js

@@ -197,7 +197,7 @@
     function renderSearchResults(keyword) {
         var normalized = keyword.trim().toLowerCase();
         if (!normalized) {
-            searchResults.innerHTML = '<p class="search-modal__hint">Start typing to filter visible posts, tags, and authors in the current page.</p>';
+            searchResults.innerHTML = '<p class="search-modal__hint">현재 페이지에 표시되는 게시물, 태그 및 작성자를 필터링하려면 입력을 시작하세요.</p>';
             return;
         }
 
@@ -206,7 +206,7 @@
         });
 
         if (!items.length) {
-            searchResults.innerHTML = '<p class="search-empty">No matching items in the current view.</p>';
+            searchResults.innerHTML = '<p class="search-empty">현재 보기에 일치하는 항목이 없습니다.</p>';
             return;
         }
 
@@ -258,4 +258,84 @@
             toggleSearch(false);
         }
     });
+
+    function updateLoadMoreState(pagination, nextUrl, loading) {
+        var trigger = pagination.querySelector("[data-load-more-trigger]");
+        if (!trigger) {
+            return;
+        }
+
+        if (!nextUrl) {
+            pagination.remove();
+            return;
+        }
+
+        pagination.dataset.nextUrl = nextUrl;
+        trigger.disabled = !!loading;
+        trigger.textContent = loading ? "Loading..." : "Load More";
+        pagination.classList.toggle("is-loading", !!loading);
+    }
+
+    function initializeLoadMore(root) {
+        var pagination = root.querySelector("[data-load-more-pagination]");
+        var list = root.querySelector("[data-load-more-list]");
+
+        if (!pagination || !list || pagination.dataset.bound === "true") {
+            return;
+        }
+
+        var trigger = pagination.querySelector("[data-load-more-trigger]");
+        if (!trigger) {
+            return;
+        }
+
+        pagination.dataset.bound = "true";
+
+        trigger.addEventListener("click", function () {
+            var nextUrl = pagination.dataset.nextUrl;
+
+            if (!nextUrl || pagination.classList.contains("is-loading")) {
+                return;
+            }
+
+            updateLoadMoreState(pagination, nextUrl, true);
+
+            fetch(nextUrl, {
+                headers: {
+                    "X-Requested-With": "XMLHttpRequest"
+                }
+            })
+                .then(function (response) {
+                    if (!response.ok) {
+                        throw new Error("Failed to load more posts");
+                    }
+
+                    return response.text();
+                })
+                .then(function (html) {
+                    var parser = new DOMParser();
+                    var documentFragment = parser.parseFromString(html, "text/html");
+                    var nextRoot = documentFragment.querySelector("[data-load-more-root]");
+                    var nextList = nextRoot ? nextRoot.querySelector("[data-load-more-list]") : null;
+                    var nextPagination = nextRoot ? nextRoot.querySelector("[data-load-more-pagination]") : null;
+
+                    if (!nextList) {
+                        throw new Error("Post list not found");
+                    }
+
+                    Array.prototype.forEach.call(nextList.children, function (item) {
+                        list.appendChild(item.cloneNode(true));
+                    });
+
+                    updateLoadMoreState(pagination, nextPagination ? nextPagination.dataset.nextUrl : "", false);
+                })
+                .catch(function () {
+                    updateLoadMoreState(pagination, pagination.dataset.nextUrl, false);
+                });
+        });
+    }
+
+    document.querySelectorAll("[data-load-more-root]").forEach(function (rootNode) {
+        initializeLoadMore(rootNode);
+    });
 })();

assets/styles/tailwind.css

@@ -16,7 +16,7 @@
 @layer components {
     .prose {
         color: var(--tw-prose-body);
-        max-width: 65ch;
+        /* max-width: 65ch; */
         font-size: 1rem;
         line-height: 1.75;
     }