From d377b3d739c44339432c37fee7167b8ff1b4a8da Mon Sep 17 00:00:00 2001
From: Blboun3 <62328614+Blboun3@users.noreply.github.com>
Date: Thu, 30 May 2024 13:27:24 +0200
Subject: [PATCH] Fixed navbar current page in blog posts

When in blog post the current page on navbar is highlighting now blog (previously was none, since url != /blog nor /)
---
 src/components/Navbar.astro           | 10 ++++++---
 src/layouts/BlogPost.astro            | 21 +++++-------------
 src/pages/[lang]/blog/[...slug].astro | 32 +++++++++++++++------------
 3 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index eed4180..2cc0c3e 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -6,10 +6,14 @@ import { LangSwitcher } from "./LangSwitcher";
 import { NavButton } from "./NavButton";
 
 function selected(path) {
-	return (
-		(Astro.url.pathname
+	var currentURL = Astro.url.pathname
 			.replace(Astro.currentLocale + "/", "")
-			.slice(0, -1) || "/") == path
+			.slice(0, -1) || "/";
+	if( path == "/blog" && currentURL.startsWith("/blog") ){
+		return (true);
+	}
+	return (
+		currentURL == path
 	);
 }
 ---
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 6900fa5..727d367 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -6,26 +6,15 @@ import MainLayout from "./MainLayout.astro";
 
 type Props = CollectionEntry<"blog">["data"];
 
-const { title, description, publishDate, language } =
-  Astro.props;
+const { title, description, language } = Astro.props;
 ---
 
 <MainLayout
   title={title}
   description={description}
-  publishDate={publishDate}
   lang={language}
 >
-  <article>
-    <div class="prose">
-      <div class="title">
-        <div class="date">
-          <FormattedDate date={publishDate} />
-        </div>
-        <h1>{title}</h1>
-        <hr />
-      </div>
-      <slot />
-    </div>
-  </article>
-</MainLayout>
\ No newline at end of file
+  <SinglePage>
+    <slot />
+  </SinglePage>
+</MainLayout>
diff --git a/src/pages/[lang]/blog/[...slug].astro b/src/pages/[lang]/blog/[...slug].astro
index 0e855e0..1e295de 100644
--- a/src/pages/[lang]/blog/[...slug].astro
+++ b/src/pages/[lang]/blog/[...slug].astro
@@ -3,29 +3,33 @@ import { getBlogPosts } from "../../../content/config";
 import BlogPost from "../../../layouts/BlogPost.astro";
 
 export async function getStaticPaths() {
-	const pages = await getBlogPosts();
+  const pages = await getBlogPosts();
 
-	const paths = pages.map((page) => {
-		return {
+  const paths = pages.map((page) => {
+    return {
       // @ts-ignore
-			params: { lang: page?.data.language || "en", slug: page.blog_slug },
-			props: page,
-		};
-	});
+      params: { lang: page?.data.language || "en", slug: page.blog_slug },
+      props: page,
+    };
+  });
 
-	return paths;
+  return paths;
 }
 
-const { lang, slug } = Astro.params;
+const { lang } = Astro.params;
 const page = Astro.props;
 // @ts-ignore
-const formattedDate = page.data?.date?.toLocaleString(lang);
+const formattedDate = page.data.publishDate.toLocaleString(lang);
 
 const { Content } = await page.render();
 ---
 
 <BlogPost {...page.data} language={lang}>
-	<h1>{page.data.title}</h1>
-	<p>by {page.data.author} • {formattedDate}</p>
-	<Content />
-</BlogPost>
\ No newline at end of file
+  <div class="text-center">
+    <h1 class="text-4xl">{page.data.title}</h1>
+    <p>{page.data.author} • {formattedDate}</p>
+  </div>
+  <div id="content">
+    <Content />
+  </div>
+</BlogPost>