From 69cc1db574e319c77d5ae049979a6b35518b26fe Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Thu, 22 May 2025 13:00:55 +0200 Subject: Add subnet guide, layout, nav and embed --- src/components/Navigation.tsx | 103 +++++++++++++++++++++++ src/layouts/Layout.astro | 8 +- src/pages/cidr-calculator-subnet-guide.astro | 117 --------------------------- src/pages/embed-example.astro | 66 +++++++++++++++ src/pages/embed.astro | 72 +++++++++++++++++ src/pages/index.astro | 24 +++--- src/pages/subnet-guide.astro | 111 +++++++++++++++++++++++++ 7 files changed, 368 insertions(+), 133 deletions(-) create mode 100644 src/components/Navigation.tsx delete mode 100644 src/pages/cidr-calculator-subnet-guide.astro create mode 100644 src/pages/embed-example.astro create mode 100644 src/pages/embed.astro create mode 100644 src/pages/subnet-guide.astro (limited to 'src') diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx new file mode 100644 index 0000000..b5ef2a7 --- /dev/null +++ b/src/components/Navigation.tsx @@ -0,0 +1,103 @@ +import { useState, useEffect } from 'react'; + +export default function Navigation() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + // Close menu when window is resized to desktop size + useEffect(() => { + const handleResize = () => { + if (window.innerWidth >= 640 && isMenuOpen) { + setIsMenuOpen(false); + } + }; + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, [isMenuOpen]); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + return ( + + ); +} + +// Separated NavLinks component for reuse +function NavLinks({ mobile = false }: { mobile?: boolean }) { + const linkClass = `text-gray-700 hover:text-blue-600 font-medium ${mobile ? 'py-2' : ''}`; + + return ( + <> + + CIDR Calculator + + + Subnet Guide + + + Embed + + + Github + + + + + + ); +} diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index e85cfd3..a7f2b7b 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,6 @@ --- import "../styles/global.css"; - +import Navigation from "../components/Navigation"; import { GOOGLE_ANALYTICS_ID } from "../config"; export interface Props { @@ -99,11 +99,14 @@ const { + +
+
@@ -115,9 +118,6 @@ const { >, operated by Magic Monad. Open source available on Github.

diff --git a/src/pages/cidr-calculator-subnet-guide.astro b/src/pages/cidr-calculator-subnet-guide.astro deleted file mode 100644 index 3f2c4d1..0000000 --- a/src/pages/cidr-calculator-subnet-guide.astro +++ /dev/null @@ -1,117 +0,0 @@ ---- -import Layout from "../layouts/Layout.astro"; -import Cidr from "../components/Cidr"; -import { faqs } from "../content/faqs.ts"; -import Prose from "../components/Prose.astro"; - -// ──────────────────────────────────────────────────────────── -// Metadata -// ──────────────────────────────────────────────────────────── -const title = "CIDR Calculator & Subnet Guide — IP Ranges, Masks & IPv6"; -const description = - "Free interactive CIDR calculator and comprehensive plain‑language guide covering subnetting, IP ranges, subnet masks and IPv6 addressing."; - -// FAQ structured‑data (kept in sync with UI) -const faqJsonLd = { - "@context": "https://schema.org", - "@type": "FAQPage", - mainEntity: faqs.map(({ q, a }) => ({ - "@type": "Question", - name: q, - acceptedAnswer: { "@type": "Answer", text: a }, - })), -}; - -import { Content as GuideContent } from "../content/cidr-guide.md"; ---- - - -
- - - - - Back Home - -
-

- CIDR Calculator & Subnet Guide -

-

- Convert CIDR blocks to IP ranges and master subnetting for IPv4 - & IPv6 — in one streamlined resource. -

-
-
- -
- -
- - - - - - - - {/** Structured‑data block */} - + + + +
+ +
+ + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 9458dab..23588d9 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -19,18 +19,18 @@ const faqJsonLd = { --- -

- CIDR Calculator -

-

- Visualize and Calculate Network Ranges with IPv4 CIDR Blocks -

- Read the guide +
+
+

+ CIDR Calculator +

+

+ Visualize and Calculate Network Ranges with IPv4 CIDR Blocks +

+
+
diff --git a/src/pages/subnet-guide.astro b/src/pages/subnet-guide.astro new file mode 100644 index 0000000..9a0d67f --- /dev/null +++ b/src/pages/subnet-guide.astro @@ -0,0 +1,111 @@ +--- +import Layout from "../layouts/Layout.astro"; +import Cidr from "../components/Cidr"; +import { faqs } from "../content/faqs.ts"; +import Prose from "../components/Prose.astro"; + +// ──────────────────────────────────────────────────────────── +// Metadata +// ──────────────────────────────────────────────────────────── +const title = "CIDR Calculator & Subnet Guide — IP Ranges, Masks & IPv6"; +const description = + "Free interactive CIDR calculator and comprehensive plain‑language guide covering subnetting, IP ranges, subnet masks and IPv6 addressing."; + +// FAQ structured‑data (kept in sync with UI) +const faqJsonLd = { + "@context": "https://schema.org", + "@type": "FAQPage", + mainEntity: faqs.map(({ q, a }) => ({ + "@type": "Question", + name: q, + acceptedAnswer: { "@type": "Answer", text: a }, + })), +}; + +import { Content as GuideContent } from "../content/cidr-guide.md"; +--- + + +
+
+

+ CIDR Subnet Guide +

+

+ Convert CIDR blocks to IP ranges and master subnetting for IPv4 + & IPv6 — in one streamlined resource. +

+
+
+ + + + + + + + + + {/** Structured‑data block */} +