file number counter in quartz

25 Jun, 2025

As mentioned in a previous post, I am using Quartz to build a public knowledge vault from parts of my Obsidian notes. You can find that site here (WIP; and the sidebar currently has a duplication bug, ignore that for now).

I wanted to display the amount of notes currently published somewhere on the main page (index.md), like: "(number) notes uploaded so far!" without having to manually update that all the time.

So I created a Quartz component.

Steps:

1. Navigate to quartz/quartz/components and create new file FileCounter.tsx

2. Enter:

import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { isFolderPath } from "../util/path"

export default (() => {
    const FileCounter: QuartzComponent = ({ allFiles }: QuartzComponentProps) => {
        const markdownFiles = allFiles.filter(file => !isFolderPath(file.slug ?? ""))
        const count = markdownFiles.length

        return (
        <div class="file-counter">
        <p>{count} notes uploaded so far!</p>
        </div>
        )
    }

    return FileCounter
}) satisfies QuartzComponentConstructor

This filters out folders based on the slug, and sets the text.

3. Edit index.ts in the same location and add FileCounter to both import and export. Means adding:
   import FileCounter from "./FileCounter"
   where the other imports are, and
   FileCounter
   to the export { list.

4. Navigate to quartz/quartz.layout.ts.

5. For a position between post and footer:

  afterBody: [
    Component.ConditionalRender({
      component: Component.FileCounter(),
                                condition: (page) => page.fileData.slug === "index",
    }),
  ],

This uses afterBody for the position and also tells it to only apply this to the index page. For the same thing but on top between header and post, use beforeBody in the same document.

Looks like this:

Reply via email
Published 25 Jun, 2025

#2025 #webdev