1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
---
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}>
{
/**
────────────────────────────────────────────────────────────
Hero
────────────────────────────────────────────────────────────*/
}
<header
class="relative isolate overflow-hidden bg-gradient-to-br from-blue-50 via-indigo-50 to-white rounded-xl shadow-sm"
>
<div class="mx-auto max-w-7xl px-4 py-20 sm:py-24 lg:px-6 text-center">
<h1
class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl"
>
CIDR Calculator & 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
& IPv6 — in one streamlined resource.
</p>
</div>
</header>
{
/**
────────────────────────────────────────────────────────────
Calculator block
────────────────────────────────────────────────────────────*/
}
<section class="mx-auto mt-12 max-w-4xl px-2 sm:px-4">
<Cidr client:load />
</section>
{
/**
────────────────────────────────────────────────────────────
Table of Contents (desktop only for cleanliness)
────────────────────────────────────────────────────────────*/
}
<nav
aria-label="Page sections"
class="hidden lg:block sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-gray-200"
>
<div class="mx-auto max-w-4xl px-4">
<ul
class="flex flex-wrap justify-center gap-6 py-3 text-sm font-medium text-gray-600"
>
<li>
<a href="#what-is-cidr" class="hover:text-blue-600"
>What is CIDR?</a
>
</li>
<li>
<a href="#cidr-to-ip" class="hover:text-blue-600"
>CIDR → IP range</a
>
</li>
<li>
<a href="#subnetting-tutorial" class="hover:text-blue-600"
>Subnetting tutorial</a
>
</li>
<li>
<a href="#ipv6" class="hover:text-blue-600">IPv6 basics</a>
</li>
<li><a href="#faq" class="hover:text-blue-600">FAQ</a></li>
<li>
<a href="#resources" class="hover:text-blue-600"
>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>
|
