chore: add path alias

feat: add category page
This commit is contained in:
log101 2024-05-11 20:08:36 +03:00
parent 4cbca8ccd7
commit 65ebab416f
9 changed files with 136 additions and 46 deletions

View File

@ -1,5 +1,5 @@
---
import { CATEGORIES } from "../content/config";
---
<style>
@ -88,11 +88,22 @@ import { CATEGORIES } from "../content/config";
<div>
<ul class="nav-links undecorated-anchor">
{
Object.entries(CATEGORIES).map(([k, v]) => (
<li>
<a href={`/category/${k}`}>{v}</a>
</li>
))
(
<>
<li>
<a href={`/category/fikir`}>Fikir</a>
</li>
<li>
<a href={`/category/teknik`}>Teknik</a>
</li>
<li>
<a href={`/category/edebiyat`}>Babür'ün Serüvenleri</a>
</li>
<li>
<a href={`/category/ansiklopedi`}>Ansiklopedi</a>
</li>
</>
)
}
</ul>
<hr />

View File

@ -1,8 +1,36 @@
---
const { data } = Astro.props;
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;
}
---
<style>
p {
margin: 0;
padding: 0;
}
.post {
display: flex;
flex-direction: column;
@ -10,8 +38,6 @@ const { data } = Astro.props;
}
.post-category {
margin: 0;
padding: 0;
color: #2f4f4f;
letter-spacing: 0.03em;
}
@ -23,29 +49,51 @@ const { data } = Astro.props;
padding: 0;
}
.post-summary {
.post-date {
color: gray;
font-size: var(--small-desktop);
}
.tags-and-date {
display: flex;
gap: 8px;
align-items: center;
}
.post-tags {
display: flex;
flex-direction: row;
gap: 4px;
margin: 0;
padding: 0;
}
.post-date {
margin: 0;
padding: 0;
color: gray;
.post-tags li {
list-style-type: none;
color: #6d6d6d;
font-size: var(--small-desktop);
}
</style>
<div class="post">
<p class="post-category">{data.category}</p>
<h4 class="post-title">{data.title}</h4>
<p class="post-date">
{
data.date.toLocaleDateString("tr-TR", {
day: "numeric",
month: "long",
year: "numeric",
})
}
</p>
<p class="post-summary">{data.summary}</p>
<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>}
</div>

View File

@ -1,7 +1,8 @@
---
title: "Atatürk ve Demokratik Türkiye"
summary: Halil İnalcık'ın kaleminden Türkiye Cumhuriyet'nin kuruluş hikayesi ve Atatürk inkılaplarının toplumdaki akisleri.
category: Kitap İncelemesi
category: fikir
subcategory: Kitap İncelemesi
date: 2024-03-15
tags:
- kitap

View File

@ -1,7 +1,8 @@
---
title: "5. Bölüm: Kaptan ile Mücadele"
summary: "Babür'ün önünde yalnızca tek bir engel kalmıştır: Komutan."
category: Öykü
category: edebiyat
subcategory: Öykü
date: 2024-03-03
tags:
- babür

View File

@ -1,7 +1,8 @@
---
title: "Bir Komponentin Serüveni: Astro"
summary: Yazdığınız komponentlere ne olur? Bu yazıda Astro komponentlerinin serüvenlerine göz atıyoruz!
category: Teknik Yazı
category: teknik
subcategory: Teknik Yazı
date: 2024-04-01
tags:
- astro

View File

@ -1,11 +1,6 @@
import { z, defineCollection } from "astro:content";
export const CATEGORIES = {
fikir: "Fikir",
teknik: "Teknik",
edebiyat: "Babür'ün Serüvenleri",
ansiklopedi: "Ansiklopedi",
};
export const CATEGORIES = ["fikir", "teknik", "edebiyat", "ansiklopedi"];
const blogCollection = defineCollection({
type: "content",
@ -14,7 +9,8 @@ const blogCollection = defineCollection({
tags: z.array(z.string()),
summary: z.string(),
date: z.date(),
category: z.enum(["Kitap İncelemesi", "Teknik Yazı", "Öykü"]),
category: z.enum(["fikir", "teknik", "edebiyat", "ansiklopedi"]),
subcategory: z.string(),
}),
});

View File

@ -1,15 +1,41 @@
---
import { getCollection } from "astro:content";
import { CATEGORIES } from "../../content/config";
import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";
import Layout from "@/layouts/Layout.astro";
import Post from "@/components/Post.astro";
import "@/styles/home.css";
export function getStaticPaths() {
return Object.keys(CATEGORIES).map((k) => {
return CATEGORIES.map((c) => {
return {
params: { category: k },
params: { category: c },
};
});
}
const { category } = Astro.params;
const allTeknikPosts = await getCollection(
"blog",
(post) => post.data.category === category
);
---
<div>Catakulli, {category}!</div>
<Layout title="log101">
<div class="container">
<Header />
<div class="posts">
{
allTeknikPosts
.sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
.map((p) => <Post post={p} componentType="long" />)
}
</div>
<a class="home-all-posts" href="#">Tüm Yayınlar</a>
<Footer />
</div>
</Layout>

View File

@ -1,11 +1,11 @@
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Layout from "../layouts/Layout.astro";
import "../styles/home.css";
import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";
import Layout from "@/layouts/Layout.astro";
import "@/styles/home.css";
import { getCollection } from "astro:content";
import Post from "../components/Post.astro";
import Post from "@/components/Post.astro";
const allTeknikPosts = await getCollection("blog");
---

View File

@ -1,3 +1,9 @@
{
"extends": "astro/tsconfigs/strict"
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}