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> <style>
@ -88,11 +88,22 @@ import { CATEGORIES } from "../content/config";
<div> <div>
<ul class="nav-links undecorated-anchor"> <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> </ul>
<hr /> <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> <style>
p {
margin: 0;
padding: 0;
}
.post { .post {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -10,8 +38,6 @@ const { data } = Astro.props;
} }
.post-category { .post-category {
margin: 0;
padding: 0;
color: #2f4f4f; color: #2f4f4f;
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
@ -23,29 +49,51 @@ const { data } = Astro.props;
padding: 0; 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; margin: 0;
padding: 0; padding: 0;
} }
.post-tags li {
.post-date { list-style-type: none;
margin: 0; color: #6d6d6d;
padding: 0; font-size: var(--small-desktop);
color: gray;
} }
</style> </style>
<div class="post"> <div class="post">
<p class="post-category">{data.category}</p> <p class="post-category">{post.data.subcategory}</p>
<h4 class="post-title">{data.title}</h4> <h4 class="post-title">{post.data.title}</h4>
<p class="post-date"> <div class="tags-and-date">
{ <ul class="post-tags">
data.date.toLocaleDateString("tr-TR", { {post.data.tags.map((tag) => <li>{tag}</li>)}
day: "numeric", </ul>
month: "long",
year: "numeric", <p class="post-date">
}) {
} post.data.date.toLocaleDateString("tr-TR", {
</p> day: "numeric",
<p class="post-summary">{data.summary}</p> 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> </div>

View File

@ -1,7 +1,8 @@
--- ---
title: "Atatürk ve Demokratik Türkiye" 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. 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 date: 2024-03-15
tags: tags:
- kitap - kitap

View File

@ -1,7 +1,8 @@
--- ---
title: "5. Bölüm: Kaptan ile Mücadele" title: "5. Bölüm: Kaptan ile Mücadele"
summary: "Babür'ün önünde yalnızca tek bir engel kalmıştır: Komutan." 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 date: 2024-03-03
tags: tags:
- babür - babür

View File

@ -1,7 +1,8 @@
--- ---
title: "Bir Komponentin Serüveni: Astro" title: "Bir Komponentin Serüveni: Astro"
summary: Yazdığınız komponentlere ne olur? Bu yazıda Astro komponentlerinin serüvenlerine göz atıyoruz! 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 date: 2024-04-01
tags: tags:
- astro - astro

View File

@ -1,11 +1,6 @@
import { z, defineCollection } from "astro:content"; import { z, defineCollection } from "astro:content";
export const CATEGORIES = { export const CATEGORIES = ["fikir", "teknik", "edebiyat", "ansiklopedi"];
fikir: "Fikir",
teknik: "Teknik",
edebiyat: "Babür'ün Serüvenleri",
ansiklopedi: "Ansiklopedi",
};
const blogCollection = defineCollection({ const blogCollection = defineCollection({
type: "content", type: "content",
@ -14,7 +9,8 @@ const blogCollection = defineCollection({
tags: z.array(z.string()), tags: z.array(z.string()),
summary: z.string(), summary: z.string(),
date: z.date(), 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 { 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() { export function getStaticPaths() {
return Object.keys(CATEGORIES).map((k) => { return CATEGORIES.map((c) => {
return { return {
params: { category: k }, params: { category: c },
}; };
}); });
} }
const { category } = Astro.params; 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 Header from "@/components/Header.astro";
import Footer from "../components/Footer.astro"; import Footer from "@/components/Footer.astro";
import Layout from "../layouts/Layout.astro"; import Layout from "@/layouts/Layout.astro";
import "../styles/home.css"; import "@/styles/home.css";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import Post from "../components/Post.astro"; import Post from "@/components/Post.astro";
const allTeknikPosts = await getCollection("blog"); const allTeknikPosts = await getCollection("blog");
--- ---

View File

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