Skip to content
Astro Digital Garden

Icons for external links

Installation

  1. Install dependencies

    Terminal window
    pnpm add rehype-external-links

  2. Configure Astro

    astro.config.mjs
    import rehypeExternalLinks from "rehype-external-links";
    

    export default defineConfig({
      integrations: [
        starlight({
          customCss: ["./src/styles/custom.css"],
        }),
      ],
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              content: { type: "text", value: " ↗" }, // ⤴
              contentProperties: { "aria-hidden": true, class: "no-select" },
            },
          ],
        ],
      },
    });

  3. Add CSS

    src/styles/custom.css
    .no-select {
      user-select: none;
    }

Based on: Astro recipes ↗

Example

example.md
https://example.com

https://example.com ↗

Installation

  1. Install dependencies

    Terminal window
    pnpm add rehype-external-links

  2. Configure Astro

    astro.config.mjs
    import rehypeExternalLinks from "rehype-external-links";
    

    export default defineConfig({
      integrations: [
        starlight({
          customCss: ["./src/styles/custom.css"],
        }),
      ],
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              content: { type: "text", value: "" },
              contentProperties: (x) => {
                const hostname = new URL(x.properties.href).hostname;
                return {
                  class: "external-icon",
                  style: `--icon: url(https://external-content.duckduckgo.com/ip3/${hostname}.ico)`,
                };
              },
            },
          ],
        ],
      },
    });

  3. Add CSS

    src/styles/custom.css
    .external-icon {
      background-image: var(--icon);
      background-color: #fff;
      background-size: cover;
      color: transparent;
      padding-left: 1.2rem;
      border-radius: 0.2rem;
      margin-left: 0.2rem;
    }

Example

example.md
https://stereobooster.com

https://stereobooster.com

TODO