mirror of
https://github.com/samber/awesome-prometheus-alerts.git
synced 2026-06-25 02:46:59 +08:00
Rebuilds the site using Astro (SSG) with Tailwind CSS v4, replacing the Jekyll/Cayman theme. Key changes: - Splits the monolithic /rules page into 110 statically-generated pages (92 per-service + 13 group index + homepage + guide pages) for SEO - URL structure: /rules/[group-slug]/[service-slug]/ with backward- compatibility redirect map for old anchor-based URLs (/rules#redis) - Modern UI: Prometheus-orange accent, dark mode (system + toggle), sticky sidebar, responsive layout, copy-to-clipboard per rule/section - SEO: per-page <title>, <meta description>, Open Graph, Twitter Card, canonical URLs, sitemap.xml via @astrojs/sitemap - GEO: FAQPage JSON-LD schema on each service page (rules as Q&A pairs for AI search engines), TechArticle schema, BreadcrumbList - Search: Pagefind (build-time index, lazy-loaded, ~200KB) - Zero JS by default; copy buttons and theme toggle use inline scripts - New CI: .github/workflows/deploy.yml builds Astro + Pagefind and deploys to GitHub Pages via actions/deploy-pages - Existing dist.yml and test.yml workflows are untouched - _data/rules.yml remains the single source of truth Note: GitHub Pages source must be changed from "Build from branch" (Jekyll) to "GitHub Actions" in repository settings.
82 lines
2.3 KiB
Text
82 lines
2.3 KiB
Text
---
|
|
import '../styles/global.css';
|
|
import Header from '../components/Header.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
import SEO from '../components/SEO.astro';
|
|
|
|
interface Props {
|
|
title: string;
|
|
description?: string;
|
|
canonicalUrl?: string;
|
|
ogImage?: string;
|
|
jsonLd?: object | object[];
|
|
noIndex?: boolean;
|
|
}
|
|
|
|
const {
|
|
title,
|
|
description = 'Collection of alerting rules for Prometheus. Copy-pasteable Prometheus alert configurations for 90+ services.',
|
|
canonicalUrl,
|
|
ogImage,
|
|
jsonLd,
|
|
noIndex = false,
|
|
} = Astro.props;
|
|
|
|
const base = import.meta.env.BASE_URL;
|
|
const siteUrl = 'https://samber.github.io';
|
|
const canonical = canonicalUrl ?? `${siteUrl}${base}${Astro.url.pathname.replace(base, '')}`;
|
|
---
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en" class="">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#E6522C" />
|
|
{noIndex && <meta name="robots" content="noindex" />}
|
|
|
|
<SEO
|
|
title={title}
|
|
description={description}
|
|
canonicalUrl={canonical}
|
|
ogImage={ogImage}
|
|
jsonLd={jsonLd}
|
|
base={base}
|
|
siteUrl={siteUrl}
|
|
/>
|
|
|
|
<link rel="icon" type="image/x-icon" href={`${base}/favicon.ico`} />
|
|
|
|
<!-- Dark mode: set class before paint to avoid flash -->
|
|
<script is:inline>
|
|
(function() {
|
|
var theme = localStorage.getItem('theme');
|
|
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<!-- Google Analytics 4 -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
|
|
<script is:inline>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){ dataLayer.push(arguments); }
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-XXXXXXXXXX');
|
|
</script>
|
|
</head>
|
|
<body class="min-h-screen flex flex-col bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors duration-150">
|
|
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-brand text-white px-3 py-1 rounded z-50">
|
|
Skip to main content
|
|
</a>
|
|
|
|
<Header base={base} />
|
|
|
|
<main id="main-content" class="flex-1">
|
|
<slot />
|
|
</main>
|
|
|
|
<Footer base={base} />
|
|
</body>
|
|
</html>
|