diff options
| -rw-r--r-- | src/components/Prose.astro | 15 | ||||
| -rw-r--r-- | src/content/cidr-guide.md | 15 | ||||
| -rw-r--r-- | src/pages/subnet-guide.astro | 54 |
3 files changed, 13 insertions, 71 deletions
diff --git a/src/components/Prose.astro b/src/components/Prose.astro index 43a8ca2..e7aeed1 100644 --- a/src/components/Prose.astro +++ b/src/components/Prose.astro @@ -14,15 +14,18 @@ prose-ul:my-6 prose-ul:list-disc prose-ul:pl-6 prose-ol:my-6 prose-ol:list-decimal prose-ol:pl-6 prose-li:my-2 prose-li:text-gray-900 - prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:pl-4 prose-blockquote:py-1 prose-blockquote:my-6 prose-blockquote:bg-blue-50 prose-blockquote:rounded-r-md - prose-blockquote:text-gray-900 prose-blockquote:italic + prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:pl-4 prose-blockquote:py-3 prose-blockquote:my-6 prose-blockquote:bg-blue-50 prose-blockquote:rounded-md + prose-blockquote:text-gray-900 prose-blockquote:font-normal prose-blockquote:before:content-none prose-blockquote:after:content-none prose-img:rounded-lg prose-img:shadow-md prose-img:my-8 prose-hr:hidden prose-code:font-mono prose-code:text-blue-700 prose-code:bg-blue-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:border prose-code:border-blue-100 - prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-200 prose-pre:p-4 prose-pre:rounded-lg prose-pre:overflow-x-auto prose-pre:my-6 - prose-pre:shadow-sm prose-pre:text-sm - [&_pre_code]:text-gray-800 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:border-0 - dark:prose-invert dark:prose-pre:bg-gray-800 dark:prose-pre:border-gray-700 dark:prose-code:bg-gray-700 dark:prose-code:border-gray-600 dark:prose-code:text-blue-300 dark:prose-blockquote:bg-gray-800 dark:[&_pre_code]:text-gray-900" + prose-pre:bg-gray-800 prose-pre:border prose-pre:border-gray-700 prose-pre:p-4 prose-pre:rounded-lg prose-pre:overflow-x-auto prose-pre:my-6 + prose-pre:shadow-sm prose-pre:text-sm prose-pre:text-gray-300 + [&_pre_code]:text-gray-300 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:border-0 + dark:prose-invert + dark:prose-pre:bg-gray-800 dark:prose-pre:border-gray-700 + dark:prose-code:bg-gray-700 dark:prose-code:border-gray-600 dark:prose-code:text-blue-300 + dark:prose-blockquote:bg-gray-800 dark:prose-blockquote:text-gray-300 dark:prose-blockquote:border-blue-700" > <slot /> </div> diff --git a/src/content/cidr-guide.md b/src/content/cidr-guide.md index 38fe8b2..1ba0da7 100644 --- a/src/content/cidr-guide.md +++ b/src/content/cidr-guide.md @@ -1,9 +1,3 @@ -# CIDR Calculator & Subnet Guide - -Convert CIDR blocks to IP ranges and master subnetting for IPv4 & IPv6—all in one place. - ---- - ## What is CIDR? **Classless Inter-Domain Routing (CIDR)** is the system that replaced the old class-A/B/C scheme in 1993. @@ -43,10 +37,10 @@ Subnetting seems daunting until you break it into four predictable moves: 3. **List subnet starts** 0, 64, 128, 192 4. **Pick your block** Usable hosts = block size − 2 (62 in a /26) -> **Example** -> Split `172.16.0.0/16` into at least 10 equal subnets. -> *Need ≥10 blocks → 4 extra bits (2⁴ = 16)* -> New prefix = **/20**. Each /20 holds 4094 hosts. +> **Example** +> Split `172.16.0.0/16` into at least 10 equal subnets. +> *Need ≥10 blocks → 4 extra bits (2⁴ = 16)* +> New prefix = **/20**. Each /20 holds 4094 hosts. > Ranges begin 172.16.0.0, 172.16.16.0, 172.16.32.0 … to 172.16.240.0. --- @@ -71,4 +65,3 @@ Toggle **IPv6** in the calculator and try `2001:db8::/48` to explore the range g * RFC 4632 — *Classless Inter-Domain Routing for IPv6* * RFC 1519 — *CIDR Address Allocation for IPv4* * [cidr.xyz source code](https://github.com/yuvadm/cidr.xyz) -* *Subnetting Examples* blog series (coming soon) diff --git a/src/pages/subnet-guide.astro b/src/pages/subnet-guide.astro index cbe3d65..98d892f 100644 --- a/src/pages/subnet-guide.astro +++ b/src/pages/subnet-guide.astro @@ -44,60 +44,6 @@ import { Content as GuideContent } from "../content/cidr-guide.md"; <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> |