chore: add path alias

feat: add category page

src/components/Header.astro

@@ -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 />

src/components/Post.astro

@@ -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>

src/content/blog/ataturk-ve-demokratik-turkiye.md

@@ -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

src/content/blog/babur-5-bolum-kaptan-ile-mucadele.md

@@ -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

src/content/blog/bir-componentin-seruveni.md

@@ -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

src/content/config.ts

@@ -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(),
   }),
 });
 

src/pages/category/[category].astro

@@ -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>

src/pages/index.astro

@@ -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");
 ---

tsconfig.json

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