Files
blog-eleventy-indiekit/_includes/components/social-icon.njk
Ricardo e7aaf73fba feat: consistent AP logo, Mastodon syndication detection
- Replace network-diagram SVG with official ActivityPub logo in post footer
- Replace person-plus SVG with AP logo in fediverse follow widget
- Replace Mastodon icon with AP logo in share widget, use #a730b8 purple
- AP icon brand color: #f1027e → #a730b8 in social-icon macro
- Detect Mastodon syndication URLs (/@username pattern) for proper logo pill

Confab-Link: http://localhost:8080/sessions/c5b1471e-b046-44d9-b94f-ab5e68fae7cc
2026-03-06 10:42:39 +01:00

132 lines
29 KiB
Plaintext

{#
Social Icon Macro
Usage: {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %}
{{ socialIcon("github", "w-5 h-5") }}
<span class="{{ socialIconColorClass('github') }}">{{ socialIcon("github", "w-5 h-5") }}</span>
SVG paths sourced from Simple Icons (simpleicons.org) - CC0 1.0 Universal
All icons render at 24x24 viewBox with fill="currentColor"
Brand colors from official brand guidelines
#}
{# Returns Tailwind color classes for an icon's brand color (light + dark) #}
{% macro socialIconColorClass(name) %}
{%- if name == "activitypub" -%}text-[#a730b8]
{%- elif name == "github" -%}text-[#181717] dark:text-[#e6edf3]
{%- elif name == "gitlab" -%}text-[#FC6D26]
{%- elif name == "forgejo" -%}text-[#609926]
{%- elif name == "codeberg" -%}text-[#2185D0]
{%- elif name == "mastodon" -%}text-[#6364FF]
{%- elif name == "bluesky" -%}text-[#0085FF]
{%- elif name == "pixelfed" -%}text-[#6C42C9]
{%- elif name == "linkedin" -%}text-[#0A66C2]
{%- elif name == "twitter" -%}text-[#000000] dark:text-[#e7e9ea]
{%- elif name == "threads" -%}text-[#000000] dark:text-[#f5f5f5]
{%- elif name == "youtube" -%}text-[#FF0000]
{%- elif name == "twitch" -%}text-[#9146FF]
{%- elif name == "spotify" -%}text-[#1DB954]
{%- elif name == "bandcamp" -%}text-[#629aa9]
{%- elif name == "soundcloud" -%}text-[#FF5500]
{%- elif name == "rss" -%}text-[#F26522]
{%- elif name == "discord" -%}text-[#5865F2]
{%- elif name == "signal" -%}text-[#3A76F0]
{%- elif name == "telegram" -%}text-[#26A5E4]
{%- elif name == "matrix" -%}text-[#000000] dark:text-[#e6e6e6]
{%- elif name == "reddit" -%}text-[#FF4500]
{%- elif name == "hackernews" -%}text-[#FF6600]
{%- elif name == "funkwhale" -%}text-[#0D47A1]
{%- elif name == "lastfm" -%}text-[#D51007]
{%- elif name == "peertube" -%}text-[#F1680D]
{%- elif name == "bookwyrm" -%}text-[#002200] dark:text-[#78b578]
{%- elif name == "indieweb" -%}text-[#FF5C00]
{%- elif name == "email" -%}text-surface-600 dark:text-surface-400
{%- elif name == "website" -%}text-surface-600 dark:text-surface-400
{%- elif name == "keybase" -%}text-[#33A0FF]
{%- elif name == "orcid" -%}text-[#A6CE39]
{%- elif name == "flickr" -%}text-[#0063DC]
{%- elif name == "xmpp" -%}text-[#002B5C] dark:text-[#5badff]
{%- elif name == "sourcehut" -%}text-[#000000] dark:text-[#e0e0e0]
{%- elif name == "facebook" -%}text-[#0866FF]
{%- elif name == "instagram" -%}text-[#E4405F]
{%- else -%}text-surface-600 dark:text-surface-400
{%- endif -%}
{% endmacro %}
{% macro socialIcon(name, cssClass) %}
{%- if name == "github" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
{%- elif name == "gitlab" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="m23.6 9.593-.033-.086L20.3.98a.851.851 0 0 0-.336-.382.859.859 0 0 0-.996.06.858.858 0 0 0-.285.398l-2.212 6.777H7.53L5.317 1.056a.857.857 0 0 0-.285-.398.86.86 0 0 0-.997-.06.854.854 0 0 0-.335.382L.433 9.502l-.032.09a6.062 6.062 0 0 0 2.012 7.003l.01.008.028.02 4.984 3.73 2.466 1.866 1.502 1.135a1.012 1.012 0 0 0 1.22 0l1.503-1.135 2.465-1.866 5.012-3.75.013-.01a6.065 6.065 0 0 0 2.005-6.998z"></path></svg>
{%- elif name == "forgejo" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.1205 0-2.093-.6354-2.5764-1.5652H12.58c-1.7857 0-3.2323 1.4466-3.2323 3.2324v2.3813a6.1532 6.1532 0 0 1 3.2323-.9143h1.6209c.4834-.9298 1.456-1.5652 2.5764-1.5652 1.6018 0 2.9004 1.2986 2.9004 2.9004 0 1.6019-1.2986 2.9005-2.9004 2.9005-1.1205 0-2.093-.6354-2.5764-1.5653H12.58a3.2331 3.2331 0 0 0-3.2323 3.2324v.4648a2.9004 2.9004 0 1 1-1.7704 0v-7.499a3.222 3.222 0 0 0-.4747-1.6674A2.8932 2.8932 0 0 1 4.3223 2.9005C4.3223 1.2986 5.621 0 7.2228 0c1.6019 0 2.9004 1.2986 2.9004 2.9005 0 1.1303-.6474 2.1101-1.5908 2.588a3.232 3.232 0 0 0 1.0156.2771V5.801h2.0323c.4834-.9298 1.456-1.5652 2.5764-1.5652h1.6209C16.2597.6354 17.2323 0 18.3528 0zM7.2228 1.1302a1.7703 1.7703 0 1 0 0 3.5406 1.7703 1.7703 0 0 0 0-3.5406zm9.5545 0a1.7703 1.7703 0 1 0 0 3.5406 1.7703 1.7703 0 0 0 0-3.5406zm0 6.2389a1.7703 1.7703 0 1 0 0 3.5406 1.7703 1.7703 0 0 0 0-3.5406zM8.1079 19.329a1.7703 1.7703 0 1 0-1.7703 1.7703A1.7703 1.7703 0 0 0 8.108 19.329z"></path></svg>
{%- elif name == "codeberg" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.187 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"></path></svg>
{%- elif name == "sourcehut" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm0 2.4c5.304 0 9.6 4.296 9.6 9.6s-4.296 9.6-9.6 9.6S2.4 17.304 2.4 12 6.696 2.4 12 2.4zm0 1.872A7.728 7.728 0 0 0 4.272 12 7.728 7.728 0 0 0 12 19.728 7.728 7.728 0 0 0 19.728 12 7.728 7.728 0 0 0 12 4.272z"></path></svg>
{%- elif name == "linkedin" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
{%- elif name == "bluesky" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"></path></svg>
{%- elif name == "mastodon" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12v6.406z"></path></svg>
{%- elif name == "activitypub" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.09 4.43L24 10.73v2.51L13.09 19.58v-2.51L21.83 12 13.09 6.98v-2.55zM13.09 9.49L17.44 12l-4.35 2.51V9.49z"/><path d="M10.91 4.43L0 10.73v2.51l8.74-5.03v10.09l2.18 1.28V4.43zM6.56 12L2.18 14.51l4.35 2.51V12z"/></svg>
{%- elif name == "pixelfed" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 14.842c-.46 2.838-3.074 4.742-5.912 4.282a5.15 5.15 0 0 1-1.297-.416v1.55a.615.615 0 0 1-.615.615H7.363a.615.615 0 0 1-.615-.615V8.435a.615.615 0 0 1 .615-.615h2.707a.615.615 0 0 1 .615.615v.34a5.15 5.15 0 0 1 1.297-.416c2.838-.46 5.452 1.444 5.912 4.282a5.152 5.152 0 0 1 0 2.201zm-4.037-.474a2.36 2.36 0 1 0-.742-4.662 2.36 2.36 0 0 0 .742 4.662z"></path></svg>
{%- elif name == "twitter" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg>
{%- elif name == "facebook" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 1.09.044 1.613.115V7.98c-.164-.018-.46-.027-.824-.027-1.171 0-1.623.443-1.623 1.596v2.495h2.332l-.4 3.667h-1.932v7.98z"></path></svg>
{%- elif name == "instagram" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.668 1.0745-1.3364 1.3803-2.1272.2954-.7642.4957-1.6362.552-2.9141.0564-1.2776.0689-1.6882.0626-4.9473-.0062-3.2586-.02-3.6672-.0826-4.9473-.0607-1.2767-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1208 16.9244.0645 15.6471.0083 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.56-.2177-.96-.4774-1.3802-.8952-.4178-.4178-.6774-.8186-.8953-1.378-.1625-.4234-.3567-1.0587-.408-2.2282-.0553-1.2654-.0678-1.6455-.0694-4.851-.0015-3.2053.0104-3.5854.0626-4.852.051-1.17.2453-1.8053.408-2.2287.218-.5606.4774-.9599.8952-1.3802.4178-.4178.8186-.6774 1.378-.8952.4235-.1625 1.0588-.3567 2.2282-.408 1.2654-.0554 1.6456-.068 4.8513-.0694 3.2053-.0016 3.5854.0104 4.8519.0626 1.1696.051 1.8053.2452 2.2282.408.5609.218.96.4774 1.3807.8952.4178.4179.6774.8186.8952 1.3782.163.4234.357 1.0587.408 2.2282.0554 1.2654.0679 1.6456.0695 4.852.0015 3.2053-.0104 3.5854-.0626 4.852-.0512 1.17-.2454 1.8053-.4081 2.2288-.2177.5605-.4773.96-.8952 1.3802-.4178.4178-.8185.6774-1.3781.8952-.4235.1625-1.0588.3566-2.2283.408-1.2654.0553-1.6455.068-4.8512.0694-3.2057.0015-3.5858-.0104-4.852-.0627"></path></svg>
{%- elif name == "threads" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.59 12c.025 3.083.718 5.496 2.057 7.164 1.432 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.96-.065-1.187.408-2.264 1.332-3.03.793-.657 1.858-1.054 3.166-1.18.938-.09 1.864-.035 2.773.162-.034-.75-.173-1.355-.414-1.814-.34-.645-.93-1.007-1.753-1.075-.683-.057-1.324.073-1.758.357a1.75 1.75 0 0 0-.612.594l-1.826-1.03c.397-.66 1.002-1.195 1.752-1.547.95-.446 2.09-.636 3.168-.527 1.422.149 2.534.72 3.305 1.699.637.81.988 1.86 1.053 3.13.365.194.706.414 1.02.66 1.183.93 2.04 2.2 2.48 3.686.627 2.128.445 4.582-1.265 6.278-1.845 1.83-4.175 2.59-7.33 2.61z"></path></svg>
{%- elif name == "youtube" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg>
{%- elif name == "twitch" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"></path></svg>
{%- elif name == "flickr" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M0 12c0-3.314 2.686-6 6-6s6 2.686 6 6-2.686 6-6 6-6-2.686-6-6zm12 0c0-3.314 2.686-6 6-6s6 2.686 6 6-2.686 6-6 6-6-2.686-6-6z"></path></svg>
{%- elif name == "spotify" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"></path></svg>
{%- elif name == "bandcamp" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M0 18.75l7.437-13.5H24l-7.438 13.5z"></path></svg>
{%- elif name == "soundcloud" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c-.009-.06-.05-.1-.1-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.172 1.308c.013.06.045.094.104.094.057 0 .09-.037.104-.093l.2-1.31-.2-1.327c-.015-.06-.047-.096-.104-.096m1.79-1.29c-.065 0-.109.048-.116.109l-.222 2.6.222 2.507c.007.065.051.107.116.107s.109-.042.116-.107l.253-2.507-.253-2.6c-.007-.065-.051-.109-.116-.109m.9-.435c-.073 0-.121.05-.129.119l-.21 3.034.21 2.768c.008.073.056.12.13.12.072 0 .12-.047.128-.12l.237-2.768-.237-3.034c-.008-.073-.056-.12-.128-.12m.903-.19c-.082 0-.133.056-.14.134l-.2 3.225.2 2.882c.008.081.06.136.14.136.077 0 .131-.055.139-.136l.228-2.882-.228-3.225c-.008-.082-.062-.134-.14-.134m.895-.155c-.09 0-.145.063-.15.15l-.193 3.38.193 2.962c.006.09.06.152.15.152.09 0 .147-.063.152-.152l.217-2.962-.217-3.38c-.005-.09-.062-.15-.152-.15m.905-.13c-.098 0-.155.068-.16.163l-.183 3.51.183 3.015c.005.098.062.163.16.163.096 0 .156-.065.16-.163l.207-3.015-.207-3.51c-.004-.098-.064-.163-.16-.163m.902-.104c-.105 0-.167.073-.171.176l-.172 3.614.172 3.049c.004.105.066.176.17.176.107 0 .169-.071.175-.176l.194-3.049-.194-3.614c-.006-.105-.068-.176-.175-.176m.912-.062c-.112 0-.176.08-.181.19l-.163 3.677.163 3.065c.005.112.07.189.18.189.112 0 .177-.077.184-.189l.183-3.065-.183-3.677c-.007-.112-.072-.19-.184-.19m.907-.042c-.12 0-.186.087-.191.203l-.153 3.719.153 3.073c.005.12.071.203.19.203.12 0 .189-.083.194-.203l.175-3.073-.174-3.719c-.006-.12-.074-.203-.194-.203m5.068 1.145c-.598 0-1.157.164-1.638.449-.263-2.96-2.782-5.27-5.834-5.27-.59 0-1.163.097-1.697.269-.211.068-.267.137-.267.27v10.379c0 .14.098.252.232.268h9.204c1.645 0 2.977-1.328 2.977-2.97.002-1.643-1.33-2.97-2.977-2.97"></path></svg>
{%- elif name == "rss" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"></path></svg>
{%- elif name == "matrix" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.488.32.45.214.773.553.96 1.016.293-.382.673-.717 1.14-1.006.468-.288.986-.432 1.548-.432.425 0 .819.07 1.182.21.365.14.675.363.93.662.256.3.456.67.6 1.11.144.445.216.98.216 1.61v6.33h-2.07v-5.45c0-.392-.015-.745-.048-1.054a2.078 2.078 0 0 0-.225-.76 1.096 1.096 0 0 0-.486-.46c-.212-.1-.49-.155-.836-.155-.346 0-.628.07-.848.21-.22.143-.39.328-.513.555a2.252 2.252 0 0 0-.268.735 5.013 5.013 0 0 0-.072.85v5.53h-2.07v-5.27c0-.384-.008-.742-.027-1.073a2.354 2.354 0 0 0-.182-.787c-.105-.238-.268-.418-.486-.548-.22-.128-.508-.195-.868-.195-.138 0-.318.04-.54.12a1.663 1.663 0 0 0-.58.375 2.04 2.04 0 0 0-.46.66c-.12.27-.18.607-.18 1.013v5.705h-2.07V7.81zm16.045 15.64V.55H22.05V0H24v24h-2.28v-.55z"></path></svg>
{%- elif name == "discord" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg>
{%- elif name == "signal" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12c0 2.917 1.04 5.59 2.77 7.67l-.93 3.41 3.52-.93A11.95 11.95 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm5.95 16.77c-.247.694-1.424 1.282-1.985 1.342-.506.054-1.14.076-1.84-.115a16.86 16.86 0 0 1-1.666-.615c-2.932-1.265-4.847-4.222-4.994-4.418-.147-.196-1.2-1.596-1.2-3.044 0-1.449.759-2.161 1.028-2.457.269-.296.586-.37.782-.37s.391.004.562.01c.18.008.423-.069.661.504.247.593.838 2.05.912 2.198.073.148.122.32.024.517-.098.196-.147.32-.294.492-.147.172-.31.385-.443.516-.147.148-.3.308-.13.604.173.296.767 1.266 1.648 2.05 1.131.408 1.987.752 2.273.836.286.084.453.05.619-.03.167-.08.712-.412.812-.812s.2-.742.133-.812c-.068-.07-.25-.137-.524-.275s-1.622-.8-1.874-.892c-.252-.09-.436-.136-.619.137-.184.272-.712.892-.872 1.074-.16.182-.321.204-.595.068-.274-.136-1.157-.426-2.204-1.36-.814-.726-1.364-1.623-1.524-1.896-.16-.272-.017-.42.12-.555.123-.121.274-.316.412-.474.137-.159.183-.272.274-.454.091-.181.046-.34-.023-.476-.068-.136-.619-1.492-.849-2.042-.224-.537-.45-.464-.619-.473-.16-.007-.343-.01-.526-.01z"></path></svg>
{%- elif name == "telegram" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"></path></svg>
{%- elif name == "xmpp" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.753 3.094c.006 1.258.106 3.48.906 5.988.467 1.462 1.237 2.944 2.059 4.281C5.591 15.05 4.237 16.972 3.481 18.9c-.8 2.039-1.058 3.726-1.097 5.006.5-.12.985-.274 1.46-.447.05-1.08.326-2.486.964-4.06.544-1.342 1.45-2.79 2.434-4.152.452.594.916 1.166 1.39 1.674 1.397 1.503 2.862 2.58 4.368 3.32 1.506-.74 2.971-1.817 4.368-3.32.474-.508.938-1.08 1.39-1.674.984 1.362 1.89 2.81 2.434 4.152.638 1.574.914 2.98.964 4.06.475.173.96.326 1.46.448-.039-1.28-.298-2.968-1.097-5.007-.756-1.928-2.11-3.85-3.237-5.537.822-1.337 1.592-2.82 2.059-4.28.8-2.509.9-4.731.906-5.989a17.2 17.2 0 0 0-1.494.518c-.017 1.254-.203 3.09-.84 5.088-.395 1.24-1.07 2.539-1.79 3.759a26 26 0 0 0-1.39-1.75C14.39 9.494 13.095 8.2 12 7.47c-1.095.73-2.39 2.024-3.52 3.542-.468.626-.934 1.282-1.39 1.75-.72-1.22-1.395-2.52-1.79-3.759-.637-1.999-.823-3.834-.84-5.088A17.2 17.2 0 0 0 2.966 3.4c.265-.1.527-.207.787-.306z"></path></svg>
{%- elif name == "reddit" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm5.99 13.915c-.03.412-.18.804-.44 1.122A4.612 4.612 0 0 1 12 18.2a4.612 4.612 0 0 1-5.55-3.163c-.26-.318-.41-.71-.44-1.122a1.834 1.834 0 0 1 1.39-1.863 1.834 1.834 0 0 1 1.803.406 6.07 6.07 0 0 1 2.797-.69 6.07 6.07 0 0 1 2.797.69 1.834 1.834 0 0 1 3.193 1.457zm-8.617 1.29a1.318 1.318 0 1 0 0-2.636 1.318 1.318 0 0 0 0 2.636zm4.053 1.546a3.39 3.39 0 0 1-2.426.773 3.39 3.39 0 0 1-2.426-.773.4.4 0 1 1 .506-.62 2.59 2.59 0 0 0 1.92.592 2.59 2.59 0 0 0 1.92-.592.4.4 0 0 1 .506.62zm.564-1.546a1.318 1.318 0 1 0 0-2.636 1.318 1.318 0 0 0 0 2.636zM16.9 7.833a1.364 1.364 0 1 1 0-2.728 1.364 1.364 0 0 1 0 2.728zm-2.247-.94L12.7 5.2a.658.658 0 0 0-.767-.11l-2.459 1.23a.658.658 0 0 0 .585 1.178l2.092-1.046 1.564 1.377a.658.658 0 0 0 .938-.936Z"></path></svg>
{%- elif name == "hackernews" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M0 24V0h24v24H0zM6.951 5.896l4.112 7.708v5.064h1.583v-4.972l4.148-7.799h-1.749l-2.457 4.875c-.372.745-.688 1.434-.688 1.434s-.297-.708-.651-1.434L8.831 5.896z"></path></svg>
{%- elif name == "keybase" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.446 21.371c0 .528-.428.957-.957.957s-.957-.43-.957-.957.428-.957.957-.957.957.43.957.957zm5.922-.957a.958.958 0 0 0-.957.957c0 .528.429.957.957.957s.957-.43.957-.957a.958.958 0 0 0-.957-.957zm-5.922-4.471c-.528 0-.957.43-.957.957s.428.957.957.957.957-.43.957-.957-.428-.957-.957-.957zm5.922 0a.958.958 0 0 0-.957.957c0 .528.429.957.957.957s.957-.43.957-.957a.958.958 0 0 0-.957-.957zm4.79-10.835a3.467 3.467 0 0 0-.64-.047c-1.222 0-2.283.62-2.896 1.583a.958.958 0 0 1-1.643-.683V3.093A3.093 3.093 0 0 0 12.907 0h-.041C10.824.014 9 1.87 9 3.912v2.049a.957.957 0 0 1-1.643.682C6.744 5.58 5.683 4.96 4.461 4.96c-.223 0-.44.018-.649.047A3.463 3.463 0 0 0 .966 8.44c0 .116.005.232.016.347a.958.958 0 0 0 1.907-.194 1.55 1.55 0 0 1-.007-.153c0-.856.7-1.547 1.556-1.547.261 0 .507.064.722.178.428.226.722.67.722 1.178v.57a.96.96 0 0 0 .957.958h.046c.527 0 .955-.428.955-.956v-.572c0-.508.294-.952.722-1.178a1.551 1.551 0 0 1 2.278 1.37v1.381a.958.958 0 0 0 1.915 0V9.44a1.551 1.551 0 0 1 2.278-1.37c.428.226.722.67.722 1.178v.572a.957.957 0 0 0 1.915-.001v-.57c0-.508.295-.952.722-1.178.216-.114.462-.178.722-.178.857 0 1.556.691 1.556 1.547 0 .052-.003.103-.007.153a.958.958 0 0 0 1.907.194c.01-.115.016-.231.016-.347a3.463 3.463 0 0 0-2.846-3.433z"></path></svg>
{%- elif name == "orcid" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM7.369 4.378c.525 0 .947.431.947.947s-.422.947-.947.947a.95.95 0 0 1-.947-.947c0-.525.422-.947.947-.947zm-.722 3.038h1.444v10.041H6.647V7.416zm3.562 0h3.9c3.712 0 5.344 2.653 5.344 5.025 0 2.578-2.016 5.025-5.325 5.025h-3.919V7.416zm1.444 1.303v7.444h2.297c3.272 0 4.05-2.381 4.05-3.722 0-2.016-1.397-3.722-3.975-3.722h-2.372z"></path></svg>
{%- elif name == "indieweb" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.766 7.051v3.718h3.372v1.885h-3.372v4.278l3.781-4.278h2.537l-4.908 5.376L19.084 24h-2.59l-3.728-4.337V24H10.77v-4.337L7.042 24H4.452l4.908-5.97-4.908-5.376h2.537l3.781 4.278V9.654H7.398V7.77h3.372V3.42L7.042 7.77H4.452L12.766 0l8.314 7.77h-2.59z"></path></svg>
{%- elif name == "website" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path></svg>
{%- elif name == "email" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg>
{%- elif name == "funkwhale" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.243 16.243a6 6 0 1 1 0-8.486 1 1 0 0 1-1.414 1.414 4 4 0 1 0 0 5.658 1 1 0 0 1 1.414 1.414z"></path></svg>
{%- elif name == "lastfm" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.584 17.21l-.88-2.392s-1.43 1.594-3.573 1.594c-1.897 0-3.244-1.649-3.244-4.288 0-3.382 1.704-4.591 3.381-4.591 2.42 0 3.189 1.567 3.849 3.574l.88 2.749c.88 2.666 2.529 4.81 7.284 4.81 3.409 0 5.718-1.044 5.718-3.793 0-2.227-1.265-3.381-3.63-3.931l-1.758-.385c-1.21-.275-1.567-.77-1.567-1.594 0-.935.742-1.484 1.952-1.484 1.32 0 2.034.495 2.144 1.677l2.749-.33c-.22-2.474-1.924-3.492-4.729-3.492-2.474 0-4.893.935-4.893 3.932 0 1.87.907 3.051 3.189 3.601l1.87.44c1.402.33 1.869.825 1.869 1.648 0 1.044-.99 1.484-2.86 1.484-2.776 0-3.932-1.457-4.59-3.464l-.907-2.75c-1.155-3.573-2.997-4.893-6.653-4.893C2.144 5.333 0 7.89 0 12.233c0 4.18 2.144 6.434 5.993 6.434 3.106 0 4.591-1.457 4.591-1.457z"></path></svg>
{%- elif name == "peertube" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0L1.104 6v12L12 24l10.896-6V6zm0 2.416L20.584 7.5v9L12 21.584 3.416 16.5v-9z"></path><path d="M12 6.832L7.208 9.5v5L12 17.168l4.792-2.668v-5z"></path></svg>
{%- elif name == "bookwyrm" -%}
<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.01 2.4C8.574 2.4 5.41 3.837 3.86 5.614c.052.052.098.113.138.182L6.76 10.99c.33.57.121 1.298-.45 1.628s-1.298.121-1.628-.45L1.92 6.974c-.019-.032-.033-.065-.048-.098C.714 8.63 0 10.598 0 12.36c0 1.254.332 2.3.977 3.14.62.808 1.52 1.406 2.606 1.808a.478.478 0 0 1 .295.606.478.478 0 0 1-.606.295C1.94 17.7.87 16.976.134 16.018c-.03.167-.044.337-.044.51 0 .774.239 1.473.687 2.031.46.573 1.131 1.002 1.95 1.258a.478.478 0 0 1 .318.597.478.478 0 0 1-.597.318c-.555-.174-1.038-.422-1.445-.733C2.237 21.836 4.937 23 8.27 23c2.662 0 4.836-.659 6.314-1.884l-.135-.04c-.48-.136-.868-.418-1.126-.81a2.008 2.008 0 0 1-.2-1.5l1.162-4.127a2.007 2.007 0 0 1 .966-1.19 2.008 2.008 0 0 1 1.53-.18l.72.203 1.16-4.118a2.008 2.008 0 0 1 .967-1.19 2.008 2.008 0 0 1 1.529-.18l.254.072c-.38-1.318-1.036-2.48-1.94-3.373C16.797 3.012 14.53 2.4 12.01 2.4z"></path></svg>
{%- endif -%}
{% endmacro %}