diff --git a/quartz.config.ts b/quartz.config.ts index b81eb9a70..a5eacf25e 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -23,8 +23,8 @@ const config: QuartzConfig = { fontOrigin: "googleFonts", cdnCaching: true, typography: { - header: "Noto Sans KR", - body: "Noto Sans KR", + header: "IBM Plex Sans KR", + body: "IBM Plex Sans KR", code: "IBM Plex Mono", }, colors: { diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index e4cbcabae..168f73dc0 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -147,6 +147,7 @@ export default ((userOpts?: Partial) => {
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts index 9c8341169..4a62fa8dc 100644 --- a/quartz/components/scripts/explorer.inline.ts +++ b/quartz/components/scripts/explorer.inline.ts @@ -111,15 +111,30 @@ function createFolderNode( const folderPath = node.slug folderContainer.dataset.folderpath = folderPath + // === [여기서 파일 개수 표시 추가] === + // 1. .folder-count span 찾기 + const folderCountSpan = titleContainer.querySelector(".folder-count") as HTMLSpanElement + if (folderCountSpan) { + // 2. 자식 중 파일(isFolder가 false) 개수 세기 + const fileCount = node.children.filter(child => !child.isFolder).length + folderCountSpan.textContent = ` (${fileCount})` + } + // === [여기까지] === + if (opts.folderClickBehavior === "link") { - // Replace button with link for link behavior const button = titleContainer.querySelector(".folder-button") as HTMLElement + const folderCountSpan = button.querySelector(".folder-count") as HTMLSpanElement const a = document.createElement("a") a.href = resolveRelative(currentSlug, folderPath) a.dataset.for = folderPath a.className = "folder-title" a.textContent = node.displayName - button.replaceWith(a) + + // folder-count를 a 뒤에 붙이기 + const wrapper = document.createElement("span") + wrapper.appendChild(a) + if (folderCountSpan) wrapper.appendChild(folderCountSpan) + button.replaceWith(wrapper) } else { const span = titleContainer.querySelector(".folder-title") as HTMLElement span.textContent = node.displayName @@ -140,6 +155,7 @@ function createFolderNode( folderOuter.classList.add("open") } + // 자식 폴더/파일 생성 for (const child of node.children) { const childNode = child.isFolder ? createFolderNode(currentSlug, child, opts) @@ -284,6 +300,26 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { mobileExplorer.classList.remove("hide-until-loaded") } + + updateFolderCounts() +}) + +// Add this to update counts when page loads +document.addEventListener('nav', () => { + const explorer = document.getElementById('explorer') + if (explorer) { + const folders = explorer.querySelectorAll('.folder-container') as NodeListOf + folders.forEach((folder) => { + const contentUl = folder.querySelector('.folder-outer > .content') as HTMLUListElement + if (contentUl) { + const fileCount = contentUl.querySelectorAll(':scope > li').length + const countSpan = folder.querySelector('.folder-button .folder-count') as HTMLSpanElement + if (countSpan) { + countSpan.textContent = ` (${fileCount})` + } + } + }) + } }) window.addEventListener("resize", function () { @@ -296,6 +332,41 @@ window.addEventListener("resize", function () { } }) -function setFolderState(folderElement: HTMLElement, collapsed: boolean) { - return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open") +function setFolderState( + folderElement: HTMLElement, + collapsed: boolean, +) { + // Add folder count update function + function updateFolderCount(folderEl: HTMLElement) { + const contentUl = folderEl.querySelector('.folder-outer > .content') as HTMLUListElement + if (contentUl) { + const fileCount = contentUl.querySelectorAll(':scope > li').length + const countSpan = folderEl.querySelector('.folder-button .folder-count') as HTMLSpanElement + if (countSpan) { + countSpan.textContent = ` (${fileCount})` + } + } + } + + // Update counts when folders are processed + folders.forEach((folder) => { + // ...existing code... + + // Add this line to update count + updateFolderCount(folder) + }) +} + +function updateFolderCounts() { + const folders = document.querySelectorAll('.folder-container') + folders.forEach(folder => { + const contentList = folder.closest('li')?.querySelector('ul.content') + if (contentList) { + const fileCount = contentList.querySelectorAll('li > a').length + const countSpan = folder.querySelector('.folder-count') + if (countSpan) { + countSpan.textContent = `(${fileCount})` + } + } + }) } diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 8d9410044..da61f2ec9 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -124,6 +124,9 @@ button.desktop-explorer { color: var(--dark); opacity: 0.75; pointer-events: all; + font-weight: $normalWeight; + line-height: 1.5rem; + font-size: 0.95rem; &.active { opacity: 1; @@ -156,12 +159,21 @@ button.desktop-explorer { align-items: center; user-select: none; + // folder-count 스타일 추가 + & .folder-count { + color: var(--secondary); + font-size: 1.05em; + margin-left: 0.3em; + font-weight: $semiBoldWeight; + opacity: 0.7; + } + & div > a { color: var(--secondary); font-family: var(--headerFont); - font-size: 0.95rem; - font-weight: $semiBoldWeight; - line-height: 1.5rem; + font-size: 1.05rem; + font-weight: $normalWeight; + line-height: 2.0rem; display: inline-block; } @@ -182,14 +194,16 @@ button.desktop-explorer { font-family: var(--headerFont); & span { - font-size: 0.95rem; + font-size: 1.05rem; display: inline-block; color: var(--secondary); - font-weight: $semiBoldWeight; + font-weight: $normalWeight; margin: 0; - line-height: 1.5rem; + line-height: 2.0rem; pointer-events: none; } + + } } diff --git a/quartz/components/styles/listPage.scss b/quartz/components/styles/listPage.scss index e86c39dcb..b3f436fbc 100644 --- a/quartz/components/styles/listPage.scss +++ b/quartz/components/styles/listPage.scss @@ -11,7 +11,7 @@ li.section-li { & > .section { display: grid; - grid-template-columns: fit-content(8em) 3fr 1fr; + grid-template-columns: fit-content(12em) 3fr 1fr; @media all and ($mobile) { & > .tags {