valentineus/popov.link
0
Fork 0
mirror of https://github.com/valentineus/popov.link.git synced 2025-07-04 00:20:26 +03:00
Code Issues Releases Activity

feat: add header component and update blog layout

Browse Source 
- Introduced a new Header component for site navigation.
- Integrated Header into BaseLayout for consistent site structure.
- Updated blog post layout to include the post title in a dedicated section.
- Minor update to README for license clarity.
This commit is contained in:
Valentin Popov
2025-06-10 13:44:56 +00:00
parent dfe9115ac9
commit bb7481670e
4 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Header.astro Normal file
View File

@ -0,0 +1,22 @@
<style lang="scss">
@import "../scss/_variables.scss";
header {
padding-bottom: 1rem;
text-align: right;
}
a {
text-decoration: none;
margin-right: 1.5rem;
&:last-child {
margin-right: 0;
}
}
</style>
<header>
<a href="/">Home</a>
<a href="/blog">Blog</a>
</header>

5
src/layouts/BaseLayout.astro
View File

@ -1,6 +1,7 @@
--- ---
import Analytics from "../components/Analytics.astro"; import Analytics from "../components/Analytics.astro";
import Head from "../components/Head.astro"; import Head from "../components/Head.astro";
import Header from "../components/Header.astro";
import "../scss/global.scss"; import "../scss/global.scss";
type Props = { type Props = {
@ -19,6 +20,10 @@ const { description, title } = Astro.props;
<body> <body>
<main> <main>
<section>
<Header />
</section>
<slot /> <slot />
</main> </main>
<Analytics title={title ?? import.meta.env.DEFAULT_TITLE} /> <Analytics title={title ?? import.meta.env.DEFAULT_TITLE} />

10
src/pages/blog/[...slug].astro
View File

@ -32,11 +32,13 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
<Layout description={post.data.description} title={post.data.title}> <Layout description={post.data.description} title={post.data.title}>
<article> <article>
<section>
<h1>{post.data.title}</h1>
</section>
<section> <section>
<p> <p>
<small> <small>
<a href="/">&lt; Home</a>
<span>&nbsp;•&nbsp;</span>
Posted Posted
<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time> <time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
by&nbsp;{post.data.author} by&nbsp;{post.data.author}
@ -46,10 +48,6 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
</p> </p>
</section> </section>
<section>
<h1>{post.data.title}</h1>
</section>
<section> <section>
<Content /> <Content />
</section> </section>