diff --git a/docs/advanced/making plugins.md b/docs/advanced/making plugins.md index 565f5bdba..d9ed9e33e 100644 --- a/docs/advanced/making plugins.md +++ b/docs/advanced/making plugins.md @@ -84,10 +84,10 @@ export const Latex: QuartzTransformerPlugin = (opts?: Options) => { externalResources() { if (engine === "katex") { return { - css: ["https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"], + css: ["https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css"], js: [ { - src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js", + src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/copy-tex.min.js", loadTime: "afterDOMReady", contentType: "external", }, diff --git a/docs/features/popover previews.md b/docs/features/popover previews.md index f88222402..066604758 100644 --- a/docs/features/popover previews.md +++ b/docs/features/popover previews.md @@ -8,6 +8,8 @@ By default, Quartz only fetches previews for pages inside your vault due to [COR When [[creating components|creating your own components]], you can include this `popover-hint` class to also include it in the popover. +Similar to Obsidian, [[quartz layout.png|images referenced using wikilinks]] can also be viewed as popups. + ## Configuration - Remove popovers: set the `enablePopovers` field in `quartz.config.ts` to be `false`. diff --git a/docs/hosting.md b/docs/hosting.md index e6340d293..eeb930849 100644 --- a/docs/hosting.md +++ b/docs/hosting.md @@ -30,7 +30,7 @@ Press "Save and deploy" and Cloudflare should have a deployed version of your si To add a custom domain, check out [Cloudflare's documentation](https://developers.cloudflare.com/pages/platform/custom-domains/). > [!warning] -> Cloudflare Pages only allows shallow `git` clones so if you rely on `git` for timestamps, it is recommended you either add dates to your frontmatter (see [[authoring content#Syntax]]) or use another hosting provider. +> Cloudflare Pages performs a shallow clone by default, so if you rely on `git` for timestamps, it is recommended that you add `git fetch --unshallow &&` to the beginning of the build command (e.g., `git fetch --unshallow && npx quartz build`). ## GitHub Pages @@ -228,3 +228,25 @@ pages: When `.gitlab-ci.yaml` is committed, GitLab will build and deploy the website as a GitLab Page. You can find the url under `Deploy > Pages` in the sidebar. By default, the page is private and only visible when logged in to a GitLab account with access to the repository but can be opened in the settings under `Deploy` -> `Pages`. + +## Self-Hosting + +Copy the `public` directory to your web server and configure it to serve the files. You can use any web server to host your site. Since Quartz generates links that do not include the `.html` extension, you need to let your web server know how to deal with it. + +### Using Nginx + +Here's an example of how to do this with Nginx: + +```nginx title="nginx.conf" +server { + listen 80; + server_name example.com; + root /path/to/quartz/public; + index index.html; + error_page 404 /404.html; + + location / { + try_files $uri $uri.html $uri/ =404; + } +} +``` diff --git a/package-lock.json b/package-lock.json index e48812495..4a8b58336 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "dependencies": { "@clack/prompts": "^0.7.0", - "@floating-ui/dom": "^1.6.1", + "@floating-ui/dom": "^1.6.3", "@napi-rs/simple-git": "0.1.16", "async-mutex": "^0.4.1", "chalk": "^5.3.0", @@ -20,7 +20,7 @@ "esbuild-sass-plugin": "^2.16.1", "flexsearch": "0.7.43", "github-slugger": "^2.0.0", - "globby": "^14.0.0", + "globby": "^14.0.1", "gray-matter": "^4.0.3", "hast-util-to-html": "^9.0.0", "hast-util-to-jsx-runtime": "^2.3.0", @@ -32,7 +32,7 @@ "mdast-util-to-hast": "^13.1.0", "mdast-util-to-string": "^4.0.0", "micromorph": "^0.4.5", - "preact": "^10.19.3", + "preact": "^10.19.5", "preact-render-to-string": "^6.3.1", "pretty-bytes": "^6.1.1", "pretty-time": "^1.1.0", @@ -73,14 +73,14 @@ "@types/d3": "^7.4.3", "@types/hast": "^3.0.4", "@types/js-yaml": "^4.0.9", - "@types/node": "^20.11.16", + "@types/node": "^20.11.19", "@types/pretty-time": "^1.1.5", "@types/source-map-support": "^0.5.10", "@types/ws": "^8.5.10", "@types/yargs": "^17.0.32", "esbuild": "^0.19.9", "prettier": "^3.2.4", - "tsx": "^4.7.0", + "tsx": "^4.7.1", "typescript": "^5.3.3" }, "engines": { @@ -486,12 +486,12 @@ } }, "node_modules/@floating-ui/dom": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz", - "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==", + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", + "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", "dependencies": { - "@floating-ui/core": "^1.6.0", - "@floating-ui/utils": "^0.2.1" + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/utils": { @@ -743,9 +743,9 @@ } }, "node_modules/@sindresorhus/merge-streams": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-1.0.0.tgz", - "integrity": "sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz", + "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==", "engines": { "node": ">=18" }, @@ -1088,9 +1088,9 @@ } }, "node_modules/@types/node": { - "version": "20.11.16", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.16.tgz", - "integrity": "sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==", + "version": "20.11.19", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.19.tgz", + "integrity": "sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -2301,11 +2301,11 @@ } }, "node_modules/globby": { - "version": "14.0.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.0.tgz", - "integrity": "sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==", + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.1.tgz", + "integrity": "sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==", "dependencies": { - "@sindresorhus/merge-streams": "^1.0.0", + "@sindresorhus/merge-streams": "^2.1.0", "fast-glob": "^3.3.2", "ignore": "^5.2.4", "path-type": "^5.0.0", @@ -4454,9 +4454,9 @@ } }, "node_modules/preact": { - "version": "10.19.3", - "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz", - "integrity": "sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==", + "version": "10.19.5", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.5.tgz", + "integrity": "sha512-OPELkDmSVbKjbFqF9tgvOowiiQ9TmsJljIzXRyNE8nGiis94pwv1siF78rQkAP1Q1738Ce6pellRg/Ns/CtHqQ==", "funding": { "type": "opencollective", "url": "https://opencollective.com/preact" @@ -5647,9 +5647,9 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/tsx": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.7.0.tgz", - "integrity": "sha512-I+t79RYPlEYlHn9a+KzwrvEwhJg35h/1zHsLC2JXvhC2mdynMv6Zxzvhv5EMV6VF5qJlLlkSnMVvdZV3PSIGcg==", + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.7.1.tgz", + "integrity": "sha512-8d6VuibXHtlN5E3zFkgY8u4DX7Y3Z27zvvPKVmLon/D4AjuKzarkUBTLDBgj9iTQ0hg5xM7c/mYiRVM+HETf0g==", "dev": true, "dependencies": { "esbuild": "~0.19.10", diff --git a/package.json b/package.json index 8832e55e2..65ec85021 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ }, "dependencies": { "@clack/prompts": "^0.7.0", - "@floating-ui/dom": "^1.6.1", + "@floating-ui/dom": "^1.6.3", "@napi-rs/simple-git": "0.1.16", "async-mutex": "^0.4.1", "chalk": "^5.3.0", @@ -50,7 +50,7 @@ "esbuild-sass-plugin": "^2.16.1", "flexsearch": "0.7.43", "github-slugger": "^2.0.0", - "globby": "^14.0.0", + "globby": "^14.0.1", "gray-matter": "^4.0.3", "hast-util-to-html": "^9.0.0", "hast-util-to-jsx-runtime": "^2.3.0", diff --git a/quartz/build.ts b/quartz/build.ts index 452a2f1ae..3d95f315f 100644 --- a/quartz/build.ts +++ b/quartz/build.ts @@ -60,7 +60,7 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) { const release = await mut.acquire() perf.addEvent("clean") - await rimraf(output) + await rimraf(path.join(output, "*"), { glob: true }) console.log(`Cleaned output directory \`${output}\` in ${perf.timeSince("clean")}`) perf.addEvent("glob") @@ -375,7 +375,7 @@ async function rebuildFromEntrypoint( // TODO: we can probably traverse the link graph to figure out what's safe to delete here // instead of just deleting everything - await rimraf(argv.output) + await rimraf(path.join(argv.output, ".*"), { glob: true }) await emitContent(ctx, filteredContent) console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`)) } catch (err) { diff --git a/quartz/components/ArticleTitle.tsx b/quartz/components/ArticleTitle.tsx index 7768de6cb..318aeb24e 100644 --- a/quartz/components/ArticleTitle.tsx +++ b/quartz/components/ArticleTitle.tsx @@ -1,7 +1,7 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import { classNames } from "../util/lang" -function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) { +const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => { const title = fileData.frontmatter?.title if (title) { return

{title}

diff --git a/quartz/components/Backlinks.tsx b/quartz/components/Backlinks.tsx index 573c1c391..aa412a2e0 100644 --- a/quartz/components/Backlinks.tsx +++ b/quartz/components/Backlinks.tsx @@ -1,10 +1,15 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import style from "./styles/backlinks.scss" import { resolveRelative, simplifySlug } from "../util/path" import { i18n } from "../i18n" import { classNames } from "../util/lang" -function Backlinks({ fileData, allFiles, displayClass, cfg }: QuartzComponentProps) { +const Backlinks: QuartzComponent = ({ + fileData, + allFiles, + displayClass, + cfg, +}: QuartzComponentProps) => { const slug = simplifySlug(fileData.slug!) const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug)) return ( diff --git a/quartz/components/Body.tsx b/quartz/components/Body.tsx index fbb857293..96b627883 100644 --- a/quartz/components/Body.tsx +++ b/quartz/components/Body.tsx @@ -1,9 +1,9 @@ // @ts-ignore import clipboardScript from "./scripts/clipboard.inline" import clipboardStyle from "./styles/clipboard.scss" -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" -function Body({ children }: QuartzComponentProps) { +const Body: QuartzComponent = ({ children }: QuartzComponentProps) => { return
{children}
} diff --git a/quartz/components/Breadcrumbs.tsx b/quartz/components/Breadcrumbs.tsx index eab8a34e2..9ccfb9a6a 100644 --- a/quartz/components/Breadcrumbs.tsx +++ b/quartz/components/Breadcrumbs.tsx @@ -1,6 +1,6 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import breadcrumbsStyle from "./styles/breadcrumbs.scss" -import { FullSlug, SimpleSlug, resolveRelative } from "../util/path" +import { FullSlug, SimpleSlug, joinSegments, resolveRelative } from "../util/path" import { QuartzPluginData } from "../plugins/vfile" import { classNames } from "../util/lang" @@ -54,7 +54,11 @@ export default ((opts?: Partial) => { // computed index of folder name to its associated file data let folderIndex: Map | undefined - function Breadcrumbs({ fileData, allFiles, displayClass }: QuartzComponentProps) { + const Breadcrumbs: QuartzComponent = ({ + fileData, + allFiles, + displayClass, + }: QuartzComponentProps) => { // Hide crumbs on root if enabled if (options.hideOnRoot && fileData.slug === "index") { return <> @@ -78,8 +82,12 @@ export default ((opts?: Partial) => { // Split slug into hierarchy/parts const slugParts = fileData.slug?.split("/") if (slugParts) { + // is tag breadcrumb? + const isTagPath = slugParts[0] === "tags" + // full path until current part let currentPath = "" + for (let i = 0; i < slugParts.length - 1; i++) { let curPathSegment = slugParts[i] @@ -93,10 +101,15 @@ export default ((opts?: Partial) => { } // Add current slug to full path - currentPath += slugParts[i] + "/" + currentPath = joinSegments(currentPath, slugParts[i]) + const includeTrailingSlash = !isTagPath || i < 1 // Format and add current crumb - const crumb = formatCrumb(curPathSegment, fileData.slug!, currentPath as SimpleSlug) + const crumb = formatCrumb( + curPathSegment, + fileData.slug!, + (currentPath + (includeTrailingSlash ? "/" : "")) as SimpleSlug, + ) crumbs.push(crumb) } @@ -121,5 +134,6 @@ export default ((opts?: Partial) => { ) } Breadcrumbs.css = breadcrumbsStyle + return Breadcrumbs }) satisfies QuartzComponentConstructor diff --git a/quartz/components/Darkmode.tsx b/quartz/components/Darkmode.tsx index 62d3c2382..8ed7c99b0 100644 --- a/quartz/components/Darkmode.tsx +++ b/quartz/components/Darkmode.tsx @@ -3,11 +3,11 @@ // see: https://v8.dev/features/modules#defer import darkmodeScript from "./scripts/darkmode.inline" import styles from "./styles/darkmode.scss" -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import { i18n } from "../i18n" import { classNames } from "../util/lang" -function Darkmode({ displayClass, cfg }: QuartzComponentProps) { +const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { return (
diff --git a/quartz/components/DesktopOnly.tsx b/quartz/components/DesktopOnly.tsx index a11f23fa8..fe2a27f14 100644 --- a/quartz/components/DesktopOnly.tsx +++ b/quartz/components/DesktopOnly.tsx @@ -3,7 +3,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro export default ((component?: QuartzComponent) => { if (component) { const Component = component - function DesktopOnly(props: QuartzComponentProps) { + const DesktopOnly: QuartzComponent = (props: QuartzComponentProps) => { return } diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index f7017342e..cffc079ef 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -1,4 +1,4 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import explorerStyle from "./styles/explorer.scss" // @ts-ignore @@ -75,7 +75,12 @@ export default ((userOpts?: Partial) => { jsonTree = JSON.stringify(folders) } - function Explorer({ cfg, allFiles, displayClass, fileData }: QuartzComponentProps) { + const Explorer: QuartzComponent = ({ + cfg, + allFiles, + displayClass, + fileData, + }: QuartzComponentProps) => { constructFileTree(allFiles) return (
diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx index 6112f62ed..1bdcfda2a 100644 --- a/quartz/components/Footer.tsx +++ b/quartz/components/Footer.tsx @@ -1,4 +1,4 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import style from "./styles/footer.scss" import { version } from "../../package.json" import { i18n } from "../i18n" @@ -8,7 +8,7 @@ interface Options { } export default ((opts?: Options) => { - function Footer({ displayClass, cfg }: QuartzComponentProps) { + const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { const year = new Date().getFullYear() const links = opts?.links ?? [] return ( diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx index f7e0fc24a..ffda56d2e 100644 --- a/quartz/components/Graph.tsx +++ b/quartz/components/Graph.tsx @@ -1,4 +1,4 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" // @ts-ignore import script from "./scripts/graph.inline" import style from "./styles/graph.scss" @@ -54,7 +54,7 @@ const defaultOptions: GraphOptions = { } export default ((opts?: GraphOptions) => { - function Graph({ displayClass, cfg }: QuartzComponentProps) { + const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph } const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph } return ( diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx index 8292acc05..3cb6bea66 100644 --- a/quartz/components/Head.tsx +++ b/quartz/components/Head.tsx @@ -1,10 +1,10 @@ import { i18n } from "../i18n" import { FullSlug, joinSegments, pathToRoot } from "../util/path" import { JSResourceToScriptElement } from "../util/resources" -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" export default (() => { - function Head({ cfg, fileData, externalResources }: QuartzComponentProps) { + const Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => { const title = fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title const description = fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description @@ -21,6 +21,12 @@ export default (() => { {title} + {cfg.theme.cdnCaching && ( + <> + + + + )} @@ -30,12 +36,6 @@ export default (() => { - {cfg.theme.cdnCaching && ( - <> - - - - )} {css.map((href) => ( ))} diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx index 5281f7296..eba17ae09 100644 --- a/quartz/components/Header.tsx +++ b/quartz/components/Header.tsx @@ -1,6 +1,6 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" -function Header({ children }: QuartzComponentProps) { +const Header: QuartzComponent = ({ children }: QuartzComponentProps) => { return children.length > 0 ?
{children}
: null } diff --git a/quartz/components/MobileOnly.tsx b/quartz/components/MobileOnly.tsx index 5a190957b..7d2108de7 100644 --- a/quartz/components/MobileOnly.tsx +++ b/quartz/components/MobileOnly.tsx @@ -3,7 +3,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro export default ((component?: QuartzComponent) => { if (component) { const Component = component - function MobileOnly(props: QuartzComponentProps) { + const MobileOnly: QuartzComponent = (props: QuartzComponentProps) => { return } diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx index 644e354c4..62b77b17b 100644 --- a/quartz/components/PageList.tsx +++ b/quartz/components/PageList.tsx @@ -1,7 +1,7 @@ import { FullSlug, resolveRelative } from "../util/path" import { QuartzPluginData } from "../plugins/vfile" import { Date, getDate } from "./Date" -import { QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentProps } from "./types" import { GlobalConfiguration } from "../cfg" export function byDateAndAlphabetical( @@ -29,7 +29,7 @@ type Props = { limit?: number } & QuartzComponentProps -export function PageList({ cfg, fileData, allFiles, limit }: Props) { +export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Props) => { let list = allFiles.sort(byDateAndAlphabetical(cfg)) if (limit) { list = list.slice(0, limit) diff --git a/quartz/components/PageTitle.tsx b/quartz/components/PageTitle.tsx index d12960264..2362f1027 100644 --- a/quartz/components/PageTitle.tsx +++ b/quartz/components/PageTitle.tsx @@ -1,9 +1,9 @@ import { pathToRoot } from "../util/path" -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import { classNames } from "../util/lang" import { i18n } from "../i18n" -function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) { +const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => { const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title const baseDir = pathToRoot(fileData.slug!) return ( diff --git a/quartz/components/RecentNotes.tsx b/quartz/components/RecentNotes.tsx index f8f6de41f..549b025d3 100644 --- a/quartz/components/RecentNotes.tsx +++ b/quartz/components/RecentNotes.tsx @@ -1,4 +1,4 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import { FullSlug, SimpleSlug, resolveRelative } from "../util/path" import { QuartzPluginData } from "../plugins/vfile" import { byDateAndAlphabetical } from "./PageList" @@ -24,7 +24,12 @@ const defaultOptions = (cfg: GlobalConfiguration): Options => ({ }) export default ((userOpts?: Partial) => { - function RecentNotes({ allFiles, fileData, displayClass, cfg }: QuartzComponentProps) { + const RecentNotes: QuartzComponent = ({ + allFiles, + fileData, + displayClass, + cfg, + }: QuartzComponentProps) => { const opts = { ...defaultOptions(cfg), ...userOpts } const pages = allFiles.filter(opts.filter).sort(opts.sort) const remaining = Math.max(0, pages.length - opts.limit) diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx index 1274ee16d..c99d35c41 100644 --- a/quartz/components/Search.tsx +++ b/quartz/components/Search.tsx @@ -1,4 +1,4 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import style from "./styles/search.scss" // @ts-ignore import script from "./scripts/search.inline" @@ -14,7 +14,7 @@ const defaultOptions: SearchOptions = { } export default ((userOpts?: Partial) => { - function Search({ displayClass, cfg }: QuartzComponentProps) { + const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { const opts = { ...defaultOptions, ...userOpts } const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder return ( diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx index 2abc74b53..77ff0eb10 100644 --- a/quartz/components/TableOfContents.tsx +++ b/quartz/components/TableOfContents.tsx @@ -1,4 +1,4 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import legacyStyle from "./styles/legacyToc.scss" import modernStyle from "./styles/toc.scss" import { classNames } from "../util/lang" @@ -15,7 +15,11 @@ const defaultOptions: Options = { layout: "modern", } -function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps) { +const TableOfContents: QuartzComponent = ({ + fileData, + displayClass, + cfg, +}: QuartzComponentProps) => { if (!fileData.toc) { return null } @@ -56,7 +60,7 @@ function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps) TableOfContents.css = modernStyle TableOfContents.afterDOMLoaded = script -function LegacyTableOfContents({ fileData, cfg }: QuartzComponentProps) { +const LegacyTableOfContents: QuartzComponent = ({ fileData, cfg }: QuartzComponentProps) => { if (!fileData.toc) { return null } diff --git a/quartz/components/TagList.tsx b/quartz/components/TagList.tsx index e5dd1a3ae..04a483b6c 100644 --- a/quartz/components/TagList.tsx +++ b/quartz/components/TagList.tsx @@ -1,8 +1,8 @@ import { pathToRoot, slugTag } from "../util/path" -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import { classNames } from "../util/lang" -function TagList({ fileData, displayClass }: QuartzComponentProps) { +const TagList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => { const tags = fileData.frontmatter?.tags const baseDir = pathToRoot(fileData.slug!) if (tags && tags.length > 0) { diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 810fbf438..e0336ccc5 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -3,10 +3,9 @@ import { QuartzComponent, QuartzComponentProps } from "./types" import HeaderConstructor from "./Header" import BodyConstructor from "./Body" import { JSResourceToScriptElement, StaticResources } from "../util/resources" -import { FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path" +import { clone, FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path" import { visit } from "unist-util-visit" import { Root, Element, ElementContent } from "hast" -import { QuartzPluginData } from "../plugins/vfile" import { GlobalConfiguration } from "../cfg" import { i18n } from "../i18n" @@ -52,18 +51,6 @@ export function pageResources( } } -let pageIndex: Map | undefined = undefined -function getOrComputeFileIndex(allFiles: QuartzPluginData[]): Map { - if (!pageIndex) { - pageIndex = new Map() - for (const file of allFiles) { - pageIndex.set(file.slug!, file) - } - } - - return pageIndex -} - export function renderPage( cfg: GlobalConfiguration, slug: FullSlug, @@ -71,14 +58,18 @@ export function renderPage( components: RenderComponents, pageResources: StaticResources, ): string { + // make a deep copy of the tree so we don't remove the transclusion references + // for the file cached in contentMap in build.ts + const root = clone(componentData.tree) as Root + // process transcludes in componentData - visit(componentData.tree as Root, "element", (node, _index, _parent) => { + visit(root, "element", (node, _index, _parent) => { if (node.tagName === "blockquote") { const classNames = (node.properties?.className ?? []) as string[] if (classNames.includes("transclude")) { const inner = node.children[0] as Element const transcludeTarget = inner.properties["data-slug"] as FullSlug - const page = getOrComputeFileIndex(componentData.allFiles).get(transcludeTarget) + const page = componentData.allFiles.find((f) => f.slug === transcludeTarget) if (!page) { return } @@ -103,7 +94,7 @@ export function renderPage( { type: "element", tagName: "a", - properties: { href: inner.properties?.href, class: ["internal"] }, + properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] }, children: [ { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal }, ], @@ -140,7 +131,7 @@ export function renderPage( { type: "element", tagName: "a", - properties: { href: inner.properties?.href, class: ["internal"] }, + properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] }, children: [ { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal }, ], @@ -170,7 +161,7 @@ export function renderPage( { type: "element", tagName: "a", - properties: { href: inner.properties?.href, class: ["internal"] }, + properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] }, children: [ { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal }, ], @@ -181,6 +172,9 @@ export function renderPage( } }) + // set componentData.tree to the edited html that has transclusions rendered + componentData.tree = root + const { head: Head, header, diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts index 0251834cb..d0346b05b 100644 --- a/quartz/components/scripts/popover.inline.ts +++ b/quartz/components/scripts/popover.inline.ts @@ -37,29 +37,47 @@ async function mouseEnterHandler( targetUrl.hash = "" targetUrl.search = "" - const contents = await fetch(`${targetUrl}`) - .then((res) => res.text()) - .catch((err) => { - console.error(err) - }) + const response = await fetch(`${targetUrl}`).catch((err) => { + console.error(err) + }) // bailout if another popover exists if (hasAlreadyBeenFetched()) { return } - if (!contents) return - const html = p.parseFromString(contents, "text/html") - normalizeRelativeURLs(html, targetUrl) - const elts = [...html.getElementsByClassName("popover-hint")] - if (elts.length === 0) return + if (!response) return + const contentType = response.headers.get("Content-Type") + const contentTypeCategory = contentType?.split("/")[0] ?? "text" const popoverElement = document.createElement("div") popoverElement.classList.add("popover") const popoverInner = document.createElement("div") popoverInner.classList.add("popover-inner") popoverElement.appendChild(popoverInner) - elts.forEach((elt) => popoverInner.appendChild(elt)) + + popoverInner.dataset.contentType = contentTypeCategory + + switch (contentTypeCategory) { + case "image": + const img = document.createElement("img") + + response.blob().then((blob) => { + img.src = URL.createObjectURL(blob) + }) + img.alt = targetUrl.pathname + + popoverInner.appendChild(img) + break + default: + const contents = await response.text() + const html = p.parseFromString(contents, "text/html") + normalizeRelativeURLs(html, targetUrl) + const elts = [...html.getElementsByClassName("popover-hint")] + if (elts.length === 0) return + + elts.forEach((elt) => popoverInner.appendChild(elt)) + } setPosition(popoverElement) link.appendChild(popoverElement) diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 34f180cf2..55ea8aa88 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -87,7 +87,7 @@ svg { color: var(--secondary); font-family: var(--headerFont); font-size: 0.95rem; - font-weight: $boldWeight; + font-weight: $semiBoldWeight; line-height: 1.5rem; display: inline-block; } @@ -112,7 +112,7 @@ svg { font-size: 0.95rem; display: inline-block; color: var(--secondary); - font-weight: $boldWeight; + font-weight: $semiBoldWeight; margin: 0; line-height: 1.5rem; pointer-events: none; diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss index e46292a21..141b89ddf 100644 --- a/quartz/components/styles/popover.scss +++ b/quartz/components/styles/popover.scss @@ -38,6 +38,17 @@ white-space: normal; } + & > .popover-inner[data-content-type="image"] { + padding: 0; + max-height: 100%; + + img { + margin: 0; + border-radius: 0; + display: block; + } + } + h1 { font-size: 1.5rem; } diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts index a422acb79..38d356280 100644 --- a/quartz/i18n/index.ts +++ b/quartz/i18n/index.ts @@ -1,6 +1,7 @@ import { Translation, CalloutTranslation } from "./locales/definition" import en from "./locales/en-US" import fr from "./locales/fr-FR" +import it from "./locales/it-IT" import ja from "./locales/ja-JP" import de from "./locales/de-DE" import nl from "./locales/nl-NL" @@ -8,13 +9,18 @@ import ro from "./locales/ro-RO" import es from "./locales/es-ES" import ar from "./locales/ar-SA" import uk from "./locales/uk-UA" +import ru from "./locales/ru-RU" +import ko from "./locales/ko-KR" +import zh from "./locales/zh-CN" export const TRANSLATIONS = { "en-US": en, "fr-FR": fr, + "it-IT": it, "ja-JP": ja, "de-DE": de, "nl-NL": nl, + "nl-BE": nl, "ro-RO": ro, "ro-MD": ro, "es-ES": es, @@ -39,6 +45,9 @@ export const TRANSLATIONS = { "ar-DZ": ar, "ar-MR": ar, "uk-UA": uk, + "ru-RU": ru, + "ko-KR": ko, + "zh-CN": zh, } as const export const defaultTranslation = "en-US" diff --git a/quartz/i18n/locales/it-IT.ts b/quartz/i18n/locales/it-IT.ts new file mode 100644 index 000000000..a0cc04283 --- /dev/null +++ b/quartz/i18n/locales/it-IT.ts @@ -0,0 +1,83 @@ +import { Translation } from "./definition" + +export default { + propertyDefaults: { + title: "Senza titolo", + description: "Nessuna descrizione", + }, + components: { + callout: { + note: "Nota", + abstract: "Astratto", + info: "Info", + todo: "Da fare", + tip: "Consiglio", + success: "Completato", + question: "Domanda", + warning: "Attenzione", + failure: "Errore", + danger: "Pericolo", + bug: "Bug", + example: "Esempio", + quote: "Citazione", + }, + backlinks: { + title: "Link entranti", + noBacklinksFound: "Nessun link entrante", + }, + themeToggle: { + lightMode: "Tema chiaro", + darkMode: "Tema scuro", + }, + explorer: { + title: "Esplora", + }, + footer: { + createdWith: "Creato con", + }, + graph: { + title: "Vista grafico", + }, + recentNotes: { + title: "Note recenti", + seeRemainingMore: ({ remaining }) => `Vedi ${remaining} altro →`, + }, + transcludes: { + transcludeOf: ({ targetSlug }) => `Transclusione di ${targetSlug}`, + linkToOriginal: "Link all'originale", + }, + search: { + title: "Cerca", + searchBarPlaceholder: "Cerca qualcosa", + }, + tableOfContents: { + title: "Tabella dei contenuti", + }, + contentMeta: { + readingTime: ({ minutes }) => `${minutes} minuti`, + }, + }, + pages: { + rss: { + recentNotes: "Note recenti", + lastFewNotes: ({ count }) => `Ultime ${count} note`, + }, + error: { + title: "Non trovato", + notFound: "Questa pagina è privata o non esiste.", + }, + folderContent: { + folder: "Cartella", + itemsUnderFolder: ({ count }) => + count === 1 ? "1 oggetto in questa cartella" : `${count} oggetti in questa cartella.`, + }, + tagContent: { + tag: "Etichetta", + tagIndex: "Indice etichette", + itemsUnderTag: ({ count }) => + count === 1 ? "1 oggetto con questa etichetta" : `${count} oggetti con questa etichetta.`, + showingFirst: ({ count }) => `Prime ${count} etichette.`, + totalTags: ({ count }) => `Trovate ${count} etichette totali.`, + }, + }, +} as const satisfies Translation diff --git a/quartz/i18n/locales/ko-KR.ts b/quartz/i18n/locales/ko-KR.ts new file mode 100644 index 000000000..ed859a90e --- /dev/null +++ b/quartz/i18n/locales/ko-KR.ts @@ -0,0 +1,81 @@ +import { Translation } from "./definition" + +export default { + propertyDefaults: { + title: "제목 없음", + description: "설명 없음", + }, + components: { + callout: { + note: "노트", + abstract: "개요", + info: "정보", + todo: "할일", + tip: "팁", + success: "성공", + question: "질문", + warning: "주의", + failure: "실패", + danger: "위험", + bug: "버그", + example: "예시", + quote: "인용", + }, + backlinks: { + title: "백링크", + noBacklinksFound: "백링크가 없습니다.", + }, + themeToggle: { + lightMode: "라이트 모드", + darkMode: "다크 모드", + }, + explorer: { + title: "탐색기", + }, + footer: { + createdWith: "Created with", + }, + graph: { + title: "그래프 뷰", + }, + recentNotes: { + title: "최근 게시글", + seeRemainingMore: ({ remaining }) => `${remaining}건 더보기 →`, + }, + transcludes: { + transcludeOf: ({ targetSlug }) => `${targetSlug}의 포함`, + linkToOriginal: "원본 링크", + }, + search: { + title: "검색", + searchBarPlaceholder: "검색어를 입력하세요", + }, + tableOfContents: { + title: "목차", + }, + contentMeta: { + readingTime: ({ minutes }) => `${minutes} min read`, + }, + }, + pages: { + rss: { + recentNotes: "최근 게시글", + lastFewNotes: ({ count }) => `최근 ${count} 건`, + }, + error: { + title: "Not Found", + notFound: "페이지가 존재하지 않거나 비공개 설정이 되어 있습니다.", + }, + folderContent: { + folder: "폴더", + itemsUnderFolder: ({ count }) => `${count}건의 페이지`, + }, + tagContent: { + tag: "태그", + tagIndex: "태그 목록", + itemsUnderTag: ({ count }) => `${count}건의 페이지`, + showingFirst: ({ count }) => `처음 ${count}개의 태그`, + totalTags: ({ count }) => `총 ${count}개의 태그를 찾았습니다.`, + }, + }, +} as const satisfies Translation diff --git a/quartz/i18n/locales/nl-NL.ts b/quartz/i18n/locales/nl-NL.ts index 3ff3e8cd9..e239be0e1 100644 --- a/quartz/i18n/locales/nl-NL.ts +++ b/quartz/i18n/locales/nl-NL.ts @@ -54,7 +54,8 @@ export default { title: "Inhoudsopgave", }, contentMeta: { - readingTime: ({ minutes }) => `${minutes} min read`, + readingTime: ({ minutes }) => + minutes === 1 ? "1 minuut leestijd" : `${minutes} minuten leestijd`, }, }, pages: { diff --git a/quartz/i18n/locales/ru-RU.ts b/quartz/i18n/locales/ru-RU.ts new file mode 100644 index 000000000..8ead3cabe --- /dev/null +++ b/quartz/i18n/locales/ru-RU.ts @@ -0,0 +1,95 @@ +import { Translation } from "./definition" + +export default { + propertyDefaults: { + title: "Без названия", + description: "Описание отсутствует", + }, + components: { + callout: { + note: "Заметка", + abstract: "Резюме", + info: "Инфо", + todo: "Сделать", + tip: "Подсказка", + success: "Успех", + question: "Вопрос", + warning: "Предупреждение", + failure: "Неудача", + danger: "Опасность", + bug: "Баг", + example: "Пример", + quote: "Цитата", + }, + backlinks: { + title: "Обратные ссылки", + noBacklinksFound: "Обратные ссылки отсутствуют", + }, + themeToggle: { + lightMode: "Светлый режим", + darkMode: "Тёмный режим", + }, + explorer: { + title: "Проводник", + }, + footer: { + createdWith: "Создано с помощью", + }, + graph: { + title: "Вид графа", + }, + recentNotes: { + title: "Недавние заметки", + seeRemainingMore: ({ remaining }) => + `Посмотреть оставш${getForm(remaining, "уюся", "иеся", "иеся")} ${remaining} →`, + }, + transcludes: { + transcludeOf: ({ targetSlug }) => `Переход из ${targetSlug}`, + linkToOriginal: "Ссылка на оригинал", + }, + search: { + title: "Поиск", + searchBarPlaceholder: "Найти что-нибудь", + }, + tableOfContents: { + title: "Оглавление", + }, + contentMeta: { + readingTime: ({ minutes }) => `время чтения ~${minutes} мин.`, + }, + }, + pages: { + rss: { + recentNotes: "Недавние заметки", + lastFewNotes: ({ count }) => + `Последн${getForm(count, "яя", "ие", "ие")} ${count} замет${getForm(count, "ка", "ки", "ок")}`, + }, + error: { + title: "Страница не найдена", + notFound: "Эта страница приватная или не существует", + }, + folderContent: { + folder: "Папка", + itemsUnderFolder: ({ count }) => + `в этой папке ${count} элемент${getForm(count, "", "а", "ов")}`, + }, + tagContent: { + tag: "Тег", + tagIndex: "Индекс тегов", + itemsUnderTag: ({ count }) => `с этим тегом ${count} элемент${getForm(count, "", "а", "ов")}`, + showingFirst: ({ count }) => + `Показыва${getForm(count, "ется", "ются", "ются")} ${count} тег${getForm(count, "", "а", "ов")}`, + totalTags: ({ count }) => `Всего ${count} тег${getForm(count, "", "а", "ов")}`, + }, + }, +} as const satisfies Translation + +function getForm(number: number, form1: string, form2: string, form5: string): string { + const remainder100 = number % 100 + const remainder10 = remainder100 % 10 + + if (remainder100 >= 10 && remainder100 <= 20) return form5 + if (remainder10 > 1 && remainder10 < 5) return form2 + if (remainder10 == 1) return form1 + return form5 +} diff --git a/quartz/i18n/locales/zh-CN.ts b/quartz/i18n/locales/zh-CN.ts new file mode 100644 index 000000000..43d011197 --- /dev/null +++ b/quartz/i18n/locales/zh-CN.ts @@ -0,0 +1,81 @@ +import { Translation } from "./definition" + +export default { + propertyDefaults: { + title: "无题", + description: "无描述", + }, + components: { + callout: { + note: "笔记", + abstract: "摘要", + info: "提示", + todo: "待办", + tip: "提示", + success: "成功", + question: "问题", + warning: "警告", + failure: "失败", + danger: "危险", + bug: "错误", + example: "示例", + quote: "引用", + }, + backlinks: { + title: "反向链接", + noBacklinksFound: "无法找到反向链接", + }, + themeToggle: { + lightMode: "亮色模式", + darkMode: "暗色模式", + }, + explorer: { + title: "探索", + }, + footer: { + createdWith: "Created with", + }, + graph: { + title: "关系图谱", + }, + recentNotes: { + title: "最近的笔记", + seeRemainingMore: ({ remaining }) => `查看更多${remaining}篇笔记 →`, + }, + transcludes: { + transcludeOf: ({ targetSlug }) => `包含${targetSlug}`, + linkToOriginal: "指向原始笔记的链接", + }, + search: { + title: "搜索", + searchBarPlaceholder: "搜索些什么", + }, + tableOfContents: { + title: "目录", + }, + contentMeta: { + readingTime: ({ minutes }) => `${minutes}分钟阅读`, + }, + }, + pages: { + rss: { + recentNotes: "最近的笔记", + lastFewNotes: ({ count }) => `最近的${count}条笔记`, + }, + error: { + title: "无法找到", + notFound: "私有笔记或笔记不存在。", + }, + folderContent: { + folder: "文件夹", + itemsUnderFolder: ({ count }) => `此文件夹下有${count}条笔记。`, + }, + tagContent: { + tag: "标签", + tagIndex: "标签索引", + itemsUnderTag: ({ count }) => `此标签下有${count}条笔记。`, + showingFirst: ({ count }) => `显示前${count}个标签。`, + totalTags: ({ count }) => `总共有${count}个标签。`, + }, + }, +} as const satisfies Translation diff --git a/quartz/plugins/emitters/aliases.ts b/quartz/plugins/emitters/aliases.ts index 377a7fe10..653e57c19 100644 --- a/quartz/plugins/emitters/aliases.ts +++ b/quartz/plugins/emitters/aliases.ts @@ -9,9 +9,30 @@ export const AliasRedirects: QuartzEmitterPlugin = () => ({ getQuartzComponents() { return [] }, - async getDependencyGraph(_ctx, _content, _resources) { - // TODO implement - return new DepGraph() + async getDependencyGraph(ctx, content, _resources) { + const graph = new DepGraph() + + const { argv } = ctx + for (const [_tree, file] of content) { + const dir = path.posix.relative(argv.directory, path.dirname(file.data.filePath!)) + const aliases = file.data.frontmatter?.aliases ?? [] + const slugs = aliases.map((alias) => path.posix.join(dir, alias) as FullSlug) + const permalink = file.data.frontmatter?.permalink + if (typeof permalink === "string") { + slugs.push(permalink as FullSlug) + } + + for (let slug of slugs) { + // fix any slugs that have trailing slash + if (slug.endsWith("/")) { + slug = joinSegments(slug, "index") as FullSlug + } + + graph.addEdge(file.data.filePath!, joinSegments(argv.output, slug + ".html") as FilePath) + } + } + + return graph }, async emit(ctx, content, _resources): Promise { const { argv } = ctx diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts index 290cb6f2a..046841689 100644 --- a/quartz/plugins/emitters/componentResources.ts +++ b/quartz/plugins/emitters/componentResources.ts @@ -120,7 +120,7 @@ function addGlobalPageResources( } else if (cfg.analytics?.provider === "umami") { componentResources.afterDOMLoaded.push(` const umamiScript = document.createElement("script") - umamiScript.src = ${cfg.analytics.host} ?? "https://analytics.umami.is/script.js" + umamiScript.src = "${cfg.analytics.host}" ?? "https://analytics.umami.is/script.js" umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}") umamiScript.async = true @@ -196,10 +196,6 @@ export const ComponentResources: QuartzEmitterPlugin = (opts?: Partial< const cfg = ctx.cfg.configuration // component specific scripts and styles const componentResources = getComponentResources(ctx) - // important that this goes *after* component scripts - // as the "nav" event gets triggered here and we should make sure - // that everyone else had the chance to register a listener for it - let googleFontsStyleSheet = "" if (fontOrigin === "local") { // let the user do it themselves in css @@ -247,12 +243,15 @@ export const ComponentResources: QuartzEmitterPlugin = (opts?: Partial< } } + // important that this goes *after* component scripts + // as the "nav" event gets triggered here and we should make sure + // that everyone else had the chance to register a listener for it addGlobalPageResources(ctx, resources, componentResources) const stylesheet = joinStyles( ctx.cfg.configuration.theme, - ...componentResources.css, googleFontsStyleSheet, + ...componentResources.css, styles, ) const [prescript, postscript] = await Promise.all([ diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx index e531b36e8..904a8a8ca 100644 --- a/quartz/plugins/emitters/contentPage.tsx +++ b/quartz/plugins/emitters/contentPage.tsx @@ -1,16 +1,56 @@ +import path from "path" +import { visit } from "unist-util-visit" +import { Root } from "hast" +import { VFile } from "vfile" import { QuartzEmitterPlugin } from "../types" import { QuartzComponentProps } from "../../components/types" import HeaderConstructor from "../../components/Header" import BodyConstructor from "../../components/Body" import { pageResources, renderPage } from "../../components/renderPage" import { FullPageLayout } from "../../cfg" -import { FilePath, joinSegments, pathToRoot } from "../../util/path" +import { Argv } from "../../util/ctx" +import { FilePath, isRelativeURL, joinSegments, pathToRoot } from "../../util/path" import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout" import { Content } from "../../components" import chalk from "chalk" import { write } from "./helpers" import DepGraph from "../../depgraph" +// get all the dependencies for the markdown file +// eg. images, scripts, stylesheets, transclusions +const parseDependencies = (argv: Argv, hast: Root, file: VFile): string[] => { + const dependencies: string[] = [] + + visit(hast, "element", (elem): void => { + let ref: string | null = null + + if ( + ["script", "img", "audio", "video", "source", "iframe"].includes(elem.tagName) && + elem?.properties?.src + ) { + ref = elem.properties.src.toString() + } else if (["a", "link"].includes(elem.tagName) && elem?.properties?.href) { + // transclusions will create a tags with relative hrefs + ref = elem.properties.href.toString() + } + + // if it is a relative url, its a local file and we need to add + // it to the dependency graph. otherwise, ignore + if (ref === null || !isRelativeURL(ref)) { + return + } + + let fp = path.join(file.data.filePath!, path.relative(argv.directory, ref)).replace(/\\/g, "/") + // markdown files have the .md extension stripped in hrefs, add it back here + if (!fp.split("/").pop()?.includes(".")) { + fp += ".md" + } + dependencies.push(fp) + }) + + return dependencies +} + export const ContentPage: QuartzEmitterPlugin> = (userOpts) => { const opts: FullPageLayout = { ...sharedPageComponents, @@ -29,13 +69,16 @@ export const ContentPage: QuartzEmitterPlugin> = (userOp return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer] }, async getDependencyGraph(ctx, content, _resources) { - // TODO handle transclusions const graph = new DepGraph() - for (const [_tree, file] of content) { + for (const [tree, file] of content) { const sourcePath = file.data.filePath! const slug = file.data.slug! graph.addEdge(sourcePath, joinSegments(ctx.argv.output, slug + ".html") as FilePath) + + parseDependencies(ctx.argv, tree as Root, file).forEach((dep) => { + graph.addEdge(dep as FilePath, sourcePath) + }) } return graph diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx index 690fa56f7..bf69d2987 100644 --- a/quartz/plugins/emitters/folderPage.tsx +++ b/quartz/plugins/emitters/folderPage.tsx @@ -38,12 +38,21 @@ export const FolderPage: QuartzEmitterPlugin> = (userOpt getQuartzComponents() { return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer] }, - async getDependencyGraph(_ctx, _content, _resources) { + async getDependencyGraph(_ctx, content, _resources) { // Example graph: - // nested/file.md --> nested/file.html - // \-------> nested/index.html - // TODO implement - return new DepGraph() + // nested/file.md --> nested/index.html + // nested/file2.md ------^ + const graph = new DepGraph() + + content.map(([_tree, vfile]) => { + const slug = vfile.data.slug + const folderName = path.dirname(slug ?? "") as SimpleSlug + if (slug && folderName !== "." && folderName !== "tags") { + graph.addEdge(vfile.data.filePath!, joinSegments(folderName, "index.html") as FilePath) + } + }) + + return graph }, async emit(ctx, content, resources): Promise { const fps: FilePath[] = [] diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx index 332c758d5..3eb6975f7 100644 --- a/quartz/plugins/emitters/tagPage.tsx +++ b/quartz/plugins/emitters/tagPage.tsx @@ -35,9 +35,26 @@ export const TagPage: QuartzEmitterPlugin> = (userOpts) getQuartzComponents() { return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer] }, - async getDependencyGraph(ctx, _content, _resources) { - // TODO implement - return new DepGraph() + async getDependencyGraph(ctx, content, _resources) { + const graph = new DepGraph() + + for (const [_tree, file] of content) { + const sourcePath = file.data.filePath! + const tags = (file.data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes) + // if the file has at least one tag, it is used in the tag index page + if (tags.length > 0) { + tags.push("index") + } + + for (const tag of tags) { + graph.addEdge( + sourcePath, + joinSegments(ctx.argv.output, "tags", tag + ".html") as FilePath, + ) + } + } + + return graph }, async emit(ctx, content, resources): Promise { const fps: FilePath[] = [] diff --git a/quartz/plugins/transformers/frontmatter.ts b/quartz/plugins/transformers/frontmatter.ts index 9371df81e..79aa5f313 100644 --- a/quartz/plugins/transformers/frontmatter.ts +++ b/quartz/plugins/transformers/frontmatter.ts @@ -8,12 +8,12 @@ import { QuartzPluginData } from "../vfile" import { i18n } from "../../i18n" export interface Options { - delims: string | string[] + delimiters: string | [string, string] language: "yaml" | "toml" } const defaultOptions: Options = { - delims: "---", + delimiters: "---", language: "yaml", } @@ -57,9 +57,9 @@ export const FrontMatter: QuartzTransformerPlugin | undefined> }, }) - if (data.title) { + if (data.title != null && data.title.toString() !== "") { data.title = data.title.toString() - } else if (data.title === null || data.title === undefined) { + } else { data.title = file.stem ?? i18n(cfg.configuration.locale).propertyDefaults.title } diff --git a/quartz/plugins/transformers/latex.ts b/quartz/plugins/transformers/latex.ts index ab10a4fbb..c9f6bff0d 100644 --- a/quartz/plugins/transformers/latex.ts +++ b/quartz/plugins/transformers/latex.ts @@ -26,12 +26,12 @@ export const Latex: QuartzTransformerPlugin = (opts?: Options) => { return { css: [ // base css - "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css", + "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css", ], js: [ { // fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md - src: "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/copy-tex.min.js", + src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js", loadTime: "afterDOMReady", contentType: "external", }, diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts index 2d43be1b2..f89d367d7 100644 --- a/quartz/plugins/transformers/links.ts +++ b/quartz/plugins/transformers/links.ts @@ -8,6 +8,7 @@ import { simplifySlug, splitAnchor, transformLink, + joinSegments, } from "../../util/path" import path from "path" import { visit } from "unist-util-visit" @@ -107,7 +108,7 @@ export const CrawlLinks: QuartzTransformerPlugin | undefined> = // url.resolve is considered legacy // WHATWG equivalent https://nodejs.dev/en/api/v18/url/#urlresolvefrom-to - const url = new URL(dest, `https://base.com/${curSlug}`) + const url = new URL(dest, "https://base.com/" + stripSlashes(curSlug, true)) const canonicalDest = url.pathname let [destCanonical, _destAnchor] = splitAnchor(canonicalDest) if (destCanonical.endsWith("/")) { diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts index e110e403f..6aad23052 100644 --- a/quartz/plugins/transformers/ofm.ts +++ b/quartz/plugins/transformers/ofm.ts @@ -619,7 +619,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin let mermaidImport = undefined document.addEventListener('nav', async () => { if (document.querySelector("code.mermaid")) { - mermaidImport ||= await import('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs') + mermaidImport ||= await import('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs') const mermaid = mermaidImport.default const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark' mermaid.initialize({ diff --git a/quartz/plugins/transformers/syntax.ts b/quartz/plugins/transformers/syntax.ts index e84772962..f11734e5f 100644 --- a/quartz/plugins/transformers/syntax.ts +++ b/quartz/plugins/transformers/syntax.ts @@ -1,20 +1,33 @@ import { QuartzTransformerPlugin } from "../types" -import rehypePrettyCode, { Options as CodeOptions } from "rehype-pretty-code" +import rehypePrettyCode, { Options as CodeOptions, Theme as CodeTheme } from "rehype-pretty-code" -export const SyntaxHighlighting: QuartzTransformerPlugin = () => ({ - name: "SyntaxHighlighting", - htmlPlugins() { - return [ - [ - rehypePrettyCode, - { - keepBackground: false, - theme: { - dark: "github-dark", - light: "github-light", - }, - } satisfies Partial, - ], - ] +interface Theme extends Record { + light: CodeTheme + dark: CodeTheme +} + +interface Options { + theme?: Theme + keepBackground?: boolean +} + +const defaultOptions: Options = { + theme: { + light: "github-light", + dark: "github-dark", }, -}) + keepBackground: false, +} + +export const SyntaxHighlighting: QuartzTransformerPlugin = ( + userOpts?: Partial, +) => { + const opts: Partial = { ...defaultOptions, ...userOpts } + + return { + name: "SyntaxHighlighting", + htmlPlugins() { + return [[rehypePrettyCode, opts]] + }, + } +} diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 9a5d14c66..2c6e69f9d 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -57,8 +57,12 @@ ul, } } +strong { + font-weight: $semiBoldWeight; +} + a { - font-weight: $boldWeight; + font-weight: $semiBoldWeight; text-decoration: none; transition: color 0.2s ease; color: var(--secondary); diff --git a/quartz/styles/callouts.scss b/quartz/styles/callouts.scss index 7fa52c506..b1fd180ce 100644 --- a/quartz/styles/callouts.scss +++ b/quartz/styles/callouts.scss @@ -157,6 +157,6 @@ } .callout-title-inner { - font-weight: $boldWeight; + font-weight: $semiBoldWeight; } } diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss index 8384b9c4e..e45cc9158 100644 --- a/quartz/styles/variables.scss +++ b/quartz/styles/variables.scss @@ -5,4 +5,5 @@ $sidePanelWidth: 380px; $topSpacing: 6rem; $fullPageWidth: $pageWidth + 2 * $sidePanelWidth; $boldWeight: 700; +$semiBoldWeight: 600; $normalWeight: 400;