Skip to content

Commit

Permalink
fix(folders): Use real folder names instead of splicing slugs
Browse files Browse the repository at this point in the history 
In breadcrumbs and folder pages (both folder page titles and page
lists) the name of the folder was derived from the slug unless
overriden, which is.. wonky.

This is much more noticeable if you change the slugify function to make
all slugs lowercase - which I did, and which may be a followup PR.

The patch was pretty straightforward though, we just use the real
folder names from the relativePath.
  • Loading branch information
@necauqua
necauqua committed Jan 2, 2025
1 parent 2e6a675 commit 08358fd
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 50 deletions.
14 changes: 6 additions & 8 deletions quartz/components/Breadcrumbs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,8 @@ const defaultOptions: BreadcrumbOptions = {
showCurrentPage: true,
}

function formatCrumb(displayName: string, baseSlug: FullSlug, currentSlug: SimpleSlug): CrumbData {
return {
displayName: displayName.replaceAll("-", " "),
path: resolveRelative(baseSlug, currentSlug),
}
function newCrumb(displayName: string, baseSlug: FullSlug, currentSlug: SimpleSlug): CrumbData {
return { displayName, path: resolveRelative(baseSlug, currentSlug) }
}

export default ((opts?: Partial<BreadcrumbOptions>) => {
Expand All @@ -65,7 +62,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
}

// Format entry for root element
const firstEntry = formatCrumb(options.rootName, fileData.slug!, "/" as SimpleSlug)
const firstEntry = newCrumb(options.rootName, fileData.slug!, "/" as SimpleSlug)
const crumbs: CrumbData[] = [firstEntry]

if (!folderIndex && options.resolveFrontmatterTitle) {
Expand All @@ -81,6 +78,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {

// Split slug into hierarchy/parts
const slugParts = fileData.slug?.split("/")
const pathParts = fileData.relativePath?.split("/")
if (slugParts) {
// is tag breadcrumb?
const isTagPath = slugParts[0] === "tags"
Expand All @@ -89,7 +87,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
let currentPath = ""

for (let i = 0; i < slugParts.length - 1; i++) {
let curPathSegment = slugParts[i]
let curPathSegment = pathParts?.[i] ?? slugParts[i]

// Try to resolve frontmatter folder title
const currentFile = folderIndex?.get(slugParts.slice(0, i + 1).join("/"))
Expand All @@ -105,7 +103,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
const includeTrailingSlash = !isTagPath || i < 1

// Format and add current crumb
const crumb = formatCrumb(
const crumb = newCrumb(
curPathSegment,
fileData.slug!,
(currentPath + (includeTrailingSlash ? "/" : "")) as SimpleSlug,
Expand Down
60 changes: 35 additions & 25 deletions quartz/components/pages/FolderContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ const defaultOptions: FolderContentOptions = {
showSubfolders: true,
}

type Subfolder = {
name: string
contents: QuartzPluginData[]
}

export default ((opts?: Partial<FolderContentOptions>) => {
const options: FolderContentOptions = { ...defaultOptions, ...opts }

Expand All @@ -31,51 +36,56 @@ export default ((opts?: Partial<FolderContentOptions>) => {
const folderSlug = stripSlashes(simplifySlug(fileData.slug!))
const folderParts = folderSlug.split(path.posix.sep)

const allPagesInFolder: QuartzPluginData[] = []
const allPagesInSubfolders: Map<FullSlug, QuartzPluginData[]> = new Map()
const shownPages: QuartzPluginData[] = []
const subfolders: Map<FullSlug, Subfolder> = new Map()

allFiles.forEach((file) => {
for (const file of allFiles) {
const fileSlug = stripSlashes(simplifySlug(file.slug!))
const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
// check only files in our folder or nested folders
if (!fileSlug.startsWith(folderSlug) || fileSlug === folderSlug) {
continue
}

const fileParts = fileSlug.split(path.posix.sep)
const isDirectChild = fileParts.length === folderParts.length + 1

if (!prefixed) {
return
// If the file is directly in the folder we just show it
if (fileParts.length === folderParts.length + 1) {
shownPages.push(file)
continue
}

if (isDirectChild) {
allPagesInFolder.push(file)
} else if (options.showSubfolders) {
if (options.showSubfolders) {
const subfolderSlug = joinSegments(
...fileParts.slice(0, folderParts.length + 1),
) as FullSlug
const pagesInFolder = allPagesInSubfolders.get(subfolderSlug) || []
allPagesInSubfolders.set(subfolderSlug, [...pagesInFolder, file])

let subfolder = subfolders.get(subfolderSlug)
if (!subfolder) {
const subfolderName = file.relativePath!.split(path.posix.sep).at(folderParts.length)!
subfolders.set(subfolderSlug, (subfolder = { name: subfolderName, contents: [] }))
}
subfolder.contents.push(file)
}
})
}

allPagesInSubfolders.forEach((files, subfolderSlug) => {
const hasIndex = allPagesInFolder.some(
(file) => subfolderSlug === stripSlashes(simplifySlug(file.slug!)),
)
for (const [slug, subfolder] of subfolders.entries()) {
const hasIndex = shownPages.some((file) => slug === stripSlashes(simplifySlug(file.slug!)))
if (!hasIndex) {
const subfolderDates = files.sort(byDateAndAlphabetical(cfg))[0].dates
const subfolderTitle = subfolderSlug.split(path.posix.sep).at(-1)!
allPagesInFolder.push({
slug: subfolderSlug,
const subfolderDates = subfolder.contents.sort(byDateAndAlphabetical(cfg))[0].dates
shownPages.push({
slug: slug,
dates: subfolderDates,
frontmatter: { title: subfolderTitle, tags: ["folder"] },
frontmatter: { title: subfolder.name, tags: ["folder"] },
})
}
})
}

const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
const classes = cssClasses.join(" ")
const listProps = {
...props,
sort: options.sort,
allFiles: allPagesInFolder,
allFiles: shownPages,
}

const content =
Expand All @@ -90,7 +100,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
{options.showFolderCount && (
<p>
{i18n(cfg.locale).pages.folderContent.itemsUnderFolder({
count: allPagesInFolder.length,
count: shownPages.length,
})}
</p>
)}
Expand Down
38 changes: 21 additions & 17 deletions quartz/plugins/emitters/folderPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,27 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FolderPageOptions>> = (user
const allFiles = content.map((c) => c[1].data)
const cfg = ctx.cfg.configuration

const folderNames: Record<SimpleSlug, string> = {}

const folders: Set<SimpleSlug> = new Set(
allFiles.flatMap((data) => {
return data.slug
? _getFolders(data.slug).filter(
(folderName) => folderName !== "." && folderName !== "tags",
)
: []
if (!data.slug || !data.relativePath) {
return []
}
let folderSlug = path.dirname(data.slug) as SimpleSlug
let folderFs = path.dirname(data.relativePath) as SimpleSlug
folderNames[folderSlug] = folderFs

const folders = [folderSlug]
while (folderSlug !== ".") {
folderSlug = path.dirname(folderSlug) as SimpleSlug
folders.push(folderSlug)

folderFs = path.dirname(folderFs) as SimpleSlug
folderNames[folderSlug] = folderFs
}

return folders.filter((f) => f !== "." && f !== "tags")
}),
)

Expand All @@ -89,8 +103,9 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FolderPageOptions>> = (user
folder,
defaultProcessedContent({
slug: joinSegments(folder, "index") as FullSlug,
relativePath: joinSegments(folderNames[folder], "index.html") as FilePath, // this is used by breadcrumbs
frontmatter: {
title: `${i18n(cfg.locale).pages.folderContent.folder}: ${folder}`,
title: `${i18n(cfg.locale).pages.folderContent.folder}: ${folderNames[folder]}`,
tags: [],
},
}),
Expand Down Expand Up @@ -132,14 +147,3 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FolderPageOptions>> = (user
},
}
}

function _getFolders(slug: FullSlug): SimpleSlug[] {
var folderName = path.dirname(slug ?? "") as SimpleSlug
const parentFolderNames = [folderName]

while (folderName !== ".") {
folderName = path.dirname(folderName ?? "") as SimpleSlug
parentFolderNames.push(folderName)
}
return parentFolderNames
}

0 comments on commit 08358fd

Please sign in to comment.