Quartz Changelog

These are most of the changes implemented in my Quartz setup, including where I've found them (if I didn't write them myself). The list is ordered based on arbitrary categories which make it easy for me to find what I'm looking for. Perhaps, this resource might prove useful to others as well.

Functional Changes

Components

Confidence Tags and Page Description

Modified the ContentMeta.tsx file to display the page description for all single pages and added a Confidence tag. Original meta content (dates, tags etc.) and page description are wrapped in separate blocks. Blocks are returned separately so they display one after another within the page header.

• initially planned to display different levels of confidence in different colors but the idea fell through
• page description has lighter font weight than other body text
• separator changed from a comma to a 4-pointed star, ’🟄’

Show

ContentMeta.tsx

// Custom confidence tags
const ConfidenceTagElement = (score: number): JSX.Element | null => {
 if (score < 1 || score > 5 || isNaN(score)) {
   return null;
 }
 
 // Determine the CSS class based on the score value (High/Medium/Low)
 let confidenceClass = "confidence-low";
 if (score >= 4) {
   confidenceClass = "confidence-high";
 } else if (score === 3) {
   confidenceClass = "confidence-medium";
 }
 
 return (
   <span className={`confidence-tag ${confidenceClass}`}>
     <a class="internal tag-link" href="./index/#confidence-tags">confidence:</a> {score}
   </span>
 );
};
 
export default ((opts?: Partial<ContentMetaOptions>) => {
 // Merge options with defaults
 const options: ContentMetaOptions = { ...defaultOptions, ...opts }
 
 function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
   const text = fileData.text
 
   // Custom description: pull from frontmatter
   const description = fileData.frontmatter?.description
 
   if (text) {
     const segments: (string | JSX.Element)[] = []
 
     if (fileData.dates && fileData.slug !== "index") { /* Excludes index */
       segments.push(<Date date={getDate(cfg, fileData)!} locale={cfg.locale} />)
     }
 
     // Custom confidence tag 
     if (fileData.slug !== "index") { /* Excludes index */
       const confidenceScore = fileData.frontmatter?.['confidence-score'] as number;
       if (confidenceScore) {
         const tagElement = ConfidenceTagElement(confidenceScore);
         if (tagElement) {
           segments.push(tagElement);
         }
       }
     }
// Custom Render the segments together in a block so the bottom return() statement can output custom blocks at a time
     const segmentsBlock = (
       // Custom change from 'comma' to 'separator', and customized separator
       <p show-separator={options.showSeparator} class={classNames(displayClass, "content-meta")}>
         {segments.map((segment, i) => (
           <>
             {segment}
             {i < segments.length - 1 && <span class="separator">🟄</span>}
           </>
         ))}
       </p>
     )
 
     // Custom Render the description block
     const shouldShowDescription = description && fileData.slug !== "index"; // Excludes index
     const descriptionBlock = shouldShowDescription ? (
       <p class={classNames(displayClass, "page-description")}>
         {description}
       </p>
     ) : null
 
     return (
       <>
         {descriptionBlock}
         {segmentsBlock}
       </>
       /* default
       <p show-comma={options.showSeparator} class={classNames(displayClass, "content-meta")}>
         {segments}
       </p>
       */
     )
   } else {
     return null
   }
 }
 
 ContentMetadata.css = style
 
 return ContentMetadata
}) satisfies QuartzComponentConstructor

Custom Date Formats

• Added an extra argument to formatDate() in Date.tsx so that it specifies whether to return the date in "default_text", "numeric_short" or "numeric_long"

Show

Date.tsx

interface Props {
 date: Date
 locale?: ValidLocale
 format?: ValidDateFormat; // Gemini: Add the optional format prop
}
 
export type ValidDateType = keyof Required<QuartzPluginData>["dates"]
 
export function getDate(cfg: GlobalConfiguration, data: QuartzPluginData): Date | undefined {
 if (!cfg.defaultDateType) {
   throw new Error(
     `Field 'defaultDateType' was not set in the configuration object of quartz.config.ts. See https://>>quartz.jzhao.xyz/configuration#general-configuration for more details.`,
   )
 }
 return data.dates?.[cfg.defaultDateType]
}
 
// Define the valid formats 
export type ValidDateFormat = "default_text" | "numeric_short" | "numeric_long";
 
export function formatDate(
 d: Date,
 locale: ValidLocale = "en-US",
 format: ValidDateFormat = "default_text" // Set a default format
): string {
 // Switch statement to apply the formatting based on 'format' prop
 switch (format) {
   case "numeric_short": {
     // YY-MM format (e.g., 2025-11)
     const numericMonth = d.toLocaleDateString(locale, { month: "2-digit" }); // args: "2-digit", "short", "long"
     const fullYear = d.toLocaleDateString(locale, { year: "numeric" });
     const shortYear = fullYear.slice(-2);
     return `${fullYear}-${numericMonth}`; // change to shortYear if desired (e.g., 25-11)
   }
 
   case "numeric_long": {
     // DD/MM/YY format (e.g., 2025-11-01)
     const numericMonth = d.toLocaleDateString(locale, { month: "2-digit" });
     const day = d.toLocaleDateString(locale, { day: "2-digit" });
     const fullYear = d.toLocaleDateString(locale, { year: "numeric" });
     return `${fullYear}-${numericMonth}-${day}`; // sep is '-'
   }
 
   case "default_text":
   default: {
     // MONTH DD, YYYY format: (e.g., Nov 25, 2025)
     const monthName = d.toLocaleDateString(locale, { month: "short" });
     const day = d.toLocaleDateString(locale, { day: "2-digit" });
     const fullYear = d.toLocaleDateString(locale, { year: "numeric" });
     return `${monthName} ${day}, ${fullYear}`;
   }
 }
}
 
// Pass the format prop to the formatDate function
export function Date({ date, locale, format }: Props) {
 return (
   <time datetime={date.toISOString()}>
     {formatDate(date, locale, format)}
   </time>
 );
}

PageList.tsx

…
  <p class="meta">
    {
     page.dates && <Date date={getDate(cfg, page)!} locale={cfg.locale} format={"numeric_short"} /> // added format as an arg 
    }
  </p>
…

Floating Buttons

Modified from CatCodeMe.

• buttons to scroll to top and bottom of the page, located at the bottom right
• used in all pages (specify this in quartz.layout.ts)

OnlyFor

Modified from Eilleen’s (online!) Everything Notebook.

• used to specify a layout for certain pages (by specifying their titles) in quartz.layout.ts
• used to put recentNotes component on afterBody on the New page

RecentNotes

Modified from Eilleen’s (online!) Everything Notebook, the RecentNotes component has its own .tsx and .scss files for building and styling the UI respectively.

• Lists most recent pages, sorted by publish date
• pages can be filtered by tag from quartz.layout.ts

Show

recentNotes.scss

.recent-notes {
 &>h2 {
   font-size: 2.1rem;
   margin-top: 2rem;
 }
 
 &>ul.recent-ul {
   list-style: none;
   margin-top: 1rem;
   padding-left: 0;
 
   &>li.recent-li {
     margin: 0;
     padding: 1rem 0;
 
     .section>.meta {
       margin: 0 0 0.5rem 0;
       padding: 0;
       //height: 24px; // size of content box for meta info
       //color: var(--gray);
       //font-size: 0.9rem;
       opacity: 0.8;
     }
 
     /* added by me*/
     .section>.desc>h4 {
       margin: 0;
       padding: 0;
     }
 
     .section>.desc>h4>a {
       padding: 0rem;
       //background-color: var(--gray);
       font-size: 1rem;
       color: var(--darkgray);
     }
   }
 }
 
 /* 
 // Optional border around the recentnotes component
 border: 2px dotted var(--gray);
 border-radius: 10px; // Rounded corners
 padding: 20px; // Optional; to demonstrate the effect */
 
 // Optional border bottom
 border-bottom: 2px solid var(--gray);
}
 
.see-more {
 font-size: 0.9rem;
 color: var(--gray);
 white-space: pre;
 display: inline-block;
}

quartz.layout.ts

const recentNotesConfig = {
 showTags: false,
 title: "Recently Published ",
 showDate: true,
 linkToMore: "meta/" + modifiedListTitle as SimpleSlug,
 excludeTags: ["recents-exclude", "", ""],
 filter: (f: QuartzPluginData) => !f.slug!.startsWith("tags/") && !f.slug!.endsWith("/index")
}

TagList

Modified from Eilleen’s (online!) Everything Notebook.

• used to create a list of tags to exclude for other components in quartz.layout.ts

Reminder

Add all new components into index.ts too so that they are accessible.

Presentation Changes

Asset Integration

Site Logo

• created site logo as svg file
• changed the alignment of page title
• changed width and height prop to logo size
• removed border bottom
• page title opacity reduce
• page title opacity change on hover
• Not shown: svg imported into PageTitle.tsx and size adjusted

custom.scss

.page-title {
  /* Ensure the link is also a flex container to align the icon and text */
  display: flex;
  align-items: center;
  width: 10rem; // prop to logo size
  height: 9rem; // prop to logo size
  padding: 0.2rem;
  border-bottom-color: transparent;
}
 
.page-title a {
  opacity: 0.4;
  transition: opacity 0.4s ease;
  margin: 0;
}
 
.page-title a:hover {
  opacity: 0.7;
}

Favicon: Replaced

• created $150\times 150$ favicon logo as svg file
• save as quartz\public\static\icon.png
• clear cache and it should render without issue

Show

Adjustments to Grid Layout

• increased $sidePanelWidth and columnGap for desktop

variables.scss

…
$sidePanelWidth: 370px; // 300px default, 250px for slim side panels
…
 
$desktopGrid: (
  templateRows: "auto auto auto",
  templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
  rowGap: "5px",
  columnGap: "10px",
  // 5px default columnGap
  templateAreas: '"grid-sidebar-left grid-header grid-sidebar-right"\
      "grid-sidebar-left grid-center grid-sidebar-right"\
      "grid-sidebar-left grid-footer grid-sidebar-right"',
);

UI & Styling

Page Title, Tags and Meta-content

• center align article title, article meta content, table containers and tags
• added custom page description component with styling
• justified body text

custom.scss

.article-title {
  text-align: center;
}
 
.page-description {
  text-align: center;
  margin: 0.5rem 1.5rem;
  font-style: italic;
  font-weight: 400;
}
 
.content-meta {
  text-align: center;
}
 
.tags {
  justify-content: center;
}
 
body {
  text-align: justify;
  word-spacing: 0.15em; // limits characters per line to ≈ 80 for better readability
}
 
.table-container {
  margin-left: auto;
  margin-right: auto;
}

Tags: Hidden

• Remove #tags in all tags pages

custom.scss

.page-listing .tag-link {
  display: none;
}

Breadcrumbs

• removed for single pages only

quartz.layout.ts

export const defaultContentPageLayout: PageLayout = {
  beforeBody: [ /* // remove breadcrumbs from single pages
    Component.ConditionalRender({
      component: Component.Breadcrumbs(),
      condition: (page) => page.fileData.slug !== "index",
    }),*/
    …
  ],
  …
}

Headers and Body text

• increased font weight of body text
• increased font size of Headers (1.25 scale ratio)
• layout adjustments to Headers

custom.scss

p,
ol,
ul,
li {
  font-weight: 600; // targets font-weight of all paragraph-text 
}
 
/* headers and code font-size changes */
.page article h1 {  
  font-size: 2.44rem;
  border-bottom: 1px solid var(--gray);
  padding-bottom: 0.05em
}
 
h1 {
  font-size: 3.05rem;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
}
 
h2 {
  font-size: 1.95rem;
  margin-top: 3.0rem;
  margin-bottom: 1rem;
  border-bottom: 1px dotted var(--gray);
  padding-bottom: 0.05em
}
 
h3 {
  font-size: 1.56rem;
  margin-top: 1.62rem;
  margin-bottom: 1rem;
}
 
h4 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

Superscript and Subscript

• lower footnotes so they do not increase line spacing ¹

custom.scss

sup {
  font-size: 0.64em;
  vertical-align: top;
}
 
sub {
  font-size: 0.64em;
}

Body Paragraphs

• left-indent and right padding for body text
• increased line height to compensate for increased font weight
• increased margin-right specifically to increase white space for mobile displays
• links are underlined

custom.scss

article p {
  line-height: 2.0rem;
  margin-right: 0.4rem; 
  padding-left: 1rem; 
  padding-right: 2rem; // cannot be too small or you exceed ~80 characters per line
}

Inline Icons

• useful for inserting SVGs into inline text

custom.scss

.inline-icon {
  // Sets the icon's size relative to the surrounding font size 
  width: 0.9em;
  height: 0.9em;
 
  // Aligns the SVG vertically in the middle of the text line 
  vertical-align: middle;
}
 
.search-path path,
.search-path circle { //for search icon svg
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

Dropcaps

• uses Times New Roman for dropcaps
• have to specify <p class="dropcap">TEXT</p> in .md files; normal text goes into TEXT

custom.scss

p.dropcap::first-letter {
  font-family: 'Times New Roman', Times, serif;
  color: var(--dark);
  float: left;
  margin: 0.9rem 0.8rem 0 0;
  font-size: 3.81rem; // 1.25^6
  font-weight: bold;
}

Code (Blocks)

• decreased font weight and size
• padding to create slight left indent
• hide overflow in data-rehype-pretty-code-figure

custom.scss

code {
  padding: 0.25rem;
  font-size: 0.9rem;
  font-weight: 400;
}
 
pre {
  margin: 0 0.5rem 0 0.8rem;
  padding: 0 0.5rem 0 0.8rem;
}
 
figure[data-rehype-pretty-code-figure] {
  overflow-x: hidden;
}

ReaderMode

quartz.layout.ts

left: [
    …
        //{ Component: Component.ReaderMode() }, // remove reader mode
    …
  ],

Explorer

• decreased font size
• changed color of h2 button and links while keeping color transitions on hover
• padding to create slight left indent in list elements
• removed underline from links
• added four-point star bullets

custom.scss

.explorer {
  min-height: 1.6rem; 
}
 
/* Changing body text-align above affects explorer text-align. */
.explorer-content {
  padding-left: 0.2rem;
  text-align: left;
  font-size: 0.8rem;
}
 
.explorer-content ul li {
  margin-top: 0.5rem;
}
 
.explorer-content ul li a {
  color: var(--darkgray);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color .2s;
}
 
.explorer-content ul li a:hover {
  color: var(--tertiary);
}
 
button.desktop-explorer h2 {
  display: inline-block;
  margin: 0;
  font-size: 1rem; 
  color: var(--secondary);
}

explorer.tsx

…
<template id="template-file">
    <li>
    ✧ <a href="#"></a>
    </li>
</template>
…

Graph View

• removed title
• changed layout

custom.scss

.graph h3 {
  font-size: 0rem;
  margin: 0;
 
  &>.graph-outer {
    height: 100%; // original: 250px in graph.scss
  }
}
 
.graph-container {
  height: 100%; // ensure immediate parent of canvas fills outer container
 
  &>.canvas {
    // force the canvas to fill the parent container and override
    // the inline pixel values set by the library's JS.
    width: 100%;
    height: 100%;
  }
}

Table of Contents

• decreased font size
• changed color of h3 button
• adjusted minimum height when collapsed
• removed underline from links

custom.scss

.toc {
  min-height: 1.5rem; // minimum height of toc when collapsed
  text-align: left;
  font-size: 0.8rem;
}
 
button.toc-header h3 {
  font-size: 1rem; 
  color: var(--secondary);
}
 
ul.toc-content.overflow {
  padding-left: 0rem;
 
  &>li>a {
    text-decoration: none;
  }
}

Backlinks

• decreased font size
• adjusted layout slightly
• changed color of header and links while keeping color transitions on hover

custom.scss

.backlinks h3 {
  color: var(--secondary);
}
 
.backlinks ul.overflow {
  margin: 0.3rem 0;
}
 
.backlinks ul li a {
  font-size: 0.8rem;
  color: var(--gray);
  transition: color .2s;
}
 
.backlinks ul li a:hover {
  color: var(--tertiary);
}

Blockquotes

• changed background color
• padding to create slight left indent in list elements

custom.scss

blockquote {
  background-color: #4d4d4d10;
  margin-left: 0.8rem;
}

Callouts

• changed border style
• removed callout icons
• blockquote styles adapted from Kepano’s minimal theme; added a fix to blockquotes not collapsing properly after these style changes were implemented

custom.scss

.callout {
  border: 4px double var(--border);
  background-color: transparent;
  overflow: visible;
  margin-bottom: 1.5em;
  margin-left: 0.8rem;
  transition: max-height 0.3s ease, padding 0.3s ease;
  box-sizing: border-box;
 
 
  &>.callout-title {
    padding: 0.4rem 0;
 
    &>.callout-icon {
      display: none; 
    }
  }
 
  &>.callout-content {
    overflow: hidden;
    padding-bottom: 0.4rem;
 
    p {
      margin: 0;
      padding-left: 0.8rem;
    }
  }
}
 
blockquote[data-callout].is-collapsed>.callout-content {
  display: none;
}

Callouts: ‘Column’

• solid border; other callouts have double borders
• changed background and font colors to match site theme
• custom column with no border or background and text-centering
• For examples, see Sandbox

custom.scss

Show

blockquote[data-callout="column"] {
 border: 1px solid var(--border);
 background-color: #4d4d4d10;
 border-color: var(--lightgray);
 padding: 0.5rem;
 
 .callout-title {
   display: none;
 }
}
 
blockquote[data-callout="column-clear-center"] {
 border: none;
 background-color: transparent;
 padding: 0.5rem;
 margin: 0;
 
 .callout-title {
   display: none;
 }
 
 .callout-content p {
   font-family: "Noto Serif";
   font-weight: 600;
 }
}

Callouts: ‘Quote’

• styled with open and closed inverted commas
• For examples, see Sandbox

custom.scss

Show

blockquote[data-callout="quote"] {
 position: relative;
 padding: 1rem 2rem 0.6rem 0.6rem;
 
 background-color: #4e4e4e40;
 border-color: var(--gray);
 font-style: italic;
 
 // Remove the default borders except left border 
 border-top: none;
 border-right: none;
 border-bottom: none;
 border-left-width: 4px;
 
 // Top-Left Inverted Comma (Opening Quote)
 &::before {
   content: "\275D"; // Unicode for left double quotation marks 
   position: absolute;
   top: 0.2rem;
   left: 0.2rem;
   font-size: 2em;
   color: var(--tertiary);
   opacity: 0.7; // Prevent it from affecting line height
   line-height: 1; // Ensure it's behind the text if possible 
   z-index: 1;
 }
 
 // Bottom-Right Inverted Comma (Closing Quote)
 &::after {
   content: "\275E"; // Unicode for right double quotation marks
   position: absolute;
   bottom: -0.5rem;
   right: 1.4rem; // more +ve values shift left
   font-size: 2rem;
   color: var(--tertiary);
   opacity: 0.7;
   line-height: 1;
   z-index: 1;
 }
}
 
blockquote[data-callout="quote"] .callout-title {
 display: none; // Hide the entire callout title
}

Callouts: ‘Info’

• changed background and font colors, and various layout properties

custom.scss

Show

blockquote[data-callout="info"] {
 
 
 background-color: var(--light);
 border-color: var(--lightgray);
 
 & .fold-callout-icon {
   background-color: var(--gray);
   padding-top: 0.3rem;
 }
}
 
blockquote[data-callout="info"] .callout-title {
 display: flex;
 align-items: flex-start;
 gap: 5px; // gap between icon and title
 
 padding: 0 0.5rem;
 margin-top: -23px;
 width: fit-content;
 margin-left: -0.75rem;
 background-color: var(--light);
 letter-spacing: 0.05rem;
 font-variant-caps: all-small-caps;
 padding-top: 12px;
 
 &>.callout-title-inner p {
   padding-right: 0.2rem;
 }
 
 p {
   color: var(--darkgray);
   margin-left: -0.75rem;
   margin-top: -0.25rem;
 }
}

Dividers: Custom

• 4-point, 8-point and 12-point star versions

custom.scss

/* Custom class for '4-point star' divider */
hr.four_star_separator {
  overflow: visible;
  padding: 0;
  height: 0;
  border: none;
  margin: 4em auto;
  text-align: center;
 
  &:after {
    content: " ✦ "; /* replace accordingly */
    display: inline-block;
    margin: -1rem 0 0.5rem;
    font-size: 2.5rem;
    padding: 0.5rem 1rem;
    color: var(--gray);
  }
}

---

---

---

Footer

• Increased margin between links and top of footer

custom.scss

footer ul {
  margin-top: 0.5rem;
}

Footnotes

1. footnote example ↩