From ac07b73384de511e04542e9ac3a500eb81f92b92 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Wed, 21 May 2025 09:12:30 +0200 Subject: Extract common layout --- src/layouts/Layout.astro | 123 ++++++++++++++++++++++++++++ src/pages/404.astro | 61 ++++---------- src/pages/index.astro | 204 ++++++++++++++--------------------------------- 3 files changed, 196 insertions(+), 192 deletions(-) create mode 100644 src/layouts/Layout.astro (limited to 'src') 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; +--- + + + + + + + + + + + + {title} + {description && } + + + + + { + !noindex && ( + <> + + {description && ( + + )} + + + + + + + + + + + + {description && ( + + )} + + + ) + } + + + + + + + +

+ +

+ + diff --git a/src/pages/404.astro b/src/pages/404.astro index 8750eff..c9c70ca 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -1,53 +1,22 @@ --- -import { GOOGLE_ANALYTICS_ID } from "../config"; - -import "../styles/global.css"; +import Layout from "../layouts/Layout.astro"; const title = "404 - Page Not Found"; --- - - - - - - {title} - - - - - + +

+ 404 - Page Not Found +

- -

+ The page you're looking for doesn't exist. +

+ ← Back to IP / CIDR Calculator -

- 404 - Page Not Found -

- -

- The page you're looking for doesn't exist. -

- ← Back to IP / CIDR Calculator -

- - + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 1b86070..ef13cf6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,15 +1,10 @@ --- +import Layout from "../layouts/Layout.astro"; import Cidr from "../components/Cidr"; import { faqs } from "../content/faqs.ts"; -import "../styles/global.css"; -import { GOOGLE_ANALYTICS_ID } from "../config"; - -const metadata = { - title: "Interactive visual CIDR and IP range calculator", - description: - "Instantly compute and visualize CIDR subnets, IP ranges and masks. Free online tool for accurate network design, planning and IT education.", -}; +const title = "Interactive visual CIDR and IP range calculator"; +const description = "Instantly compute and visualize CIDR subnets, IP ranges and masks. Free online tool for accurate network design, planning and IT education."; const faqJsonLd = { "@context": "https://schema.org", @@ -22,146 +17,63 @@ const faqJsonLd = { }; --- - - - - - - - - - - - {metadata.title} - - - - + +

+ IP / CIDR Calculator +

+ Visualize and Calculate Network Ranges with IPv4 CIDR Blocks +

- - - - - - - - - - + - - - - +

+ CIDR & Subnetting FAQ +

- - - - -

- IP / CIDR Calculator -

- Visualize and Calculate Network Ranges with IPv4 CIDR Blocks -

- - - -

- CIDR & Subnetting FAQ -

- -

- { - faqs.map(({ q, a }) => ( -

- {q} - -

- {a} -

- )) - } - -

+ +