Add embed page and more cleanup

6 files changed, 115 insertions, 86 deletions

diff --git a/src/components/Cidr.tsx b/src/components/Cidr.tsx
index e1b1feb..ac22ea6 100644
--- a/src/components/Cidr.tsx
+++ b/src/components/Cidr.tsx
@@ -1,7 +1,11 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { Netmask } from 'netmask';
 
-export default function Cidr() {
+interface CidrProps {
+    embed?: boolean;
+}
+
+export default function Cidr({ embed = false }: CidrProps) {
     const [ip, setIp] = useState([10, 88, 135, 144]);
     const [cidr, setCidr] = useState(28);
     const [cols] = useState(["bg-purple-400", "bg-red-400", "bg-green-400", "bg-yellow-400", "bg-slate-300"]);
@@ -221,7 +225,7 @@ export default function Cidr() {
 
 
     return (
-        <div className="pt-1 my-6 border-0 sm:border border-gray-300 rounded-lg bg-white/70 shadow-md">
+        <div className={`pt-1 ${embed ? 'my-2' : 'my-6'} border-0 sm:border border-gray-300 rounded-lg bg-white/70 shadow-md`}>
             <div className="flex flex-wrap justify-center gap-4 my-10">
                 {ip.map((octet, i) => (
                     <div key={`octet-${i}`}>
@@ -273,6 +277,14 @@ export default function Cidr() {
                 }
             </div>
 
+            {embed && (<h2 className="text-lg text-gray-700 text-center mt-4 font-bold">
+                CIDR Calculator by <a
+                    href="https://cidr.xyz"
+                    target="_blank"
+                    className="text-blue-600 hover:underline">cidr.xyz</a
+                >
+            </h2>)}
+
             <div className="flex justify-center lg:justify-end p-5">
                 <div className="mx-2">
                     <button
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index b5ef2a7..1aeca32 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -73,7 +73,7 @@ function NavLinks({ mobile = false }: { mobile?: boolean }) {
       <a href="/subnet-guide" className={linkClass}>
         Subnet Guide
       </a>
-      <a href="/embed-example" className={linkClass}>
+      <a href="/embed-widget" className={linkClass}>
         Embed
       </a>
       <a
diff --git a/src/pages/embed-example.astro b/src/pages/embed-example.astro
deleted file mode 100644
index f66feab..0000000
--- a/src/pages/embed-example.astro
+++ /dev/null
@@ -1,66 +0,0 @@
----
-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-widget.astro b/src/pages/embed-widget.astro
new file mode 100644
index 0000000..eafed9e
--- /dev/null
+++ b/src/pages/embed-widget.astro
@@ -0,0 +1,84 @@
+---
+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}>
+	<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 Widget
+			</h1>
+			<p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto text-gray-700">
+				Embed the CIDR Calculator in your website
+			</p>
+		</div>
+	</header>
+
+	<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="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>
+	</div>
+
+	<div class="border border-gray-300 rounded-lg shadow-md mb-8">
+		<iframe
+			src="/embed"
+			width="100%"
+			height="600"
+			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
index 3496287..f924445 100644
--- a/src/pages/embed.astro
+++ b/src/pages/embed.astro
@@ -3,10 +3,11 @@ 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";
+const description =
+	"Embeddable CIDR calculator widget for network calculations";
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
@@ -29,17 +30,12 @@ const description = "Embeddable CIDR calculator widget for network calculations"
 				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
+			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() {
@@ -50,21 +46,24 @@ const description = "Embeddable CIDR calculator widget for network calculations"
 		</script>
 	</head>
 	<body>
-		<div class="embed-container">
-			<Cidr client:load />
+		<div class="w-full h-full p-2 box-border">
+			<Cidr client:load embed={true} />
 		</div>
 
 		<script is:inline>
 			// Handle messages from parent window for potential configuration
-			window.addEventListener('message', (event) => {
+			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', () => {
+			window.addEventListener("load", () => {
 				if (window.parent !== window) {
-					window.parent.postMessage({ type: 'cidr-widget-loaded' }, '*');
+					window.parent.postMessage(
+						{ type: "cidr-widget-loaded" },
+						"*",
+					);
 				}
 			});
 		</script>
diff --git a/src/pages/subnet-guide.astro b/src/pages/subnet-guide.astro
index 9a0d67f..cbe3d65 100644
--- a/src/pages/subnet-guide.astro
+++ b/src/pages/subnet-guide.astro
@@ -35,7 +35,7 @@ import { Content as GuideContent } from "../content/cidr-guide.md";
             </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.
+                — in one streamlined resource.
             </p>
         </div>
     </header>