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 /)
This commit is contained in:
Blboun3 2024-05-30 13:27:24 +02:00
parent 18eb59ff2a
commit d377b3d739
No known key found for this signature in database
3 changed files with 30 additions and 33 deletions

View File

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

View File

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

View File

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