mirror of
https://github.com/jackyzha0/quartz.git
synced 2026-03-21 21:45:42 -05:00
refactor: remove migrated page body components
Delete Content, FolderContent, TagContent page components now provided by community PageType plugins. Update components barrel export.
This commit is contained in:
saberzero1
parent
ce19b13808
commit
5c6dc75934
@ -1,6 +1,3 @@
|
|||||||
import Content from "./pages/Content"
|
|
||||||
import TagContent from "./pages/TagContent"
|
|
||||||
import FolderContent from "./pages/FolderContent"
|
|
||||||
import NotFound from "./pages/404"
|
import NotFound from "./pages/404"
|
||||||
import Head from "./Head"
|
import Head from "./Head"
|
||||||
import Spacer from "./Spacer"
|
import Spacer from "./Spacer"
|
||||||
@ -14,15 +11,4 @@ export { External } from "./external"
|
|||||||
export type { ComponentManifest, RegisteredComponent } from "./registry"
|
export type { ComponentManifest, RegisteredComponent } from "./registry"
|
||||||
export type { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
export type { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||||
|
|
||||||
export {
|
export { Head, Spacer, DesktopOnly, MobileOnly, NotFound, Flex, ConditionalRender }
|
||||||
Content,
|
|
||||||
TagContent,
|
|
||||||
FolderContent,
|
|
||||||
Head,
|
|
||||||
Spacer,
|
|
||||||
DesktopOnly,
|
|
||||||
MobileOnly,
|
|
||||||
NotFound,
|
|
||||||
Flex,
|
|
||||||
ConditionalRender,
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,12 +0,0 @@
|
|||||||
import { ComponentChildren } from "preact"
|
|
||||||
import { htmlToJsx } from "../../util/jsx"
|
|
||||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
|
|
||||||
|
|
||||||
const Content: QuartzComponent = ({ fileData, tree }: QuartzComponentProps) => {
|
|
||||||
const content = htmlToJsx(fileData.filePath!, tree) as ComponentChildren
|
|
||||||
const classes: string[] = fileData.frontmatter?.cssclasses ?? []
|
|
||||||
const classString = ["popover-hint", ...classes].join(" ")
|
|
||||||
return <article class={classString}>{content}</article>
|
|
||||||
}
|
|
||||||
|
|
||||||
export default (() => Content) satisfies QuartzComponentConstructor
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
|
|
||||||
|
|
||||||
import style from "../styles/listPage.scss"
|
|
||||||
import { PageList, SortFn } from "../PageList"
|
|
||||||
import { Root } from "hast"
|
|
||||||
import { htmlToJsx } from "../../util/jsx"
|
|
||||||
import { i18n } from "../../i18n"
|
|
||||||
import { QuartzPluginData } from "../../plugins/vfile"
|
|
||||||
import { ComponentChildren } from "preact"
|
|
||||||
import { concatenateResources } from "../../util/resources"
|
|
||||||
import { trieFromAllFiles } from "../../util/ctx"
|
|
||||||
|
|
||||||
interface FolderContentOptions {
|
|
||||||
/**
|
|
||||||
* Whether to display number of folders
|
|
||||||
*/
|
|
||||||
showFolderCount: boolean
|
|
||||||
showSubfolders: boolean
|
|
||||||
sort?: SortFn
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultOptions: FolderContentOptions = {
|
|
||||||
showFolderCount: true,
|
|
||||||
showSubfolders: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ((opts?: Partial<FolderContentOptions>) => {
|
|
||||||
const options: FolderContentOptions = { ...defaultOptions, ...opts }
|
|
||||||
|
|
||||||
const FolderContent: QuartzComponent = (props: QuartzComponentProps) => {
|
|
||||||
const { tree, fileData, allFiles, cfg } = props
|
|
||||||
|
|
||||||
const trie = (props.ctx.trie ??= trieFromAllFiles(allFiles))
|
|
||||||
const folder = trie.findNode(fileData.slug!.split("/"))
|
|
||||||
if (!folder) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const allPagesInFolder: QuartzPluginData[] =
|
|
||||||
folder.children
|
|
||||||
.map((node) => {
|
|
||||||
// regular file, proceed
|
|
||||||
if (node.data) {
|
|
||||||
return node.data
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node.isFolder && options.showSubfolders) {
|
|
||||||
// folders that dont have data need synthetic files
|
|
||||||
const getMostRecentDates = (): QuartzPluginData["dates"] => {
|
|
||||||
let maybeDates: QuartzPluginData["dates"] | undefined = undefined
|
|
||||||
for (const child of node.children) {
|
|
||||||
if (child.data?.dates) {
|
|
||||||
// compare all dates and assign to maybeDates if its more recent or its not set
|
|
||||||
if (!maybeDates) {
|
|
||||||
maybeDates = { ...child.data.dates }
|
|
||||||
} else {
|
|
||||||
if (child.data.dates.created > maybeDates.created) {
|
|
||||||
maybeDates.created = child.data.dates.created
|
|
||||||
}
|
|
||||||
|
|
||||||
if (child.data.dates.modified > maybeDates.modified) {
|
|
||||||
maybeDates.modified = child.data.dates.modified
|
|
||||||
}
|
|
||||||
|
|
||||||
if (child.data.dates.published > maybeDates.published) {
|
|
||||||
maybeDates.published = child.data.dates.published
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
maybeDates ?? {
|
|
||||||
created: new Date(),
|
|
||||||
modified: new Date(),
|
|
||||||
published: new Date(),
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
slug: node.slug,
|
|
||||||
dates: getMostRecentDates(),
|
|
||||||
frontmatter: {
|
|
||||||
title: node.displayName,
|
|
||||||
tags: [],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.filter((page) => page !== undefined) ?? []
|
|
||||||
const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
|
|
||||||
const classes = cssClasses.join(" ")
|
|
||||||
const listProps = {
|
|
||||||
...props,
|
|
||||||
sort: options.sort,
|
|
||||||
allFiles: allPagesInFolder,
|
|
||||||
}
|
|
||||||
|
|
||||||
const content = (
|
|
||||||
(tree as Root).children.length === 0
|
|
||||||
? fileData.description
|
|
||||||
: htmlToJsx(fileData.filePath!, tree)
|
|
||||||
) as ComponentChildren
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="popover-hint">
|
|
||||||
<article class={classes}>{content}</article>
|
|
||||||
<div class="page-listing">
|
|
||||||
{options.showFolderCount && (
|
|
||||||
<p>
|
|
||||||
{i18n(cfg.locale).pages.folderContent.itemsUnderFolder({
|
|
||||||
count: allPagesInFolder.length,
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<div>
|
|
||||||
<PageList {...listProps} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
FolderContent.css = concatenateResources(style, PageList.css)
|
|
||||||
return FolderContent
|
|
||||||
}) satisfies QuartzComponentConstructor
|
|
||||||
@ -1,133 +0,0 @@
|
|||||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
|
|
||||||
import style from "../styles/listPage.scss"
|
|
||||||
import { PageList, SortFn } from "../PageList"
|
|
||||||
import { FullSlug, getAllSegmentPrefixes, resolveRelative, simplifySlug } from "../../util/path"
|
|
||||||
import { QuartzPluginData } from "../../plugins/vfile"
|
|
||||||
import { Root } from "hast"
|
|
||||||
import { htmlToJsx } from "../../util/jsx"
|
|
||||||
import { i18n } from "../../i18n"
|
|
||||||
import { ComponentChildren } from "preact"
|
|
||||||
import { concatenateResources } from "../../util/resources"
|
|
||||||
|
|
||||||
interface TagContentOptions {
|
|
||||||
sort?: SortFn
|
|
||||||
numPages: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultOptions: TagContentOptions = {
|
|
||||||
numPages: 10,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ((opts?: Partial<TagContentOptions>) => {
|
|
||||||
const options: TagContentOptions = { ...defaultOptions, ...opts }
|
|
||||||
|
|
||||||
const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
|
|
||||||
const { tree, fileData, allFiles, cfg } = props
|
|
||||||
const slug = fileData.slug
|
|
||||||
|
|
||||||
if (!(slug?.startsWith("tags/") || slug === "tags")) {
|
|
||||||
throw new Error(`Component "TagContent" tried to render a non-tag page: ${slug}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
const tag = simplifySlug(slug.slice("tags/".length) as FullSlug)
|
|
||||||
const allPagesWithTag = (tag: string) =>
|
|
||||||
allFiles.filter((file) =>
|
|
||||||
(file.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes).includes(tag),
|
|
||||||
)
|
|
||||||
|
|
||||||
const content = (
|
|
||||||
(tree as Root).children.length === 0
|
|
||||||
? fileData.description
|
|
||||||
: htmlToJsx(fileData.filePath!, tree)
|
|
||||||
) as ComponentChildren
|
|
||||||
const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
|
|
||||||
const classes = cssClasses.join(" ")
|
|
||||||
if (tag === "/") {
|
|
||||||
const tags = [
|
|
||||||
...new Set(
|
|
||||||
allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
|
|
||||||
),
|
|
||||||
].sort((a, b) => a.localeCompare(b))
|
|
||||||
const tagItemMap: Map<string, QuartzPluginData[]> = new Map()
|
|
||||||
for (const tag of tags) {
|
|
||||||
tagItemMap.set(tag, allPagesWithTag(tag))
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div class="popover-hint">
|
|
||||||
<article class={classes}>
|
|
||||||
<p>{content}</p>
|
|
||||||
</article>
|
|
||||||
<p>{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}</p>
|
|
||||||
<div>
|
|
||||||
{tags.map((tag) => {
|
|
||||||
const pages = tagItemMap.get(tag)!
|
|
||||||
const listProps = {
|
|
||||||
...props,
|
|
||||||
allFiles: pages,
|
|
||||||
}
|
|
||||||
|
|
||||||
const contentPage = allFiles.filter((file) => file.slug === `tags/${tag}`).at(0)
|
|
||||||
|
|
||||||
const root = contentPage?.htmlAst
|
|
||||||
const content =
|
|
||||||
!root || root?.children.length === 0
|
|
||||||
? contentPage?.description
|
|
||||||
: htmlToJsx(contentPage.filePath!, root)
|
|
||||||
|
|
||||||
const tagListingPage = `/tags/${tag}` as FullSlug
|
|
||||||
const href = resolveRelative(fileData.slug!, tagListingPage)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>
|
|
||||||
<a class="internal tag-link" href={href}>
|
|
||||||
{tag}
|
|
||||||
</a>
|
|
||||||
</h2>
|
|
||||||
{content && <p>{content}</p>}
|
|
||||||
<div class="page-listing">
|
|
||||||
<p>
|
|
||||||
{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
|
|
||||||
{pages.length > options.numPages && (
|
|
||||||
<>
|
|
||||||
{" "}
|
|
||||||
<span>
|
|
||||||
{i18n(cfg.locale).pages.tagContent.showingFirst({
|
|
||||||
count: options.numPages,
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<PageList limit={options.numPages} {...listProps} sort={options?.sort} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
const pages = allPagesWithTag(tag)
|
|
||||||
const listProps = {
|
|
||||||
...props,
|
|
||||||
allFiles: pages,
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="popover-hint">
|
|
||||||
<article class={classes}>{content}</article>
|
|
||||||
<div class="page-listing">
|
|
||||||
<p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
|
|
||||||
<div>
|
|
||||||
<PageList {...listProps} sort={options?.sort} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TagContent.css = concatenateResources(style, PageList.css)
|
|
||||||
return TagContent
|
|
||||||
}) satisfies QuartzComponentConstructor
|
|
||||||
Loading…
Reference in New Issue
Block a user