From 0f1a7681743141a773d0dff1095be362480541c1 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Sun, 20 Aug 2023 12:46:37 -0700 Subject: [PATCH] css fixes, add recent notes, more robust quartz update --- quartz/bootstrap-cli.mjs | 11 +-- quartz/components/PageList.tsx | 2 +- quartz/components/RecentNotes.tsx | 81 +++++++++++++++++++++++ quartz/components/index.ts | 2 + quartz/components/pages/FolderContent.tsx | 9 +-- quartz/components/pages/TagContent.tsx | 13 ++-- quartz/components/styles/recentNotes.scss | 23 +++++++ quartz/styles/base.scss | 1 - 8 files changed, 128 insertions(+), 14 deletions(-) create mode 100644 quartz/components/RecentNotes.tsx create mode 100644 quartz/components/styles/recentNotes.scss diff --git a/quartz/bootstrap-cli.mjs b/quartz/bootstrap-cli.mjs index 2c829558..ab632869 100755 --- a/quartz/bootstrap-cli.mjs +++ b/quartz/bootstrap-cli.mjs @@ -136,7 +136,10 @@ async function popContentFolder(contentFolder) { function gitPull(origin, branch) { const flags = ["--no-rebase", "--autostash", "-s", "recursive", "-X", "ours", "--no-edit"] - spawnSync("git", ["pull", ...flags, origin, branch], { stdio: "inherit" }) + const out = spawnSync("git", ["pull", ...flags, origin, branch], { stdio: "inherit" }) + if (out.stderr) { + throw new Error(`Error while pulling updates: ${out.stderr}`) + } } yargs(hideBin(process.argv)) @@ -258,13 +261,13 @@ See the [documentation](https://quartz.jzhao.xyz) for how to get started. const contentFolder = path.join(cwd, argv.directory) console.log(chalk.bgGreen.black(`\n Quartz v${version} \n`)) console.log("Backing up your content") + execSync( + `git remote show upstream || git remote add upstream https://github.com/jackyzha0/quartz.git`, + ) await stashContentFolder(contentFolder) console.log( "Pulling updates... you may need to resolve some `git` conflicts if you've made changes to components or plugins.", ) - execSync( - `git remote show upstream || git remote add upstream https://github.com/jackyzha0/quartz.git`, - ) gitPull(UPSTREAM_NAME, QUARTZ_SOURCE_BRANCH) await popContentFolder(contentFolder) console.log("Ensuring dependencies are up to date") diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx index d7aca088..c55b5347 100644 --- a/quartz/components/PageList.tsx +++ b/quartz/components/PageList.tsx @@ -3,7 +3,7 @@ import { QuartzPluginData } from "../plugins/vfile" import { Date } from "./Date" import { QuartzComponentProps } from "./types" -function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): number { +export function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): number { if (f1.dates && f2.dates) { // sort descending by last modified return f2.dates.modified.getTime() - f1.dates.modified.getTime() diff --git a/quartz/components/RecentNotes.tsx b/quartz/components/RecentNotes.tsx new file mode 100644 index 00000000..bb7ba199 --- /dev/null +++ b/quartz/components/RecentNotes.tsx @@ -0,0 +1,81 @@ +import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { FullSlug, SimpleSlug, resolveRelative } from "../util/path" +import { QuartzPluginData } from "../plugins/vfile" +import { byDateAndAlphabetical } from "./PageList" +import style from "./styles/recentNotes.scss" +import { Date } from "./Date" + +interface Options { + title: string + limit: number + linkToMore: SimpleSlug | false + filter: (f: QuartzPluginData) => boolean + sort: (f1: QuartzPluginData, f2: QuartzPluginData) => number +} + +const defaultOptions: Options = { + title: "Recent Notes", + limit: 3, + linkToMore: false, + filter: () => true, + sort: byDateAndAlphabetical, +} + +export default ((userOpts?: Partial) => { + const opts = { ...defaultOptions, ...userOpts } + function RecentNotes(props: QuartzComponentProps) { + const { allFiles, fileData } = props + const pages = allFiles.filter(opts.filter).sort(opts.sort).slice(0, opts.limit) + const remaining = Math.max(0, pages.length - opts.limit) + return ( +
+

{opts.title}

+
    + {pages.map((page) => { + const title = page.frontmatter?.title + const tags = page.frontmatter?.tags ?? [] + + return ( +
  • +
    +
    +

    + + {title} + +

    +
    + {page.dates && ( +

    + +

    + )} + +
    +
    • + ) + })} +
+ {opts.linkToMore && remaining > 0 && ( +

+ See {remaining} more → +

+ )} +
+ ) + } + + RecentNotes.css = style + return RecentNotes +}) satisfies QuartzComponentConstructor diff --git a/quartz/components/index.ts b/quartz/components/index.ts index caaf4161..a83f078b 100644 --- a/quartz/components/index.ts +++ b/quartz/components/index.ts @@ -15,6 +15,7 @@ import Search from "./Search" import Footer from "./Footer" import DesktopOnly from "./DesktopOnly" import MobileOnly from "./MobileOnly" +import RecentNotes from "./RecentNotes" export { ArticleTitle, @@ -34,4 +35,5 @@ export { Footer, DesktopOnly, MobileOnly, + RecentNotes, } diff --git a/quartz/components/pages/FolderContent.tsx b/quartz/components/pages/FolderContent.tsx index c1083ba2..1528aeaa 100644 --- a/quartz/components/pages/FolderContent.tsx +++ b/quartz/components/pages/FolderContent.tsx @@ -25,10 +25,11 @@ function FolderContent(props: QuartzComponentProps) { allFiles: allPagesInFolder, } - const content = (tree as Root).children.length === 0 ? - fileData.description : - // @ts-ignore - toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" }) + const content = + (tree as Root).children.length === 0 + ? fileData.description + : // @ts-ignore + toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" }) return (
diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx index 654e576d..73ee465c 100644 --- a/quartz/components/pages/TagContent.tsx +++ b/quartz/components/pages/TagContent.tsx @@ -22,10 +22,11 @@ function TagContent(props: QuartzComponentProps) { (file.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes).includes(tag), ) - const content = (tree as Root).children.length === 0 ? - fileData.description : - // @ts-ignore - toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" }) + const content = + (tree as Root).children.length === 0 + ? fileData.description + : // @ts-ignore + toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" }) if (tag === "") { const tags = [...new Set(allFiles.flatMap((data) => data.frontmatter?.tags ?? []))] @@ -45,6 +46,9 @@ function TagContent(props: QuartzComponentProps) { ...props, allFiles: pages, } + + const contentPage = allFiles.filter((file) => file.slug === `tags/${tag}`)[0] + const content = contentPage?.description return (

@@ -52,6 +56,7 @@ function TagContent(props: QuartzComponentProps) { #{tag}

+ {content &&

{content}

}

{pages.length} items with this tag.{" "} {pages.length > numPages && `Showing first ${numPages}.`} diff --git a/quartz/components/styles/recentNotes.scss b/quartz/components/styles/recentNotes.scss new file mode 100644 index 00000000..05871f50 --- /dev/null +++ b/quartz/components/styles/recentNotes.scss @@ -0,0 +1,23 @@ +.recent-notes { + & > h3 { + font-size: 1rem; + } + + & > ul.recent-ul { + list-style: none; + margin-top: 1.5rem; + padding-left: 0; + + & > li { + margin: 1rem 0; + .section > .desc > h3 > a { + background-color: transparent; + } + + .section > .meta { + margin: 0 0 0.5rem 0; + opacity: 0.6; + } + } + } +} diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index fad5dc0c..16a0de3a 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -320,7 +320,6 @@ pre { border-radius: 5px; overflow-x: auto; border: 1px solid var(--lightgray); - position: relative; &:has(> code.mermaid) { border: none;