2024-05-07 16:35:30 +00:00
|
|
|
---
|
2024-05-11 17:08:36 +00:00
|
|
|
import type { CollectionEntry } from "astro:content";
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
post: CollectionEntry<"blog">;
|
|
|
|
componentType: "short" | "long" | "full";
|
|
|
|
}
|
|
|
|
|
|
|
|
const { post, componentType } = Astro.props;
|
|
|
|
|
|
|
|
let showTags, shortSummary, longSummary, fullText;
|
|
|
|
|
|
|
|
switch (componentType) {
|
|
|
|
case "full":
|
|
|
|
fullText = true;
|
|
|
|
break;
|
|
|
|
case "long":
|
|
|
|
longSummary = true;
|
|
|
|
showTags = true;
|
|
|
|
break;
|
|
|
|
case "short":
|
|
|
|
shortSummary = true;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
2024-05-07 16:35:30 +00:00
|
|
|
---
|
|
|
|
|
2024-05-11 16:24:15 +00:00
|
|
|
<style>
|
2024-05-11 17:08:36 +00:00
|
|
|
p {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
2024-05-11 16:24:15 +00:00
|
|
|
.post {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 8px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.post-category {
|
|
|
|
color: #2f4f4f;
|
|
|
|
letter-spacing: 0.03em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.post-title {
|
|
|
|
font-size: var(--h4-desktop);
|
|
|
|
font-weight: normal;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
2024-05-11 17:08:36 +00:00
|
|
|
.post-date {
|
|
|
|
color: gray;
|
|
|
|
font-size: var(--small-desktop);
|
2024-05-11 16:24:15 +00:00
|
|
|
}
|
|
|
|
|
2024-05-11 17:08:36 +00:00
|
|
|
.tags-and-date {
|
|
|
|
display: flex;
|
|
|
|
gap: 8px;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.post-tags {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
gap: 4px;
|
2024-05-11 16:24:15 +00:00
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
2024-05-11 17:08:36 +00:00
|
|
|
}
|
|
|
|
.post-tags li {
|
|
|
|
list-style-type: none;
|
|
|
|
color: #6d6d6d;
|
|
|
|
font-size: var(--small-desktop);
|
2024-05-11 16:24:15 +00:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2024-05-07 16:35:30 +00:00
|
|
|
<div class="post">
|
2024-05-11 17:08:36 +00:00
|
|
|
<p class="post-category">{post.data.subcategory}</p>
|
|
|
|
<h4 class="post-title">{post.data.title}</h4>
|
|
|
|
<div class="tags-and-date">
|
|
|
|
<ul class="post-tags">
|
|
|
|
{post.data.tags.map((tag) => <li>{tag}</li>)}
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p class="post-date">
|
|
|
|
{
|
|
|
|
post.data.date.toLocaleDateString("tr-TR", {
|
|
|
|
day: "numeric",
|
|
|
|
month: "long",
|
|
|
|
year: "numeric",
|
|
|
|
})
|
|
|
|
}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{shortSummary && <p class="post-summary">{post.data.summary}</p>}
|
|
|
|
{longSummary && <p class="post-long-summary">{post.body.slice(0, 500)}</p>}
|
|
|
|
{fullText && <p class="post-text">{post.body}</p>}
|
2024-05-07 16:35:30 +00:00
|
|
|
</div>
|