EricRovell · EricRovell · Sep 4, 2023 · Sep 2, 2023 · Sep 2, 2023 · Sep 2, 2023
diff --git a/.nojekyll b/.nojekyll
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -3,6 +3,7 @@
 		"dbaeumer.vscode-eslint",
 		"editorconfig.editorconfig",
 		"yzhang.markdown-all-in-one",
-		"svelte.svelte-vscode"
+		"svelte.svelte-vscode",
+		"vunguyentuan.vscode-css-variables"
 	]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,5 +6,9 @@
 		"javascript",
 		"typescript",
 		"svelte"
+	],
+	"cssVariables.lookupFiles": [
+		"src/lib/styles/tokens.css",
+		"src/lib/styles/theme-*.css"
 	]
 }
diff --git a/CNAME b/CNAME
diff --git a/src/app.html b/src/app.html
@@ -8,6 +8,10 @@
 		%sveltekit.head%
 	</head>
 	<body>
+		<script>
+			const theme = localStorage.getItem("theme");
+			if (theme) document.documentElement.setAttribute("theme", theme);
+		</script>
 		%sveltekit.body%
 	</body>
 </html>
diff --git a/src/content/README.md b/src/content/README.md
@@ -0,0 +1,130 @@
+# Content pages
+
+The directory contains collections as pages:
+
+- blogpost;
+- gallery;
+- project;
+- sketch.
+
+## Page frontmatter
+
+Each page frontmatter has interface:
+
+```ts
+interface Page {
+	"cover"?: string;
+	"dateCreated"?: ISOString;
+	"dateUpdated": ISOString;
+	"description": string;
+	"keywords": string[];
+	"layout"?: string;
+	"slug": string;
+	"title": string;
+	"translation"?: {
+		lang: "русский" | "english;
+		slug: string;
+	};
+}
+```
+
+### Page
+
+```ts
+interface Page {
+	"description": string;
+	"keywords": string[];
+	"lang": "en" | "ru;
+	"slug": string;
+	"title": string;
+	"updated": ISOString;
+}
+```
+
+### Blogpost
+
+```ts
+interface PageBlogpost {
+	"cover": string;
+	"created": ISOString;
+	"description": string;
+	"keywords": string[];
+	"lang": "en" | "ru;
+	"layout": "blogpost";
+	"slug": string;
+	"title": string;
+	"translation"?: {
+		lang: "русский" | "english;
+		slug: string;
+	};
+	"updated": ISOString;
+}
+```
+
+### Gallery
+
+```ts
+interface Image {
+	height: number;
+	src: string;
+	width: string;
+}
+
+interface PageGalleryItem {
+	camera: string;
+	dateCreated: string;
+	dateTaken: string;
+	dateUpdated?: string;
+	description: string;
+	dominant: [ r: number, g: number, b: number ];
+	fnumber: number;
+	focalLength: number;
+	fullsize: Image;
+	id: string;
+	iso: number;
+	keywords?: string[];
+	lang: "en" | "ru";
+	layout: "gallery";
+	lens: string;
+	og: Image;
+	shutter: string;
+	slug: string;
+	thumbnail: Image;
+	thumbnailSquare: Image;
+	title: string;
+}
+```
+
+### Project
+
+```ts
+interface PageProject {
+	"description": string;
+	"featured": boolean;
+	"lang": "en" | "ru;
+	"layout": "project";
+	"maintained": boolean;
+	"name": string;
+	"npm": string;
+	"repository": string;
+	"techstack": string[];
+	"type": string;
+	"updated": ISOString;
+	"website": string;
+}
+```
+
+### Sketch
+
+```ts
+interface PageSketch {
+	"cover": string;
+	"description": string;
+	"keywords": string[];
+	"lang": "en" | "ru";
+	"layout": "sketch";
+	"title": string;
+	"updated": ISOString;
+	"url": string;
+}
+```
diff --git a/src/content/blogpost/chaos-game/index.en.svx b/src/content/blogpost/chaos-game/index.en.svx
@@ -1,14 +1,22 @@
 ---
-cover: https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png
-created: 2022-09-10T01:34:00.000Z
-description: "Can be anything deterministic hidden behind the random?"
-keywords: [ "generative art", "math" ]
-lang: en
-layout: blogpost
-slug: "the-chaos-game"
-title: "The Chaos Game: The randomness against determinism"
-translation: { lang: "русский", slug: "игра-хаоса" }
-updated: 2023-01-09T15:20:00.000Z
+{
+	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png",
+	"dateCreated": "2022-09-10T01:34:00.000Z",
+	"dateUpdated": "2023-01-09T15:20:00.000Z",
+	"description": "Can be anything deterministic hidden behind the random?",
+	"keywords": [
+		"generative art",
+		"math"
+	],
+	"lang": "en",
+	"layout": "blogpost",
+	"slug": "the-chaos-game",
+	"title": "The Chaos Game: The randomness against determinism",
+	"translation": {
+		lang: "русский",
+		slug: "игра-хаоса"
+	}
+}
 ---
 
 <script>

diff --git a/src/content/blogpost/chaos-game/index.ru.svx b/src/content/blogpost/chaos-game/index.ru.svx
@@ -1,14 +1,22 @@
 ---
-cover: https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png
-created: 2022-09-10T01:34:00.000Z
-description: "Может ли что-то детерменистичное скрываться за случайностью?"
-keywords: [ "generative art", "math" ]
-lang: ru
-layout: blogpost
-slug: "игра-хаоса"
-title: "Игра Хаоса: случайность против детерменизма"
-translation: { lang: "english", slug: "the-chaos-game" }
-updated: 2023-01-09T15:20:00.000Z
+{
+	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/chaos-game.png",
+	"dateCreated": "2022-09-10T01:34:00.000Z",
+	"dateUpdated": "2023-01-09T15:20:00.000Z",
+	"description": "Может ли что-то детерменистичное скрываться за случайностью?",
+	"keywords": [
+		"generative art",
+		"math"
+	],
+	"lang": "ru",
+	"layout": "blogpost",
+	"slug": "игра-хаоса",
+	"title": "Игра Хаоса: случайность против детерменизма",
+	"translation": {
+		lang: "english",
+		slug: "the-chaos-game"
+	}
+}
 ---
 
 <script>

diff --git a/src/content/blogpost/crop-factor/components/lens-projection/LensProjection.svelte b/src/content/blogpost/crop-factor/components/lens-projection/LensProjection.svelte
@@ -6,7 +6,7 @@
 	export let cropFactor = 1;
 	export let height = 24;
 	export let width = 36;
-	export let imageSrc = "/img/blogpost-crop-factor-comparison.jpg";
+	export let imageSrc = "https://storage.yandexcloud.net/escapist-marginalia/writing/crop-factor-comparison.jpg";
 	export let imageFocalLength = 16;
 	export let focalLength = imageFocalLength;
 

diff --git a/src/content/blogpost/crop-factor/index.ru.svx b/src/content/blogpost/crop-factor/index.ru.svx
@@ -1,13 +1,19 @@
 ---
-cover: https://storage.yandexcloud.net/escapist-marginalia/covers/crop-factor.png
-created: 2023-04-14T00:12:00.000Z
-description: "На что влияет размеры сенсора в фотографии и почему это так важно знать фотолюбителю."
-keywords: [ "photography", "crop-factor", "equivalent focal length" ]
-lang: "ru"
-layout: blogpost
-slug: "кроп-фактор"
-title: "Кроп Фактор"
-updated: 2023-04-16T01:41:00.000Z
+{
+	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/crop-factor.png",
+	"dateCreated": "2023-04-14T00:12:00.000Z",
+	"dateUpdated": "2023-04-16T01:41:00.000Z",
+	"description": "На что влияет размеры сенсора в фотографии и почему это так важно знать фотолюбителю.",
+	"keywords": [
+		"photography",
+		"crop-factor",
+		"equivalent focal length"
+	],
+	"lang": "ru",
+	"layout": "blogpost",
+	"slug": "кроп-фактор",
+	"title": "Кроп Фактор"
+}
 ---
 
 <script>

diff --git a/...ntent/blogpost/crop-factor/interactive/crop-factor-comparison/CropFactorComparison.svelte b/...ntent/blogpost/crop-factor/interactive/crop-factor-comparison/CropFactorComparison.svelte
@@ -5,7 +5,7 @@
 	import { cropFactorData } from "./crop-factor-data";
 	import styles from "./crop-factor-comparison.module.css";
 
-	export let imageSrc = "/img/blogpost-crop-factor-comparison.jpg";
+	export let imageSrc = "https://storage.yandexcloud.net/escapist-marginalia/writing/crop-factor-comparison.jpg";
 
 	const t = getContext<Record<string, string>>("t")["crop-factor-comparison"];
 	const maskID = uniqueID.get();

diff --git a/src/content/blogpost/css-only-masonry/index.en.svx b/src/content/blogpost/css-only-masonry/index.en.svx
@@ -1,14 +1,22 @@
 ---
-cover: https://storage.yandexcloud.net/escapist-marginalia/covers/masonry.png
-created: 2022-05-11T15:30:00.000Z
-description: "Build Masonry-like layout image gallery component using the modern CSS."
-keywords: [ "css", "web" ]
-lang: en
-layout: blogpost
-slug: "masonry-image-gallery-with-almost-pure-css"
-title: "Masonry Image Gallery Layout with (almost) pure CSS"
-translation: { lang: "русский", slug: "галерея-изображений-в-раскладке-masonry-на-почти-чистом-css" }
-updated: 2022-09-22T03:16:00.000Z
+{
+	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/masonry.png",
+	"dateCreated": "2022-05-11T15:30:00.000Z",
+	"dateUpdated": "2022-09-22T03:16:00.000Z",
+	"description": "Build Masonry-like layout image gallery component using the modern CSS.",
+	"keywords": [
+		"css",
+		"web"
+	],
+	"lang": "en",
+	"layout": "blogpost",
+	"slug": "masonry-image-gallery-with-almost-pure-css",
+	"title": "Masonry Image Gallery Layout with (almost) pure CSS",
+	"translation": {
+		lang: "русский",
+		slug: "галерея-изображений-в-раскладке-masonry-на-почти-чистом-css"
+	}
+}
 ---
 
 <script>

diff --git a/src/content/blogpost/css-only-masonry/index.ru.svx b/src/content/blogpost/css-only-masonry/index.ru.svx
@@ -1,14 +1,22 @@
 ---
-cover: https://storage.yandexcloud.net/escapist-marginalia/covers/masonry.png
-created: 2022-05-11T15:30:00.000Z
-description: "Реализуем компонент для галереи изображений в стиле раскладки Masonry, используя возможности CSS."
-keywords: [ "css", "web" ]
-lang: ru
-layout: blogpost
-slug: "галерея-изображений-в-раскладке-masonry-на-почти-чистом-css"
-title: "Галерея изображений в раскладке Masonry на (почти) чистом CSS"
-translation: { lang: "english", slug: "masonry-image-gallery-with-almost-pure-css" }
-updated: 2022-09-22T03:16:00.000Z
+{
+	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/masonry.png",
+	"dateCreated": "2022-05-11T15:30:00.000Z",
+	"dateUpdated": "2022-09-22T03:16:00.000Z",
+	"description": "Реализуем компонент для галереи изображений в стиле раскладки Masonry, используя возможности CSS.",
+	"keywords": [
+		"css",
+		"web"
+	],
+	"lang": "ru",
+	"layout": "blogpost",
+	"slug": "галерея-изображений-в-раскладке-masonry-на-почти-чистом-css",
+	"title": "Галерея изображений в раскладке Masonry на (почти) чистом CSS",
+	"translation": {
+		lang: "english",
+		slug: "masonry-image-gallery-with-almost-pure-css"
+	}
+}
 ---
 
 <script>

diff --git a/src/content/blogpost/project-euler/problem-001/index.en.svx b/src/content/blogpost/project-euler/problem-001/index.en.svx
@@ -1,14 +1,22 @@
 ---
-cover: https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-1.png
-created: 2022-05-24T00:20:00.000Z
-description: "Multiples of 3 or 5."
-keywords: [ "project euler", "math" ]
-lang: en
-layout: blogpost
-series: "project-euler"
-slug: "project-euler-1"
-title: "Project Euler #1"
-translation: { lang: "русский", slug: "проект-эйлера-1" }
+{
+	"cover": "https://storage.yandexcloud.net/escapist-marginalia/covers/project-euler-1.png",
+	"dateCreated": "2022-05-24T00:20:00.000Z",
+	"description": "Multiples of 3 or 5.",
+	"keywords": [
+		"project euler",
+		"math"
+	],
+	"lang": "en",
+	"layout": "blogpost",
+	"series": "project-euler",
+	"slug": "project-euler-1",
+	"title": "Project Euler #1",
+	"translation": {
+		lang: "русский",
+		slug: "проект-эйлера-1"
+	}
+}
 ---
 
 <script>