valentineus/popov.link
0
Fork 0
mirror of https://github.com/valentineus/popov.link.git synced 2025-07-19 22:58:48 +03:00
Code Issues Releases Activity

Compare commits

base: valentineus:d32248742050d59baf83c17a6c6566b3ecdf5614
Branches Tags
valentineus:master
...
compare: valentineus:34ce9f6162ae4ff2d0278760cce28227d82433ed
Branches Tags
valentineus:master

7 Commits
d322487420 ... 34ce9f6162

Author SHA1 Message Date
Valentin Popov
34ce9f6162 style: enhance Header component and update SCSS imports (#50) 
- Improved the Header component by adding a site title with styling.
- Wrapped navigation links in a div for better structure.
- Updated SCSS imports across multiple components for consistency.
 2025-06-10 22:38:58 +04:00
Valentin Popov
f3cc07e92c chore: migrate sass imports to use (#49) 2025-06-10 18:27:34 +04:00
Valentin Popov
d74eec1c47 Merge pull request #48 from valentineus/header 
New Header
 2025-06-10 18:20:48 +04:00
Valentin Popov
9ebcd40f60 feat: create PostElement component for blog post display 
- Added a new PostElement component to render individual blog posts with title, publication date, and reading time.
- Updated the blog index page to utilize PostElement instead of PostSummary for improved post presentation.
 2025-06-10 14:17:48 +00:00
Valentin Popov
4e8c17a6ea chore: update blog routing and header link 
- Removed the redirects for the blog route in the configuration.
- Updated the blog link in the Header component to include a trailing slash.
- Added a new index page for the blog to display all posts.
 2025-06-10 14:05:48 +00:00
Valentin Popov
6a47cb4165 refactor: remove Pagination component and restructure blog page 
- Deleted the Pagination component as it is no longer needed.
- Refactored the blog page to directly display posts without pagination.
- Introduced a new index page to list all blog posts in a single view.
 2025-06-10 14:01:27 +00:00
Valentin Popov
bb7481670e 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.
 2025-06-10 13:44:56 +00:00
13 changed files with 123 additions and 86 deletions
Expand all files Collapse all files

2
README.md
View File

@@ -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).
This project is licensed under the [MIT License](LICENSE.txt).

6
astro.config.mjs
View File

@@ -15,10 +15,4 @@ export default defineConfig({
theme: "vitesse-dark",
},
},
redirects: {
"/blog": {
destination: "/",
status: 301,
},
},
});

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

@@ -0,0 +1,38 @@
<style lang="scss">
@use "../scss/variables" as *;
header {
padding-bottom: 1rem;
position: relative;
}
.site-title {
color: $colorText;
font-weight: bold;
left: 0;
position: absolute;
text-decoration: none;
top: 0;
}
.nav-links {
text-align: right;
}
a {
margin-right: 1.5rem;
text-decoration: none;
&:last-child {
margin-right: 0;
}
}
</style>
<header>
<a class="site-title" href="/">{import.meta.env.DEFAULT_TITLE}</a>
<div class="nav-links">
<a href="/">Home</a>
<a href="/blog/">Blog</a>
</div>
</header>

35
src/components/Pagination.astro
View File

@@ -1,35 +0,0 @@
---
type Props = {
readonly nextUrl?: string;
readonly prevUrl?: string;
};
const { nextUrl, prevUrl } = Astro.props;
---
<style lang="scss">
div {
text-align: center;
}
span {
margin: 0 2em;
}
</style>
<div>
{
prevUrl && (
<span>
<a href={prevUrl}>&lt; Prev</a>
</span>
)
}
{
nextUrl && (
<span>
<a href={nextUrl}>Next &gt;</a>
</span>
)
}
</div>

32
src/components/PostElement.astro Normal file
View File

@@ -0,0 +1,32 @@
---
import { type CollectionEntry } from "astro:content";
import dayjs from "dayjs";
type Props = {
readonly post: CollectionEntry<"blog">;
};
const { post } = Astro.props;
const { remarkPluginFrontmatter } = await post.render();
const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
---
<style lang="scss">
@use "../scss/variables" as *;
small {
font-size: $fontSizeBase * 0.75;
opacity: 0.5;
}
</style>
<li>
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
<div>
<small>
<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
<span>•</span>
<span>{remarkPluginFrontmatter.minutesRead}</span>
</small>
</div>
</li>

2
src/components/PostSummary.astro
View File

@@ -12,7 +12,7 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
---
<style lang="scss">
@import "../scss/_variables.scss";
@use "../scss/variables" as *;
a {
color: $colorText;

5
src/layouts/BaseLayout.astro
View File

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

33
src/pages/[...page].astro
View File

@@ -1,33 +0,0 @@
---
import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
import { getCollection } from "astro:content";
import Layout from "../layouts/BaseLayout.astro";
import Pagination from "../components/Pagination.astro";
import PostSummary from "../components/PostSummary.astro";
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
export const getStaticPaths = (async ({ paginate }) => {
const posts = await getCollection("blog", ({ data }) => {
return data.draft !== true;
});
posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
return paginate(posts, {
pageSize: 10,
});
}) satisfies GetStaticPaths;
const { page } = Astro.props;
---
<Layout>
<section style={{ "margin-top": "3rem" }}>
{page.data.map((post) => <PostSummary post={post} />)}
</section>
<section>
<Pagination nextUrl={page.url.next} prevUrl={page.url.prev} />
</section>
</Layout>

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

@@ -23,7 +23,7 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
---
<style lang="scss">
@import "../../scss/_variables.scss";
@use "../../scss/variables" as *;
p {
opacity: 0.5;
@@ -32,11 +32,13 @@ 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="/">&lt; Home</a>
<span>&nbsp;•&nbsp;</span>
Posted
<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
by&nbsp;{post.data.author}
@@ -46,10 +48,6 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
</p>
</section>
<section>
<h1>{post.data.title}</h1>
</section>
<section>
<Content />
</section>

19
src/pages/blog/index.astro Normal file
View File

@@ -0,0 +1,19 @@
---
import { getCollection } from "astro:content";
import Layout from "../../layouts/BaseLayout.astro";
import PostElement from "../../components/PostElement.astro";
const posts = await getCollection("blog", ({ data }) => {
return data.draft !== true;
});
posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
---
<Layout>
<section style={{ "margin-top": "3rem" }}>
<ul>
{posts.map((post) => <PostElement post={post} />)}
</ul>
</section>
</Layout>

17
src/pages/index.astro Normal file
View File

@@ -0,0 +1,17 @@
---
import { getCollection } from "astro:content";
import Layout from "../layouts/BaseLayout.astro";
import PostSummary from "../components/PostSummary.astro";
const posts = await getCollection("blog", ({ data }) => {
return data.draft !== true;
});
posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
---
<Layout>
<section style={{ "margin-top": "3rem" }}>
{posts.map((post) => <PostSummary post={post} />)}
</section>
</Layout>

2
src/scss/_framework.scss
View File

@@ -1,3 +1,5 @@
@use "variables" as *;
*,
*::after,
*::before {

6
src/scss/global.scss
View File

@@ -1,3 +1,3 @@
@import "variables";
@import "framework";
@import "print";
@use "variables";
@use "framework";
@use "print";