Add embed page and more cleanup

1 files changed, 84 insertions, 0 deletions

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>