feat(crewllinks): add support of showing external links' favicon

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.

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 &&