krem
/
Kremta-Website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement blog functionality with posts and layout

This commit is contained in:
Krem 2025-10-16 20:31:02 +02:00
parent 69bfe8a797
commit ecf90a59ef
10 changed files with 202 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
src/components/Blog.astro
View File

@ -1,163 +0,0 @@
---
// TODO: List some projects
const projects = [
{
name: "My First Blog Post",
url: "/posts/post-1/",
color: "var(--ctp-lavender)",
},
{
name: "My Second Blog Post",
url: "/posts/post-2/",
color: "var(--ctp-lavender)",
},
{
name: "My Third Blog Post",
url: "/posts/post-3/",
color: "var(--ctp-lavender)",
},
];
---
<section class="project">
<div class="content">
<h2 class="section-title">Blog</h2>
<div class="projects">
{
projects.map((project) => (
<a
href={project.url}
class="project-link"
target="_blank"
rel="noopener noreferrer"
style={`--project-color: ${project.color}`}
>
<span class="project-icon">◈</span>
<span class="project-name">{project.name}</span>
<svg class="project-arrow" viewBox="0 0 24 24" fill="none">
<path
d="M7 17L17 7M17 7H7M17 7V17"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
))
}
</div>
</div>
</section>
<style>
.project {
padding: 6rem 2rem;
display: flex;
justify-content: center;
}
.content {
max-width: 600px;
width: 100%;
}
.section-title {
font-size: 2rem;
font-weight: 600;
color: var(--ctp-text);
margin-bottom: 3rem;
text-align: center;
}
.projects {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.project-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem 2rem;
background-color: var(--ctp-surface0);
border: 2px solid var(--project-color);
border-radius: 12px;
text-decoration: none;
color: var(--ctp-text);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.project-link::before {
content: "";
position: absolute;
inset: -1px;
background-color: var(--project-color);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.project-link:hover::before {
transform: scaleX(1);
}
.project-icon {
font-size: 1.5rem;
color: var(--project-color);
transition: all 0.3s ease;
z-index: 1;
}
.project-name {
flex: 1;
font-size: 1.25rem;
font-weight: 500;
z-index: 1;
transition: color 0.3s ease;
}
.project-arrow {
width: 24px;
height: 24px;
color: var(--project-color);
transition: all 0.3s ease;
z-index: 1;
}
.project-link:hover {
transform: translateX(8px);
}
.project-link:hover .project-icon,
.project-link:hover .project-arrow {
color: var(--ctp-base);
}
.project-link:hover .project-name {
color: var(--ctp-base);
}
@media (max-width: 600px) {
.project {
padding: 4rem 2rem;
}
.section-title {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.project-link {
padding: 1.25rem 1.5rem;
}
.project-name {
font-size: 1.1rem;
}
}
</style>

111
src/components/Posts.astro Normal file
View File

@ -0,0 +1,111 @@
---
import { getCollection } from 'astro:content';
// Get all blog posts from your content collection
const posts = await getCollection('blog');
// Sort by date if you have a date field in frontmatter
const sortedPosts = posts.sort((a, b) =>
b.data.date.getTime() - a.data.date.getTime()
);
---
<section class="project">
<div class="content">
<h2 class="section-title">Blog</h2>
<div class="posts">
{
await Promise.all(sortedPosts.map(async (post) => {
const { Content } = await post.render();
return (
<article class="post">
<h3 class="post-title">{post.data.title}</h3>
<div class="post-content">
<Content />
</div>
</article>
);
}))
}
</div>
</div>
</section>
<style>
.project {
padding: 6rem 2rem;
display: flex;
justify-content: center;
}
.content {
max-width: 800px;
width: 100%;
}
.section-title {
font-size: 2rem;
font-weight: 600;
color: var(--ctp-text);
margin-bottom: 3rem;
text-align: center;
}
.posts {
display: flex;
flex-direction: column;
gap: 3rem;
}
.post {
padding: 2rem;
background-color: var(--ctp-surface0);
border: 2px solid var(--ctp-lavender);
border-radius: 12px;
}
.post-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--ctp-text);
margin-bottom: 1.5rem;
}
.post-content {
color: var(--ctp-text);
line-height: 1.6;
}
/* Style markdown content */
.post-content :global(p) {
margin-bottom: 1rem;
}
.post-content :global(h1),
.post-content :global(h2),
.post-content :global(h3) {
margin-top: 1.5rem;
margin-bottom: 1rem;
color: var(--ctp-lavender);
}
.post-content :global(code) {
background-color: var(--ctp-mantle);
padding: 0.2rem 0.4rem;
border-radius: 4px;
}
@media (max-width: 600px) {
.project {
padding: 4rem 1rem;
}
.section-title {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.post {
padding: 1.5rem;
}
}
</style>

21
src/content/blog/first-post.md Normal file
View File

@ -0,0 +1,21 @@
---
title: "My First Blog Post"
date: 2025-10-16
description: "This is my first blog post"
---
# Welcome to my blog!
This is the content of my first blog post.
## Features
- Markdown support
- Code blocks
- And more!
# Hello World
```javascript
console.log("Hello, world!");
```

21
src/content/blog/second-post.md Normal file
View File

@ -0,0 +1,21 @@
---
title: "My First Blog Post"
date: 2025-10-16
description: "This is my first blog post"
---
# Welcome to my blog!
This is the content of my first blog post.
## Features
- Markdown support
- Code blocks
- And more!
# Hello World
```javascript
console.log("Hello, world!");
```

12
src/content/config.ts Normal file
View File

@ -0,0 +1,12 @@
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
date: z.coerce.date(),
description: z.string().optional(),
}),
});
export const collections = { blog };

29
src/pages/blog.astro Normal file
View File

@ -0,0 +1,29 @@
---
import Layout from "../layouts/Layout.astro";
import Intro from "../components/Intro.astro";
//import Projects from "../components/Projects.astro";
import Posts from "../components/Posts.astro";
import WaveDivider from "../components/WaveDivider.astro";
//import Webring from "../components/Webring.astro";
//import SpotifyNowPlaying from "../components/SpotifyNowPlaying.astro";
import Socials from "../components/Socials.astro";
// TODO: Fill in your preferences.
const variables = {
name: "Kristian Emil Takvam",
subtitles:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lobortis nisi ante, nec tincidunt ligula mattis nec. Maecenas metus mauris, fermentum et vulputate ut, dapibus vel massa.",
};
---
<Layout title={variables.name}>
<main>
<Intro name={variables.name} subtitle={variables.subtitles} />
<WaveDivider color="rosewater" speed={100} size={0.8} direction="left" />
<Posts />
<WaveDivider color="teal" speed={100} size={0.8} direction="left" />
<Socials />
</main>
</Layout>

4
src/pages/index.astro
View File

@ -2,7 +2,7 @@
import Layout from "../layouts/Layout.astro";
import Intro from "../components/Intro.astro";
import Projects from "../components/Projects.astro";
import Blog from "../components/Blog.astro";
import Posts from "../components/Posts.astro";
import WaveDivider from "../components/WaveDivider.astro";
import Webring from "../components/Webring.astro";
import SpotifyNowPlaying from "../components/SpotifyNowPlaying.astro";
@ -21,7 +21,7 @@ const variables = {
<Intro name={variables.name} subtitle={variables.subtitles} />
<WaveDivider color="rosewater" speed={100} size={0.8} direction="left" />
<Blog />
<Posts />
<WaveDivider color="teal" speed={100} size={0.8} direction="left" />
<Projects />

11
src/pages/posts/post-1.md
View File

@ -1,13 +1,6 @@
---
layout: ../../layouts/PostLayout.astro
title: 'My First Blog Post'
pubDate: 2022-07-01
description: 'This is the first post of my new Astro blog.'
author: 'Astro Learner'
image:
url: 'https://docs.astro.build/assets/rose.webp'
alt: 'The Astro logo on a dark background with a pink glow.'
tags: ["astro", "blogging", "learning in public"]
title: "My First Blog Post"
date: 2025-01-01
---
# My First Blog Post

11
src/pages/posts/post-2.md
View File

@ -1,12 +1,5 @@
---
layout: ../../layouts/PostLayout.astro
title: My Second Blog Post
author: Astro Learner
description: "After learning some Astro, I couldn't stop!"
image:
url: "https://docs.astro.build/assets/arc.webp"
alt: "The Astro logo on a dark background with a purple gradient arc."
pubDate: 2022-07-08
tags: ["astro", "blogging", "learning in public", "successes"]
title: "My First Blog Post"
date: 2025-01-01
---
After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!

11
src/pages/posts/post-3.md
View File

@ -1,12 +1,5 @@
---
layout: ../../layouts/PostLayout.astro
title: My Third Blog Post
author: Astro Learner
description: "I had some challenges, but asking in the community really helped!"
image:
url: "https://docs.astro.build/assets/rays.webp"
alt: "The Astro logo on a dark background with rainbow rays."
pubDate: 2022-07-15
tags: ["astro", "learning in public", "setbacks", "community"]
title: "My First Blog Post"
date: 2025-01-01
---
It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful!