Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously an unversioned directory inside ~/src/blockninja-themes/kindergarten. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
65 lines
3.4 KiB
Plaintext
65 lines
3.4 KiB
Plaintext
package main
|
|
|
|
// footerComponent renders the friendly footer.
|
|
templ footerComponent(data FooterData) {
|
|
<div class="kg-footer" data-block="kindergarten:footer">
|
|
<div class="kg-container">
|
|
<div class="kg-footer-mascot">
|
|
<span aria-hidden="true">👋</span>
|
|
<span>{ data.MascotName } says hi!</span>
|
|
</div>
|
|
if data.ShowSignup {
|
|
<form class="kg-footer-signup" aria-label={ "Newsletter signup" } method="post" action="/subscribe">
|
|
<input type="email" name="email" placeholder="Your email" aria-label="Email address" required />
|
|
<button type="submit" class="kg-pill kg-pill-yellow">Sign up</button>
|
|
</form>
|
|
}
|
|
if len(data.SocialLinks) > 0 {
|
|
<div class="kg-social-row" aria-label={ "Social media" }>
|
|
for _, link := range data.SocialLinks {
|
|
<a href={ templ.SafeURL(link.Href) } class="kg-social-link" aria-label={ socialLabel(link.Platform) }>
|
|
@socialIcon(link.Platform)
|
|
</a>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
// socialLabel renders an accessible label for the icon link.
|
|
func socialLabel(platform string) string {
|
|
switch platform {
|
|
case "facebook":
|
|
return "Visit our Facebook"
|
|
case "instagram":
|
|
return "Visit our Instagram"
|
|
case "youtube":
|
|
return "Visit our YouTube"
|
|
case "tiktok":
|
|
return "Visit our TikTok"
|
|
case "email":
|
|
return "Send us an email"
|
|
default:
|
|
return "Open social link"
|
|
}
|
|
}
|
|
|
|
// socialIcon renders a small social icon (Lucide-style stroke).
|
|
templ socialIcon(platform string) {
|
|
switch platform {
|
|
case "facebook":
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
|
case "instagram":
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
|
|
case "youtube":
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"/><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"/></svg>
|
|
case "tiktok":
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>
|
|
case "email":
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
|
default:
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></svg>
|
|
}
|
|
}
|