From f9fee64e3a3b6f828f4eb0e6e1a86c98a03bac04 Mon Sep 17 00:00:00 2001
From: chenjing <chenjing.ddl@bytedance.com>
Date: Fri, 22 Aug 2025 15:41:23 +0800
Subject: [PATCH] feat(crewllinks): add support of showing external links'
 favicon

---
 docs/plugins/CrawlLinks.md           |  1 +
 quartz/plugins/transformers/links.ts | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/docs/plugins/CrawlLinks.md b/docs/plugins/CrawlLinks.md
index 47b7bdd77..4af2df38a 100644
--- a/docs/plugins/CrawlLinks.md
+++ b/docs/plugins/CrawlLinks.md
@@ -19,6 +19,7 @@ This plugin accepts the following configuration options:
 - `openLinksInNewTab`: If `true`, configures external links to open in a new tab. Defaults to `false`.
 - `lazyLoad`: If `true`, adds lazy loading to resource elements (`img`, `video`, etc.) to improve page load performance. Defaults to `false`.
 - `externalLinkIcon`: Adds an icon next to external links when `true` (default) to visually distinguishing them from internal links.
+- `showLinkFavicon`: If `true`, displays the favicon of external websites before each external link, making it easier to visually identify the source of the link. Defaults to `false`.
 
 > [!warning]
 > Removing this plugin is _not_ recommended and will likely break the page.
diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts
index 3e8dbdede..758cbd481 100644
--- a/quartz/plugins/transformers/links.ts
+++ b/quartz/plugins/transformers/links.ts
@@ -22,6 +22,7 @@ interface Options {
   openLinksInNewTab: boolean
   lazyLoad: boolean
   externalLinkIcon: boolean
+  showLinkFavicon: boolean
 }
 
 const defaultOptions: Options = {
@@ -30,6 +31,7 @@ const defaultOptions: Options = {
   openLinksInNewTab: false,
   lazyLoad: false,
   externalLinkIcon: true,
+  showLinkFavicon: false,
 }
 
 export const CrawlLinks: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
@@ -83,6 +85,23 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options>> = (userOpts)
                   })
                 }
 
+                if (isExternal && opts.showLinkFavicon) {
+                  const domain = new URL(node.properties.href).hostname
+                  if (domain) {
+                    node.children.unshift({
+                      type: "element",
+                      tagName: "img",
+                      properties: {
+                        src: `https://s2.googleusercontent.com/s2/favicons?domain_url==${domain}`,
+                        alt: "",
+                        style:
+                          "width: 1em; height: auto; margin-left: 4px; margin-right: 4px; vertical-align: middle;",
+                      },
+                      children: [],
+                    })
+                  }
+                }
+
                 // Check if the link has alias text
                 if (
                   node.children.length === 1 &&