Canonical path

3 files changed, 18 insertions, 14 deletions

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 03bca69..8aaf7ef 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -51,7 +51,7 @@ const {
 			name="robots"
 			content={noindex ? "noindex, follow" : "index, follow"}
 		/>
-		<link rel="canonical" href="https://cidr.xyz" />
+		<link rel="canonical" href={`https://cidr.xyz${Astro.url.pathname}`} />
 
 		{
 			!noindex && (
diff --git a/src/pages/cidr-calculator-subnet-guide.astro b/src/pages/cidr-calculator-subnet-guide.astro
index 9d9161e..3f2c4d1 100644
--- a/src/pages/cidr-calculator-subnet-guide.astro
+++ b/src/pages/cidr-calculator-subnet-guide.astro
@@ -27,6 +27,12 @@ import { Content as GuideContent } from "../content/cidr-guide.md";
 
 <Layout title={title} description={description}>
     <header>
+        <a href="/" class="group flex items-center text-blue-600 transition-all duration-300 hover:text-blue-800">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 transform transition-transform duration-300 group-hover:-translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            <span class="hover:underline">Back Home</span>
+        </a>
         <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"
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ef13cf6..9458dab 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,7 +4,8 @@ import Cidr from "../components/Cidr";
 import { faqs } from "../content/faqs.ts";
 
 const title = "Interactive visual CIDR and IP range calculator";
-const description = "Instantly compute and visualize CIDR subnets, IP ranges and masks. Free online tool for accurate network design, planning and IT education.";
+const description =
+	"Instantly compute and visualize CIDR subnets, IP ranges and masks. Free online tool for accurate network design, planning and IT education.";
 
 const faqJsonLd = {
 	"@context": "https://schema.org",
@@ -19,23 +20,22 @@ const faqJsonLd = {
 
 <Layout title={title} description={description}>
 	<h1
-		class="my-3 sm:my-1 text-center sm:text-left text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl"
+		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"
 	>
-		IP / CIDR Calculator
+		CIDR Calculator
 	</h1>
 	<h2 class="pt-1 text-xl text-center sm:text-left text-gray-600">
 		Visualize and Calculate Network Ranges with IPv4 CIDR Blocks
 	</h2>
+	<a
+		href="/cidr-calculator-subnet-guide"
+		class="text-blue-600 hover:underline">Read the guide</a
+	>
 
 	<Cidr client:load />
 
-	<section
-		id="faq-section"
-		class="mx-auto mt-12 max-w-3xl px-4 sm:px-0"
-	>
-		<h2 id="faq" class="mb-4 text-2xl font-bold">
-			CIDR & Subnetting FAQ
-		</h2>
+	<section id="faq-section" class="mx-auto mt-12 max-w-3xl px-4 sm:px-0">
+		<h2 id="faq" class="mb-4 text-2xl font-bold">CIDR & Subnetting FAQ</h2>
 
 		<dl class="space-y-2">
 			{
@@ -62,9 +62,7 @@ const faqJsonLd = {
 								/>
 							</svg>
 						</summary>
-						<dd class="px-4 pb-4 pt-1 text-gray-700">
-							{a}
-						</dd>
+						<dd class="px-4 pb-4 pt-1 text-gray-700">{a}</dd>
 					</details>
 				))
 			}