fix: Fix `Backlinks` not applying the display class (#519)

Luca Salvarani

2023-10-02 c8f5dbbad3a85749d8a74f5e3e3b222fe547d5d6

fix: Fix `Backlinks` not applying the display class (#519)

* fix: Fix `Backlinks` not applying the display class

Fix #518

* fix: Apply `displayClass` to all layout components

* refactor: Use same style

* fix: Remove `undefined` class using coalescing operator

 quartz/components/ArticleTitle.tsx

@@ -1,9 +1,9 @@
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"

function ArticleTitle({ fileData }: QuartzComponentProps) {
function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) {
  const title = fileData.frontmatter?.title
  if (title) {
    return <h1 class="article-title">{title}</h1>
    return <h1 class={`article-title ${displayClass ?? ""}`}>{title}</h1>
  } else {
    return null
  }

 quartz/components/Backlinks.tsx

@@ -2,11 +2,11 @@
import style from "./styles/backlinks.scss"
import { resolveRelative, simplifySlug } from "../util/path"

function Backlinks({ fileData, allFiles }: QuartzComponentProps) {
function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
  const slug = simplifySlug(fileData.slug!)
  const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
  return (
    <div class="backlinks">
    <div class={`backlinks ${displayClass ?? ""}`}>
      <h3>Backlinks</h3>
      <ul class="overflow">
        {backlinkFiles.length > 0 ? (

 quartz/components/Breadcrumbs.tsx

@@ -58,7 +58,7 @@
  // Merge options with defaults
  const options: BreadcrumbOptions = { ...defaultOptions, ...opts }

  function Breadcrumbs({ fileData, allFiles }: QuartzComponentProps) {
  function Breadcrumbs({ fileData, allFiles, displayClass }: QuartzComponentProps) {
    // Hide crumbs on root if enabled
    if (options.hideOnRoot && fileData.slug === "index") {
      return <></>
@@ -103,7 +103,7 @@
      }
    }
    return (
      <nav class="breadcrumb-container" aria-label="breadcrumbs">
      <nav class={`breadcrumb-container ${displayClass ?? ""}`} aria-label="breadcrumbs">
        {crumbs.map((crumb, index) => (
          <div class="breadcrumb-element">
            <a href={crumb.path}>{crumb.displayName}</a>

 quartz/components/ContentMeta.tsx

@@ -3,7 +3,7 @@
import readingTime from "reading-time"

export default (() => {
  function ContentMetadata({ cfg, fileData }: QuartzComponentProps) {
  function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
    const text = fileData.text
    if (text) {
      const segments: string[] = []
@@ -14,7 +14,7 @@
      }

      segments.push(timeTaken)
      return <p class="content-meta">{segments.join(", ")}</p>
      return <p class={`content-meta ${displayClass ?? ""}`}>{segments.join(", ")}</p>
    } else {
      return null
    }

 quartz/components/Darkmode.tsx

@@ -3,11 +3,11 @@
// see: https://v8.dev/features/modules#defer
import darkmodeScript from "./scripts/darkmode.inline"
import styles from "./styles/darkmode.scss"
import { QuartzComponentConstructor } from "./types"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"

function Darkmode() {
function Darkmode({ displayClass }: QuartzComponentProps) {
  return (
    <div class="darkmode">
    <div class={`darkmode ${displayClass ?? ""}`}>
      <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
      <label id="toggle-label-light" for="darkmode-toggle" tabIndex={-1}>
        <svg

 quartz/components/Explorer.tsx

@@ -86,7 +86,7 @@
  function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
    constructFileTree(allFiles)
    return (
      <div class={`explorer ${displayClass}`}>
      <div class={`explorer ${displayClass ?? ""}`}>
        <button
          type="button"
          id="explorer"

 quartz/components/Footer.tsx

@@ -1,4 +1,4 @@
import { QuartzComponentConstructor } from "./types"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/footer.scss"
import { version } from "../../package.json"

@@ -7,11 +7,11 @@
}

export default ((opts?: Options) => {
  function Footer() {
  function Footer({ displayClass }: QuartzComponentProps) {
    const year = new Date().getFullYear()
    const links = opts?.links ?? []
    return (
      <footer>
      <footer class={`${displayClass ?? ""}`}>
        <hr />
        <p>
          Created with <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a>, © {year}

 quartz/components/Graph.tsx

@@ -1,4 +1,4 @@
import { QuartzComponentConstructor } from "./types"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
// @ts-ignore
import script from "./scripts/graph.inline"
import style from "./styles/graph.scss"
@@ -52,11 +52,11 @@
}

export default ((opts?: GraphOptions) => {
  function Graph() {
  function Graph({ displayClass }: QuartzComponentProps) {
    const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
    const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
    return (
      <div class="graph">
      <div class={`graph ${displayClass ?? ""}`}>
        <h3>Graph View</h3>
        <div class="graph-outer">
          <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>

 quartz/components/PageTitle.tsx

@@ -1,11 +1,11 @@
import { pathToRoot } from "../util/path"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"

function PageTitle({ fileData, cfg }: QuartzComponentProps) {
function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) {
  const title = cfg?.pageTitle ?? "Untitled Quartz"
  const baseDir = pathToRoot(fileData.slug!)
  return (
    <h1 class="page-title">
    <h1 class={`page-title ${displayClass ?? ""}`}>
      <a href={baseDir}>{title}</a>
    </h1>
  )

 quartz/components/RecentNotes.tsx

@@ -23,13 +23,12 @@
})

export default ((userOpts?: Partial<Options>) => {
  function RecentNotes(props: QuartzComponentProps) {
    const { allFiles, fileData, displayClass, cfg } = props
  function RecentNotes({ allFiles, fileData, displayClass, cfg }: QuartzComponentProps) {
    const opts = { ...defaultOptions(cfg), ...userOpts }
    const pages = allFiles.filter(opts.filter).sort(opts.sort)
    const remaining = Math.max(0, pages.length - opts.limit)
    return (
      <div class={`recent-notes ${displayClass}`}>
      <div class={`recent-notes ${displayClass ?? ""}`}>
        <h3>{opts.title}</h3>
        <ul class="recent-ul">
          {pages.slice(0, opts.limit).map((page) => {

 quartz/components/Search.tsx

@@ -1,12 +1,12 @@
import { QuartzComponentConstructor } from "./types"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/search.scss"
// @ts-ignore
import script from "./scripts/search.inline"

export default (() => {
  function Search() {
  function Search({ displayClass }: QuartzComponentProps) {
    return (
      <div class="search">
      <div class={`search ${displayClass ?? ""}`}>
        <div id="search-icon">
          <p>Search</p>
          <div></div>

 quartz/components/Spacer.tsx

@@ -1,8 +1,7 @@
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"

function Spacer({ displayClass }: QuartzComponentProps) {
  const className = displayClass ? `spacer ${displayClass}` : "spacer"
  return <div class={className}></div>
  return <div class={`spacer ${displayClass ?? ""}`}></div>
}

export default (() => Spacer) satisfies QuartzComponentConstructor

 quartz/components/TableOfContents.tsx

@@ -19,7 +19,7 @@
  }

  return (
    <div class={`toc ${displayClass}`}>
    <div class={`toc ${displayClass ?? ""}`}>
      <button type="button" id="toc">
        <h3>Table of Contents</h3>
        <svg

 quartz/components/TagList.tsx

@@ -1,12 +1,12 @@
import { pathToRoot, slugTag } from "../util/path"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"

function TagList({ fileData }: QuartzComponentProps) {
function TagList({ fileData, displayClass }: QuartzComponentProps) {
  const tags = fileData.frontmatter?.tags
  const baseDir = pathToRoot(fileData.slug!)
  if (tags && tags.length > 0) {
    return (
      <ul class="tags">
      <ul class={`tags ${displayClass ?? ""}`}>
        {tags.map((tag) => {
          const display = `#${tag}`
          const linkDest = baseDir + `/tags/${slugTag(tag)}`