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/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 +++++++++++++++++++++++++
 5 files changed, 261 insertions(+), 129 deletions(-)
 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/pages')

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";
----
-
-<Layout title={title} description={description}>
-    <header>
-        <a href="/" class="group flex items-center text-blue-600 transition-all duration-300 hover:text-blue-800">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 transform transition-transform duration-300 group-hover:-translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-            </svg>
-            <span class="hover:underline">Back Home</span>
-        </a>
-        <div class="mx-auto max-w-7xl px-4 py-2 sm:py-4 lg:px-6 text-center">
-            <h1
-                class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl"
-            >
-                CIDR Calculator &amp; Subnet Guide
-            </h1>
-            <p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto text-gray-700">
-                Convert CIDR blocks to IP ranges and master subnetting for IPv4
-                &amp; IPv6 — in one streamlined resource.
-            </p>
-        </div>
-    </header>
-
-    <section>
-        <Cidr client:load />
-    </section>
-
-    <nav
-        aria-label="Page sections"
-        class="hidden sm:block sticky top-0 z-10 pt-1 my-6 border-0 sm:border border-gray-300 rounded-lg bg-white/70 shadow-md"
-    >
-        <div class="mx-auto max-w-4xl px-4">
-            <ul
-                class="flex flex-wrap justify-center gap-8 py-3 text-base font-medium text-gray-700"
-            >
-                <li>
-                    <a
-                        href="#what-is-cidr"
-                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
-                        >What is CIDR?</a
-                    >
-                </li>
-                <li>
-                    <a
-                        href="#cidr-to-ip"
-                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
-                        >CIDR → IP range</a
-                    >
-                </li>
-                <li>
-                    <a
-                        href="#subnetting-tutorial"
-                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
-                        >Subnetting tutorial</a
-                    >
-                </li>
-                <li>
-                    <a
-                        href="#ipv6"
-                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
-                        >IPv6 basics</a
-                    >
-                </li>
-                <li>
-                    <a
-                        href="#faq"
-                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
-                        >FAQ</a
-                    >
-                </li>
-                <li>
-                    <a
-                        href="#resources"
-                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
-                        >Resources</a
-                    >
-                </li>
-            </ul>
-        </div>
-    </nav>
-
-    <Prose>
-        <GuideContent />
-    </Prose>
-
-    {/** Structured‑data block */}
-    <script
-        type="application/ld+json"
-        is:inline
-        set:html={JSON.stringify(faqJsonLd, null, 2)}
-    />
-</Layout>
diff --git a/src/pages/embed-example.astro b/src/pages/embed-example.astro
new file mode 100644
index 0000000..f66feab
--- /dev/null
+++ b/src/pages/embed-example.astro
@@ -0,0 +1,66 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+const title = "CIDR Calculator Widget Embed Example";
+const description = "Learn how to embed the CIDR calculator widget in your website";
+---
+
+<Layout title={title} description={description}>
+	<h1 class="my-3 sm:my-1 text-center sm:text-left text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl text-4xl">
+		CIDR Calculator Widget
+	</h1>
+	<h2 class="pt-1 text-xl text-center sm:text-left text-gray-600 mb-8">
+		Embed the CIDR Calculator in your website
+	</h2>
+
+	<div class="prose max-w-none mb-8">
+		<p>
+			You can embed the CIDR calculator widget in your website or application using an iframe. 
+			Copy the code below and adjust the width and height as needed:
+		</p>
+
+		<pre class="bg-gray-100 p-4 rounded-md overflow-x-auto"><code>&lt;iframe 
+  src="https://cidr.xyz/embed" 
+  width="100%" 
+  height="600" 
+  frameborder="0" 
+  allowtransparency="true"
+  title="CIDR Calculator"
+  loading="lazy"
+&gt;&lt;/iframe&gt;</code></pre>
+
+		<h3>Live Example</h3>
+		<p>Here's how the embedded widget looks:</p>
+	</div>
+
+	<div class="border border-gray-300 rounded-lg shadow-md mb-8">
+		<iframe 
+			src="/embed" 
+			width="100%" 
+			height="600" 
+			frameborder="0" 
+			allowtransparency="true"
+			title="CIDR Calculator"
+			loading="lazy"
+		></iframe>
+	</div>
+
+	<div class="prose max-w-none">
+		<h3>Customization</h3>
+		<p>
+			The widget adapts to the width of its container. For best results:
+		</p>
+		<ul>
+			<li>Use a minimum width of 400px for optimal display</li>
+			<li>Set a minimum height of 600px to avoid scrolling</li>
+			<li>The widget has a transparent background that can blend with your site</li>
+		</ul>
+
+		<h3>Usage Notes</h3>
+		<ul>
+			<li>The widget is free to use on any website</li>
+			<li>Please consider adding attribution with a link back to <a href="https://cidr.xyz" class="text-blue-600 hover:underline">cidr.xyz</a></li>
+			<li>For any questions or customization needs, visit the <a href="https://github.com/yuvadm/cidr.xyz" class="text-blue-600 hover:underline">GitHub repository</a></li>
+		</ul>
+	</div>
+</Layout>
diff --git a/src/pages/embed.astro b/src/pages/embed.astro
new file mode 100644
index 0000000..3496287
--- /dev/null
+++ b/src/pages/embed.astro
@@ -0,0 +1,72 @@
+---
+import Cidr from "../components/Cidr";
+import { GOOGLE_ANALYTICS_ID } from "../config";
+
+const title = "CIDR Calculator Widget";
+const description = "Embeddable CIDR calculator widget for network calculations";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/x-icon" href="/ico/favicon.ico" />
+		<meta name="viewport" content="width=device-width" />
+		<title>{title}</title>
+		<meta name="description" content={description} />
+		<meta name="robots" content="noindex, follow" />
+
+		<!-- Import global styles -->
+		<style is:global>
+			@import "../styles/global.css";
+		</style>
+
+		<!-- Embed-specific styles -->
+		<style>
+			body {
+				margin: 0;
+				padding: 0;
+				background: transparent;
+				overflow: hidden;
+			}
+			.embed-container {
+				width: 100%;
+				height: 100%;
+				background-color: rgba(255, 255, 255, 0.9);
+				border-radius: 8px;
+				padding: 10px;
+				box-sizing: border-box;
+			}
+		</style>
+
+		<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>
+	</head>
+	<body>
+		<div class="embed-container">
+			<Cidr client:load />
+		</div>
+
+		<script is:inline>
+			// Handle messages from parent window for potential configuration
+			window.addEventListener('message', (event) => {
+				// You can add functionality here to configure the widget based on messages
+				// from the parent window if needed in the future
+			});
+
+			// Notify parent when loaded
+			window.addEventListener('load', () => {
+				if (window.parent !== window) {
+					window.parent.postMessage({ type: 'cidr-widget-loaded' }, '*');
+				}
+			});
+		</script>
+	</body>
+</html>
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 = {
 ---
 
 <Layout title={title} description={description}>
-	<h1
-		class="my-3 sm:my-1 text-center sm:text-left text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl text-4xl"
-	>
-		CIDR Calculator
-	</h1>
-	<h2 class="pt-1 text-xl text-center sm:text-left text-gray-600">
-		Visualize and Calculate Network Ranges with IPv4 CIDR Blocks
-	</h2>
-	<a
-		href="/cidr-calculator-subnet-guide"
-		class="text-blue-600 hover:underline">Read the guide</a
-	>
+	<header>
+		<div class="mx-auto max-w-7xl px-4 py-2 sm:py-4 lg:px-6 text-center">
+			<h1
+				class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl"
+			>
+				CIDR Calculator
+			</h1>
+			<p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto text-gray-700">
+				Visualize and Calculate Network Ranges with IPv4 CIDR Blocks
+			</p>
+		</div>
+	</header>
 
 	<Cidr client:load />
 
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";
+---
+
+<Layout title={title} description={description}>
+    <header>
+        <div class="mx-auto max-w-7xl px-4 py-2 sm:py-4 lg:px-6 text-center">
+            <h1
+                class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl"
+            >
+                CIDR Subnet Guide
+            </h1>
+            <p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto text-gray-700">
+                Convert CIDR blocks to IP ranges and master subnetting for IPv4
+                &amp; IPv6 — in one streamlined resource.
+            </p>
+        </div>
+    </header>
+
+    <section class="hidden sm:block">
+        <Cidr client:load />
+    </section>
+
+    <nav
+        aria-label="Page sections"
+        class="hidden sm:block sticky top-0 z-10 pt-1 my-6 border-0 sm:border border-gray-300 rounded-lg bg-white/70 shadow-md"
+    >
+        <div class="mx-auto max-w-4xl px-4">
+            <ul
+                class="flex flex-wrap justify-center gap-8 py-3 text-base font-medium text-gray-700"
+            >
+                <li>
+                    <a
+                        href="#what-is-cidr"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >What is CIDR?</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#cidr-to-ip"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >CIDR → IP range</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#subnetting-tutorial"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >Subnetting tutorial</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#ipv6"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >IPv6 basics</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#faq"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >FAQ</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#resources"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >Resources</a
+                    >
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <Prose>
+        <GuideContent />
+    </Prose>
+
+    {/** Structured‑data block */}
+    <script
+        type="application/ld+json"
+        is:inline
+        set:html={JSON.stringify(faqJsonLd, null, 2)}
+    />
+</Layout>
-- 
cgit v1.3.1