feat: add category pages
This commit is contained in:
parent
a28a445fe9
commit
43cdb2c4ad
55
README.md
55
README.md
|
|
@ -1,54 +1 @@
|
|||
# Astro Starter Kit: Basics
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
## 🚀 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...
|
||||
|
|
|
|||
|
|
@ -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
18
src/components/Post.astro
Normal 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>
|
||||
|
|
@ -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({
|
||||
|
|
|
|||
15
src/pages/category/[category].astro
Normal file
15
src/pages/category/[category].astro
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user