diff options
| author | Yuval Adam <_@yuv.al> | 2025-05-21 09:12:30 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-05-21 09:12:30 +0200 |
| commit | ac07b73384de511e04542e9ac3a500eb81f92b92 (patch) | |
| tree | aecb57c4111a9fdef6929871ce41cf60e3bb6918 /src/layouts | |
| parent | 366a7501a3dccde4fc9b65817da9062912d3cf1c (diff) | |
Extract common layout
Diffstat (limited to 'src/layouts')
| -rw-r--r-- | src/layouts/Layout.astro | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..d4d4e7e --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,123 @@ +--- +import "../styles/global.css"; + +import { GOOGLE_ANALYTICS_ID } from "../config"; + +export interface Props { + title: string; + description?: string; + ogImage?: string; + ogImageAlt?: string; + noindex?: boolean; +} + +const { + title, + description, + ogImage = "https://cidr.xyz/og.webp", + ogImageAlt = "Color-coded octets illustrating an IP range and CIDR mask", + noindex = false, +} = Astro.props; +--- + +<html lang="en"> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/x-icon" href="/ico/favicon.ico" /> + <link + rel="apple-touch-icon" + sizes="180x180" + href="/ico/apple-touch-icon.png" + /> + <link + rel="icon" + type="image/png" + sizes="192x192" + href="/ico/icon-192.png" + /> + <link + rel="icon" + type="image/png" + sizes="512x512" + href="/ico/icon-512.png" + /> + <link rel="manifest" href="/manifest.json" /> + <meta name="theme-color" content="#0066cc" /> + <meta name="viewport" content="width=device-width" /> + <title>{title}</title> + {description && <meta name="description" content={description} />} + + <meta + name="robots" + content={noindex ? "noindex, follow" : "index, follow"} + /> + <link rel="canonical" href="https://cidr.xyz" /> + + { + !noindex && ( + <> + <meta property="og:title" content={title} /> + {description && ( + <meta property="og:description" content={description} /> + )} + <meta property="og:type" content="website" /> + <meta property="og:url" content="https://cidr.xyz" /> + <meta property="og:site_name" content="CIDR.xyz" /> + <meta property="og:image" content={ogImage} /> + <meta property="og:image:type" content="image/webp" /> + <meta property="og:image:width" content="1200" /> + <meta property="og:image:height" content="630" /> + <meta property="og:image:alt" content={ogImageAlt} /> + + <meta name="twitter:card" content="summary_large_image" /> + <meta name="twitter:title" content={title} /> + {description && ( + <meta + name="twitter:description" + content={description} + /> + )} + <meta name="twitter:image" content={ogImage} /> + </> + ) + } + + <script + async + src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`} + ></script> + <script define:vars={{ GOOGLE_ANALYTICS_ID }} is:inline> + window.dataLayer = window.dataLayer || []; + function gtag() { + dataLayer.push(arguments); + } + gtag("js", new Date()); + gtag("config", GOOGLE_ANALYTICS_ID); + </script> + + <slot name="head" /> + </head> + <body> + <div + class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-2" + > + <div class="max-w-6xl w-full sm:p-8 p-2 min-h-[800px]"> + <slot /> + </div> + <footer class="text-xs my-4 pb-3 text-center"> + <p> + Created by <a + href="https://yuv.al" + class="text-blue-600 hover:underline">Yuval Adam</a + >, operated by <a + href="https://magicmonad.com" + class="text-blue-600 hover:underline">Magic Monad</a + >. Open source available on <a + href="https://github.com/yuvadm/cidr.xyz" + class="text-blue-600 hover:underline">Github</a + >. + </p> + </footer> + </div> + </body> +</html> |