From 264694203cc0ebf45d5dc67db6148893d2e95b01 Mon Sep 17 00:00:00 2001 From: Lisandra-dev Date: Wed, 28 Feb 2024 17:22:52 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20synced=20local=20'quartz/'=20wit?= =?UTF-8?q?h=20remote=20'quartz/'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- quartz/components/PageList.tsx | 128 +++++++------- quartz/components/PageTitle.tsx | 28 +-- quartz/components/pages/FolderContent.tsx | 120 ++++++------- quartz/components/pages/TagContent.tsx | 199 +++++++++++----------- quartz/styles/custom.scss | 1 + 5 files changed, 240 insertions(+), 236 deletions(-) diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx index 62b77b17b0201..96ea55ae17466 100644 --- a/quartz/components/PageList.tsx +++ b/quartz/components/PageList.tsx @@ -1,28 +1,28 @@ -import { FullSlug, resolveRelative } from "../util/path" -import { QuartzPluginData } from "../plugins/vfile" -import { Date, getDate } from "./Date" -import { QuartzComponent, QuartzComponentProps } from "./types" -import { GlobalConfiguration } from "../cfg" +import { GlobalConfiguration } from "../cfg"; +import { QuartzPluginData } from "../plugins/vfile"; +import { FullSlug, resolveRelative } from "../util/path"; +import { Date, getDate } from "./Date"; +import { QuartzComponent, QuartzComponentProps } from "./types"; export function byDateAndAlphabetical( - cfg: GlobalConfiguration, + cfg: GlobalConfiguration, ): (f1: QuartzPluginData, f2: QuartzPluginData) => number { - return (f1, f2) => { - if (f1.dates && f2.dates) { - // sort descending - return getDate(cfg, f2)!.getTime() - getDate(cfg, f1)!.getTime() - } else if (f1.dates && !f2.dates) { - // prioritize files with dates - return -1 - } else if (!f1.dates && f2.dates) { - return 1 - } + return (f1, f2) => { + if (f1.dates && f2.dates) { + // sort descending + return getDate(cfg, f2)!.getTime() - getDate(cfg, f1)!.getTime(); + } else if (f1.dates && !f2.dates) { + // prioritize files with dates + return -1; + } else if (!f1.dates && f2.dates) { + return 1; + } - // otherwise, sort lexographically by title - const f1Title = f1.frontmatter?.title.toLowerCase() ?? "" - const f2Title = f2.frontmatter?.title.toLowerCase() ?? "" - return f1Title.localeCompare(f2Title) - } + // otherwise, sort lexographically by title + const f1Title = f1.frontmatter?.title?.toLowerCase() ?? ""; + const f2Title = f2.frontmatter?.title?.toLowerCase() ?? ""; + return f1Title.localeCompare(f2Title); + }; } type Props = { @@ -30,51 +30,51 @@ type Props = { } & QuartzComponentProps export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Props) => { - let list = allFiles.sort(byDateAndAlphabetical(cfg)) - if (limit) { - list = list.slice(0, limit) - } + let list = allFiles.sort(byDateAndAlphabetical(cfg)); + if (limit) { + list = list.slice(0, limit); + } - return ( - + ); +}; PageList.css = ` .section h3 { @@ -84,4 +84,4 @@ PageList.css = ` .section > .tags { margin: 0; } -` +`; diff --git a/quartz/components/PageTitle.tsx b/quartz/components/PageTitle.tsx index 0b62517d57730..d2655a2cd0067 100644 --- a/quartz/components/PageTitle.tsx +++ b/quartz/components/PageTitle.tsx @@ -1,22 +1,22 @@ -import { pathToRoot } from "../util/path" -import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" -import { classNames } from "../util/lang" -import { i18n } from "../i18n" +import { i18n } from "../i18n"; +import { classNames } from "../util/lang"; +import { pathToRoot } from "../util/path"; +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"; const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => { - const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title - const baseDir = pathToRoot(fileData.slug!) - return ( -

- {title} -

- ) -} + const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title; + const baseDir = pathToRoot(fileData.slug!); + return ( +

+ {title} +

+ ); +}; PageTitle.css = ` .page-title { margin: 0; } -` +`; -export default (() => PageTitle) satisfies QuartzComponentConstructor \ No newline at end of file +export default (() => PageTitle) satisfies QuartzComponentConstructor; \ No newline at end of file diff --git a/quartz/components/pages/FolderContent.tsx b/quartz/components/pages/FolderContent.tsx index 6d32e3c7fd3a5..95979d591e46b 100644 --- a/quartz/components/pages/FolderContent.tsx +++ b/quartz/components/pages/FolderContent.tsx @@ -1,71 +1,73 @@ -import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types" -import path from "path" +import { Root } from "hast"; +import path from "path"; -import style from "../styles/listPage.scss" -import { PageList } from "../PageList" -import { stripSlashes, simplifySlug } from "../../util/path" -import { Root } from "hast" -import { classNames } from "../../util/lang" -import { htmlToJsx } from "../../util/jsx" -import { i18n } from "../../i18n" +import { i18n } from "../../i18n"; +import { htmlToJsx } from "../../util/jsx"; +import { classNames } from "../../util/lang"; +import { simplifySlug,stripSlashes } from "../../util/path"; +import { PageList } from "../PageList"; +import style from "../styles/listPage.scss"; +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"; interface FolderContentOptions { - /** - * Whether to display number of folders - */ - showFolderCount: boolean + /** + * Whether to display number of folders + */ + showFolderCount: boolean } const defaultOptions: FolderContentOptions = { - showFolderCount: true, -} + showFolderCount: true, +}; export default ((opts?: Partial) => { - const options: FolderContentOptions = { ...defaultOptions, ...opts } + const options: FolderContentOptions = { ...defaultOptions, ...opts }; - const FolderContent: QuartzComponent = (props: QuartzComponentProps) => { - const { tree, fileData, allFiles, cfg } = props - const folderSlug = stripSlashes(simplifySlug(fileData.slug!)) - const allPagesInFolder = allFiles.filter((file) => { - const fileSlug = stripSlashes(simplifySlug(file.slug!)) - const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug - const folderParts = folderSlug.split(path.posix.sep) - const fileParts = fileSlug.split(path.posix.sep) - const isDirectChild = fileParts.length === folderParts.length + 1 - return prefixed && isDirectChild - }) - const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? [] - const listProps = { - ...props, - allFiles: allPagesInFolder, - } + const FolderContent: QuartzComponent = (props: QuartzComponentProps) => { + const { tree, fileData, allFiles, cfg } = props; + const folderSlug = stripSlashes(simplifySlug(fileData.slug!)); + const allPagesInFolder = allFiles.filter((file) => { + const fileSlug = stripSlashes(simplifySlug(file.slug!)); + const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug; + const folderParts = folderSlug.split(path.posix.sep); + const fileParts = fileSlug.split(path.posix.sep); + const isDirectChild = fileParts.length === folderParts.length + 1; + return prefixed && isDirectChild; + }); + const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []; + const listProps = { + ...props, + allFiles: allPagesInFolder, + }; - const content = - (tree as Root).children.length === 0 - ? fileData.description - : htmlToJsx(fileData.filePath!, tree) + const content = + (tree as Root).children.length === 0 + ? fileData.description + : htmlToJsx(fileData.filePath!, tree); - return ( -
-
-

{content}

-
-
- {options.showFolderCount && ( -

- {i18n(cfg.locale).pages.folderContent.itemsUnderFolder({ - count: allPagesInFolder.length, - })} -

- )} -
- -
-
-
- ) - } + return ( +
+
+

{content}

+
+ {(!content || content?.props?.children?.length === 0) && ( +
+ {options.showFolderCount && ( +

+ {i18n(cfg.locale).pages.folderContent.itemsUnderFolder({ + count: allPagesInFolder.length, + })} +

+ )} +
+ +
+
+ )} +
+ ); + }; - FolderContent.css = style + PageList.css - return FolderContent -}) satisfies QuartzComponentConstructor + FolderContent.css = style + PageList.css; + return FolderContent; +}) satisfies QuartzComponentConstructor; diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx index 1e3e08a47d34b..5891ee5391348 100644 --- a/quartz/components/pages/TagContent.tsx +++ b/quartz/components/pages/TagContent.tsx @@ -1,107 +1,108 @@ -import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types" -import style from "../styles/listPage.scss" -import { PageList } from "../PageList" -import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path" -import { QuartzPluginData } from "../../plugins/vfile" -import { Root } from "hast" -import { classNames } from "../../util/lang" -import { htmlToJsx } from "../../util/jsx" -import { i18n } from "../../i18n" +import { Root } from "hast"; -const numPages = 10 +import { i18n } from "../../i18n"; +import { QuartzPluginData } from "../../plugins/vfile"; +import { htmlToJsx } from "../../util/jsx"; +import { classNames } from "../../util/lang"; +import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"; +import { PageList } from "../PageList"; +import style from "../styles/listPage.scss"; +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"; + +const numPages = 10; const TagContent: QuartzComponent = (props: QuartzComponentProps) => { - const { tree, fileData, allFiles, cfg } = props - const slug = fileData.slug + 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}`) - } + 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 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) - const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? [] - if (tag === "/") { - const tags = [ - ...new Set( - allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes), - ), - ].sort((a, b) => a.localeCompare(b)) - const tagItemMap: Map = new Map() - for (const tag of tags) { - tagItemMap.set(tag, allPagesWithTag(tag)) - } - return ( -
-
-

{content}

-
-

{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}

-
- {tags.map((tag) => { - const pages = tagItemMap.get(tag)! - const listProps = { - ...props, - allFiles: pages, - } + const content = + (tree as Root).children.length === 0 + ? fileData.description + : htmlToJsx(fileData.filePath!, tree); + const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []; + if (tag === "/") { + const tags = [ + ...new Set( + allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes), + ), + ].sort((a, b) => a.localeCompare(b)); + const tagItemMap: Map = new Map(); + for (const tag of tags) { + tagItemMap.set(tag, allPagesWithTag(tag)); + } + return ( +
+
+

{content}

+
+

{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}

+
+ {tags.map((tag) => { + const pages = tagItemMap.get(tag)!; + const listProps = { + ...props, + allFiles: pages, + }; - const contentPage = allFiles.filter((file) => file.slug === `tags/${tag}`)[0] - const content = contentPage?.description - return ( -
-

- - #{tag} - -

- {content &&

{content}

} -
-

- {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })} - {pages.length > numPages && ( - <> - {" "} - - {i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })} - - - )} -

- -
-
- ) - })} -
-
- ) - } else { - const pages = allPagesWithTag(tag) - const listProps = { - ...props, - allFiles: pages, - } + const contentPage = allFiles.filter((file) => file.slug === `tags/${tag}`)[0]; + const content = contentPage?.description; + return ( +
+

+ + #{tag} + +

+ {content &&

{content}

} +
+

+ {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })} + {pages.length > numPages && ( + <> + {" "} + + {i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })} + + + )} +

+ +
+
+ ); + })} +
+
+ ); + } else { + const pages = allPagesWithTag(tag); + const listProps = { + ...props, + allFiles: pages, + }; - return ( -
-
{content}
-
-

{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}

-
- -
-
-
- ) - } -} + return ( +
+
{content}
+
+

{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}

+
+ +
+
+
+ ); + } +}; -TagContent.css = style + PageList.css -export default (() => TagContent) satisfies QuartzComponentConstructor +TagContent.css = style + PageList.css; +export default (() => TagContent) satisfies QuartzComponentConstructor; diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index eeefe93d4fcb4..af4e205e9943f 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -26,6 +26,7 @@ ol.overflow { max-width: fit-content; a { font-size: 4dvw; + vertical-align: 0.25em; } } }