feat: add sample content and styling
This commit is contained in:
parent
5fa72ed63e
commit
f68fc049ea
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -22,3 +22,4 @@ pnpm-debug.log*
|
|||
|
||||
# jetbrains setting folder
|
||||
.idea/
|
||||
TODO
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
|
@ -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
|
||||
---
|
|
@ -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
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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
35
src/styles/home.css
Normal 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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user