mirror of
https://github.com/valentineus/popov.link.git
synced 2025-07-03 08:00:26 +03:00
refactor: update blog layout and components
- Removed the PostSummary component and replaced it with a new PostElement component for better post display. - Introduced SocialLinks and Welcome sections to enhance the homepage layout. - Updated the index page to utilize the new sections, improving overall structure and user experience.
This commit is contained in:
@ -14,6 +14,10 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
|
||||
<style lang="scss">
|
||||
@use "../scss/variables" as *;
|
||||
|
||||
a {
|
||||
color: $colorText;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: $fontSizeBase * 0.75;
|
||||
opacity: 0.5;
|
||||
|
@ -1,49 +0,0 @@
|
||||
---
|
||||
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 *;
|
||||
|
||||
a {
|
||||
color: $colorText;
|
||||
display: block;
|
||||
padding-bottom: 3rem;
|
||||
|
||||
&:visited {
|
||||
color: $colorText;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $colorBlossom;
|
||||
font-size: 1.25em;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: $fontSizeBase * 0.75;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a href={`/blog/${post.slug}`}>
|
||||
<article>
|
||||
<div>
|
||||
<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
|
||||
<span>•</span>
|
||||
<span>{remarkPluginFrontmatter.minutesRead}</span>
|
||||
</div>
|
||||
<h2>{post.data.title}</h2>
|
||||
<p>{post.data.description}</p>
|
||||
</article>
|
||||
</a>
|
70
src/components/Sections/SocialLinks.astro
Normal file
70
src/components/Sections/SocialLinks.astro
Normal file
@ -0,0 +1,70 @@
|
||||
<style lang="scss">
|
||||
@use "../../scss/variables" as *;
|
||||
|
||||
div {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
color: $colorText;
|
||||
text-decoration: none;
|
||||
}
|
||||
a svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section>
|
||||
<div>
|
||||
<a href="https://github.com/valentineus" title="GitHub" target="_blank">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="mailto:valentin@popov.link" title="E-Mail" target="_blank">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||||
<polyline points="22,6 12,13 2,6"></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/feed.xml" title="RSS" target="_blank">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M4 11a9 9 0 0 1 9 9"></path>
|
||||
<path d="M4 4a16 16 0 0 1 16 16"></path>
|
||||
<circle cx="5" cy="19" r="1"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
10
src/components/Sections/Welcome.astro
Normal file
10
src/components/Sections/Welcome.astro
Normal file
@ -0,0 +1,10 @@
|
||||
<section>
|
||||
<div>
|
||||
<h1>Hi, I'm Valentin Popov 👋</h1>
|
||||
<p>
|
||||
I'm a professional software developer currently working as a project manager and team lead. On my personal
|
||||
website, I share insights, ideas, and articles on software development, leadership, and the digital world.
|
||||
</p>
|
||||
<p>Welcome, and feel free to explore!</p>
|
||||
</div>
|
||||
</section>
|
@ -1,17 +1,10 @@
|
||||
---
|
||||
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());
|
||||
import SocialLinksSection from "../components/Sections/SocialLinks.astro";
|
||||
import WelcomeSection from "../components/Sections/Welcome.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<section style={{ "margin-top": "3rem" }}>
|
||||
{posts.map((post) => <PostSummary post={post} />)}
|
||||
</section>
|
||||
<WelcomeSection />
|
||||
<SocialLinksSection />
|
||||
</Layout>
|
||||
|
Reference in New Issue
Block a user