Skip to content

Commit 91d9d56

Browse files
feat: X and Instagram links in site footer
Adds social links between Open source and Buy me a coffin. Inline SVG icons keep the footer light (no extra component files). Both links track social_clicked with the platform (x | instagram) and from: 'footer' so we can see which social drives the most follow-through. - X: https://x.com/Dotsystemsdevs - Instagram: https://www.instagram.com/dotsystemsdevs/ Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 023eacb commit 91d9d56

1 file changed

Lines changed: 46 additions & 0 deletions

File tree

src/components/SiteFooter.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,24 @@ const linkStyle = {
1717
WebkitTapHighlightColor: 'transparent',
1818
} as const
1919

20+
function XIcon({ size = 13 }: { size?: number }) {
21+
return (
22+
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
23+
<path 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" />
24+
</svg>
25+
)
26+
}
27+
28+
function InstagramIcon({ size = 13 }: { size?: number }) {
29+
return (
30+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
31+
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
32+
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
33+
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
34+
</svg>
35+
)
36+
}
37+
2038
export default function SiteFooter({ compact = false }: SiteFooterProps) {
2139
return (
2240
<footer className={`site-footer${compact ? ' site-footer--compact' : ''}`}>
@@ -51,6 +69,34 @@ export default function SiteFooter({ compact = false }: SiteFooterProps) {
5169
Open source
5270
</a>
5371
<span style={{ color: 'var(--c-border-light)', fontSize: '12px' }}>·</span>
72+
<a
73+
href="https://x.com/Dotsystemsdevs"
74+
target="_blank"
75+
rel="noopener noreferrer"
76+
aria-label="Follow on X"
77+
onClick={() => track('social_clicked', { platform: 'x', from: 'footer' })}
78+
style={linkStyle}
79+
onMouseEnter={e => (e.currentTarget.style.color = 'var(--c-ink)')}
80+
onMouseLeave={e => (e.currentTarget.style.color = 'var(--c-muted)')}
81+
>
82+
<XIcon size={12} />
83+
X
84+
</a>
85+
<span style={{ color: 'var(--c-border-light)', fontSize: '12px' }}>·</span>
86+
<a
87+
href="https://www.instagram.com/dotsystemsdevs/"
88+
target="_blank"
89+
rel="noopener noreferrer"
90+
aria-label="Follow on Instagram"
91+
onClick={() => track('social_clicked', { platform: 'instagram', from: 'footer' })}
92+
style={linkStyle}
93+
onMouseEnter={e => (e.currentTarget.style.color = 'var(--c-ink)')}
94+
onMouseLeave={e => (e.currentTarget.style.color = 'var(--c-muted)')}
95+
>
96+
<InstagramIcon size={13} />
97+
Instagram
98+
</a>
99+
<span style={{ color: 'var(--c-border-light)', fontSize: '12px' }}>·</span>
54100
<a
55101
href="https://buymeacoffee.com/dotdevs"
56102
target="_blank"

0 commit comments

Comments
 (0)