Quartz snippets to customize your site

Here are the snippets that I use to customize my Quartz site:

Show Recent Notes instead of Explorer on the homepage

Replace Component.Explorer in quartz.layout.ts with:

Component.DesktopOnly(
    Component.RecentNotes({
    title: "Recent Posts",
    limit: 2,
    filter: (f) =>
        f.slug!.startsWith("posts/") && f.slug! !== "posts/index" && !f.frontmatter?.noindex,
    linkToMore: "posts/" as SimpleSlug,
    }),
),

Invert image for dark mode

body[data-slug="index"] img {
  filter: invert(0%);
  opacity: 0.85;
}

[saved-theme="dark"] body[data-slug="index"] img[src*="banner.svg"] {
    filter: invert(100%);
}

Custom divider after content

hr {
  overflow: visible;
  padding: 0;
  height: 0;
  margin: 4em auto;
  border: none;
  text-align: center;
  width: 100%;

  &:after {
    content: "* * *";
    display: inline-block;
    margin: -1em 0 0.5em;
    font-size: 1.5em;
    padding: 0.5em 1em;
  color: var(--gray);
  }
}

Show both created and updated date in articles

if (fileData.dates) {
        const created = fileData.dates.created;
        const modified = fileData.dates.modified;

        const short = { month: "short", day: "numeric" } as const;
        const full = { month: "short", day: "numeric", year: "numeric" } as const;

        const sameYear = created.getFullYear() === modified.getFullYear();

        if (modified > created) {
          segments.push(
            "Updated on " +
            modified.toLocaleDateString("en-US", sameYear ? short : full) +
            "\u00A0\u00A0·\u00A0\u00A0"
          );
        }

        segments.push(
          "Posted on " +
          created.toLocaleDateString("en-US", sameYear ? short : full)
        );

        if (sameYear) {
          segments.push(", " + modified.getFullYear());
        }

        segments.push("\u00A0\u00A0·\u00A0\u00A0");
      }

Put this in:

• ContentMeta.tsx
• Below:

if (text) {
      const segments: (string | JSX.Element)[] = []

Disable popover of link

Simple solution, but the link won’t show in Graph View:

<a href="/photos" data-no-popover="true">Photos</a>

I want to see the graph nodes, so I put this in link.ts instead:

// suppress popovers for custom shelf/gallery folder pages
                  const noPopoverSlugs = new Set(["books/index", "movies/index", "works/index", "photos/index"])
                  if (noPopoverSlugs.has(full)) {
                    node.properties["data-no-popover"] = "true"
                  }

Clickable images (lightbox)

I use the Quartz Clickable Images Zoom plugin.

Carousel

I use this Carousel component.

Custom pages

You’ll probably need to:

• Create a custom tsx file
• Create a custom scss file
• Update Content.tsx or FolderContent.tsx
• Export the custom page in index.ts
• Edit quartz.layout.ts to show/hide Quartz default UI