style(fix): remove unintended margin from heading

astro.config.mjs

@@ -1,10 +1,14 @@
 import { defineConfig } from "astro/config";
 
 import tailwind from "@astrojs/tailwind";
+import remarkToc from "remark-toc";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://blog.log101.dev",
+  markdown: {
+    remarkPlugins: [[remarkToc, { heading: "İçindekiler" }]],
+  },
   integrations: [
     tailwind({
       applyBaseStyles: false,

package-lock.json

@@ -12,6 +12,7 @@
         "@astrojs/tailwind": "^5.1.0",
         "astro": "^4.10.0",
         "htmx.org": "^1.9.12",
+        "remark-toc": "^9.0.0",
         "tailwindcss": "^3.4.3",
         "typescript": "^5.4.5"
       },
@@ -962,6 +963,11 @@
       "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
       "dev": true
     },
+    "node_modules/@types/ungap__structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@types/ungap__structured-clone/-/ungap__structured-clone-1.2.0.tgz",
+      "integrity": "sha512-ZoaihZNLeZSxESbk9PUAPZOlSpcKx81I1+4emtULDVmBLkYutTcMlCj2K9VNlf9EWODxdO6gkAqEaLorXwZQVA=="
+    },
     "node_modules/@types/unist": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
@@ -4731,6 +4737,24 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-toc": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-7.1.0.tgz",
+      "integrity": "sha512-2TVKotOQzqdY7THOdn2gGzS9d1Sdd66bvxUyw3aNpWfcPXCLYSJCCgfPy30sEtuzkDraJgqF35dzgmz6xlvH/w==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/ungap__structured-clone": "^1.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "github-slugger": "^2.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -6307,6 +6331,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-toc": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/remark-toc/-/remark-toc-9.0.0.tgz",
+      "integrity": "sha512-KJ9txbo33GjDAV1baHFze7ij4G8c7SGYoY8Kzsm2gzFpbhL/bSoVpMMzGa3vrNDSWASNd/3ppAqL7cP2zD6JIA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-toc": "^7.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/request-light": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/request-light/-/request-light-0.7.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.10.0",
     "htmx.org": "^1.9.12",
+    "remark-toc": "^9.0.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   },

src/components/EmojiReactionForm.astro

@@ -10,7 +10,7 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
   }
 
   .emoji-buttons-container {
-    @apply flex flex-row gap-2;
+    @apply flex flex-row flex-wrap gap-2;
   }
 </style>
 
@@ -75,19 +75,19 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
         // @ts-ignore detail attribute is added by htmx
         if (event.detail.elt.id != "reaction-buttons") {
           showError(
-            "Sunucuya ulaşılamadığı için tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
+            "Sunucuya ulaşılamadığı için tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz."
           );
         }
-      },
+      }
     );
 
     formElement.addEventListener(
       "htmx:responseError" as keyof HTMLElementEventMap,
       () => {
         showError(
-          "Sunucudan kaynaklanan bir hatadan dolayı tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
+          "Sunucudan kaynaklanan bir hatadan dolayı tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz."
         );
-      },
+      }
     );
   }
 </script>

src/components/Post.astro

@@ -53,8 +53,6 @@ const postLink = `/${post.data.category}/${post.slug}`;
 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";
@@ -100,25 +98,15 @@ import calendar from "@/images/calendar.svg";
       </div>
     </div>
   </div>
-  {options.shortSummary && <p class="post-summary">{post.data.summary}</p>}
-
   {
-    options.longSummary && (
+    (options.shortSummary || options.longSummary) && (
-      <>
+      <p class="post-summary">{post.data.summary}</p>
-        <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">
+      <div class="text-lg" id="full-text">
         <Content />
       </div>
     )

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

@@ -1,7 +1,7 @@
 ---
 draft: false
-title: İlk Katkınzıın Hikayesi
+title: İlk Katkınızın Hikayesi
-summary: Açık kaynak geliştiriciliğe dair izlenimler.
+summary: İlk açık kaynak katkınızı yapmak sandığınızdan çok daha kolay olacak!
 category: fikir
 subcategory: Rehber
 date: 2024-08-11
@@ -10,79 +10,91 @@ date: 2024-08-11
 <style>
 
 h3, hr {
-    margin: 1em 0 1em 0
+    margin: 0.7em 0 0.5em 0
 }
 
+#full-text p {
+    margin: 0.5em 0 0.5em 0;
+}
+
+figcaption {
+    color: gray;
+    margin-top: -0.8em;
+    text-align: center;
+    font-size: 0.9em;
+}
 </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.
+Yazılım projelerimizin belkemiği olan açık kaynak yazılımlar, kullanıma *açık* oldukları kadar geliştirmeye de *açıklar*. Ne var ki, bunları kullanması ne kadar kolaysa geliştirmesi de bir o kadar çetrefilli! Peki bunun bizi yıldırmasına müsaade edecek miyiz, tabi ki de hayır! Bu yazıda açık kaynak projelerde katkı sağlayıcı olmanın zorluklarını bir kenara bırakıp, bunun aslında bize sağlanmış bir özgürlük ve kendimizi geliştirmenin eğlenceli bir yolu olduğunu göreceğiz!
-
-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:
+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). Daha açık bir şekilde ifade edecek olursak: Bir yazılımın açık kaynak olması, bize bu yazılım ile alakalı üç 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.
+1. Bu yazılımı projemiz içerisinde bir kütüphane veya çalıştırılabilir program olarak 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/).
+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!
+İ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! Girişte özgürlük derken ne kastettiğim herhalde şimdi daha iyi anlaşılmıştır. Açık kaynak yazılımlara katkı sağlamak yalnızca bir hayır işi veya vicdani sorumluluk olarak algılanmamalıdır. Bu yazılımlara katkı sağlayabilmek, ihtiyaçlarımız doğrultusunda bu yazılımlarda değişiklikler yapabilmek aslında 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.
+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 projelerle ilk kez karşılaştığınızda tedirgin olabilirsiniz; her işin başında olduğu gibi! İşte tam da bu noktada katkı sağlama sürecini tanımak işinizi kolaylaştıracak ve özgüveninizi arttıracak. 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, ne kadar da nostaljik!
 
 ### İ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.
+Birinci adım açık kaynak bir projeyi gözümüze kestirmek. 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. 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.
+
+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ı istekleri 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.
+İlk adımı attıktan ve sizi heyecanlandıracak hareketli bir proje bulduktan sonra sırada bir sorun bulmak var. Korkmayın, durduk yere bir sorun çıkarmanıza 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. Bu kısımda 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ı.
+Hatırlarsanız size ilk katkımın hikayesini anlatacağım demiştim. Aynı bir önceki adımda size söylediğim şekilde ben de Astro ismindeki bir önyüz freymvörkünü (frontend framework) gözüme kestirmiştim. Birkaç günümü sorunlar kısmında, yeni açılan sorun başlıklarını 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ı.
+Bir sabah yeni açılan bir başlık 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ı. Başlığı 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 yazdığımdan, ne yapılması gerektiğini kestirebiliyordum. Hemen yorumlar kısmında katkı sunmak istediğimi belirttim. Sırada, kodda gerekli değişiklikleri 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ı)
+![Örnek Bir Yorum](../../images/github-yorum.png)
+<figcaption>Resim 1: Örnek bir yorum</figcaption>
 
 ### 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.
+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 muhtemel karışıklıkların önüne geçmek adına 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.
+Bu aşamada ana klasörün altında `CONTRIBUTING.md` isminde bir doküman olup olmadığını kontrol etmeyi unutmayın. Bu dokümandan 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.
+Kendi kopyanızı oluşturduktan sonra sıra, sorunun kaynağını tespit etmektir. Buna triyaj denir. 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.
+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 nasıl 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.
+ Sorunu yeniden çıkardıktan sonra sıra bunu kaynağını tespit etmekte. Neyse ki hata ayıklama araçları bize hatanın muhtemel kaynaklarıyla alakalı detaylı bilgiler veriyor. 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 bulmak.
 
- 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!
+ 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. Değeri tamamladığımda hata da çö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!
+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 almanız çok daha mantıklı olacaktır!
 
-(örnek geri bildirim fotoğrafı)
+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şin üstesinden geldiniz. 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!
+
+![Örnek Bir Yorum](../../images/github-geribildirim.png)
+<figcaption>Resim 2: Örnek bir geri bildirim</figcaption>
 
-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.
+Sorunu çözmeyi başardıysanız, test yazması da zor olmayacaktır. Yine de her proje farklı bir test düzeni takip ettiğinden projenizin testlerini nasıl kurguladığını öğrenmek biraz zaman alabilir. Diğer testleri örnek alarak testinizi yazmaya başlayın. Testiniz, sırayla sorunu aynı adımları takip ederek çıkarmaya çalışmalı 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.
 
-(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.
+Uzun soluklu ve yorucu bir süreçti 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 görevli 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 işlevsel ve estetik 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.
+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şikliklerin 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.

src/content/blog/sunucumda-neler-donuyor.md

@@ -0,0 +1,142 @@
+---
+draft: false
+title: Sunucumda Neler Dönüyor
+summary: Bu sayfayı sunmamı mümkün kılan, kimisi CI/CD'den, kimsi e-postadan, kimisi konteynerlerden sorumlu servisleri tanıyoruz.
+category: teknik
+subcategory: Tanıtım
+date: 2024-08-25
+---
+
+<style>
+
+h3, hr {
+    margin: 0.7em 0 0.5em 0
+}
+
+#full-text p {
+    margin: 0.5em 0 1.2em 0;
+}
+
+figcaption {
+    color: gray;
+    margin-top: -0.8em;
+    text-align: center;
+    font-size: 0.9em;
+}
+
+#toc > ul {
+    line-height: 2em;
+}
+
+li a {
+    color: black;
+}
+
+table {
+    border: 1px solid slategrey;
+    padding: 4px;
+    background-color: #f8f9fa;
+    margin: 0.5em 0 1.2em 0;
+}
+
+th {
+    text-align: left;
+    white-space: nowrap;
+}
+
+td {
+    text-align: left;
+    white-space: nowrap;
+}
+
+</style>
+
+Birkaç ay önce, Vercel’lerin, Firebase’lerin, AWS’lerin sunduğu sihirlerin etkisini yitirdiği, vadettikleri masal diyarının yerini sermayeci, küçük bir ada ülkesinin aldığı o huzursuz sınıra varmıştım. Bir başka deyişle, bu platformların sunduğu hizmetlerden ücretsiz yararlanma hakkımı kaybetmiştim. Artık bir bedel ödemem gerekiyordu.
+
+Peki bu bedeli ödemek beni özgür kılacak mıydı? Tam aksine, projemi bir PaaS’ın ahtapot kollarına teslim edeceğim bu sınırın ötesinde kapalı bir ekosistem, internette cevabı olmayan sorular ve desteklenmeyen API’ler görüyordum. Karar vermem için bana tanıdıkları o dar vakit içerisinde, daha esnek ve uzun vadeli bir çözüm arayışına giriştim.
+
+Araştırmalarım neticesinde bulduğum çözüm yeni bir teknoloji, yeni bir PaaS değildi. Çözüm geriye, DevOps’un köklerine dönmekti. Kendi CI/CD sistemimi yürütecek, uygulamalarımı sunacak, Docker imajlarımı saklayacak bir sunucu kuracaktım. Kollarımı sıvadım, 2592000 saniyelik sayacımı başlattım ve işe koyuldum.
+
+Sayaç sıfırı gösterdiğinde istediğim özelliklere sahip bir sunucu kurmayı başarmıştım. Yaklaşık 3 aydır işte bu sunucuyu kullanıyorum. Bu tecrübenin kendi sunucusunu kurmak isteyenlere faydalı olacağını düşünerek, sunucumdaki servisleri tanıttığım bu yazıyı kaleme aldım.
+
+<div id="toc">
+
+### İçindekiler
+
+</div>
+
+### Sunucumun Teknik Özellikleri
+
+<table>
+<tr>
+<th>CPU:</th>
+<td>Sanal, tek çekirdek</td>
+</tr>
+<tr>
+<th>RAM:</th>
+<td>2 GB</td>
+</tr>
+<tr>
+<th>Harddisk:</th>
+<td>50GB</td>
+</tr>
+<tr>
+<th>İşletim Sistemi:</th>
+<td>Ubuntu</td>
+</tr>
+</table>
+
+Sunucumu Linode’dan kiraladım. İlk kayıt olduğunuzda 3 ay süreyle kullanabileceğiniz 100$’lık hediye kuponu veriyor. Dokümantasyonu çok kapsamlı, destek hizmeti de ihtiyaç duyduğunuzda hızlı bir şekilde dönüş yapıyor. Ayrıca çok kullanışlı ve sade bir arayüzü var. Özellikle AWS’den gelenler arayüzün sadeliği karşısında parmaklarını ısırabilir.
+### Elektronik Posta: Docker Mailserver
+
+E-posta servisini Docker konteynerleri yeniden başlatıldığı, uygulamam çöktüğü, CI/CD sistemim derleme işlemini bitirdiği zaman haberdar edilmek için kurdum. Diğer başlıklarda tanıttığım bütün servisler bir şekilde e-posta servisiyle bağlantılı.
+
+Bunun için öncelikle bir dizi DNS ayarı yaptım. Bunlar yapılmadığı takdirde e-postalar istenmeyen (spam) olarak işaretleniyor, bazı durumlarda doğrudan engelleniyor, gönderilen adrese bile ulaşmıyor.
+
+Mail sunucusu olarak [Docker Mailserver](https://github.com/docker-mailserver/docker-mailserver) ismindeki bir projeyi kullandım. Bu proje arka planda Postfix ve Dovecot uygulamalarını kullanıyor. Bunları ayrıca kurması çok daha uğraştırıcı. Docker Mailserver’de birkaç ufak konfigürasyon ile servisiniz kullanıma hazır hale geliyor. Mail sunucumu test etmek için log101@log101.dev adresine geri bildirimlerinizi gönderebilirsiniz!
+
+### HTTP Sunucusu: Nginx
+
+HTTP sunucusu deyince akla iki isim gelir: Nginx ve Apache. Benim aklıma ilk Nginx geldiği için Nginx’i tercih ettim. HTTP sunucusu tüm bu anlattıklarım arasındaki en önemli hizmet çünkü internet sayfalarının kullanıcılara sunulmasından sorumlu.
+
+Sunulacak her uygulama veya internet sayfası için bir konfigürasyon dosyası oluşturmak gerekiyor. Ayrıca sayfaların SSL sertifikalarını üretmek gerekiyor, bunun için Certbot ismindeki bir aracı kullanıyorum.
+
+Uygulamalarımı genellikle ön uçta statik, yalnızca Nginx ile sunulabilecek şekilde yazmayı tercih ediyorum. Arka uçta da her biri için bir Go uygulaması var. Böylece kaynak tüketimimi asgari seviyeye çekmiş oluyorum. Sunduğum örnek bir uygulama: https://konulukonum.log101.dev
+
+### Durum (Status) Sayfası: Gatus
+
+Yaygın internet uygulamalarının bir çoğunun durum (status) sayfası var. Bu sayfalar sayesinde uygulamalara ulaşılamadığında sorunun hangi taraftan (sunucu veya istemci) kaynaklandığını öğrenme imkanı oluyor. Örnek vermek gerekirse: https://discordstatus.com/.,
+
+Ben de kendi uygulamalarım ve servislerimin durumunu görüntülemek için bir durum sayfası oluşturdum. Bunun için konteyner olarak çalıştırılan [Gatus](https://github.com/TwiN/gatus) ismindeki açık kaynak bir projeyi kullandım.
+
+Çalışma mantığı oldukça basit. Konfigürasyon dosyasına Gatus’un HTTP isteği atacağı URL’lerin listesi veriliyor. Gatus, belirli sıklıkta bu istekler ile hayatta olup olmadıklarını kontrol ediyor. Ulaşamadığı durumda konfigürasyon dosyasında belirtilen adrese e-posta gönderiyor. Durum sayfam için: https://status.log101.dev
+
+### DevOps: Gitea
+
+Github yalnızca kod barındırma değil aynı zamanda bir CI/CD platformu. *Github Actions* sayesinde projelerin kodu derleme, test etme gibi süreçlerden geçirilerek yayınlamaya hazır hale getirilebiliyor. [Gitea](https://github.com/go-gitea/gitea) de Github’un muadili, kendi sunucunuzda barındırabileceğiniz (self hosted) bir proje. Bir diğer alternatif Gitlab’e kıyasla çok daha az kaynak tüketiyor. CI/CD sisteminin çalışma şekli de Github ile neredeyse birebir aynı.
+
+Gitea, Github profilini *yeşil* tutmak isteyenler için “mirror push” imkanı sunuyor. Böylece Gitea’deki yaptığınız değişiklikler Github’daki projenize de uygulanıyor. Gitea sayfamı incelemek için: https://git.log101.dev
+
+### Konteyner Kütüğü (Registry): Distribution
+
+Docker’dan kaçabilirsiniz ama saklanamazsınız. O eninde sonunda sizi kendini kullanmaya mecbur bırakır. Docker imajı olarak dağıtılan uygulamaların başka bir sunucuda düzgün bir şekilde güncellenebilmesi için bir konteyner kütüğüne (container registry) kaydedilmesi gerekiyor.
+
+Bunun için Docker’ın resmi kütüğü (Docker Hub) kullanılabileceği gibi sunucunuzda kendi kütüğünüzü barındırmak da mümkün. Ben ikinci yöntemi tercih ettim. Bunun için de [Distribution](https://github.com/distribution/distribution/) isminde bir projeyi kullandım. Distribution’ın kendisi konteyner olarak çalıştırılıyor.
+
+### Otomatik Güncelleme: Watchtower
+
+Docker imajı olarak dağıttığım arka uç uygulamalarımı güncelledikten sonra otomatik olarak yeniden başlatmak için [Watchtower](https://github.com/containrrr/watchtower) isminde bir proje kullanıyorum.
+
+Watchtower, docker imajlarını düzenli olarak kontrol ediyor ve bir güncelleme olduğu zaman konteynerleri yeniden başlatıyor. Ek olarak e-posta bildirim gönderebiliyor. Sistemdeki diğer servisler de konteyner tabanlı olduğu için beni bunları elimle güncelleme derdinden kurtarıyor.
+
+### Gözlemleme: Linux Dash
+
+Peki tüm bu saydığım servisler ne kadar kaynak tüketiyor? Özellikle RAM kapasiteniz yalnızca 2 gigabaytsa sistemin ne kadar kaynak tükettiğini görmek oldukça önemli. [Linux Dash](https://github.com/tariqbuilds/linux-dash) bunun için kullanılabilecek, Node uygulaması olarak çalıştırılan, kendisi de çok az kaynak tüketen bir servis. Bu servis sayesinde sisteminizin durumunu RAM, CPU vb. göstergeler üzerinden takip edebiliyorsunuz. Sunucumun gözlem sayfası için: https://monitor.log101.dev
+
+### Gelecek
+
+Sistemimde çalışan servisleri kısaca tanıtmış oldum. Bunlar şimdilik işimi görüyor fakat yakın gelecekte daha fazlasına ihtiyaç duyacağımı tahmin ediyorum. Özellikle güvenlik açısından sunucumun çok eksiği var. DDoS saldırılarına açık ve bildiğim bilmediğim birçok zafiyete sahip. Yine de kendi CI/CD sistemimi kullanmak ve kodum ile alakalı bütün süreçleri yönetmek projelerime esneklik katıyor.
+
+Kendi sunucunuzu kurmanın, sizin için de keyifli ve kıymetli bir tecrübe olacağına inanıyorum.
+
+Yazımı okuduğunuz için teşekkürler, geri dönüşlerinizi bekliyorum!

src/layouts/Layout.astro

@@ -1,9 +1,12 @@
 ---
 interface Props {
   title: string;
+  ogTitle?: string;
+  ogDescription?: string;
+  ogURL?: string;
 }
 
-const { title } = Astro.props;
+const { title, ogTitle, ogDescription, ogURL } = Astro.props;
 import "../styles/main.css";
 ---
 
@@ -16,6 +19,16 @@ import "../styles/main.css";
     <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 property="og:title" content={ogTitle ?? "blog.log101.dev"} />
+    <meta property="og:url" content={ogURL ?? "https://blog.log101.dev"} />
+    <meta
+      property="og:description"
+      content={ogDescription ?? "Yazılıma dair..."}
+    />
+    <meta property="og:image" content="https://blog.log101.dev/ikon.png" />
+    <meta name="twitter:card" content="summary" />
+
     <title>{title}</title>
   </head>
   <body class="flex justify-center font-sans">

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

@@ -12,6 +12,8 @@ import BookReview from "@/components/BookReview.astro";
 
 const { entry } = Astro.props;
 
+const URL = Astro.url;
+
 const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
 
 export async function getStaticPaths() {
@@ -29,7 +31,11 @@ export async function getStaticPaths() {
 }
 ---
 
-<Layout title="log101">
+<Layout
+  title="log101"
+  ogTitle={entry.data.title}
+  ogDescription={entry.data.summary}
+  ogURL={URL.toString()}>
   <Header />
   {
     entry.collection === "blog" ? (

src/styles/main.css

@@ -2,7 +2,7 @@
 @tailwind utilities;
 
 :root {
-  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+  font-family: "Inter", Calibri, "Trebuchet MS", sans-serif;
   font-size: 18px;
 
   @media (min-width: 768px) {
@@ -18,11 +18,22 @@ body {
   background-color: #f5fffa;
 }
 
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
 @font-face {
   font-family: "Source Code Pro";
   src: url(/fonts/SourceCodePro-Regular.otf.woff2) format("woff2");
 }
 
+@font-face {
+  font-family: "Inter";
+  src: url(/fonts/Inter-Regular.woff2) format("woff2");
+}
+
 @layer components {
   .posts {
     @apply flex flex-col gap-10 md:gap-8;

tailwind.config.mjs

@@ -3,13 +3,7 @@ export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     fontFamily: {
-      sans: [
+      sans: ["Inter", "Calibri", "Trebuchet MS", "sans-serif"],
-        "Gill Sans",
-        "Gill Sans MT",
-        "Calibri",
-        "Trebuchet MS",
-        "sans-serif",
-      ],
       mono: ["Courier New", "Courier", "monospace"],
     },
     extend: {},