diff options
| author | Valentin Popov <valentin@popov.link> | 2025-06-10 16:44:56 +0300 |
|---|---|---|
| committer | Valentin Popov <valentin@popov.link> | 2025-06-10 16:44:56 +0300 |
| commit | bb7481670eedd4693f8e698261dc87243fd29448 (patch) | |
| tree | a71aa5a50b98a0e791ea6f0381457d57856ca8d5 | |
| parent | dfe9115ac9bdd55b9515c5d1ccbedfeea3b81691 (diff) | |
| download | popov.link-bb7481670eedd4693f8e698261dc87243fd29448.tar.xz popov.link-bb7481670eedd4693f8e698261dc87243fd29448.zip | |
feat: add header component and update blog layout
- 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.
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | src/components/Header.astro | 22 | ||||
| -rw-r--r-- | src/layouts/BaseLayout.astro | 5 | ||||
| -rw-r--r-- | src/pages/blog/[...slug].astro | 10 |
4 files changed, 32 insertions, 7 deletions
@@ -51,4 +51,4 @@ Comments on the site are powered by [giscus.app](https://giscus.app) and stored ## License -This project is licensed under the [MIT License](LICENSE.txt).
\ No newline at end of file +This project is licensed under the [MIT License](LICENSE.txt). diff --git a/src/components/Header.astro b/src/components/Header.astro new file mode 100644 index 0000000..b371be6 --- /dev/null +++ b/src/components/Header.astro @@ -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> diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index ca8826a..0209c58 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,6 +1,7 @@ --- import Analytics from "../components/Analytics.astro"; import Head from "../components/Head.astro"; +import Header from "../components/Header.astro"; import "../scss/global.scss"; type Props = { @@ -19,6 +20,10 @@ const { description, title } = Astro.props; <body> <main> + <section> + <Header /> + </section> + <slot /> </main> <Analytics title={title ?? import.meta.env.DEFAULT_TITLE} /> diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 41b0f5c..c4e542c 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -33,10 +33,12 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY" <Layout description={post.data.description} title={post.data.title}> <article> <section> + <h1>{post.data.title}</h1> + </section> + + <section> <p> <small> - <a href="/">< Home</a> - <span> • </span> Posted <time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time> by {post.data.author} @@ -47,10 +49,6 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY" </section> <section> - <h1>{post.data.title}</h1> - </section> - - <section> <Content /> </section> |