add social embeds

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: [

quartz/components/ContentMeta.tsx

@@ -32,9 +32,9 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
       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)}`)
         }
       }
 

quartz/components/Giscus.tsx

@@ -3,7 +3,7 @@ import { QuartzComponentConstructor } from "./types"
 export default (() => {
   function Footer() {
     return (
-     <script 
+      <script
         src="https://giscus.app/client.js"
         data-repo="abhiaagarwal/notes"
         data-repo-id="R_kgDOLnXmLA"
@@ -17,10 +17,10 @@ export default (() => {
         data-lang="en"
         data-loading="lazy"
         crossorigin="anonymous"
-        async>
-    </script>
+        async
+      ></script>
     )
   }
 
   return Footer
-}) satisfies QuartzComponentConstructor
+}) satisfies QuartzComponentConstructor

quartz/components/GithubSource.tsx

@@ -9,25 +9,26 @@ import { classNames } from "../util/lang"
 import { i18n } from "../i18n"
 
 const GithubSource: QuartzComponent = ({ displayClass, fileData }: QuartzComponentProps) => {
-return (
-  <div class={classNames(displayClass, "github-source")}>
-    <h3>Source code</h3>
-    <ul>
-      <li>
-        <a href={`https://github.com/abhiaagarwal/notes/blob/main/content/${fileData.slug}.md`}>
-          Source
-        </a>
-      </li>
-      <li>
-        <a href={`https://github.com/abhiaagarwal/notes/commits/main/content/${fileData.slug}.md`}>
-          History
-        </a>
-      </li>
-    </ul>
-  </div>
-)
+  return (
+    <div class={classNames(displayClass, "github-source")}>
+      <h3>Source code</h3>
+      <ul>
+        <li>
+          <a href={`https://github.com/abhiaagarwal/notes/blob/main/content/${fileData.slug}.md`}>
+            Source
+          </a>
+        </li>
+        <li>
+          <a
+            href={`https://github.com/abhiaagarwal/notes/commits/main/content/${fileData.slug}.md`}
+          >
+            History
+          </a>
+        </li>
+      </ul>
+    </div>
+  )
 }
 
-
 GithubSource.css = style
 export default (() => GithubSource) satisfies QuartzComponentConstructor

quartz/components/Head.tsx

@@ -24,7 +24,10 @@ export default (() => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
-        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤔</text></svg>" />
+        <link
+          rel="icon"
+          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤔</text></svg>"
+        />
         <meta name="description" content={description} />
         <meta name="generator" content="Quartz" />
         {css.map((href) => (

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;
       }
     }

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;
+      }
     }
-}
+  }
+}

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"

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<Options> = (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: `<blockquote class="twitter-tweet"><a href="${node.url}"></a></blockquote>`,
+                  }
+                  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
+}

quartz/styles/base.scss

@@ -195,7 +195,7 @@ a {
     }
 
     & h1 {
-        font-size: 2rem;
+      font-size: 2rem;
     }
   }
 

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 (
-      <script key={resource.src} src={resource.src} type={scriptType} spa-preserve={spaPreserve} />
+      <script
+        key={resource.src}
+        src={resource.src}
+        type={scriptType}
+        spa-preserve={spaPreserve}
+        {...(async && { async: true })}
+      />
     )
   } else {
     const content = resource.script
@@ -31,6 +39,7 @@ export function JSResourceToScriptElement(resource: JSResource, preserve?: boole
         type={scriptType}
         spa-preserve={spaPreserve}
         dangerouslySetInnerHTML={{ __html: content }}
+        {...(async && { async: true })}
       ></script>
     )
   }