feat: add category pages

README.md

@@ -1,54 +1 @@
-# Astro Starter Kit: Basics
+> Geçmesi imkansız geçmiş, gelmesi imkansız gelecek...
-
-```sh
-npm create astro@latest -- --template basics
-```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

src/components/Header.astro

@@ -1,5 +1,5 @@
 ---
-
+import { CATEGORIES } from "../content/config";
 ---
 
 <div class="header">
@@ -17,10 +17,13 @@
     </div>
     <div>
       <ul class="nav-links undecorated-anchor">
-        <li><a href="#">Teknik</a></li>
+        {
-        <li><a href="#">Fikir</a></li>
+          Object.entries(CATEGORIES).map(([k, v]) => (
-        <li><a href="#">Babür'ün Serüvenleri</a></li>
+            <li>
-        <li><a href="#">Ansiklopedi</a></li>
+              <a href=`/category/${k}`>{v}</a>
+            </li>
+          ))
+        }
       </ul>
       <hr />
     </div>

src/components/Post.astro

@@ -0,0 +1,18 @@
+---
+const { data } = Astro.props;
+---
+
+<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>
+</div>

src/content/config.ts

@@ -1,5 +1,12 @@
 import { z, defineCollection } from "astro:content";
 
+export const CATEGORIES = {
+  fikir: "Fikir",
+  teknik: "Teknik",
+  edebiyat: "Babür'ün Serüvenleri",
+  ansiklopedi: "Ansiklopedi",
+};
+
 const blogCollection = defineCollection({
   type: "content",
   schema: z.object({

src/pages/category/[category].astro

@@ -0,0 +1,15 @@
+---
+import { CATEGORIES } from "../../content/config";
+
+export function getStaticPaths() {
+  return Object.keys(CATEGORIES).map((k) => {
+    return {
+      params: { category: k },
+    };
+  });
+}
+
+const { category } = Astro.params;
+---
+
+<div>Catakulli, {category}!</div>

src/pages/index.astro

@@ -6,6 +6,7 @@ import "../styles/header.css";
 import "../styles/home.css";
 
 import { getCollection } from "astro:content";
+import Post from "../components/Post.astro";
 
 const allTeknikPosts = await getCollection("blog");
 ---
@@ -17,22 +18,10 @@ const allTeknikPosts = await getCollection("blog");
       {
         allTeknikPosts
           .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
-          .map((p) => (
+          .map((p) => <Post data={p.data} />)
-            <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>
+    <a class="home-all-posts" href="#">Tüm Yayınlar</a>
     <Footer />
   </div>
 </Layout>

src/scripts/gol.js

@@ -1,100 +0,0 @@
-const boardElement = document.getElementById('board');
-let boardWidth = 100;  // Width of the board
-const boardHeight = 7;  // Height of the board
-const currentGrid = [];  // Current state of the grid
-const nextGrid = [];  // Next state of the grid
-let intervalId;  // ID for the setInterval
-
-const cells = ['30', '20', '51', '01', '62', '63', '03', '64', '54', '44', '34', '24', '14']
-
-const heavyWeightSpaceshipCell = (x, y) => {
-    const coor = `${x}${y}`
-    return cells.includes(coor)
-}
-
-function initializeBoard() {
-    for (let y = 0; y < boardHeight; y++) {
-        currentGrid[y] = [];
-        nextGrid[y] = [];
-        for (let x = 0; x < boardWidth; x++) {
-            let cell = document.createElement('div');
-            cell.classList.add('cell');
-            boardElement.appendChild(cell);
-            if (heavyWeightSpaceshipCell(x, y)) {
-                cell.classList.add('alive')
-                currentGrid[y][x] = 1;
-                nextGrid[y][x] = 0;
-            } else {
-                currentGrid[y][x] = 0;
-                nextGrid[y][x] = 0;
-            }
-        }
-    }
-}
-
-function computeNextGeneration() {
-    for (let y = 0; y < boardHeight; y++) {
-        for (let x = 0; x < boardWidth; x++) {
-            const aliveNeighbors = countAliveNeighbors(y, x);
-            const cell = currentGrid[y][x];
-            nextGrid[y][x] = (cell === 1 && (aliveNeighbors === 2 || aliveNeighbors === 3)) || (cell === 0 && aliveNeighbors === 3) ? 1 : 0;
-        }
-    }
-
-    // Apply changes and minimize DOM updates
-    for (let y = 0; y < boardHeight; y++) {
-        for (let x = 0; x < boardWidth; x++) {
-            if (currentGrid[y][x] !== nextGrid[y][x]) {
-                const cellElement = boardElement.children[y * boardWidth + x];
-                cellElement.classList.toggle('alive', nextGrid[y][x] === 1);
-            }
-            currentGrid[y][x] = nextGrid[y][x];
-        }
-    }
-}
-
-function countAliveNeighbors(y, x) {
-    let count = 0;
-    for (let yOffset = -1; yOffset <= 1; yOffset++) {
-        for (let xOffset = -1; xOffset <= 1; xOffset++) {
-            if (yOffset === 0 && xOffset === 0) continue;
-            const newY = (y + yOffset + boardHeight) % boardHeight;
-            const newX = (x + xOffset + boardWidth) % boardWidth;
-            count += currentGrid[newY][newX];
-        }
-    }
-    return count;
-}
-
-function startGame() {
-    if (intervalId) clearInterval(intervalId);
-    intervalId = setInterval(computeNextGeneration, 100);
-}
-
-function changeWidth() {
-    if (intervalId) clearInterval(intervalId); // stop the game
-
-    document.querySelectorAll(".cell").forEach(el => el.remove()); // remove the cells
-
-    var r = document.querySelector(':root')
-    boardWidth += 50;
-    boardWidth %= 200;
-
-
-    r.style.setProperty('--board-width', boardWidth)
-    initializeBoard()
-}
-
-const startButton = document.getElementById('startButton')
-
-startButton.onclick = startGame
-
-const changeWidthButton = document.getElementById('changeWidthButton')
-
-changeWidthButton.onclick = changeWidth
-
-window.onresize = () => {
-    console.log(document.getElementById('board').clientWidth)
-}
-
-initializeBoard();

src/styles/home.css

@@ -14,7 +14,7 @@
   margin: 0;
   padding: 0;
   color: #2f4f4f;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.03em;
 }
 
 .post-title {
@@ -34,3 +34,8 @@
   padding: 0;
   color: gray;
 }
+
+.home-all-posts {
+  padding-top: 16px;
+  color: inherit;
+}