mirror of
https://gitlab.com/MisterBiggs/brain-quartz.git
synced 2026-06-04 05:20:35 +00:00
feat: implement wiki-linked categories with graph and backlinks integration
Add complete category system that integrates with Obsidian's wiki-linked category frontmatter. Categories appear as pills on pages and link directly to category notes (not aggregation pages). Features: - Parse [[Page Name]] syntax from category frontmatter - Display category pills styled like tags - Link directly to category notes - Integrate with graph view connections - Enable bidirectional backlinks - Preserve case in category slugs Implementation: - Added extractWikiLinks() to frontmatter transformer - Created CategoryList component for pill rendering - Modified links transformer to include categories in links array - Updated contentIndex to export category metadata - Added i18n strings for category UI elements - Set includeEmptyFiles: true to show empty category pages in graph Files modified: - quartz/plugins/transformers/frontmatter.ts - quartz/plugins/transformers/links.ts - quartz/plugins/emitters/contentIndex.tsx - quartz/components/CategoryList.tsx (new) - quartz/components/pages/CategoryContent.tsx (new) - quartz/plugins/emitters/categoryPage.tsx (new) - quartz/i18n/locales/en-US.ts - quartz/i18n/locales/definition.ts - quartz/components/index.ts - quartz.layout.ts - quartz.config.ts - README.md (updated with Quartz updater documentation) Security: Comprehensive privacy review confirms NO information leaks from private folder. All ignore patterns working correctly. Docs: Added CUSTOMIZATIONS.md with complete feature documentation, implementation details, and privacy audit results. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,133 @@
|
||||
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 CategoryContentOptions {
|
||||
sort?: SortFn
|
||||
numPages: number
|
||||
}
|
||||
|
||||
const defaultOptions: CategoryContentOptions = {
|
||||
numPages: 10,
|
||||
}
|
||||
|
||||
export default ((opts?: Partial<CategoryContentOptions>) => {
|
||||
const options: CategoryContentOptions = { ...defaultOptions, ...opts }
|
||||
|
||||
const CategoryContent: QuartzComponent = (props: QuartzComponentProps) => {
|
||||
const { tree, fileData, allFiles, cfg } = props
|
||||
const slug = fileData.slug
|
||||
|
||||
if (!(slug?.startsWith("categories/") || slug === "categories")) {
|
||||
throw new Error(`Component "CategoryContent" tried to render a non-category page: ${slug}`)
|
||||
}
|
||||
|
||||
const category = simplifySlug(slug.slice("categories/".length) as FullSlug)
|
||||
const allPagesWithCategory = (category: string) =>
|
||||
allFiles.filter((file) =>
|
||||
(file.frontmatter?.categories ?? []).flatMap(getAllSegmentPrefixes).includes(category),
|
||||
)
|
||||
|
||||
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 (category === "/") {
|
||||
const categories = [
|
||||
...new Set(
|
||||
allFiles.flatMap((data) => data.frontmatter?.categories ?? []).flatMap(getAllSegmentPrefixes),
|
||||
),
|
||||
].sort((a, b) => a.localeCompare(b))
|
||||
const categoryItemMap: Map<string, QuartzPluginData[]> = new Map()
|
||||
for (const category of categories) {
|
||||
categoryItemMap.set(category, allPagesWithCategory(category))
|
||||
}
|
||||
return (
|
||||
<div class="popover-hint">
|
||||
<article class={classes}>
|
||||
<p>{content}</p>
|
||||
</article>
|
||||
<p>{i18n(cfg.locale).pages.categoryContent.totalCategories({ count: categories.length })}</p>
|
||||
<div>
|
||||
{categories.map((category) => {
|
||||
const pages = categoryItemMap.get(category)!
|
||||
const listProps = {
|
||||
...props,
|
||||
allFiles: pages,
|
||||
}
|
||||
|
||||
const contentPage = allFiles.filter((file) => file.slug === `categories/${category}`).at(0)
|
||||
|
||||
const root = contentPage?.htmlAst
|
||||
const content =
|
||||
!root || root?.children.length === 0
|
||||
? contentPage?.description
|
||||
: htmlToJsx(contentPage.filePath!, root)
|
||||
|
||||
const categoryListingPage = `/categories/${category}` as FullSlug
|
||||
const href = resolveRelative(fileData.slug!, categoryListingPage)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>
|
||||
<a class="internal category-link" href={href}>
|
||||
{category}
|
||||
</a>
|
||||
</h2>
|
||||
{content && <p>{content}</p>}
|
||||
<div class="page-listing">
|
||||
<p>
|
||||
{i18n(cfg.locale).pages.categoryContent.itemsUnderCategory({ count: pages.length })}
|
||||
{pages.length > options.numPages && (
|
||||
<>
|
||||
{" "}
|
||||
<span>
|
||||
{i18n(cfg.locale).pages.categoryContent.showingFirst({
|
||||
count: options.numPages,
|
||||
})}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
<PageList limit={options.numPages} {...listProps} sort={options?.sort} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
const pages = allPagesWithCategory(category)
|
||||
const listProps = {
|
||||
...props,
|
||||
allFiles: pages,
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="popover-hint">
|
||||
<article class={classes}>{content}</article>
|
||||
<div class="page-listing">
|
||||
<p>{i18n(cfg.locale).pages.categoryContent.itemsUnderCategory({ count: pages.length })}</p>
|
||||
<div>
|
||||
<PageList {...listProps} sort={options?.sort} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
CategoryContent.css = concatenateResources(style, PageList.css)
|
||||
return CategoryContent
|
||||
}) satisfies QuartzComponentConstructor
|
||||
Reference in New Issue
Block a user