chore: add path alias
feat: add category page
This commit is contained in:
parent
4cbca8ccd7
commit
65ebab416f
|
@ -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 />
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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(),
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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");
|
||||||
---
|
---
|
||||||
|
|
|
@ -1,3 +1,9 @@
|
||||||
{
|
{
|
||||||
"extends": "astro/tsconfigs/strict"
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user