AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(blog): Add tags to blog posts and display them

Browse Source 
Adds a new `tags` field to the `BlogPost` interface and updates the blog post data to include relevant tags.
The `BlogArea` component is updated to display the tags for each blog post.

This change allows users to better understand the topics covered in each blog post and
improves the overall user experience.
This commit is contained in:
AderKonstantin
2025-03-26 13:48:55 +03:00
parent 7113768663
commit 67e05438a7
2 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/page.tsx
View File

@@ -22,24 +22,28 @@ const blogposts = [
body: 'Explore the fascinating world of retro futurism and its impact on modern science and culture.',
publish: '2023-10-01',
get_absolute_url: '/blog/retro-futurism',
tags: ["science", "retro", "science-friction"]
},
{
label: 'The Science Behind Video Games',
body: 'Discover how video games are pushing the boundaries of technology and human interaction.',
publish: '2023-09-25',
get_absolute_url: '/blog/science-video-games',
tags: ["science", "math", "games"]
},
{
label: 'How to install Docker & Docker Compose',
body: 'Guide to install Docker & Docker Compose on your machine.',
publish: '2023-09-25',
get_absolute_url: '/blog/docker-installation',
tags: ["docker", "docker-compose", "linux"]
},
{
label: 'Rocket Science',
body: 'Discover how rocket are work.',
publish: '2023-09-25',
get_absolute_url: '/blog/rocket-science',
tags: ["rocket", "space", "engineering"]
},
];

6
components/blogpost.tsx
View File

@@ -11,6 +11,7 @@ interface BlogPost {
body: string;
publish: string;
get_absolute_url: string;
tags: string[];
}
interface BlogAreaProps {
@@ -44,8 +45,9 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
</div>
<ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4">
<li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li>
<li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">Games</li>
<li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">Science</li>
{blogpost.tags.map((tag, index) => (
<li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">{tag}</li>
))}
</ul>
<div className="blogpost-description text-base mb-4">
{blogpost.body.slice(0, 512)}...