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"; import { NavButton } from "./NavButton";
function selected(path) { function selected(path) {
return ( var currentURL = Astro.url.pathname
(Astro.url.pathname
.replace(Astro.currentLocale + "/", "") .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"]; type Props = CollectionEntry<"blog">["data"];
const { title, description, publishDate, language } = const { title, description, language } = Astro.props;
Astro.props;
--- ---
<MainLayout <MainLayout
title={title} title={title}
description={description} description={description}
publishDate={publishDate}
lang={language} lang={language}
> >
<article> <SinglePage>
<div class="prose"> <slot />
<div class="title"> </SinglePage>
<div class="date">
<FormattedDate date={publishDate} />
</div>
<h1>{title}</h1>
<hr />
</div>
<slot />
</div>
</article>
</MainLayout> </MainLayout>

View File

@ -3,29 +3,33 @@ import { getBlogPosts } from "../../../content/config";
import BlogPost from "../../../layouts/BlogPost.astro"; import BlogPost from "../../../layouts/BlogPost.astro";
export async function getStaticPaths() { export async function getStaticPaths() {
const pages = await getBlogPosts(); const pages = await getBlogPosts();
const paths = pages.map((page) => { const paths = pages.map((page) => {
return { return {
// @ts-ignore // @ts-ignore
params: { lang: page?.data.language || "en", slug: page.blog_slug }, params: { lang: page?.data.language || "en", slug: page.blog_slug },
props: page, props: page,
}; };
}); });
return paths; return paths;
} }
const { lang, slug } = Astro.params; const { lang } = Astro.params;
const page = Astro.props; const page = Astro.props;
// @ts-ignore // @ts-ignore
const formattedDate = page.data?.date?.toLocaleString(lang); const formattedDate = page.data.publishDate.toLocaleString(lang);
const { Content } = await page.render(); const { Content } = await page.render();
--- ---
<BlogPost {...page.data} language={lang}> <BlogPost {...page.data} language={lang}>
<h1>{page.data.title}</h1> <div class="text-center">
<p>by {page.data.author} • {formattedDate}</p> <h1 class="text-4xl">{page.data.title}</h1>
<Content /> <p>{page.data.author} • {formattedDate}</p>
</div>
<div id="content">
<Content />
</div>
</BlogPost> </BlogPost>