Mastodon Icon Doesn't Render for sites other than `mastodon.social`

[macbraughton]

I've noticed that there is a function for rendering the icon for mastodon here:

deno_blog/components.tsx

Line 426 in 571a875

function IconMastodon() {

However, when I add it to the links as shown in the readme, for example:

 links: [
    { title: "Email", url: "mailto:bot@deno.com" },
    { title: "GitHub", url: "https://github.com/denobot" },
    { title: "Twitter", url: "https://twitter.com/denobot" },
    { title: "Mastodon", url: "https://somethingotherthanmastodon.social/@denobot"},
  ],

It's not going to render.

This is a problem, in general, and for me personally because mastodon is a decentralized network and isn't owned by mastodon.social, and the icon will not render for a different url. This is because of the code snippet:

    const icon = socialAppIcons.get(
    url.hostname.replace(/^www\./, ""),);

In the source here:

deno_blog/components.tsx

Line 79 in 571a875

const icon = socialAppIcons.get(

Which uses a regex to get the name of the social media site from the url to pass to the socialAppIcons function.

I can understand some possible reasons we want to use the url here, but couldn't we just use the title instead? I would issue a pull request but I wanted to understand the mainters' intention here before starting one.

[aryan02420]

@macbraughton you can use this link as a workaround:

https://mastodon.social/@aryan02420@mas.to

or you can copy IconMastodon into your main.tsx file:

 { title: "Mastodon", url: "https://somethingotherthanmastodon.social/@denobot", icon: IconMastodon },

but couldn't we just use the title instead?

I think exporting the icon would be the best solution, since title can specific to a language eg "мастодон"