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
This commit is contained in:
Luca Salvarani 2023-10-02 02:20:55 +02:00 committed by GitHub
parent ab5efac75f
commit c8f5dbbad3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 29 additions and 31 deletions

View file

@ -1,9 +1,9 @@
import { QuartzComponentConstructor, QuartzComponentProps } from "./types" import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
function ArticleTitle({ fileData }: QuartzComponentProps) { function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) {
const title = fileData.frontmatter?.title const title = fileData.frontmatter?.title
if (title) { if (title) {
return <h1 class="article-title">{title}</h1> return <h1 class={`article-title ${displayClass ?? ""}`}>{title}</h1>
} else { } else {
return null return null
} }

View file

@ -2,11 +2,11 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/backlinks.scss" import style from "./styles/backlinks.scss"
import { resolveRelative, simplifySlug } from "../util/path" import { resolveRelative, simplifySlug } from "../util/path"
function Backlinks({ fileData, allFiles }: QuartzComponentProps) { function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
const slug = simplifySlug(fileData.slug!) const slug = simplifySlug(fileData.slug!)
const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug)) const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
return ( return (
<div class="backlinks"> <div class={`backlinks ${displayClass ?? ""}`}>
<h3>Backlinks</h3> <h3>Backlinks</h3>
<ul class="overflow"> <ul class="overflow">
{backlinkFiles.length > 0 ? ( {backlinkFiles.length > 0 ? (

View file

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

View file

@ -3,7 +3,7 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import readingTime from "reading-time" import readingTime from "reading-time"
export default (() => { export default (() => {
function ContentMetadata({ cfg, fileData }: QuartzComponentProps) { function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
const text = fileData.text const text = fileData.text
if (text) { if (text) {
const segments: string[] = [] const segments: string[] = []
@ -14,7 +14,7 @@ export default (() => {
} }
segments.push(timeTaken) segments.push(timeTaken)
return <p class="content-meta">{segments.join(", ")}</p> return <p class={`content-meta ${displayClass ?? ""}`}>{segments.join(", ")}</p>
} else { } else {
return null return null
} }

View file

@ -3,11 +3,11 @@
// see: https://v8.dev/features/modules#defer // see: https://v8.dev/features/modules#defer
import darkmodeScript from "./scripts/darkmode.inline" import darkmodeScript from "./scripts/darkmode.inline"
import styles from "./styles/darkmode.scss" import styles from "./styles/darkmode.scss"
import { QuartzComponentConstructor } from "./types" import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
function Darkmode() { function Darkmode({ displayClass }: QuartzComponentProps) {
return ( return (
<div class="darkmode"> <div class={`darkmode ${displayClass ?? ""}`}>
<input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} /> <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
<label id="toggle-label-light" for="darkmode-toggle" tabIndex={-1}> <label id="toggle-label-light" for="darkmode-toggle" tabIndex={-1}>
<svg <svg

View file

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

View file

@ -1,4 +1,4 @@
import { QuartzComponentConstructor } from "./types" import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/footer.scss" import style from "./styles/footer.scss"
import { version } from "../../package.json" import { version } from "../../package.json"
@ -7,11 +7,11 @@ interface Options {
} }
export default ((opts?: Options) => { export default ((opts?: Options) => {
function Footer() { function Footer({ displayClass }: QuartzComponentProps) {
const year = new Date().getFullYear() const year = new Date().getFullYear()
const links = opts?.links ?? [] const links = opts?.links ?? []
return ( return (
<footer> <footer class={`${displayClass ?? ""}`}>
<hr /> <hr />
<p> <p>
Created with <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a>, © {year} Created with <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a>, © {year}

View file

@ -1,4 +1,4 @@
import { QuartzComponentConstructor } from "./types" import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
// @ts-ignore // @ts-ignore
import script from "./scripts/graph.inline" import script from "./scripts/graph.inline"
import style from "./styles/graph.scss" import style from "./styles/graph.scss"
@ -52,11 +52,11 @@ const defaultOptions: GraphOptions = {
} }
export default ((opts?: GraphOptions) => { export default ((opts?: GraphOptions) => {
function Graph() { function Graph({ displayClass }: QuartzComponentProps) {
const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph } const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph } const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
return ( return (
<div class="graph"> <div class={`graph ${displayClass ?? ""}`}>
<h3>Graph View</h3> <h3>Graph View</h3>
<div class="graph-outer"> <div class="graph-outer">
<div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div> <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>

View file

@ -1,11 +1,11 @@
import { pathToRoot } from "../util/path" import { pathToRoot } from "../util/path"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types" import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
function PageTitle({ fileData, cfg }: QuartzComponentProps) { function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) {
const title = cfg?.pageTitle ?? "Untitled Quartz" const title = cfg?.pageTitle ?? "Untitled Quartz"
const baseDir = pathToRoot(fileData.slug!) const baseDir = pathToRoot(fileData.slug!)
return ( return (
<h1 class="page-title"> <h1 class={`page-title ${displayClass ?? ""}`}>
<a href={baseDir}>{title}</a> <a href={baseDir}>{title}</a>
</h1> </h1>
) )

View file

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

View file

@ -1,12 +1,12 @@
import { QuartzComponentConstructor } from "./types" import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/search.scss" import style from "./styles/search.scss"
// @ts-ignore // @ts-ignore
import script from "./scripts/search.inline" import script from "./scripts/search.inline"
export default (() => { export default (() => {
function Search() { function Search({ displayClass }: QuartzComponentProps) {
return ( return (
<div class="search"> <div class={`search ${displayClass ?? ""}`}>
<div id="search-icon"> <div id="search-icon">
<p>Search</p> <p>Search</p>
<div></div> <div></div>

View file

@ -1,8 +1,7 @@
import { QuartzComponentConstructor, QuartzComponentProps } from "./types" import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
function Spacer({ displayClass }: QuartzComponentProps) { function Spacer({ displayClass }: QuartzComponentProps) {
const className = displayClass ? `spacer ${displayClass}` : "spacer" return <div class={`spacer ${displayClass ?? ""}`}></div>
return <div class={className}></div>
} }
export default (() => Spacer) satisfies QuartzComponentConstructor export default (() => Spacer) satisfies QuartzComponentConstructor

View file

@ -19,7 +19,7 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
} }
return ( return (
<div class={`toc ${displayClass}`}> <div class={`toc ${displayClass ?? ""}`}>
<button type="button" id="toc"> <button type="button" id="toc">
<h3>Table of Contents</h3> <h3>Table of Contents</h3>
<svg <svg

View file

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