127 lines
3.6 KiB
Plaintext
127 lines
3.6 KiB
Plaintext
---
|
||
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, postFooter;
|
||
|
||
switch (componentType) {
|
||
case "full":
|
||
postFooter = true;
|
||
showTags = true;
|
||
fullText = true;
|
||
break;
|
||
case "long":
|
||
longSummary = true;
|
||
showTags = true;
|
||
break;
|
||
case "short":
|
||
shortSummary = true;
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
|
||
const postDateFormatted = post.data.date.toLocaleDateString("tr-TR", {
|
||
day: "numeric",
|
||
month: "long",
|
||
year: "numeric",
|
||
});
|
||
|
||
const base = import.meta.env.BASE_URL;
|
||
|
||
const postLink = `${base}/category/${post.data.category}/${post.slug}`;
|
||
|
||
const { Content } = await post.render();
|
||
---
|
||
|
||
<style>
|
||
.meta-list li {
|
||
padding-top: 0.1rem;
|
||
&:not(:last-child) {
|
||
&:after {
|
||
content: ",\00a0";
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<div class="flex flex-col gap-3">
|
||
<div class="flex flex-col">
|
||
<p class="tracking-wide text-slate-700">{post.data.subcategory}</p>
|
||
<a class="no-underline text-inherit" href={postLink}
|
||
><h4 class="text-3xl font-normal">{post.data.title}</h4></a
|
||
>
|
||
<div class="flex flex-row gap-2">
|
||
{
|
||
showTags && (
|
||
<div class="flex items-center gap-1">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="18"
|
||
height="18"
|
||
fill="#6d6d6d"
|
||
viewBox="0 0 256 256"
|
||
>
|
||
<path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" />
|
||
</svg>
|
||
<ul class="list-none flex pl-0 meta-list">
|
||
{post.data.tags.map((tag) => (
|
||
<li class="text-sm text-gray-500">{tag}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
<div class="flex items-center gap-1">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="18"
|
||
height="18"
|
||
fill="#6d6d6d"
|
||
viewBox="0 0 256 256"
|
||
><path
|
||
d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z"
|
||
></path></svg
|
||
>
|
||
<ul class="list-none flex pl-0 meta-list">
|
||
<p class="text-sm text-gray-500">{postDateFormatted}</p>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{shortSummary && <p class="post-summary">{post.data.summary}</p>}
|
||
|
||
{
|
||
longSummary && (
|
||
<>
|
||
<p class="post-long-summary">
|
||
{post.body.slice(0, 500).replace(/(<([^>]+)>)/gi, "")}
|
||
</p>
|
||
{post.body.length > 500 && (
|
||
<a
|
||
class="text-inherit text-sm"
|
||
href={`${base}/category/${post.data.category}/${post.slug}`}
|
||
>
|
||
Devamını Oku
|
||
</a>
|
||
)}
|
||
</>
|
||
)
|
||
}
|
||
{
|
||
fullText && (
|
||
<div class="text-lg">
|
||
<Content />
|
||
</div>
|
||
)
|
||
}
|
||
{postFooter && <p class="text-gray-600 text-sm">{postDateFormatted}</p>}
|
||
</div>
|