From c8f5dbbad3a85749d8a74f5e3e3b222fe547d5d6 Mon Sep 17 00:00:00 2001
From: Luca Salvarani <lucasalvarani99@gmail.com>
Date: Mon, 02 Oct 2023 00:20:55 +0000
Subject: [PATCH] fix: Fix `Backlinks` not applying the display class (#519)
---
quartz/components/RecentNotes.tsx | 5 ++---
quartz/components/ArticleTitle.tsx | 4 ++--
quartz/components/Footer.tsx | 6 +++---
quartz/components/Backlinks.tsx | 4 ++--
quartz/components/Darkmode.tsx | 6 +++---
quartz/components/PageTitle.tsx | 4 ++--
quartz/components/TagList.tsx | 4 ++--
quartz/components/Graph.tsx | 6 +++---
quartz/components/Breadcrumbs.tsx | 4 ++--
quartz/components/Spacer.tsx | 3 +--
quartz/components/Explorer.tsx | 2 +-
quartz/components/TableOfContents.tsx | 2 +-
quartz/components/ContentMeta.tsx | 4 ++--
quartz/components/Search.tsx | 6 +++---
14 files changed, 29 insertions(+), 31 deletions(-)
diff --git a/quartz/components/ArticleTitle.tsx b/quartz/components/ArticleTitle.tsx
index b8d58c6..a52b2a4 100644
--- a/quartz/components/ArticleTitle.tsx
+++ b/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
}
diff --git a/quartz/components/Backlinks.tsx b/quartz/components/Backlinks.tsx
index e88966b..c4172ce 100644
--- a/quartz/components/Backlinks.tsx
+++ b/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 ? (
diff --git a/quartz/components/Breadcrumbs.tsx b/quartz/components/Breadcrumbs.tsx
index f928a4c..fb2f0c6 100644
--- a/quartz/components/Breadcrumbs.tsx
+++ b/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>
diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx
index 3e1b701..21dc13f 100644
--- a/quartz/components/ContentMeta.tsx
+++ b/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
}
diff --git a/quartz/components/Darkmode.tsx b/quartz/components/Darkmode.tsx
index afbf2bd..a668c5b 100644
--- a/quartz/components/Darkmode.tsx
+++ b/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
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index 79d8781..95eac43 100644
--- a/quartz/components/Explorer.tsx
+++ b/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"
diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
index f33617e..54440cf 100644
--- a/quartz/components/Footer.tsx
+++ b/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}
diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx
index 1b8071b..0c2647f 100644
--- a/quartz/components/Graph.tsx
+++ b/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>
diff --git a/quartz/components/PageTitle.tsx b/quartz/components/PageTitle.tsx
index c327547..81d80d1 100644
--- a/quartz/components/PageTitle.tsx
+++ b/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>
)
diff --git a/quartz/components/RecentNotes.tsx b/quartz/components/RecentNotes.tsx
index cb14b33..63f040d 100644
--- a/quartz/components/RecentNotes.tsx
+++ b/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) => {
diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx
index bd9aa69..9c1852d 100644
--- a/quartz/components/Search.tsx
+++ b/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>
diff --git a/quartz/components/Spacer.tsx b/quartz/components/Spacer.tsx
index b9d5bb6..8359111 100644
--- a/quartz/components/Spacer.tsx
+++ b/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
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index 4604565..3847726 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/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
diff --git a/quartz/components/TagList.tsx b/quartz/components/TagList.tsx
index 36c8418..c763b14 100644
--- a/quartz/components/TagList.tsx
+++ b/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)}`
--
Gitblit v1.10.0