From 18c3c129a5c28ae707c828ac4d0239b69db11687 Mon Sep 17 00:00:00 2001 From: Abhi Agarwal Date: Tue, 30 Apr 2024 15:56:05 -0400 Subject: [PATCH] add social embeds --- quartz.config.ts | 1 + quartz/components/ContentMeta.tsx | 4 +- quartz/components/Giscus.tsx | 8 ++-- quartz/components/GithubSource.tsx | 37 ++++++++------- quartz/components/Head.tsx | 5 +- quartz/components/styles/explorer.scss | 4 +- quartz/components/styles/githubSource.scss | 28 +++++------ quartz/plugins/transformers/index.ts | 1 + quartz/plugins/transformers/socialembeds.ts | 52 +++++++++++++++++++++ quartz/styles/base.scss | 2 +- quartz/util/resources.tsx | 11 ++++- 11 files changed, 110 insertions(+), 43 deletions(-) create mode 100644 quartz/plugins/transformers/socialembeds.ts diff --git a/quartz.config.ts b/quartz.config.ts index ed6d550..f3496a5 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -67,6 +67,7 @@ const config: QuartzConfig = { Plugin.TableOfContents(), Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }), Plugin.Description(), + Plugin.SocialEmbeds({ embeds: ["twitter"]}), ], filters: [Plugin.RemoveDrafts()], emitters: [ diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx index 3e0bd2e..99a3a6a 100644 --- a/quartz/components/ContentMeta.tsx +++ b/quartz/components/ContentMeta.tsx @@ -32,9 +32,9 @@ export default ((opts?: Partial) => { if (fileData.dates) { const createdDate = fileData.dates.created segments.push(`Published ${formatDate(createdDate, cfg.locale)}`) - const modifiedDate = fileData.dates.modified; + const modifiedDate = fileData.dates.modified if (modifiedDate) { - segments.push(`modified ${formatDate(modifiedDate, cfg.locale)}`) + segments.push(`modified ${formatDate(modifiedDate, cfg.locale)}`) } } diff --git a/quartz/components/Giscus.tsx b/quartz/components/Giscus.tsx index 4eb8cdc..ec284d6 100644 --- a/quartz/components/Giscus.tsx +++ b/quartz/components/Giscus.tsx @@ -3,7 +3,7 @@ import { QuartzComponentConstructor } from "./types" export default (() => { function Footer() { return ( - + async + > ) } return Footer -}) satisfies QuartzComponentConstructor \ No newline at end of file +}) satisfies QuartzComponentConstructor diff --git a/quartz/components/GithubSource.tsx b/quartz/components/GithubSource.tsx index 66fa51f..e336347 100644 --- a/quartz/components/GithubSource.tsx +++ b/quartz/components/GithubSource.tsx @@ -9,25 +9,26 @@ import { classNames } from "../util/lang" import { i18n } from "../i18n" const GithubSource: QuartzComponent = ({ displayClass, fileData }: QuartzComponentProps) => { -return ( -
-

Source code

- -
-) + return ( +
+

Source code

+ +
+ ) } - GithubSource.css = style export default (() => GithubSource) satisfies QuartzComponentConstructor diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx index 8f236e8..40d302d 100644 --- a/quartz/components/Head.tsx +++ b/quartz/components/Head.tsx @@ -24,7 +24,10 @@ export default (() => { - + {css.map((href) => ( diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 6ccb30e..8322825 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -62,13 +62,13 @@ button#explorer { transform 0.35s ease, opacity 0.2s ease; & li > a { - font-size: 0.90rem; + font-size: 0.9rem; color: var(--dark); opacity: 0.75; pointer-events: all; &.internal { - opacity: 1.00; + opacity: 1; background-color: inherit; } } diff --git a/quartz/components/styles/githubSource.scss b/quartz/components/styles/githubSource.scss index c88f659..6d71ed5 100644 --- a/quartz/components/styles/githubSource.scss +++ b/quartz/components/styles/githubSource.scss @@ -1,18 +1,18 @@ .github-source { - &>h3 { - font-size: 1rem; - margin: 0; - } + & > h3 { + font-size: 1rem; + margin: 0; + } - &>ul { - list-style: none; - padding: 0; - margin: 0.5rem 0; + & > ul { + list-style: none; + padding: 0; + margin: 0.5rem 0; - &>li { - &>a { - background-color: transparent; - } - } + & > li { + & > a { + background-color: transparent; + } } -} \ No newline at end of file + } +} diff --git a/quartz/plugins/transformers/index.ts b/quartz/plugins/transformers/index.ts index 7908c86..6a2122c 100644 --- a/quartz/plugins/transformers/index.ts +++ b/quartz/plugins/transformers/index.ts @@ -10,3 +10,4 @@ export { OxHugoFlavouredMarkdown } from "./oxhugofm" export { SyntaxHighlighting } from "./syntax" export { TableOfContents } from "./toc" export { HardLineBreaks } from "./linebreaks" +export { SocialEmbeds } from "./socialembeds" diff --git a/quartz/plugins/transformers/socialembeds.ts b/quartz/plugins/transformers/socialembeds.ts new file mode 100644 index 0000000..1496750 --- /dev/null +++ b/quartz/plugins/transformers/socialembeds.ts @@ -0,0 +1,52 @@ +import { Root } from "mdast" +import { QuartzTransformerPlugin } from "../types" +import { visit } from "unist-util-visit" + +interface Options { + embeds: ("twitter" | "facebook")[] +} + +export const SocialEmbeds: QuartzTransformerPlugin = (userOpts?: Options) => { + const twitterEmbed = userOpts?.embeds?.includes("twitter") ?? false + return { + name: "SocialEmbeds", + markdownPlugins() { + return [ + () => { + return (tree: Root) => { + visit(tree, "image", (node) => { + if (twitterEmbed && node?.url?.startsWith("https://twitter.com")) { + const tweetId = getTweetIdFromUrl(node.url) + if (tweetId) { + const twitterHtml = { + type: "html", + value: ``, + } + Object.assign(node, twitterHtml) + } + } + }) + } + }, + ] + }, + externalResources() { + return { + js: [ + twitterEmbed + && { + src: "https://platform.twitter.com/widgets.js", + loadTime: "beforeDOMReady", + contentType: "external", + async: true, + } + ].filter(Boolean) as any[], + } + }, + } +} + +function getTweetIdFromUrl(url: string): string | undefined { + const match = url.match(/\/status\/(\d+)/) + return match ? match[1] : undefined +} diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 04d1cba..4e245b5 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -195,7 +195,7 @@ a { } & h1 { - font-size: 2rem; + font-size: 2rem; } } diff --git a/quartz/util/resources.tsx b/quartz/util/resources.tsx index a572d89..e382a46 100644 --- a/quartz/util/resources.tsx +++ b/quartz/util/resources.tsx @@ -5,6 +5,7 @@ export type JSResource = { loadTime: "beforeDOMReady" | "afterDOMReady" moduleType?: "module" spaPreserve?: boolean + async?: boolean } & ( | { src: string @@ -19,9 +20,16 @@ export type JSResource = { export function JSResourceToScriptElement(resource: JSResource, preserve?: boolean): JSX.Element { const scriptType = resource.moduleType ?? "application/javascript" const spaPreserve = preserve ?? resource.spaPreserve + const async = resource.async ? true : null if (resource.contentType === "external") { return ( - ) }