awesome-prometheus-alerts/site/src/components/Footer.astro

---
import { sponsors } from '../data/sponsors';
import { getPopularServices, data, getGroupSlug } from '../data/rules';
import { SITE_NAME, SITE_URL, GITHUB_URL, GITHUB_CONTRIBUTING_URL, GITHUB_LICENSE_URL, AUTHOR_NAME, AUTHOR_GITHUB_URL, TWITTER_HANDLE, LICENSE_CC_BY_NAME } from '../data/site';

interface Props {
  base: string;
}
const { base } = Astro.props;

const popularServices = getPopularServices();

const featuredGroupSlugs = [
  'basic-resource-monitoring',
  'databases',
  'orchestrators',
  'network-and-security',
];
const featuredGroups = data.groups.filter((g) => featuredGroupSlugs.includes(getGroupSlug(g)));
---

<footer class="border-t border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 mt-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">

      <!-- Column 1: About -->
      <div>
        <div class="flex items-center gap-2 mb-3">
          <img src={`${base}/favicon.svg`} alt="Prometheus flame" class="w-5 h-5" aria-hidden="true" />
          <span class="font-semibold text-slate-900 dark:text-white text-sm">{SITE_NAME}</span>
        </div>
        <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
          A curated collection of copy-pasteable Prometheus alerting rules for 90+ services and exporters.
        </p>
        <div class="mt-4 flex gap-3">
          <a href={`https://twitter.com/share?via=${TWITTER_HANDLE.slice(1)}&text=🚨 ${SITE_NAME}&url=${SITE_URL}`} target="_blank" rel="noopener noreferrer" class="text-slate-400 hover:text-blue-400 transition-colors" aria-label="Share on Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href={`http://www.linkedin.com/shareArticle?mini=true&url=${SITE_URL}`} target="_blank" rel="noopener noreferrer" class="text-slate-400 hover:text-blue-600 transition-colors" aria-label="Share on LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><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.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 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"/></svg>
          </a>
          <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" class="text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors" aria-label="GitHub repository">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><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"/></svg>
          </a>
        </div>
      </div>

      <!-- Column 2: Quick links -->
      <div>
        <h3 class="text-sm font-semibold text-slate-900 dark:text-white mb-3">Quick links</h3>
        <ul class="space-y-2">
          <li><a href={`${base}/rules/`} class="text-sm text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-dark transition-colors">Browse all rules</a></li>
          <li><a href={`${base}/alertmanager/`} class="text-sm text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-dark transition-colors">AlertManager Config</a></li>
          <li><a href={`${base}/blackbox-exporter/`} class="text-sm text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-dark transition-colors">Blackbox Exporter</a></li>
          <li><a href={`${base}/sleep-peacefully/`} class="text-sm text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-dark transition-colors">Sleep Peacefully</a></li>
          <li><a href={GITHUB_CONTRIBUTING_URL} target="_blank" rel="noopener noreferrer" class="text-sm text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-dark transition-colors">Contributing Guide</a></li>
        </ul>
      </div>

      <!-- Column 3: Categories -->
      <div>
        <h3 class="text-sm font-semibold text-slate-900 dark:text-white mb-3">Categories</h3>
        <ul class="space-y-2">
          {featuredGroups.map((g) => (
            <li>
              <a href={`${base}/rules/${getGroupSlug(g)}/`} class="text-sm text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-dark transition-colors">
                {g.name}
              </a>
            </li>
          ))}
        </ul>
      </div>

      <!-- Column 4: Sponsors -->
      <div>
        <h3 class="text-sm font-semibold text-slate-900 dark:text-white mb-3">Sponsors</h3>
        <div class="space-y-4">
          {sponsors.map((s) => (
            <a href={s.url} target="_blank" rel="noopener noreferrer" class="block hover:opacity-80 transition-opacity">
              <img src={`${base}${s.logo}`} alt={`${s.name} — ${s.description}`} class="h-6" />
            </a>
          ))}
        </div>
      </div>
    </div>

    <div class="mt-10 pt-6 border-t border-slate-200 dark:border-slate-800 flex flex-col sm:flex-row justify-between items-center gap-2 text-xs text-slate-400 dark:text-slate-500">
      <span>
        <a href={GITHUB_URL} class="hover:text-brand dark:hover:text-brand-dark transition-colors">awesome-prometheus-alerts</a>
        {' '}is maintained by{' '}
        <a href={AUTHOR_GITHUB_URL} class="hover:text-brand dark:hover:text-brand-dark transition-colors">@{AUTHOR_GITHUB_URL.split('/').pop()}</a>
      </span>
      <span>Licensed under <a href={GITHUB_LICENSE_URL} class="hover:text-brand dark:hover:text-brand-dark transition-colors">{LICENSE_CC_BY_NAME}</a></span>
    </div>
  </div>
</footer>