feat: add category pages

This commit is contained in:
log101 2024-05-07 19:35:30 +03:00
parent a28a445fe9
commit 43cdb2c4ad
8 changed files with 58 additions and 174 deletions

View File

@ -1,54 +1 @@
# Astro Starter Kit: Basics
```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).
> Geçmesi imkansız geçmiş, gelmesi imkansız gelecek...

View File

@ -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>
<li><a href="#">Babür'ün Serüvenleri</a></li>
<li><a href="#">Ansiklopedi</a></li>
{
Object.entries(CATEGORIES).map(([k, v]) => (
<li>
<a href=`/category/${k}`>{v}</a>
</li>
))
}
</ul>
<hr />
</div>

18
src/components/Post.astro Normal file
View File

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

View File

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

View File

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

View File

@ -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) => (
<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>
))
.map((p) => <Post data={p.data} />)
}
</div>
<a class="home-all-posts" href="#">Tüm Yayınlar</a>
<Footer />
</div>
</Layout>

View File

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

View File

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