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>
|
||||
|
@ -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 />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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(),
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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");
|
||||
---
|
||||
|
|
|
@ -1,3 +1,9 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict"
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user