重新设计外部链接样式，使用 google服务自动获取外链 icon

Author: CatCodeMe

astro.config.mjs

@@ -19,7 +19,7 @@ import AstroPureIntegration from './packages/pure/index.ts';
 // Local integrations
 // Local rehype & remark plugins
 import rehypeAutolinkHeadings from './src/plugins/rehype-auto-link-headings.ts';
-import { remarkAiNotice } from './src/plugins/remark-ai-notice.mjs';
+// import { remarkAiNotice } from './src/plugins/remark-ai-notice.mjs';
 import { remarkMermaid } from './src/plugins/remark-mermaid';
 // Shiki
 // import { addCopyButton, addLanguage, addTitle, transformerNotationDiff, transformerNotationHighlight, updateStyle } from './src/plugins/shiki-transformers.ts';
@@ -197,7 +197,7 @@ export default defineConfig({
       ],
       remarkBreaks,
       remarkMermaid,
-      remarkAiNotice
+      // remarkAiNotice
     ],
     rehypePlugins: [
       [rehypeKatex, {}],

packages/pure/index.ts

@@ -1,29 +1,32 @@
-import { spawn } from 'node:child_process'
-import { dirname, relative } from 'node:path'
-import { fileURLToPath } from 'node:url'
+import { spawn } from 'node:child_process';
+import { dirname, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
 // Astro
-import type { AstroIntegration, RehypePlugins, RemarkPlugins } from 'astro'
+import type { AstroIntegration, RehypePlugins, RemarkPlugins } from 'astro';
 // Integrations
-import mdx from '@astrojs/mdx'
-import sitemap from '@astrojs/sitemap'
-import rehypeExternalLinks from 'rehype-external-links'
-import UnoCSS from 'unocss/astro'
-import rehypeTable from './plugins/rehype-table'
+import mdx from '@astrojs/mdx';
+import sitemap from '@astrojs/sitemap';
+import UnoCSS from 'unocss/astro';
+
+
+
+import rehypeExternalLinks from './plugins/rehype-external-links';
+import rehypeTable from './plugins/rehype-table';
+import { remarkAddZoomable, remarkReadingTime } from './plugins/remark-plugins';
+import { vitePluginUserConfig } from './plugins/virtual-user-config';
+import { UserConfigSchema, type UserInputConfig } from './types/user-config';
+import { parseWithFriendlyErrors } from './utils/error-map';
 
-import { remarkAddZoomable, remarkReadingTime } from './plugins/remark-plugins'
-import { vitePluginUserConfig } from './plugins/virtual-user-config'
-import { UserConfigSchema, type UserInputConfig } from './types/user-config'
-import { parseWithFriendlyErrors } from './utils/error-map'
 
 export default function AstroPureIntegration(opts: UserInputConfig): AstroIntegration {
-  let integrations: AstroIntegration[] = []
-  let remarkPlugins: RemarkPlugins = []
-  let rehypePlugins: RehypePlugins = []
+  const integrations: AstroIntegration[] = []
+  const remarkPlugins: RemarkPlugins = []
+  const rehypePlugins: RehypePlugins = []
   return {
     name: 'astro-pure',
     hooks: {
       'astro:config:setup': async ({ config, updateConfig }) => {
-        let userConfig = parseWithFriendlyErrors(
+        const userConfig = parseWithFriendlyErrors(
           // @ts-ignore
           UserConfigSchema,
           opts,
@@ -52,18 +55,12 @@ export default function AstroPureIntegration(opts: UserInputConfig): AstroIntegr
         rehypePlugins.push([
           rehypeExternalLinks,
           {
-            content: {
-              type: 'text',
-              value: userConfig.content.externalLinks.content || ''
-            },
-            contentProperties: {
-              className: ['external-link-icon']
-            },
             properties: {
-              className: ['external-link','not-prose']
+              className: ['external-link', 'not-prose']
             },
             target: '_blank',
             rel: ['nofollow', 'noopener', 'noreferrer'],
+            customIcons: userConfig.content.externalLinks.customIcons
           }
         ])
         rehypePlugins.push(rehypeTable)
@@ -111,4 +108,4 @@ export default function AstroPureIntegration(opts: UserInputConfig): AstroIntegr
       }
     }
   }
-}
+}

packages/pure/plugins/rehype-external-links.ts

@@ -1,71 +1,95 @@
 // https://github.com/rehypejs/rehype-external-links
-
-import type { Element, ElementContent, Root } from 'hast'
+import type { Element, Root } from 'hast'
 import { visit } from 'unist-util-visit'
 
+import { Icons } from '../libs/icons'
 import isAbsoluteUrl from '../utils/is-absolute-url'
 
 export interface ExternalLinkOptions {
-  content?: ElementContent | ElementContent[]
-  contentProperties?: Record<string, unknown>
   protocols?: string[]
+  rel?: string | string[]
+  target?: string
+  properties?: Record<string, unknown>
+  customIcons?: Record<string, string> // hostname -> icon key
 }
 
-const defaultProtocols = ['http', 'https']
+const defaultProtocols = ['http', 'https'];
 
-/**
- * Automatically add `rel` (and `target`?) to external links.
- *
- * ###### Notes
- *
- * You should [likely not configure `target`][css-tricks].
- *
- * You should at least set `rel` to `['nofollow']`.
- * When using a `target`, add `noopener` and `noreferrer` to avoid exploitation
- * of the `window.opener` API.
- *
- * When using a `target`, you should set `content` to adhere to accessibility
- * guidelines by giving users advanced warning when opening a new window.
- *
- * [css-tricks]: https://css-tricks.com/use-target_blank/
- *
- * @param {Readonly<Options> | null | undefined} [options]
- *   Configuration (optional).
- * @returns
- *   Transform.
- */
 export default function rehypeExternalLinks(options: ExternalLinkOptions = {}) {
-  const { content, contentProperties = {}, protocols = defaultProtocols } = options
+  const {
+    protocols = defaultProtocols,
+    rel = ['nofollow', 'noopener', 'noreferrer'],
+    target = '_blank',
+    properties = {},
+    customIcons = {}
+  } = options
 
   return function transformer(tree: Root): void {
     visit(tree, 'element', (node: Element) => {
       if (node.tagName === 'a' && typeof node.properties?.href === 'string') {
         const href = node.properties.href
-        const protocol = href.startsWith('//')
-          ? 'http' // treat protocol-relative as http
-          : href.slice(0, href.indexOf(':'))
+        const protocolRelative = href.startsWith('//')
+        const protocol = protocolRelative ? 'http' : href.slice(0, href.indexOf(':'))
 
-        if (href.startsWith('//') || (isAbsoluteUrl(href) && protocols.includes(protocol))) {
+        if (protocolRelative || (isAbsoluteUrl(href) && protocols.includes(protocol))) {
           node.properties = {
             ...node.properties,
-            rel: 'nofollow noopener noreferrer',
-            target: '_blank'
+            ...properties,
+            rel,
+            target
           }
 
-          if (content) {
-            const spanNode: Element = {
-              type: 'element',
-              tagName: 'span',
-              properties: {
-                ...(contentProperties as Record<
-                  string,
-                  string | number | boolean | (string | number)[] | null | undefined
-                >)
-              },
-              children: Array.isArray(content) ? content : [content]
+          const url = protocolRelative ? `http:${href}` : href
+          try {
+            const hostname = new URL(url).hostname
+
+            let iconNode: Element | undefined
+            let svgString: string | undefined
+
+            const customIconKey = customIcons?.[hostname]
+            if (customIconKey) {
+              svgString = Icons[customIconKey as keyof typeof Icons]
             }
 
-            node.children.push(spanNode)
+            if (svgString) {
+              // If the icon is an SVG fragment (e.g. <g>), wrap it in an <svg> tag.
+              if (!svgString.trim().startsWith('<svg')) {
+                svgString = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">${svgString}</svg>`
+              }
+
+              const dataUri = `data:image/svg+xml;base64,${Buffer.from(svgString).toString('base64')}`
+              iconNode = {
+                type: 'element',
+                tagName: 'img',
+                properties: {
+                  src: dataUri,
+                  className: ['external-link-icon'],
+                  alt: '', // Decorative
+                  width: 16,
+                  height: 16
+                },
+                children: []
+              }
+            } else {
+              iconNode = {
+                type: 'element',
+                tagName: 'img',
+                properties: {
+                  src: `https://www.google.com/s2/favicons?domain=${hostname}&size=16`,
+                  className: ['external-link-icon'],
+                  alt: '', // Decorative
+                  width: 16,
+                  height: 16
+                },
+                children: []
+              }
+            }
+
+            if (iconNode) {
+              node.children.unshift(iconNode)
+            }
+          } catch (e) {
+            // Ignore invalid URLs
           }
         }
       }

packages/pure/types/theme-config.ts

@@ -173,7 +173,12 @@ export const ThemeConfigSchema = () =>
         properties: z
           .record(z.string())
           .optional()
-          .describe('Properties for the external links element')
+          .describe('Properties for the external links element'),
+        /** Custom icons for external links */
+        customIcons: z
+          .record(z.string())
+          .optional()
+          .describe('Custom icons for external links. Key is hostname, value is SVG string.')
       }),
 
       /** Blog page size for pagination */

src/assets/styles/external-link.css

@@ -15,23 +15,7 @@
   border-bottom-width: 1px;
 }
 
-/* 不再需要 after 图标 */
-/* .external-link::after {
-  display: none !important;
-} */
-
-/* 特定网站的图标样式保持不变 */
-/* .external-link[href*="github.com"]::after {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z'/%3E%3C/svg%3E");
-}
-
-.external-link[href*="twitter.com"]::after,
-.external-link[href*="x.com"]::after {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
-} */
-
 .external-link-icon {
-  display: none;
-}
+  display: inline-block;
+  vertical-align: text-bottom;
+}

src/assets/styles/inner-link.css

@@ -2,15 +2,15 @@
         text-decoration: none;
         position: relative;
         padding-right: 1.2em;
-        border-bottom: 1px dashed rgba(120, 120, 120, 0.4); /* 虚线，淡灰色 */
+        border-bottom: 1px dashed rgba(120, 120, 120, 0.4);
         transition:
           border-bottom-color 0.3s cubic-bezier(0.4,0,0.2,1),
           border-bottom-width 0.3s cubic-bezier(0.4,0,0.2,1);
 }
 
 
 .inner-link:hover {
-        border-bottom-color: rgba(120, 120, 120, 1); /* hover更明显 */
+        border-bottom-color: rgba(120, 120, 120, 1); 
         border-bottom-width: 1px;
 }
 
@@ -32,4 +32,4 @@
         -webkit-mask-size: 100% 100%;
         mask-size: 100% 100%;
         opacity: 0.6;
-}
+} */

src/site.config.ts

@@ -1,9 +1,17 @@
 import type { Config, IntegrationUserConfig, ThemeUserConfig } from 'packages/pure/types';
+
+
+
 import type { CardListData } from 'astro-pure/types';
+
+
+
+
+
 export const theme: ThemeUserConfig = {
   // === Basic configuration ===
   /** Title for your website. Will be used in metadata and as browser tab title. */
-  title: 'CCM\'blog',
+  title: "CCM'blog",
   /** Will be used in index page & copyright declaration */
   author: 'CCM',
   /** Description metadata for your website. Can be used in page metadata. */
@@ -54,7 +62,7 @@ export const theme: ThemeUserConfig = {
       { title: 'Cats', link: '/cats' },
       // { title: 'Links', link: '/links' },
       { title: 'About', link: '/about' },
-      { title: 'GusetBook', link: '/guestbook' },
+      { title: 'GusetBook', link: '/guestbook' }
     ]
   },
 
@@ -82,6 +90,9 @@ export const theme: ThemeUserConfig = {
   content: {
     externalLinks: {
       content: '',
+      customIcons: {
+        'github.com': 'pin'
+      }
     },
     /** Blog page size for pagination (optional) */
     blogPageSize: 8,