feat: new post

src/components/BookReview.astro

@@ -0,0 +1,166 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+interface Props {
+  post: CollectionEntry<"bookReview">;
+  componentType: "short" | "long" | "full";
+}
+
+const { post, componentType } = Astro.props;
+
+// default options for the post component
+const deafultOptions = {
+  showTags: false,
+  shortSummary: false,
+  longSummary: false,
+  fullText: false,
+  postFooter: false,
+};
+
+const options = { ...deafultOptions };
+// Determine which options should be applied to post
+switch (componentType) {
+  case "full":
+    options.postFooter = true;
+    options.showTags = true;
+    options.fullText = true;
+    break;
+  case "long":
+    options.longSummary = true;
+    options.showTags = true;
+    break;
+  case "short":
+    options.shortSummary = true;
+    break;
+  default:
+    break;
+}
+
+// Options should not mutated further
+Object.freeze(options);
+
+// Format date
+const postDateFormatted = post.data.date.toLocaleDateString("tr-TR", {
+  day: "numeric",
+  month: "long",
+  year: "numeric",
+});
+
+// Create post link
+const postLink = `/${post.data.category}/${post.slug}`;
+
+// Create post content as an astro component
+const { Content } = await post.render();
+
+const copyPost = post;
+copyPost.body = copyPost.body.slice(0, 500);
+const { Content: Summary } = await copyPost.render();
+
+import { Image } from "astro:assets";
+import questionMark from "@/images/questionMark.svg";
+import calendar from "@/images/calendar.svg";
+---
+
+<style>
+  .meta-list li {
+    padding-top: 0.1rem;
+    &:not(:last-child) {
+      &:after {
+        content: ",\00a0";
+      }
+    }
+  }
+
+  table {
+    border: 1px solid slategrey;
+    padding: 4px;
+    background-color: #f8f9fa;
+  }
+
+  th {
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  td {
+    text-align: left;
+    white-space: nowrap;
+  }
+</style>
+
+<div class="flex flex-col gap-3">
+  <div class="flex flex-col gap-2">
+    <p class="tracking-wide text-slate-700">{post.data.subcategory}</p>
+    <a class="no-underline text-inherit" href={postLink}>
+      <h4 class="text-3xl font-normal">{post.data.title}</h4>
+    </a>
+    <div class="flex flex-row gap-2">
+      {
+        options.showTags && post.data.tags?.length && (
+          <div class="flex items-center gap-1">
+            <Image alt="question mark" src={questionMark} />
+            <ul class="list-none flex pl-0 meta-list">
+              {post.data.tags.map((tag) => (
+                <li class="text-sm text-gray-500">{tag}</li>
+              ))}
+            </ul>
+          </div>
+        )
+      }
+
+      <div class="flex items-center gap-1">
+        <Image alt="calendar" src={calendar} />
+        <ul class="list-none flex pl-0 meta-list">
+          <p class="text-sm text-gray-500">{postDateFormatted}</p>
+        </ul>
+      </div>
+    </div>
+  </div>
+  {options.shortSummary && <p class="post-summary">{post.data.summary}</p>}
+
+  {
+    options.longSummary && (
+      <>
+        <Summary />
+        {post.body.length > 500 && (
+          <a
+            class="text-inherit text-sm"
+            href={`/${post.data.category}/${post.slug}`}>
+            Devamını Oku
+          </a>
+        )}
+      </>
+    )
+  }
+  {
+    options.fullText && (
+      <div class="text-lg gap-3">
+        <table class="float-right mt-0 mb-2 mr-2 ml-2">
+          <caption class="caption-top">{post.data.title}</caption>
+          <tbody>
+            <tr>
+              <td colspan="2" style="text-align: center;">
+                <img src={post.data.bookCover.src} width="250" />
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">Yazar:</th>
+              <td>{post.data.bookAuthor}</td>
+            </tr>
+            <tr>
+              <th scope="row">Yayınevi:</th>
+              <td>{post.data.publisher}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <Content />
+      </div>
+    )
+  }
+  {
+    options.postFooter && (
+      <p class="text-gray-600 text-sm">{postDateFormatted}</p>
+    )
+  }
+</div>

src/components/Header.astro

@@ -34,11 +34,12 @@
       class="flex flex-row gap-2 items-center md:h-20 h-16"
       id="title-container">
       <a href="/" class="no-underline text-inherit -ml-[0.27rem]" id="title">
-        <h1 class="font-mono md:text-6xl text-5xl">Log101</h1>
+        <h1 class="title md:text-6xl text-5xl">Log101</h1>
       </a>
-      <div id="board" class="board"></div>
+      <div id="board" class="board mt-3"></div>
     </div>
-    <div class="border-b border-x-0 border-t-0 border-slate-900 border-solid">
+    <div
+      class="pb-2 border-b border-x-0 border-t-0 border-slate-900 border-solid">
       <ul
         class="flex md:flex-row flex-col md:items-center justify-between list-none p-0 gap-3 nav-links">
         <li>

src/components/Post.astro

@@ -52,6 +52,10 @@ const postLink = `/${post.data.category}/${post.slug}`;
 // Create post content as an astro component
 const { Content } = await post.render();
 
+const copyPost = post;
+copyPost.body = copyPost.body.slice(0, 500);
+const { Content: Summary } = await copyPost.render();
+
 import { Image } from "astro:assets";
 import questionMark from "@/images/questionMark.svg";
 import calendar from "@/images/calendar.svg";
@@ -69,7 +73,7 @@ import calendar from "@/images/calendar.svg";
 </style>
 
 <div class="flex flex-col gap-3">
-  <div class="flex flex-col">
+  <div class="flex flex-col gap-2">
     <p class="tracking-wide text-slate-700">{post.data.subcategory}</p>
     <a class="no-underline text-inherit" href={postLink}>
       <h4 class="text-3xl font-normal">{post.data.title}</h4>
@@ -101,9 +105,7 @@ import calendar from "@/images/calendar.svg";
   {
     options.longSummary && (
       <>
-        <p class="post-long-summary">
-          {post.body.slice(0, 500).replace(/(<([^>]+)>)/gi, "")}
-        </p>
+        <Summary />
         {post.body.length > 500 && (
           <a
             class="text-inherit text-sm"

src/content/blog/acilis.md

@@ -1,4 +1,5 @@
 ---
+draft: false
 title: Yayındayız!
 summary: Sayfanın açılış duyurusu.
 category: fikir
@@ -6,7 +7,7 @@ subcategory: Duyuru
 date: 2024-07-25
 ---
 
-Sabırsızlıkla beklenen [blog.log101.dev](https://blog.log101.dev) yayın hayatına başlıyor. Yazılım, edebiyat ve felsefen üzerine, lafın uzatılmadan anlatıldığı yazılar yakında sekmelerinizi süslemeye başlayacak. [Hakkımda](https://blog.log101.dev/about) sayfasına da bir göz atın derim!
+Sabırsızlıkla beklenen [blog.log101.dev](https://blog.log101.dev) yayın hayatına başlıyor. Yazılım, edebiyat ve felsefe üzerine, lafın uzatılmadan anlatıldığı yazılar yakında sekmelerinizi süslemeye başlayacak. [Hakkımda](https://blog.log101.dev/about) sayfasına da bir göz atın derim!
 
 
 

src/content/blog/ilk-katkinizin-hikayesi.md

@@ -0,0 +1,104 @@
+---
+draft: false
+title: İlk Katkınzıın Hikayesi
+summary: Açık kaynak geliştiriciliğe dair izlenimler.
+category: fikir
+subcategory: Rehber
+date: 2024-08-11
+---
+
+<style>
+
+h3, hr {
+    margin: 1em 0 1em 0
+}
+
+</style>
+
+Temel ihtiyaçlarımızı karşılamak için inşa edilmiş yapıları düşünün. Yollar, kaldırımlar, kanalizasyon boruları, elektrik hatları… Nasıl bir şehrin işleyişi için bunlar şartsa, yazılım projeleri için de buna karşılık gelen altyapı niteliğinde yazılımlar var. Bu yazılımlar genellikle herhangi bir ücret talep etmeden, mütevazı bir şekilde üstlerine düşen görevi yerine getiriyorlar. Onlar sayesinde genel ihtiyaçlarımız kolay ve ücretsiz bir şekilde karşılanmış oluyor ve projemize has ihtiyaçlarımıza odaklanabiliyoruz.
+
+Buraya kadar olan kısım gayet anlaşılır, hatta biraz sıkıcı. Eğer mesele açık kaynak yazılımları kullanmaktan ibaretse, zaten daha fazla kelime israf etmemize de gerek yok. Bu yazıda bunları kullanmaktan değil, geliştirmekten bahsedeceğiz. Yazının sonunda açık kaynak geliştirici olmanın yalnızca hayır işi veya vicdani sorumluluk olmadığını, aslında bize sağlanmış bir özgürlük ve kendimizi geliştirmenin eğlenceli bir yolu olduğunu göreceğiz! Şimdi izin verin, açık kaynak konusunu biraz daha açalım.
+
+### Açık Kaynak
+
+Açık kaynak yazılım, kabaca ifadesiyle herkesin dilediğince kullanabildiği, değiştirebildiği ve başkalarıyla paylaşabildiği kod anlamına geliyor [(1)](https://www.redhat.com/en/topics/open-source/what-is-open-source). Eğer bu tanım yeterince anlaşılır değilse biraz daha açıkça ifade etmeyi deneyelim. Bir yazılımın açık kaynak olması bu yazılımla alakalı bize üç türlü özgürlük sağlıyor:
+1. Bu yazılımı projemiz içerisinde bir kütüphane veya çalıştırılabilir program olarak dilediğimiz şekilde ve ortamda kullanabiliyoruz.
+2. Bu yazılımın kodunda kalıcı düzenlemeler, ihtiyaçlarımız doğrultusunda eklemeler ve çıkarmalar yapabiliyoruz.
+3. Yazılımın orijinal veya düzenlenmiş kopyalarını başkalarıyla paylaşabiliyoruz hatta duruma göre satabiliyoruz [(2)](https://snyk.io/learn/open-source-licenses/).
+
+İlk bakışta bu kimsenin kalkışmayacağı bir hayır işi gibi görünse de projelerinin hızlı bir şekilde yaygınlaşmasını ve gelişmesini isteyen yazılımcılar ve yazılım firmaları bunları açık kaynak olarak paylaşmayı tercih edebiliyorlar. Bize de bunları *özgürce* kullanması kalıyor, veya değiştirmesi ve geliştirmesi! Herhalde girişte ne demek istediğim şimdi daha iyi anlaşılmıştır. Tekrarlamak pahasına: Açık kaynak yazılımlara katkı sağlamak hayır işi veya vicdani sorumluluk olarak algılanmamalıdır, ihtiyaçlarımız doğrultusunda bu yazılımlarda değişiklikler yapabilmek bize sağlanmış bir özgürlüktür!
+
+O halde artık açık kaynak projelere nasıl katkı sağlayabileceğimizden bahsedebiliriz. Katkı sağlayıcı olmanın çetrefilli yanları var ve katkıda bulunmak istediğiniz projelerin binlerce satır koduyla ilk kez karşılıştığınızda korkmanız muhtemel; her işin başında olduğu gibi! Bu noktada süreci tanımak işinizi oldukça kolaylaştıracaktır ve özgüveninizi arttıracaktır. Süreci iyi bir şekilde anladığınızda ne kadar tecrübesiz olursanız olun açık kaynak geliştiricisi olmanın mümkün, keyifli ve her açıdan gelişiminize katkı sağlayacak bir iş olduğunu göreceksiniz. Aynı zamanda size ilk katkımdan da bahsedeceğim. Lafı daha fazla uzatmadan ilk adımımızı atalım.
+
+### İlk Adımlar
+
+İşe bir açık kaynak projeyi gözümüze kestirerek başlıyoruz. Gözünüz korkmasın, bu projeyi uzaklarda aramanıza gerek yok. Daha önce yazdığınız bir projenin bağımlılıklarının olduğu dosyayı (package.json, go.mod vb.) açın. Burada bir liste halinde projede kullandığınız kütüphanelere rastlayacaksınız. Projeyi siz yazdıysanız bu kütüphanelerin az çok ne işe yaradığını biliyor olmalısınız, olmasanız da önemli değil, aralarından bir tanesini seçin. Özel bir kritere ihtiyacınız yok, hangisi hoşunuza giderse! Sonra projenin adını bir arama motoruna yazın ve kütüphanenin kaynak kodunun barındırıldığı internet sayfasına gidin. Burası muhtemelen Github olacak.
+
+Öncelikle, bu proje ile alakalı öğrenmeniz gereken üç bilgi var:
+1. En son katkı (commit) ne zaman yapılmış.
+2. Kaç katkı sağlayan (contributor) var.
+3. Son ayda kaç katkı isteği (pull request) kabul edilmiş.
+Eğer bu ilk katkınız olacaksa en geç 1 hafta önce güncellenmiş, en çok katkı sağlayan ve katkı isteği kabul edilmiş projeyi tercih etmenizi tavsiye ederim. Bu tür projelerin katkı sağlama süreçleri daha sistematik bir hale getirilmiş oluyor, yeni gelenlere daha hoşgörülü yaklaşılıyor ve katkı isteği hızlı bir şekilde cevaplanıyor.
+### Sorun
+
+Tebrik ederim, ilk adımı attınız, sizi heyecanlandıracak hareketli bir proje buldunuz. Sırada bir sorun bulmak var. Korkmayın, durduk yere bir sorun üretmenize gerek yok. Github vb. platformlarda her projenin sorunlar (issues) kısmı olur, burada projeden faydalanan insanlar, proje ile alakalı karşılaştıkları problemleri yazarlar. Burada biraz vakit geçirmeniz gerekebilir, projeye yeni katılmış biri olarak her sorunu anlamayabilirsiniz.
+
+Hatırlarsanız size ilk katkımın hikayesini anlatacağım demiştim.  Hikayem tam olarak burada başlıyor. Ben de Astro ismindeki bir önyüz freymvörkünü (frontend framework) gözüme kestirmiştim. Size tavsiye ettiğim gibi birkaç günümü sorunlar kısmında, yeni açılan sorunları inceleyerek geçirdim. Pek çoğunu nasıl çözebileceğime dair hiçbir fikrim yoktu. Bu durum canımı sıkmıştı.
+
+Bir sabah yeni açılan bir sorun başlığı ile karşılaştım. Test kütüphanelerini değiştirdikleri için Astro’nun bazı testlerinin güncellenmesi gerekiyordu. Eski testler bu yeni kütüphane kullanılarak tekrar yazılacaktı. Sorun başlığını açan kişi, bu sorunun projeye yeni dahil olmak isteyenler için iyi bir fırsat olduğunu da özellikle belirtmişti. Daha önce test yazmış olduğumdan,  ne yapılması gerektiğini kestirebiliyordum. Hemen yorumlar kısmında katkı sunmak istediğimi belirttim. Sırada kodda gerekli değişikleri yapıp katkı isteğini göndermek vardı.
+
+Sizin de bir sorunu seçtiğinizi varsayalım, dilerseniz sorun başlığının altına sorunla ilgilenmeye başladığınızı yorum olarak belirtebilirsiniz. Genellikle çözülmesi gereken sorun sayısı, katkı sağlayıcıların sayısından fazla olduğundan bunu yazmanıza bile gerek kalmayabilir.
+
+(Yorumumun fotoğrafı)
+
+### Triyaj
+
+Genellikle projeler yapacağınız değişiklikleri orijinal kodda değil kendi kopyanızda (fork) yapmanızı isterler. Büyük projelerin kodunu düzenlemek tabiri caizse *kirli* bir iş olduğundan, proje sahipleri kodu batırmanızı istemezler, muhtemel karışıkların önüne geçmek için kendi kopyanızdan çalışmanızı talep ederler. Neyse ki bir projenin kopyasını oluşturmak birkaç saniyelik oldukça basit bir iştir.
+
+Bu aşamada ana klasörün altında `CONTRIBUTING.md` isminde bir dosya olup olmadığını kontrol etmeyi unutmayın. Bu dosyadan ilgili projede katkı sağlama sürecinin nasıl işlediğini ve nelere dikkat etmeniz gerektiğini öğrenebilirsiniz.
+
+Kendi kopyanızı oluşturduktan sonra sıra, sorunun kaynağını tespit etmeye gelir. Buna triyaj denir. Sorun başlığında soruna yol açmış kodun bulunduğu dosyanın ismi bazen verilir, bazen de henüz tespit edilemediğinden verilmez. Bu durumda soruna neyin yol açtığını sizin tespit etmeniz beklenir.
+
+Bunu tespit etmek için öncelikle sorunun açıklamasını dikkatlice okumalısınız. Eğer sorun başlığını açan kişi, sorunun ne üzerine ortaya çıktığını detaylı bir şekilde belirtmediyse bunu sormaktan asla çekinmeyin. Sorunun bütün yükünü omuzlamak zorunda değilsiniz. Sorunu detaylıca açıklamak, başlığı açan kişinin sorumluluğundadır. Pek çok proje raporlanan sorunun yeniden çıkarılabilir (reproducable) olmasını ister. Yani siz de sorunu yaşayan kişiyle aynı adımları takip ettiğinizde aynı hatayla karşılaşıyor olmalısınız.
+
+### Çözüm
+
+ Sorunu yeniden çıkardıktan sonra sırada bunun kaynağını tespit etmek var. Neyse ki hata ayıklama araçları bize hatanın muhtemel kaynaklarıyla alakalı detaylı bilgiler verebiliyor. Burada size düşen sanki zamanda geriye gider gibi, hatanın ortaya çıktığı fonksiyondan başlayarak fonksiyon çağrılarını geriye doğru takip etmek ve hangi parametrenin, değişkenin veya fonksiyon çağrısının sorunlu olduğunu tespit etmek.
+
+ Benim ilk katkımda yalnızca bir test dosyasında değişiklik yapmam gerektiğinden bu aşamayı atlamıştım fakat çözdüğüm bir başka sorunda [(3)](https://github.com/withastro/astro/issues/10161) problemin kaynağı fonksiyonun eksik bir değer dönmesiydi. Bunu eklediğimde hata çözülmüş oldu. Sorunu çözmem için yalnızca 5 satır eklemem gerekiyordu!
+
+Sorunun kaynağı olan değişkeni, parametreyi, fonksiyonu vb. tespit ettikten sonra bir çözüm üretmeye çalışın. Eğer bulduğunuz çözüm birden fazla dosyada değişiklik yapmanızı gerektiriyorsa ve işe yarayıp yaramayacağından emin değilseniz hemen sorun başlığına geri dönüp aklınızdaki fikri detaylı bir şekilde yorumlar kısmına yazın. Gereksiz yere vakit kaybetmektense projede tecrübe sahibi birinden geri bildirim almak çok daha mantıklı olacaktır!
+
+(örnek geri bildirim fotoğrafı)
+
+Pekala, sorunun kaynağını tespit ettiniz, gerekli değişiklikleri yaptınız ve artık aynı adımları tekrar uyguladığınızda sorunun ortadan kalktığını gördünüz! Öncelikle sizi tebrik ederim, zor bir iş başardınız. Fakat kötü bir haberim var, sorunun gerçekten ortadan kalktığına diğer yazılımcıları da ikna etmeniz gerekiyor. Bunun için çözümünüzü test etmelisiniz!
+
+### Test
+
+Sorunu çözmeyi başardıysanız, test yazması da zor olmayacaktır. Yine de her proje farklı bir test düzeni takip ettiği için projenizin testlerini nasıl kurguladıklarını öğrenmek biraz zaman alabilir. Diğer testleri örnek alarak testinizi yazmaya başlayın. Testiniz, sırayla sorundaki adımları canlandırmalı ve kodun herhangi bir hata vermediğini göstermeli. Bu, aynı zamanda yaptığınız değişiklikleri geri aldığınızda testin hata vermesi gerektiği anlamına geliyor. Duruma göre birden fazla test yazmanız da gerekebilir.
+
+(Astro test klasörü)
+### Mutlu Son
+
+Uzun soluklu ve yorucu bir süreç oldu ama artık ilk katkınızı yapmaya hazırsınız! Katkı isteğinizi atın ve beklemeye başlayın. Muhtemelen yaptığınız değişiklikler öncelikle bazı otomatik testlerden geçecek. Sonrasında katkı isteklerini değerlendirmekle görevli biri katkınızı inceleyecek ve yaptığınız değişiklikleri değerlendirecektir. Şanslıysanız isteğiniz hemen kabul edilir fakat zaman zaman ilgili kişi sizden bazı düzenlemeler yapmanızı isteyebilir. Bu hevesinizi kırmasın, projenin uyum içerisinde çalışması için bütün katkıların belirli estetik ve işlevsel kriterlere uyması gerekiyor.
+
+Düzenlemelerden sonra katkı isteğiniz kabul edilirse öncelikle derin bir nefes alın, sonra bilgisayarınızı kapatıp soğuk bir bardak su için. Aynaya bakıp gülümseyin ve yaptığınız değişiklerin gelecek güncelleme ile beraber binlerce bilgisayara dalga dalga yayılacağını hayal edin.
+
+Katkı sağlama sürecini son kez özetleyecek olursak:
+1. Zevkinize uygun hareketli bir proje seçimi.
+2. Sorunun (issue) seçimi.
+3. Kendi kopyanızı (fork) oluşturma.
+4. Triyaj, sorunun kaynağını tespit etme.
+5. Çözümü uygulama.
+6. Test etme.
+7. Katkı isteği (pull request) gönderme.
+
+Umarım anlattıklarım katkı sağlayıcı olma yolunda ilk adımı atmanızı kolaylaştırır. Emin olun ilk katkınızı yapmak sandığınızdan çok daha kolay olacak! Yazıyla alakalı geri bildirimlerinizi bekliyorum, bir başka yazıda görüşmek dileğiyle. 👋️
+
+---
+
+### Kaynaklar
+
+1. https://www.redhat.com/en/topics/open-source/what-is-open-source
+2. https://snyk.io/learn/open-source-licenses/
+3. https://github.com/withastro/astro/issues/10161

src/content/bookReview/coevolution.md

@@ -0,0 +1,31 @@
+---
+draft: true
+title: The Coevolution
+summary: The Coevolution kitabının incelemesi.
+category: fikir
+subcategory: Kitap İncelemesi
+date: 2024-07-25
+bookAuthor: Edward Ashford Lee
+publisher: The MIT Press
+bookLanguage: İngilizce
+bookGenre: Teknoloji Felsefesi
+bookCover: ../../images/thecoevolution.jpg
+---
+
+<style>
+.prose {
+    margin: 0.5em 0 1em 0;
+}
+</style>
+
+<p class="prose">
+Kitap, makineler ile insanlar arasındaki ilişkiye odaklanıyor ve bu ilişkiyi genellikle yapılanın aksine, makineler açısından ele almaya çalışıyor. Kitaba göre, makineler de aslında bir tür canlıdır; ancak insanlar yalnızca "dijital" türde canlılar üretebildiği için, biyolojik canlılar gibi makinelerin de dijital canlılar (LDB: Digital Living Beings) olduğunu algılayamıyorlar.
+</p>
+
+<p class="prose">
+Makineler, insanlar için bir tür protez işlevi görüyor. Bu protezler, genellikle geri bildirim mekanizmalarına dayanarak sürekli olarak kendilerini geliştiriyorlar. Hatta birçok makineyi, bir geri bildirim mekanizması olarak değerlendirmek mümkün. Bu durum, bazen -dil modellerinde olduğu gibi- davranışlarını açıklayabilmemizin önüne geçebiliyor. Ancak, insanlar uydurma pahasına da olsa her şeyi açıklama ihtiyacı hissettiği için, yapacağımız açıklamaların nitel bir getirisi olmayabilir.
+</p>
+
+<p class="prose">
+Yazar ayrıca, insanın ne ölçüde taklit edilebileceğine de değiniyor. İnsan, büyük ölçüde analog bir yapıya sahip olduğu için, "bit bitine" kopyalanması mümkün görünmüyor. Ayrıca, bu sistemlerin yaptıklarından kimi sorumlu tutacağımız da bir muamma. Özetle, makineler evrimimizin bir parçası, belki bir gün gelecek, kendimizi onların da kendi kendilerine evrildiği bir süreçte bulacağız.
+</p>

src/content/config.ts

@@ -2,18 +2,37 @@ import { z, defineCollection } from "astro:content";
 
 export const CATEGORIES = ["fikir", "teknik", "edebiyat", "ansiklopedi"];
 
+const blogPostSchema = z.object({
+  draft: z.boolean(),
+  title: z.string(),
+  tags: z.optional(z.array(z.string())),
+  summary: z.string(),
+  date: z.date(),
+  category: z.enum(["fikir", "teknik", "edebiyat", "ansiklopedi"]),
+  subcategory: z.string(),
+});
+
+const bookReviewSchema = blogPostSchema.extend({
+  bookAuthor: z.string(),
+  publisher: z.string(),
+  bookLanguage: z.string(),
+  bookGenre: z.string(),
+});
+
 const blogCollection = defineCollection({
   type: "content",
-  schema: z.object({
-    title: z.string(),
-    tags: z.optional(z.array(z.string())),
-    summary: z.string(),
-    date: z.date(),
-    category: z.enum(["fikir", "teknik", "edebiyat", "ansiklopedi"]),
-    subcategory: z.string(),
-  }),
+  schema: blogPostSchema,
+});
+
+const bookReviewCollection = defineCollection({
+  type: "content",
+  schema: ({ image }) =>
+    bookReviewSchema.extend({
+      bookCover: image(),
+    }),
 });
 
 export const collections = {
   blog: blogCollection,
+  bookReview: bookReviewCollection,
 };

src/layouts/Layout.astro

@@ -15,7 +15,7 @@ import "../styles/main.css";
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="generator" content={Astro.generator} />
-    <meta name="htmx-config" content='{code:"204", swap: false}' />
+    <meta name="htmx-config" content='{"code": 204, "swap": false}' />
     <title>{title}</title>
   </head>
   <body class="flex justify-center font-sans">

src/pages/[category]/[page]/index.astro

@@ -10,10 +10,15 @@ import Post from "@/components/Post.astro";
 
 export async function getStaticPaths({ paginate }: { paginate: any }) {
   const blogEntries = await getCollection("blog");
+  const allReviews = await getCollection("bookReview");
+
+  const allPosts = [...allReviews, ...blogEntries].filter(
+    (post) => !post.data.draft
+  );
 
   return CATEGORIES.flatMap((category) => {
-    const filteredPosts = blogEntries.filter(
-      (post) => post.data.category == category,
+    const filteredPosts = allPosts.filter(
+      (post) => post.data.category == category
     );
     return paginate(filteredPosts, {
       params: { category },

src/pages/[category]/[slug]/index.astro

@@ -8,6 +8,7 @@ import Post from "@/components/Post.astro";
 import EmojiReactionForm from "@/components/EmojiReactionForm.astro";
 import CommentForm from "@/components/CommentForm.astro";
 import HorizontalLine from "@/components/HorizontalLine.astro";
+import BookReview from "@/components/BookReview.astro";
 
 const { entry } = Astro.props;
 
@@ -15,8 +16,13 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection("blog");
+  const allReviews = await getCollection("bookReview");
 
-  return blogEntries.map((entry) => ({
+  const allPosts = [...allReviews, ...blogEntries].filter(
+    (post) => !post.data.draft
+  );
+
+  return allPosts.map((entry) => ({
     params: { category: entry.data.category, slug: entry.slug },
     props: { entry },
   }));
@@ -25,7 +31,13 @@ export async function getStaticPaths() {
 
 <Layout title="log101">
   <Header />
-  <Post post={entry} componentType="full" />
+  {
+    entry.collection === "blog" ? (
+      <Post post={entry} componentType="full" />
+    ) : (
+      <BookReview post={entry} componentType="full" />
+    )
+  }
   <EmojiReactionForm entryId={entry.id} />
 
   <section class="comments">

src/pages/index.astro

@@ -5,17 +5,30 @@ import Layout from "@/layouts/Layout.astro";
 
 import { getCollection } from "astro:content";
 import Post from "@/components/Post.astro";
+import BookReview from "@/components/BookReview.astro";
 
 const allTeknikPosts = await getCollection("blog");
+const allReviews = await getCollection("bookReview");
+
+const allPosts = [...allReviews, ...allTeknikPosts].filter(
+  (post) => !post.data.draft
+);
 ---
 
 <Layout title="log101">
   <Header />
   <div class="posts">
     {
-      allTeknikPosts
+      allPosts
         .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
-        .map((p) => <Post post={p} componentType="short" />)
+        .map((p) => {
+          if (p.collection == "blog") {
+            return <Post post={p} componentType="short" />;
+          } else {
+            p.collection == "bookReview";
+            return <BookReview post={p} componentType="short" />;
+          }
+        })
     }
   </div>
   <a class="text-inherit" href="/posts/1">Tüm Yayınlar</a>

src/pages/posts/[page].astro

@@ -9,7 +9,13 @@ import Post from "@/components/Post.astro";
 
 export async function getStaticPaths({ paginate }: { paginate: any }) {
   const blogEntries = await getCollection("blog");
-  return paginate(blogEntries, {
+  const allReviews = await getCollection("bookReview");
+
+  const allPosts = [...allReviews, ...blogEntries].filter(
+    (post) => !post.data.draft
+  );
+
+  return paginate(allPosts, {
     pageSize: 3,
   });
 }

src/styles/main.css

@@ -18,8 +18,17 @@ body {
   background-color: #f5fffa;
 }
 
+@font-face {
+  font-family: "Source Code Pro";
+  src: url(/fonts/SourceCodePro-Regular.otf.woff2) format("woff2");
+}
+
 @layer components {
   .posts {
     @apply flex flex-col gap-10 md:gap-8;
   }
+
+  .title {
+    font-family: "Source Code Pro", monospace;
+  }
 }