fix: 404 page styling for nested pages (closes #458)

Jacky Zhao

2023-09-13 60a3c543398aed8caf44b411a4dc10e8d1e26fcc

fix: 404 page styling for nested pages (closes #458)

 quartz/components/Head.tsx

@@ -1,4 +1,4 @@
import { joinSegments, pathToRoot } from "../util/path"
import { FullSlug, _stripSlashes, joinSegments, pathToRoot } from "../util/path"
import { JSResourceToScriptElement } from "../util/resources"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"

@@ -7,7 +7,11 @@
    const title = fileData.frontmatter?.title ?? "Untitled"
    const description = fileData.description?.trim() ?? "No description provided"
    const { css, js } = externalResources
    const baseDir = pathToRoot(fileData.slug!)

    const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
    const path = url.pathname as FullSlug
    const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!)

    const iconPath = joinSegments(baseDir, "static/icon.png")
    const ogImagePath = `https://${cfg.baseUrl}/static/og-image.png`


 quartz/components/renderPage.tsx

@@ -3,7 +3,7 @@
import HeaderConstructor from "./Header"
import BodyConstructor from "./Body"
import { JSResourceToScriptElement, StaticResources } from "../util/resources"
import { FullSlug, joinSegments, pathToRoot } from "../util/path"
import { FullSlug, RelativeURL, joinSegments } from "../util/path"

interface RenderComponents {
  head: QuartzComponent
@@ -15,9 +15,10 @@
  footer: QuartzComponent
}

export function pageResources(slug: FullSlug, staticResources: StaticResources): StaticResources {
  const baseDir = pathToRoot(slug)

export function pageResources(
  baseDir: FullSlug | RelativeURL,
  staticResources: StaticResources,
): StaticResources {
  const contentIndexPath = joinSegments(baseDir, "static/contentIndex.json")
  const contentIndexScript = `const fetchData = fetch(\`${contentIndexPath}\`).then(data => data.json())`


 quartz/plugins/emitters/404.tsx

@@ -28,7 +28,10 @@
    async emit(ctx, _content, resources, emit): Promise<FilePath[]> {
      const cfg = ctx.cfg.configuration
      const slug = "404" as FullSlug
      const externalResources = pageResources(slug, resources)

      const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
      const path = url.pathname as FullSlug
      const externalResources = pageResources(path, resources)
      const [tree, vfile] = defaultProcessedContent({
        slug,
        text: "Not Found",

 quartz/plugins/emitters/contentPage.tsx

@@ -4,7 +4,7 @@
import BodyConstructor from "../../components/Body"
import { pageResources, renderPage } from "../../components/renderPage"
import { FullPageLayout } from "../../cfg"
import { FilePath } from "../../util/path"
import { FilePath, pathToRoot } from "../../util/path"
import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout"
import { Content } from "../../components"

@@ -31,7 +31,7 @@
      const allFiles = content.map((c) => c[1].data)
      for (const [tree, file] of content) {
        const slug = file.data.slug!
        const externalResources = pageResources(slug, resources)
        const externalResources = pageResources(pathToRoot(slug), resources)
        const componentData: QuartzComponentProps = {
          fileData: file.data,
          externalResources,

 quartz/plugins/emitters/folderPage.tsx

@@ -12,6 +12,7 @@
  SimpleSlug,
  _stripSlashes,
  joinSegments,
  pathToRoot,
  simplifySlug,
} from "../../util/path"
import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
@@ -69,7 +70,7 @@

      for (const folder of folders) {
        const slug = joinSegments(folder, "index") as FullSlug
        const externalResources = pageResources(slug, resources)
        const externalResources = pageResources(pathToRoot(slug), resources)
        const [tree, file] = folderDescriptions[folder]
        const componentData: QuartzComponentProps = {
          fileData: file.data,

 quartz/plugins/emitters/tagPage.tsx

@@ -5,7 +5,13 @@
import { pageResources, renderPage } from "../../components/renderPage"
import { ProcessedContent, defaultProcessedContent } from "../vfile"
import { FullPageLayout } from "../../cfg"
import { FilePath, FullSlug, getAllSegmentPrefixes, joinSegments } from "../../util/path"
import {
  FilePath,
  FullSlug,
  getAllSegmentPrefixes,
  joinSegments,
  pathToRoot,
} from "../../util/path"
import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
import { TagContent } from "../../components"

@@ -62,7 +68,7 @@

      for (const tag of tags) {
        const slug = joinSegments("tags", tag) as FullSlug
        const externalResources = pageResources(slug, resources)
        const externalResources = pageResources(pathToRoot(slug), resources)
        const [tree, file] = tagDescriptions[tag]
        const componentData: QuartzComponentProps = {
          fileData: file.data,

 quartz/util/path.ts

@@ -123,7 +123,10 @@
}

export function joinSegments(...args: string[]): string {
  return args.filter((segment) => segment !== "").join("/")
  return args
    .filter((segment) => segment !== "")
    .join("/")
    .replace(/\/\/+/g, "/")
}

export function getAllSegmentPrefixes(tags: string): string[] {