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

@@ -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
 	);
 }
 ---

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>
+  <SinglePage>
+    <slot />
+  </SinglePage>
+</MainLayout>

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