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
|
---
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 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>
<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>
|
