feat: add sample content and styling

This commit is contained in:
log101 2024-05-06 22:36:07 +03:00
parent 5fa72ed63e
commit f68fc049ea
11 changed files with 450 additions and 345 deletions

1
.gitignore vendored
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

35
src/styles/home.css Normal file
View File

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