{# Social Icon Macro Usage: {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %} {{ socialIcon("github", "w-5 h-5") }} {{ socialIcon("github", "w-5 h-5") }} 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" -%} {%- elif name == "gitlab" -%} {%- elif name == "forgejo" -%} {%- elif name == "codeberg" -%} {%- elif name == "sourcehut" -%} {%- elif name == "linkedin" -%} {%- elif name == "bluesky" -%} {%- elif name == "mastodon" -%} {%- elif name == "activitypub" -%} {%- elif name == "pixelfed" -%} {%- elif name == "twitter" -%} {%- elif name == "facebook" -%} {%- elif name == "instagram" -%} {%- elif name == "threads" -%} {%- elif name == "youtube" -%} {%- elif name == "twitch" -%} {%- elif name == "flickr" -%} {%- elif name == "spotify" -%} {%- elif name == "bandcamp" -%} {%- elif name == "soundcloud" -%} {%- elif name == "rss" -%} {%- elif name == "matrix" -%} {%- elif name == "discord" -%} {%- elif name == "signal" -%} {%- elif name == "telegram" -%} {%- elif name == "xmpp" -%} {%- elif name == "reddit" -%} {%- elif name == "hackernews" -%} {%- elif name == "keybase" -%} {%- elif name == "orcid" -%} {%- elif name == "indieweb" -%} {%- elif name == "website" -%} {%- elif name == "email" -%} {%- elif name == "funkwhale" -%} {%- elif name == "lastfm" -%} {%- elif name == "peertube" -%} {%- elif name == "bookwyrm" -%} {%- endif -%} {% endmacro %}