Merge pull request #2 from mayobloom/feature/edit-design/250813-editmargin

Feature/edit design/250813 editmargin

quartz.config.ts

@@ -23,8 +23,8 @@ const config: QuartzConfig = {
       fontOrigin: "googleFonts",
       cdnCaching: true,
       typography: {
-        header: "Noto Sans KR",
+        header: "IBM Plex Sans KR",
-        body: "Noto Sans KR",
+        body: "IBM Plex Sans KR",
         code: "IBM Plex Mono",
       },
       colors: {

quartz/components/Explorer.tsx

@@ -147,6 +147,7 @@ export default ((userOpts?: Partial<Options>) => {
               <div>
                 <button class="folder-button">
                   <span class="folder-title"></span>
+                  <span class="folder-count"></span>
                 </button>
               </div>
             </div>

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<HTMLElement>
+    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) {
+function setFolderState(
-  return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open")
+  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})`
+      }
+    }
+  })
 }

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-size: 1.05rem;
-    font-weight: $semiBoldWeight;
+    font-weight: $normalWeight;
-    line-height: 1.5rem;
+    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;
     }
+
+    
   }
 }
 

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 {