From 60a3c543398aed8caf44b411a4dc10e8d1e26fcc Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 13 Sep 2023 04:29:57 +0000
Subject: [PATCH] fix: 404 page styling for nested pages (closes #458)
---
quartz/util/path.ts | 5 ++++-
quartz/plugins/emitters/tagPage.tsx | 10 ++++++++--
quartz/components/renderPage.tsx | 9 +++++----
quartz/components/Head.tsx | 8 ++++++--
quartz/plugins/emitters/folderPage.tsx | 3 ++-
quartz/plugins/emitters/404.tsx | 5 ++++-
quartz/plugins/emitters/contentPage.tsx | 4 ++--
7 files changed, 31 insertions(+), 13 deletions(-)
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 67f0c02..2bf2638 100644
--- a/quartz/components/Head.tsx
+++ b/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`
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index eb1291f..25297f2 100644
--- a/quartz/components/renderPage.tsx
+++ b/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())`
diff --git a/quartz/plugins/emitters/404.tsx b/quartz/plugins/emitters/404.tsx
index 785c873..cd079a0 100644
--- a/quartz/plugins/emitters/404.tsx
+++ b/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",
diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx
index 0e510db..4542446 100644
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/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,
diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx
index 8d62f7b..8632ece 100644
--- a/quartz/plugins/emitters/folderPage.tsx
+++ b/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,
diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx
index 54ad934..6afde2f 100644
--- a/quartz/plugins/emitters/tagPage.tsx
+++ b/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,
diff --git a/quartz/util/path.ts b/quartz/util/path.ts
index 1557c1b..1540063 100644
--- a/quartz/util/path.ts
+++ b/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[] {
--
Gitblit v1.10.0