feat: add sample content and styling

.gitignore

@@ -22,3 +22,4 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+TODO

src/components/Header.astro

@@ -18,7 +18,7 @@
     <div>
       <ul class="nav-links undecorated-anchor">
         <li><a href="#">Teknik</a></li>
-        <li><a href="#">Felsefi</a></li>
+        <li><a href="#">Fikir</a></li>
         <li><a href="#">Babür'ün Serüvenleri</a></li>
         <li><a href="#">Ansiklopedi</a></li>
       </ul>

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

@@ -1,6 +1,8 @@
 ---
 title: "Atatürk ve Demokratik Türkiye"
-summary: Halil İnalcık'ın kaleminden Türkiye Cumhuriyet'nin kuruluş hikayesi ve inkılapları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
+date: 2024-03-15
 tags:
   - kitap
   - atatürk

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

@@ -1,6 +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ü
+date: 2024-03-03
 tags:
   - babür
 ---

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

@@ -1,6 +1,8 @@
 ---
 title: "Bir Komponentin Serüveni: Astro"
 summary: Yazdığınız komponentlere ne olur? Bu yazıda Astro komponentlerinin serüvenlerin bir göz atıyoruz!
+category: Teknik Yazı
+date: 2024-04-01
 tags:
   - astro
   - javascript

src/content/config.ts

@@ -1,15 +1,16 @@
-// 1. Import utilities from `astro:content`
 import { z, defineCollection } from "astro:content";
-// 2. Define your collection(s)
-const teknikCollection = defineCollection({
+
+const blogCollection = defineCollection({
   type: "content",
   schema: z.object({
     title: z.string(),
-    summary: z.string(),
     tags: z.array(z.string()),
+    summary: z.string(),
+    date: z.date(),
+    category: z.enum(["Kitap İncelemesi", "Teknik Yazı", "Öykü"]),
   }),
 });
 
 export const collections = {
-  teknik: teknikCollection,
+  blog: blogCollection,
 };

src/layouts/Layout.astro

@@ -23,11 +23,16 @@ const { title } = Astro.props;
 <style is:global>
   :root {
     --h1-desktop: 3.815rem;
+    --h2-desktop: 3.052rem;
+    --h3-desktop: 2.441rem;
+    --h4-desktop: 1.953rem;
+    --h5-desktop: 1.563rem;
     --h6-desktop: 1.25rem;
     --small-desktop: 0.8rem;
     font-size: 18px;
     font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
       sans-serif;
+    background-color: #f5fffa;
   }
   body {
     display: flex;

src/pages/index.astro

@@ -2,17 +2,37 @@
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import Layout from "../layouts/Layout.astro";
-import "../styles/gol.css";
+import "../styles/header.css";
+import "../styles/home.css";
 
-import { getCollection, getEntry } from 'astro:content';
+import { getCollection, getEntry } from "astro:content";
 
-const allTeknikPosts = await getCollection('teknik')
+const allTeknikPosts = await getCollection("blog");
 ---
 
 <Layout title="log101">
   <div class="container">
     <Header />
-	{allTeknikPosts.map(p => <p>{p.data.summary}</p>)}
+    <div class="posts">
+      {
+        allTeknikPosts
+          .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
+          .map((p) => (
+            <div class="post">
+              <p class="post-category">{p.data.category}</p>
+              <h4 class="post-title">{p.data.title}</h4>
+              <p class="post-date">
+                {p.data.date.toLocaleDateString("tr-TR", {
+                  day: "numeric",
+                  month: "long",
+                  year: "numeric",
+                })}
+              </p>
+              <p class="post-summary">{p.data.summary}</p>
+            </div>
+          ))
+      }
+    </div>
     <Footer />
   </div>
 </Layout>

src/scripts/conway-simulator.js

@@ -1,10 +1,9 @@
-import { heavyWeightSpaceshipCell } from './utils'
+import { heavyWeightSpaceshipCell } from "./utils";
 
 /*
   A wrapper for an HTML <canvas> based visualizatiuon of Conway's Game of Life.
 */
 export default class ConwaySimulator {
-
   /*
       Create a new simulation. A simulation is comprised of a
       2D data grid (rows-by-cols) of ConwayPixels, a canvas element,
@@ -24,7 +23,7 @@ export default class ConwaySimulator {
     for (let i = 0; i < rows; i++) {
       this.grid.push([]);
       for (let j = 0; j < cols; j++) {
-                let alive = heavyWeightSpaceshipCell(j, i)
+        let alive = heavyWeightSpaceshipCell(j, i);
         this.grid[i].push(new ConwayPixel(alive));
       }
     }
@@ -37,12 +36,12 @@ export default class ConwaySimulator {
     }
 
     // Setup the canvas
-        let width = this.pixelSize * this.cols
-        let height = this.pixelSize * this.rows
-        this.canvas = document.createElement('canvas');
+    let width = this.pixelSize * this.cols;
+    let height = this.pixelSize * this.rows;
+    this.canvas = document.createElement("canvas");
     this.canvas.width = width;
     this.canvas.height = height;
-        this.canvasCtx = this.canvas.getContext('2d', { alpha: true });
+    this.canvasCtx = this.canvas.getContext("2d", { alpha: true });
   }
 
   /*
@@ -121,13 +120,17 @@ export default class ConwaySimulator {
       for (let j = 0; j < this.cols; j++) {
         let pixel = this.grid[i][j];
 
-                if (!force && !pixel.forceRepaint && pixel.alive === pixel.previousState) {
+        if (
+          !force &&
+          !pixel.forceRepaint &&
+          pixel.alive === pixel.previousState
+        ) {
           continue; // No need to repaint if the pixel didn't change
         }
 
         let color = pixel.alive ? pixel.lifeStyle : pixel.deathStyle;
         if (byColor[color] === undefined) {
-                    byColor[color] = []
+          byColor[color] = [];
         }
 
         byColor[color].push([i, j]);
@@ -142,7 +145,7 @@ export default class ConwaySimulator {
           col * this.pixelSize,
           row * this.pixelSize,
           this.pixelSize,
-                    this.pixelSize
+          this.pixelSize,
         );
       }
     }
@@ -159,7 +162,7 @@ export default class ConwaySimulator {
       col * this.pixelSize,
       row * this.pixelSize,
       this.pixelSize,
-            this.pixelSize
+      this.pixelSize,
     );
   }
 
@@ -174,12 +177,14 @@ export default class ConwaySimulator {
   setRainbowScheme() {
     let rows = this.grid.length;
     let cols = this.grid[0].length;
-        let diagonalLength = Math.sqrt((this.rows * this.rows) + (this.cols * this.cols));
+    let diagonalLength = Math.sqrt(
+      this.rows * this.rows + this.cols * this.cols,
+    );
     let hueIncrement = 360 / diagonalLength;
 
     for (let i = 0; i < this.rows; i++) {
       for (let j = 0; j < this.cols; j++) {
-                let h = Math.floor(Math.sqrt((i * i) + (j * j)) * hueIncrement);
+        let h = Math.floor(Math.sqrt(i * i + j * j) * hueIncrement);
         let px = this.grid[i][j];
         px.lifeStyle = `hsl(${h}, 100%, 60%)`;
         px.deathStyle = `#000000`;
@@ -195,12 +200,12 @@ export default class ConwaySimulator {
   setRainbowSchemeWithin(startRow, stopRow, startCol, stopCol) {
     let rows = stopRow - startRow;
     let cols = stopCol - startCol;
-        let diagonalLength = Math.sqrt((rows * rows) + (cols * cols));
+    let diagonalLength = Math.sqrt(rows * rows + cols * cols);
     let hueIncrement = 360 / diagonalLength;
 
     for (let i = startRow; i < stopRow; i++) {
       for (let j = startCol; j < stopCol; j++) {
-                let h = Math.floor(Math.sqrt((i * i) + (j * j)) * hueIncrement);
+        let h = Math.floor(Math.sqrt(i * i + j * j) * hueIncrement);
         let px = this.grid[i][j];
         px.lifeStyle = `hsl(${h}, 100%, 60%)`;
         px.deathStyle = `#000000`;
@@ -227,15 +232,25 @@ export default class ConwaySimulator {
     */
   setRandomPixelColors() {
     let baseHue = randomInteger(1, 360);
-        let complementaryHue = (baseHue + randomInteger(90, 270) % 360);
-        this.setPixelColors(`hsl(${baseHue}, 100%, 60%)`, `hsl(${complementaryHue}, 100%, 60%)`)
+    let complementaryHue = baseHue + (randomInteger(90, 270) % 360);
+    this.setPixelColors(
+      `hsl(${baseHue}, 100%, 60%)`,
+      `hsl(${complementaryHue}, 100%, 60%)`,
+    );
   }
 
   /*
       Given a bounding box, apply the currently selected rules to ONLY the
       pixels within the provided box.
     */
-    applyColorsWithin(rowStart, rowStop, colStart, colStop, lifeStyle, deathStyle) {
+  applyColorsWithin(
+    rowStart,
+    rowStop,
+    colStart,
+    colStop,
+    lifeStyle,
+    deathStyle,
+  ) {
     for (let i = rowStart; i < rowStop; i++) {
       for (let j = colStart; j < colStop; j++) {
         let pixel = this.grid[i][j];
@@ -251,8 +266,14 @@ export default class ConwaySimulator {
     */
   applyRandomColorsWithin(rowStart, rowStop, colStart, colStop) {
     let baseHue = randomInteger(1, 360);
-        let complementaryHue = (baseHue + randomInteger(90, 270) % 360);
-        this.applyColorsWithin(rowStart, rowStop, colStart, `hsl(${baseHue}, 100%, 60%)`, `hsl(${complementaryHue}, 100%, 60%)`)
+    let complementaryHue = baseHue + (randomInteger(90, 270) % 360);
+    this.applyColorsWithin(
+      rowStart,
+      rowStop,
+      colStart,
+      `hsl(${baseHue}, 100%, 60%)`,
+      `hsl(${complementaryHue}, 100%, 60%)`,
+    );
   }
 
   /*
@@ -269,12 +290,11 @@ export default class ConwaySimulator {
     this.repaint();
   }
 
-
   /*
       Given a bounding box, apply the currently selected rules to ONLY the
       pixels within the provided box.
     */
-    resetLifeWithin(rowStart, rowStop, colStart, colStop, chanceOfLife = .1) {
+  resetLifeWithin(rowStart, rowStop, colStart, colStop, chanceOfLife = 0.1) {
     for (let i = rowStart; i < rowStop; i++) {
       for (let j = colStart; j < colStop; j++) {
         let pixel = this.grid[i][j];
@@ -321,7 +341,16 @@ export default class ConwaySimulator {
       Given a bounding box, apply the currently selected rules to ONLY the
       pixels within the provided box.
     */
-    setRulesWithin(rowStart, rowStop, colStart, colStop, underpopulation, overpopulation, reproductionMin, reproductionMax) {
+  setRulesWithin(
+    rowStart,
+    rowStop,
+    colStart,
+    colStop,
+    underpopulation,
+    overpopulation,
+    reproductionMin,
+    reproductionMax,
+  ) {
     for (let i = rowStart; i < rowStop; i++) {
       for (let j = colStart; j < colStop; j++) {
         let pixel = this.grid[i][j];
@@ -340,7 +369,7 @@ export default class ConwaySimulator {
       updated when it is clicked (or dragged-over)
     */
   registerMouseListeners() {
-        bindMultipleEventListener(this.canvas, ['mousemove', 'touchmove'], (e) => {
+    bindMultipleEventListener(this.canvas, ["mousemove", "touchmove"], (e) => {
       e.preventDefault();
       if (this.mouseIsDown) {
         let x, y;
@@ -348,8 +377,7 @@ export default class ConwaySimulator {
           let rect = e.target.getBoundingClientRect();
           x = Math.floor((e.touches[0].pageX - rect.left) / this.pixelSize);
           y = Math.floor((e.touches[0].pageY - rect.top) / this.pixelSize);
-                }
-                else {
+        } else {
           x = Math.floor(e.offsetX / this.pixelSize);
           y = Math.floor(e.offsetY / this.pixelSize);
         }
@@ -360,7 +388,7 @@ export default class ConwaySimulator {
     });
 
     // Capture mouse state for click and drag features
-        bindMultipleEventListener(this.canvas, ['mousedown', 'touchstart'], (e) => {
+    bindMultipleEventListener(this.canvas, ["mousedown", "touchstart"], (e) => {
       e.preventDefault();
       let rect = e.target.getBoundingClientRect();
       let x, y;
@@ -368,8 +396,7 @@ export default class ConwaySimulator {
         let rect = e.target.getBoundingClientRect();
         x = Math.floor((e.touches[0].pageX - rect.left) / this.pixelSize);
         y = Math.floor((e.touches[0].pageY - rect.top) / this.pixelSize);
-            }
-            else {
+      } else {
         x = Math.floor(e.offsetX / this.pixelSize);
         y = Math.floor(e.offsetY / this.pixelSize);
       }
@@ -379,14 +406,13 @@ export default class ConwaySimulator {
       this.mouseIsDown = true;
     });
 
-        bindMultipleEventListener(this.canvas, ['mouseup', 'touchend'], (e) => {
+    bindMultipleEventListener(this.canvas, ["mouseup", "touchend"], (e) => {
       e.preventDefault();
       this.mouseIsDown = false;
     });
   }
 }
 
-
 /*
   A single pixel within a greater ConwaySimulator. Each ConwayPixel has it's own rules for evolution,
   and for performance reason's maintains a list of it's neighbors inside of it's simulator.
@@ -395,14 +421,13 @@ export default class ConwaySimulator {
   ConwayPixels outside of the ConwaySimulator class is not advised.
 */
 class ConwayPixel {
-
   /*
       Constuct a default ConwayPixel, which follows the original Game of Life rules.
     */
   constructor(alive) {
     this.alive = alive;
-        this.lifeStyle = '#000000';
-        this.deathStyle = '#FFFFFF';
+    this.lifeStyle = "#000000";
+    this.deathStyle = "#F5FFFA";
     this.underpopulation = 2;
     this.overpopulation = 3;
     this.reproductionMin = 3;
@@ -416,7 +441,7 @@ class ConwayPixel {
 
     // Reproduction min cannot be more than reproduction max
     if (this.reproductionMax < this.reproductionMin) {
-            this.reproductionMin = this.reproductionMax
+      this.reproductionMin = this.reproductionMax;
     }
   }
 
@@ -448,11 +473,13 @@ class ConwayPixel {
 
     if (nextState && sum < this.underpopulation) {
       nextState = false;
-        }
-        else if (nextState && sum > this.overpopulation) {
+    } else if (nextState && sum > this.overpopulation) {
       nextState = false;
-        }
-        else if (!nextState && sum >= this.reproductionMin && sum <= this.reproductionMax) {
+    } else if (
+      !nextState &&
+      sum >= this.reproductionMin &&
+      sum <= this.reproductionMax
+    ) {
       nextState = true;
     }
 

src/styles/header.css

@@ -1,5 +1,9 @@
 .container {
   width: 710px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin: 24px 0px;
 }
 
 .header {
@@ -49,9 +53,14 @@
   gap: 8px;
 }
 
+.title-and-nav hr {
+  margin-bottom: 0;
+}
+
 .title-and-gol {
   display: flex;
   flex-direction: row;
+  gap: 16px;
   align-items: center;
   height: 110px;
 }
@@ -62,6 +71,7 @@
   max-width: 250;
   margin: 0;
   padding: 0;
+  padding-bottom: 8px;
 }
 
 .footer {

src/styles/home.css

@@ -0,0 +1,35 @@
+.posts {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+
+.post {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.post-category {
+  margin: 0;
+  padding: 0;
+  color: #2f4f4f;
+}
+
+.post-title {
+  font-size: var(--h4-desktop);
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+
+.post-summary {
+  margin: 0;
+  padding: 0;
+}
+
+.post-date {
+  margin: 0;
+  padding: 0;
+  color: gray;
+}