chore(deps): use pnpm 9.8

Beta

.astro/astro/content.d.ts

@@ -0,0 +1,256 @@
+declare module 'astro:content' {
+	interface Render {
+		'.mdx': Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			remarkPluginFrontmatter: Record<string, any>;
+		}>;
+	}
+}
+
+declare module 'astro:content' {
+	interface RenderResult {
+		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+		headings: import('astro').MarkdownHeading[];
+		remarkPluginFrontmatter: Record<string, any>;
+	}
+	interface Render {
+		'.md': Promise<RenderResult>;
+	}
+
+	export interface RenderedContent {
+		html: string;
+		metadata?: {
+			imagePaths: Array<string>;
+			[key: string]: unknown;
+		};
+	}
+}
+
+declare module 'astro:content' {
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof AnyEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+	export type ContentCollectionKey = keyof ContentEntryMap;
+	export type DataCollectionKey = keyof DataEntryMap;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
+		ContentEntryMap[C]
+	>['slug'];
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getEntryBySlug<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		// Note that this has to accept a regular string too, for SSR
+		entrySlug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
+		collection: C,
+		entryId: E,
+	): Promise<CollectionEntry<C>>;
+
+	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E,
+	): Promise<E[]>;
+	export function getCollection<C extends keyof AnyEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown,
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(entry: {
+		collection: C;
+		slug: E;
+	}): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(entry: {
+		collection: C;
+		id: E;
+	}): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		slug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E,
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof ContentEntryMap>(
+		entries: {
+			collection: C;
+			slug: ValidContentEntrySlug<C>;
+		}[],
+	): Promise<CollectionEntry<C>[]>;
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: {
+			collection: C;
+			id: keyof DataEntryMap[C];
+		}[],
+	): Promise<CollectionEntry<C>[]>;
+
+	export function render<C extends keyof AnyEntryMap>(
+		entry: AnyEntryMap[C][string],
+	): Promise<RenderResult>;
+
+	export function reference<C extends keyof AnyEntryMap>(
+		collection: C,
+	): import('astro/zod').ZodEffects<
+		import('astro/zod').ZodString,
+		C extends keyof ContentEntryMap
+			? {
+					collection: C;
+					slug: ValidContentEntrySlug<C>;
+				}
+			: {
+					collection: C;
+					id: keyof DataEntryMap[C];
+				}
+	>;
+	// Allow generic `string` to avoid excessive type errors in the config
+	// if `dev` is not running to update as you edit.
+	// Invalid collection names will be caught at build time.
+	export function reference<C extends string>(
+		collection: C,
+	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+
+	type ContentEntryMap = {
+		"blog": {
+"10-essential-web-development-tools-for-building-stunning-websites.mdx": {
+	id: "10-essential-web-development-tools-for-building-stunning-websites.mdx";
+  slug: "10-essential-web-development-tools-for-building-stunning-websites";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"benefits-of-headless-cms-development-with-directus.mdx": {
+	id: "benefits-of-headless-cms-development-with-directus.mdx";
+  slug: "benefits-of-headless-cms-development-with-directus";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"comparing-mvc-frameworks.mdx": {
+	id: "comparing-mvc-frameworks.mdx";
+  slug: "comparing-mvc-frameworks";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"debugging-tips-for-astrojs.mdx": {
+	id: "debugging-tips-for-astrojs.mdx";
+  slug: "debugging-tips-for-astrojs";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"dockerizing-front-end-development.mdx": {
+	id: "dockerizing-front-end-development.mdx";
+  slug: "dockerizing-front-end-development";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"essential-frontend-tools-for-astro-js-developers.mdx": {
+	id: "essential-frontend-tools-for-astro-js-developers.mdx";
+  slug: "essential-frontend-tools-for-astro-js-developers";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"exploring-nodejs-development-trends-2024.mdx": {
+	id: "exploring-nodejs-development-trends-2024.mdx";
+  slug: "exploring-nodejs-development-trends-2024";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"getting-started-with-astrojs.mdx": {
+	id: "getting-started-with-astrojs.mdx";
+  slug: "getting-started-with-astrojs";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"mastering-markdown.mdx": {
+	id: "mastering-markdown.mdx";
+  slug: "mastering-markdown";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"modern-web-frameworks-introduction.mdx": {
+	id: "modern-web-frameworks-introduction.mdx";
+  slug: "modern-web-frameworks-introduction";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"this-is-a-draft.mdx": {
+	id: "this-is-a-draft.mdx";
+  slug: "this-is-a-draft";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"top-10-ides-for-astrojs.mdx": {
+	id: "top-10-ides-for-astrojs.mdx";
+  slug: "top-10-ides-for-astrojs";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"unleasing-the-power-of-astro-js-for-better-web-development.mdx": {
+	id: "unleasing-the-power-of-astro-js-for-better-web-development.mdx";
+  slug: "unleasing-the-power-of-astro-js-for-better-web-development";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+};
+
+	};
+
+	type DataEntryMap = {
+		
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = typeof import("../../src/content/config.js");
+}

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1741386617926
+	}
+}

.astro/types.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

.dockerignore

@@ -1,8 +1,10 @@
+.frontmatter
 .git
 .github
-.vscode
-node_modules
 .gitignore
+.vscode
 CHANGELOG.md
-README.md
 dist
+frontmatter.json
+node_modules
+README.md

.env.example

@@ -0,0 +1,2 @@
+SITE_URL = "https://astro.deployn.de"
+DIRECTUS_URL = "https://directus.astro.deployn.de"

.frontmatter/database/mediaDb.json

@@ -0,0 +1 @@
+{ "src": { "assets": { "images": {} }, "pages": { "blog": {} } } }

.frontmatter/database/pinnedItemsDb.json

@@ -0,0 +1 @@
+{}

.frontmatter/database/taxonomyDb.json

@@ -0,0 +1 @@
+{ "taxonomy": { "tags": [], "categories": [] } }

.gitignore

@@ -1,2 +1,3 @@
+.env
 node_modules/
 dist/

.prettierignore

@@ -1,3 +1,4 @@
+.astro
 .github
 dist
 node_modules

.vscode/extensions.json

@@ -1,8 +1,11 @@
 {
   "recommendations": [
+    "adrianwilczynski.alpine-js-intellisense",
     "astro-build.astro-vscode",
     "bradlc.vscode-tailwindcss",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "frontmatter.frontmatter-vscode",
+    "unifiedjs.vscode-mdx"
   ],
   "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "[markdown]": {}
+}

CHANGELOG.md

@@ -1,3 +1,375 @@
+# [1.29.0](https://github.com/deployn/astro-deploy/compare/v1.28.0...v1.29.0) (2025-03-08)
+
+
+### Features
+
+* add 404 page ([04cba4f](https://github.com/deployn/astro-deploy/commit/04cba4fa051b1c8958aa4dfe99266c56d0e8cf0b))
+* **blog:** add redirect to 404 page if entry is not found ([6cd32df](https://github.com/deployn/astro-deploy/commit/6cd32df0eeadad3094cc35724961a4bbd5541eb0))
+* **Dockerfile:** use Alpine base image and add healthcheck ([02e218d](https://github.com/deployn/astro-deploy/commit/02e218d1853c3c06d48bb3f8811564d910c61837))
+
+# [1.29.0-beta.3](https://github.com/deployn/astro-deploy/compare/v1.29.0-beta.2...v1.29.0-beta.3) (2024-10-05)
+
+
+### Features
+
+* **blog:** add redirect to 404 page if entry is not found ([6cd32df](https://github.com/deployn/astro-deploy/commit/6cd32df0eeadad3094cc35724961a4bbd5541eb0))
+
+# [1.29.0-beta.2](https://github.com/deployn/astro-deploy/compare/v1.29.0-beta.1...v1.29.0-beta.2) (2024-10-05)
+
+
+### Features
+
+* add 404 page ([04cba4f](https://github.com/deployn/astro-deploy/commit/04cba4fa051b1c8958aa4dfe99266c56d0e8cf0b))
+
+# [1.29.0-beta.1](https://github.com/deployn/astro-deploy/compare/v1.28.0...v1.29.0-beta.1) (2024-10-04)
+
+
+### Features
+
+* **Dockerfile:** use Alpine base image and add healthcheck ([02e218d](https://github.com/deployn/astro-deploy/commit/02e218d1853c3c06d48bb3f8811564d910c61837))
+
+# [1.28.0](https://github.com/deployn/astro-deploy/compare/v1.27.0...v1.28.0) (2024-09-13)
+
+
+### Features
+
+* **header:** improve mobile menu functionality and add navigation rail ([6fdffbe](https://github.com/deployn/astro-deploy/commit/6fdffbe5c631935cf79d8bf8b7d89df143bc4111))
+
+# [1.27.0](https://github.com/deployn/astro-deploy/compare/v1.26.0...v1.27.0) (2024-04-12)
+
+
+### Features
+
+* **blog:** add additional frontmatter fields for dates, authors, image, draft ([6c81e94](https://github.com/deployn/astro-deploy/commit/6c81e942a6f78f999a81410c2e1494c0b72a58a7))
+
+# [1.26.0](https://github.com/deployn/astro-deploy/compare/v1.25.3...v1.26.0) (2024-04-07)
+
+
+### Features
+
+* **blog:** add custom prose styling ([9a6ad69](https://github.com/deployn/astro-deploy/commit/9a6ad6937800c5b65f7c4b231eff07704f59153b))
+
+## [1.25.3](https://github.com/deployn/astro-deploy/compare/v1.25.2...v1.25.3) (2024-04-06)
+
+
+### Bug Fixes
+
+* **index:** update index page ([665da2a](https://github.com/deployn/astro-deploy/commit/665da2a1a6572af3da63a6c584a3dcb17f781f89))
+
+## [1.25.2](https://github.com/deployn/astro-deploy/compare/v1.25.1...v1.25.2) (2024-04-06)
+
+
+### Bug Fixes
+
+* **footer:** update footer ([96595ff](https://github.com/deployn/astro-deploy/commit/96595ff3d12407a32fe863cb7244dfcef3e8a136))
+* **header:** remove logic to open menu automatically on wider screens ([7d7ee86](https://github.com/deployn/astro-deploy/commit/7d7ee869aea6b93c70e09f348f3e8c689abcbee6))
+* **header:** update header ([10b42cd](https://github.com/deployn/astro-deploy/commit/10b42cd2ff717aa7896416989a89aac383482021))
+
+## [1.25.1](https://github.com/deployn/astro-deploy/compare/v1.25.0...v1.25.1) (2024-03-20)
+
+
+### Bug Fixes
+
+* **layout:** Change default index and follow behavior ([63c4358](https://github.com/deployn/astro-deploy/commit/63c435809e64cfa7ef6ac66201cf1799194b7795))
+
+# [1.25.0](https://github.com/deployn/astro-deploy/compare/v1.24.4...v1.25.0) (2024-03-15)
+
+
+### Features
+
+* **layout:** add noindex, nofollow options ([1730207](https://github.com/deployn/astro-deploy/commit/1730207b88eff59f9866339d66c34a905164ec45))
+
+## [1.24.4](https://github.com/deployn/astro-deploy/compare/v1.24.3...v1.24.4) (2024-03-13)
+
+
+### Bug Fixes
+
+* **index:** fix sidescroll ([d7ba632](https://github.com/deployn/astro-deploy/commit/d7ba632d5d7339753f25bfb4ec16b13b950caa81))
+
+## [1.24.3](https://github.com/deployn/astro-deploy/compare/v1.24.2...v1.24.3) (2024-03-12)
+
+
+### Bug Fixes
+
+* **blog:** avoid redirects in pagination ([76d8bec](https://github.com/deployn/astro-deploy/commit/76d8becfb31765546842f77a68458871fc21dddc))
+* **blog:** show page in title ([d0d5552](https://github.com/deployn/astro-deploy/commit/d0d55524bae98becbd9cd16343f6823b2a75745f))
+
+## [1.24.2](https://github.com/deployn/astro-deploy/compare/v1.24.1...v1.24.2) (2024-03-10)
+
+
+### Bug Fixes
+
+* add margin to recipe site ([02a3b86](https://github.com/deployn/astro-deploy/commit/02a3b86651289c264f3d6827ec6fd989c8aba494))
+
+## [1.24.1](https://github.com/deployn/astro-deploy/compare/v1.24.0...v1.24.1) (2024-03-10)
+
+
+### Bug Fixes
+
+* **blog:** fix pagination for index blog page ([58b63fd](https://github.com/deployn/astro-deploy/commit/58b63fd69cb453f00a4012329547b8c3d7e498e6))
+
+# [1.24.0](https://github.com/deployn/astro-deploy/compare/v1.23.1...v1.24.0) (2024-03-10)
+
+
+### Features
+
+* **blog:** add pagination ([e3c5b3f](https://github.com/deployn/astro-deploy/commit/e3c5b3f31fbf622afb31e74c4cf05591371b743b))
+* **pagefind:** add search support to blog ([b18424b](https://github.com/deployn/astro-deploy/commit/b18424b921345f803f3575ebf550c6629c498737))
+
+## [1.23.1](https://github.com/deployn/astro-deploy/compare/v1.23.0...v1.23.1) (2024-03-10)
+
+
+### Bug Fixes
+
+* fix darkmode after page transitions ([488fea3](https://github.com/deployn/astro-deploy/commit/488fea300ce3cc5dac625bb3d8f311dca1479b19))
+
+# [1.23.0](https://github.com/deployn/astro-deploy/compare/v1.22.0...v1.23.0) (2024-03-10)
+
+
+### Features
+
+* **blog:** use expressive code ([4ced8dc](https://github.com/deployn/astro-deploy/commit/4ced8dc0f8baf66402812132b5b1b0cc6d7b96d8))
+
+# [1.22.0](https://github.com/deployn/astro-deploy/compare/v1.21.0...v1.22.0) (2024-03-08)
+
+
+### Features
+
+* add view transitions ([769ccc4](https://github.com/deployn/astro-deploy/commit/769ccc451cdb99d7091d4a8951044b1336426fbe))
+* **blog:** transition blogpost titles ([aece417](https://github.com/deployn/astro-deploy/commit/aece417bff6717db76e7db95d20f4fe222b3b4eb))
+
+# [1.22.0-beta.2](https://github.com/deployn/astro-deploy/compare/v1.22.0-beta.1...v1.22.0-beta.2) (2024-03-08)
+
+
+### Features
+
+* **blog:** transition blogpost titles ([aece417](https://github.com/deployn/astro-deploy/commit/aece417bff6717db76e7db95d20f4fe222b3b4eb))
+
+# [1.22.0-beta.1](https://github.com/deployn/astro-deploy/compare/v1.21.0...v1.22.0-beta.1) (2024-03-08)
+
+
+### Features
+
+* add view transitions ([769ccc4](https://github.com/deployn/astro-deploy/commit/769ccc451cdb99d7091d4a8951044b1336426fbe))
+
+# [1.21.0](https://github.com/deployn/astro-deploy/compare/v1.20.0...v1.21.0) (2024-03-08)
+
+
+### Bug Fixes
+
+* **blog:** add trailing slash to links ([22f9623](https://github.com/deployn/astro-deploy/commit/22f9623c6256c643dd181f65592aebc4df4c09b2))
+* **blog:** adjust meta description cutting ([e963a3f](https://github.com/deployn/astro-deploy/commit/e963a3f670399195bc506c27806de69820a4fab0))
+
+
+### Features
+
+* **nginx:** add webp to cache control ([521a4ce](https://github.com/deployn/astro-deploy/commit/521a4ce7fd1152c87c44210e8183a31ecd6786e9))
+
+# [1.20.0](https://github.com/deployn/astro-deploy/compare/v1.19.4...v1.20.0) (2024-03-08)
+
+
+### Features
+
+* add meta description ([5266fe5](https://github.com/deployn/astro-deploy/commit/5266fe563d137febca1937c7a17673ac9749b6a6))
+
+## [1.19.4](https://github.com/deployn/astro-deploy/compare/v1.19.3...v1.19.4) (2024-03-07)
+
+
+### Bug Fixes
+
+* **blog:** add trailing slash to bloglist ([76789be](https://github.com/deployn/astro-deploy/commit/76789bebcba6c722071e0e12bbff3fcb2519364e))
+
+## [1.19.3](https://github.com/deployn/astro-deploy/compare/v1.19.2...v1.19.3) (2024-03-07)
+
+
+### Bug Fixes
+
+* **header:** update style ([8d2285c](https://github.com/deployn/astro-deploy/commit/8d2285c7357a513be32e92fa2e04138f4ff7c083))
+
+## [1.19.2](https://github.com/deployn/astro-deploy/compare/v1.19.1...v1.19.2) (2024-03-06)
+
+
+### Bug Fixes
+
+* **blog:** add page title to posts ([9c8013c](https://github.com/deployn/astro-deploy/commit/9c8013c08da4efb1fc5b1553f16992b3594d17d6))
+
+## [1.19.1](https://github.com/deployn/astro-deploy/compare/v1.19.0...v1.19.1) (2024-03-06)
+
+
+### Bug Fixes
+
+* add sitemap link to layout ([38e06ed](https://github.com/deployn/astro-deploy/commit/38e06edcf130473f7c9d60fc6bc7ee2a9b85088c))
+* remove doublicate href ([5ea473e](https://github.com/deployn/astro-deploy/commit/5ea473efdb6bb400c85f98b515ac6d628486fdf3))
+
+# [1.19.0](https://github.com/deployn/astro-deploy/compare/v1.18.0...v1.19.0) (2024-03-05)
+
+
+### Bug Fixes
+
+* add source description ([9e7cbd1](https://github.com/deployn/astro-deploy/commit/9e7cbd144f05a2a46e51c033a171fc557951b3eb))
+* **header:** add additional navlink ([54dcefb](https://github.com/deployn/astro-deploy/commit/54dcefbf25002be51b5f134d7a8f74df5ef96474))
+
+
+### Features
+
+* **directus:** use directus cms ([3a9c4da](https://github.com/deployn/astro-deploy/commit/3a9c4da429ce05b320c3c6b63dd3b802d487eac7))
+* use image optimization for Directus ([5cb2237](https://github.com/deployn/astro-deploy/commit/5cb223718734b1d7b502e7dd331eae6ebb493f36))
+
+# [1.18.0](https://github.com/deployn/astro-deploy/compare/v1.17.2...v1.18.0) (2024-03-04)
+
+
+### Bug Fixes
+
+* **blog:** check spelling ([cf4d77e](https://github.com/deployn/astro-deploy/commit/cf4d77ed4b854075bb8f024b6a23f3294041cfcc))
+* **content:** update table formatting ([02bc50a](https://github.com/deployn/astro-deploy/commit/02bc50a0ce35487f698ebddf198605d760813833))
+
+
+### Features
+
+* **blog:** add description to blogposts ([eff2466](https://github.com/deployn/astro-deploy/commit/eff2466873f2977e878839301a0fb1c9687d4444))
+* **blog:** add descriptions to bloglist ([37c9b21](https://github.com/deployn/astro-deploy/commit/37c9b21ec9c44278a9133b9861d6016d5d2a6345))
+
+## [1.17.2](https://github.com/deployn/astro-deploy/compare/v1.17.1...v1.17.2) (2024-03-04)
+
+
+### Bug Fixes
+
+* **header:** remove inner div from nav links ([e73be91](https://github.com/deployn/astro-deploy/commit/e73be9112f68178db634ef06ff567450c7761338))
+
+## [1.17.1](https://github.com/deployn/astro-deploy/compare/v1.17.0...v1.17.1) (2024-03-04)
+
+
+### Bug Fixes
+
+* **header:** resize nav links on larger screens ([1d89df8](https://github.com/deployn/astro-deploy/commit/1d89df87acd36ed7a29a4decdffe19882ff48251))
+
+# [1.17.0](https://github.com/deployn/astro-deploy/compare/v1.16.0...v1.17.0) (2024-03-04)
+
+
+### Features
+
+* **header:** highlight active nav link ([cb051e9](https://github.com/deployn/astro-deploy/commit/cb051e9b6efab66bde946b89f074ceb14ca2764a))
+
+# [1.16.0](https://github.com/deployn/astro-deploy/compare/v1.15.1...v1.16.0) (2024-03-04)
+
+
+### Bug Fixes
+
+* **vscode:** update recommended extensions ([cc3ace3](https://github.com/deployn/astro-deploy/commit/cc3ace380ce68fc08708548d60e9f68993f777da))
+
+
+### Features
+
+* **blog:** add frontmatter support ([4bf5e4c](https://github.com/deployn/astro-deploy/commit/4bf5e4c9bb7802ebd040d749191aee8cc260d315))
+
+## [1.15.1](https://github.com/deployn/astro-deploy/compare/v1.15.0...v1.15.1) (2024-03-04)
+
+
+### Bug Fixes
+
+* **ui:** enhance spacing and layout ([6df0274](https://github.com/deployn/astro-deploy/commit/6df0274c3a10a66e1ef1f2603c4e4d13e9476a13))
+
+# [1.15.0](https://github.com/deployn/astro-deploy/compare/v1.14.0...v1.15.0) (2024-03-04)
+
+
+### Bug Fixes
+
+* move type import into type-only import ([e92e713](https://github.com/deployn/astro-deploy/commit/e92e7139c1ed5265e08c13785306c7e3c5ccda5a))
+
+
+### Features
+
+* **blog:** add mdx blog functionality ([7607ff0](https://github.com/deployn/astro-deploy/commit/7607ff07fbfc1b10c232c9184170135cd082fd33))
+* **blog:** use responsive table in mdx blog ([e0f6525](https://github.com/deployn/astro-deploy/commit/e0f65256cd7eb3922ab402bfadd4799d90682ad3))
+* **ui:** add navigation to header ([d8615eb](https://github.com/deployn/astro-deploy/commit/d8615eb1ee8dd7e389f906911619c756485e0ae5))
+
+# [1.15.0-beta.2](https://github.com/deployn/astro-deploy/compare/v1.15.0-beta.1...v1.15.0-beta.2) (2024-03-03)
+
+
+### Features
+
+* **blog:** use responsive table in mdx blog ([e0f6525](https://github.com/deployn/astro-deploy/commit/e0f65256cd7eb3922ab402bfadd4799d90682ad3))
+
+# [1.15.0-beta.1](https://github.com/deployn/astro-deploy/compare/v1.14.0...v1.15.0-beta.1) (2024-03-03)
+
+
+### Bug Fixes
+
+* move type import into type-only import ([e92e713](https://github.com/deployn/astro-deploy/commit/e92e7139c1ed5265e08c13785306c7e3c5ccda5a))
+
+
+### Features
+
+* **blog:** add mdx blog functionality ([7607ff0](https://github.com/deployn/astro-deploy/commit/7607ff07fbfc1b10c232c9184170135cd082fd33))
+* **ui:** add navigation to header ([d8615eb](https://github.com/deployn/astro-deploy/commit/d8615eb1ee8dd7e389f906911619c756485e0ae5))
+
+# [1.14.0](https://github.com/deployn/astro-deploy/compare/v1.13.1...v1.14.0) (2024-03-02)
+
+
+### Features
+
+* **nginx:** update custom nginx conf ([92c1744](https://github.com/deployn/astro-deploy/commit/92c174491c79ade07afb55134a88ca282b635687))
+
+## [1.13.1](https://github.com/deployn/astro-deploy/compare/v1.13.0...v1.13.1) (2024-03-02)
+
+
+### Bug Fixes
+
+* **nginx:** terminate line by ; ([74d3362](https://github.com/deployn/astro-deploy/commit/74d33622d7b7a326ab137656742cb1f4d4a26205))
+
+# [1.13.0](https://github.com/deployn/astro-deploy/compare/v1.12.0...v1.13.0) (2024-03-02)
+
+
+### Features
+
+* **nginx:** update custom nginx config ([bb18a47](https://github.com/deployn/astro-deploy/commit/bb18a4757970a6c9c38217ee615cf2b0a3451d68))
+
+# [1.12.0](https://github.com/deployn/astro-deploy/compare/v1.11.1...v1.12.0) (2024-03-02)
+
+
+### Features
+
+* **nginx:** use a adjustable nginx config file ([4adf2bc](https://github.com/deployn/astro-deploy/commit/4adf2bc3ece107c1dc9ebdb55c9ceb99e8862eb7))
+
+## [1.11.1](https://github.com/deployn/astro-deploy/compare/v1.11.0...v1.11.1) (2024-03-02)
+
+
+### Bug Fixes
+
+* **Dockerfile:** specify nginx version for better predictability ([7d05720](https://github.com/deployn/astro-deploy/commit/7d057206d64923e8ae369e90ab1d16debc90e802))
+
+# [1.11.0](https://github.com/deployn/astro-deploy/compare/v1.10.0...v1.11.0) (2024-03-01)
+
+
+### Bug Fixes
+
+* **ui:** add aria-label to social link icon ([69ef8f9](https://github.com/deployn/astro-deploy/commit/69ef8f965915987f2002b7c6f141f9740c09b9e5))
+* update index page ([5492587](https://github.com/deployn/astro-deploy/commit/54925872ec3db54b7214fa2f1390617402b0b496))
+
+
+### Features
+
+* **tailwind:** add custom colors to tailwind config ([bae6a1c](https://github.com/deployn/astro-deploy/commit/bae6a1c4f02e222a73b5dce4c3d72c16623681a2))
+
+
+### Performance Improvements
+
+* **ui:** eager load header logo ([25d7c75](https://github.com/deployn/astro-deploy/commit/25d7c75d942047b61535208ae111a4cb3cf74ee2))
+
+# [1.10.0](https://github.com/deployn/astro-deploy/compare/v1.9.0...v1.10.0) (2024-02-28)
+
+
+### Features
+
+* **ui:** add heading component ([c76e15f](https://github.com/deployn/astro-deploy/commit/c76e15ff2fdb817113be4a06f21a211048919444))
+
+# [1.9.0](https://github.com/deployn/astro-deploy/compare/v1.8.2...v1.9.0) (2024-02-28)
+
+
+### Features
+
+* **layout:** add footer component ([39dfa3a](https://github.com/deployn/astro-deploy/commit/39dfa3a8fcd7d9a447625fba5290f45affea9b4a))
+
 ## [1.8.2](https://github.com/deployn/astro-deploy/compare/v1.8.1...v1.8.2) (2024-02-27)
 
 

Dockerfile

@@ -1,25 +1,37 @@
-FROM node:20-slim AS base
+# Build Stage
+FROM node:22-slim AS build
+
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
+
 WORKDIR /app
-COPY package.json ./
-COPY pnpm-lock.yaml ./
 
-FROM base AS prod-deps
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
-
-FROM base AS build-deps
+COPY package.json pnpm-lock.yaml ./
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 
-FROM build-deps AS build
 COPY . .
-
 ARG SITE_URL
 ENV SITE_URL=${SITE_URL}
-
+ARG DIRECTUS_URL
+ENV DIRECTUS_URL=${DIRECTUS_URL}
 RUN pnpm run build
 
-FROM nginx:alpine AS runtime
+# Runtime Stage
+FROM nginx:1.25-alpine AS runtime
+
+# Copy custom nginx config
+COPY nginx/nginx.conf /etc/nginx/nginx.conf
+
+# Copy built assets from build stage
 COPY --from=build /app/dist /usr/share/nginx/html
+
+# Add curl for healthchecks
+RUN apk add --no-cache curl
+
+# Healthcheck
+HEALTHCHECK --interval=30s --timeout=3s CMD curl -f http://localhost/ || exit 1
+
 EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jewgeni Lewash
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Readme.md

@@ -6,36 +6,66 @@ A custom Astro.js template
 
 ## Features
 
-- 🚀 Astro.js 4
-- 🐳 Docker integration
-- 🍃 Tailwind CSS
+- 🚀 Astro.js 5 for modern web development.
+- 🐳 Docker integration for consistent environments and easy deployment.
+- 🍃 Tailwind CSS for utility-first styling and rapid UI development.
+- ⚛️ React.js integration, enabling complex UI construction with ease.
+- 🏔️ Alpine.js integration, bringing reactive and declarative magic to your markup.
+- 📘 TypeScript support for safer code through static typing.
+- 🖊️ MDX Blog, allowing JSX in markdown for interactive and dynamic content.
+- 📄 Pagination for easier navigation through content.
+- 🔍 Pagefind for quick and efficient search functionality within the project.
+- 🔖 Frontmatter CMS for easy content management.
+- 🐇 Directus CMS support, providing a headless CMS for flexible content management.
+- ✒️ Expressive Code Blocks, enhancing readability and maintainability of code snippets.
+- 🌓 Dark Mode support, offering seamless user experience between light and dark themes.
+- 🌟 View Transitions, ensuring smooth navigation and enhanced user experience.
+- 🛠 Custom Nginx Configuration, enabling advanced hosting and performance optimizations.
+- 🎨 Shadcn/UI support for crafting beautiful, interactive UI components easily.
+- 🗺 Dynamic Sitemap Generation, boosting SEO by ensuring all pages are discoverable.
+- 📱 PWA Assets Generation for an app-like experience on mobile devices, including offline support.
+- 💅 Prettier integration for consistent code formatting, ensuring a uniform coding style across the project.
 
-## How to use this template
+## Prerequisites
+
+- Node.js (version 20 recommended)
+- Docker (for deployment)
+
+## Getting Started with This Template
 
 ```sh
 git clone https://github.com/deployn/astro-deploy new-astro-project
 cd new-astro-project
 ```
 
-Update /public/logo.svg
+To personalize:
 
-Update /public/site.webmanifest
+- Replace `/public/logo.svg`
+- Update `/public/site.webmanifest`
+- Configure `astro.config.mjs`
+- Customize colors in `tailwind.config.mjs`
+- Modify content in `/src/\*` as needed
 
-Update astro.config.mjs
+### Opting Out of Directus
 
-Update /src/\*
+If not using Directus CMS:
+
+- Remove `/src/lib/directus.ts` and `/src/pages/recipes.astro`
+- Run `pnpm remove @directus/sdk`
+
+For Directus usage, ensure public view permission for necessary collections and `directus_fields` via the Directus dashboard and adjust `/src/lib/directus.ts` accordingly.
 
 ### Add shadcn/ui components
 
-Visit <https://ui.shadcn.com/docs/> for a list of components
+Visit <https://ui.shadcn.com/docs/> for component documentation and the list of components
 
 ```sh
 pnpm dlx shadcn-ui@latest add componentName
 ```
 
-### Start the Server
+## Development & Deployment
 
-Development Server:
+### Start the Development Server
 
 ```sh
 npm i -g pnpm
@@ -43,10 +73,10 @@ pnpm install
 pnpm dev
 ```
 
-Production Build:
+### Production Build & Run
 
 ```sh
-sudo docker build . --build-arg SITE_URL=https://example.com -t astro-deploy
+sudo docker build . --build-arg SITE_URL=https://example.com --build-arg DIRECTUS_URL=https://example.directus.com -t astro-deploy
 docker run -d -p 1234:80 astro-deploy
 ```
 
@@ -66,16 +96,37 @@ All commands are run from the root of the project, from a terminal:
 | `pnpm run format`          | Formats codebase using Prettier                  |
 | `pnpm run commit`          | Commits changes to version control               |
 
-## Acknowledgements
+## Acknowledgements & Resources
+
+This project draws inspiration and knowledge from a wide array of sources:
 
 - [Astro.js Basic Example](https://github.com/withastro/astro/tree/main/examples/basics)
 - [Astro.js Docs](https://docs.astro.build/)
+- [Astro Cactus](https://github.com/chrismwilliams/astro-theme-cactus)
+- [Astro Starter Kit](https://github.com/zankhq/astro-starter)
+- [Directus](https://directus.io/)
 - [Docker](https://www.docker.com/)
+- [Frontmatter CMS](https://frontmatter.codes/)
 - [Material-Tailwind](https://www.material-tailwind.com/)
+- [nginx](https://www.nginx.com/)
+- [Node.js](https://nodejs.org/en)
 - [pnpm](https://pnpm.io/)
 - [Prettier](https://prettier.io/)
 - [Radix UI](https://www.radix-ui.com/)
+- [React](https://react.dev/)
 - [shadcn/ui Docs](https://ui.shadcn.com/docs)
 - [Tailkit](https://tailkit.com/)
 - [Tailwind CSS Docs](https://tailwindcss.com/docs/)
 - [Typescipt](https://www.typescriptlang.org/)
+- [Visual Studio Code](https://code.visualstudio.com/)
+
+## Contributing
+
+Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue.
+Don't forget to give the project a star! Thanks again!
+
+## Demo
+
+Live Demo: [Astro Deploy](https://astro.deployn.de)

astro.config.mjs

@@ -1,14 +1,27 @@
 import { defineConfig } from 'astro/config';
+import alpinejs from '@astrojs/alpinejs';
+import mdx from '@astrojs/mdx';
 import react from '@astrojs/react';
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
-
+import expressiveCode from 'astro-expressive-code';
+import icon from 'astro-icon';
 const SITE_URL = process.env.SITE_URL || 'https://astro.deployn.de';
+const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de';
 
 // https://astro.build/config
 export default defineConfig({
 	site: SITE_URL,
+	image: {
+		domains: [DIRECTUS_URL.replace('https://', '')],
+	},
 	integrations: [
+		alpinejs(),
+		expressiveCode({
+			themes: ['dracula', 'github-light'],
+		}),
+		icon(),
+		mdx(),
 		react(),
 		sitemap(),
 		tailwind({

frontmatter.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://frontmatter.codes/frontmatter.schema.json",
+  "frontMatter.taxonomy.contentTypes": [
+    {
+      "name": "blog",
+      "previewPath": "'blog'",
+      "pageBundle": false,
+      "clearEmpty": true,
+      "fields": [
+        {
+          "name": "title",
+          "type": "string",
+          "single": true,
+          "required": true
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "single": true,
+          "required": true
+        }
+      ]
+    }
+  ],
+  "frontMatter.framework.id": "astro",
+  "frontMatter.preview.host": "http://localhost:4321",
+  "frontMatter.content.pageFolders": [
+    {
+      "title": "blog",
+      "path": "[[workspace]]/src/content/blog",
+      "contentTypes": ["blog"]
+    }
+  ],
+  "frontMatter.content.publicFolder": {
+    "path": "src/assets",
+    "relative": true
+  },
+  "frontMatter.git.enabled": true
+}

nginx/nginx.conf

@@ -0,0 +1,66 @@
+user nginx;
+worker_processes auto;
+
+error_log /var/log/nginx/error.log warn;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log /var/log/nginx/access.log main;
+
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    server {
+        listen 80;
+        listen [::]:80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        location ~* \.(?:ico|css|js|gif|jpe?g|png|svg|woff|woff2|eot|ttf|webp)$ {
+            expires 30d;
+            add_header Cache-Control "public, no-transform";
+        }
+
+        error_page 404 /404.html;
+        location = /404.html {
+            internal;
+        }
+
+        error_page 500 502 503 504 /50x.html;
+        location = /50x.html {
+            internal;
+        }
+
+        add_header X-Frame-Options "SAMEORIGIN";
+        add_header X-Content-Type-Options "nosniff";
+        add_header X-XSS-Protection "1; mode=block";
+        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+        add_header Referrer-Policy "strict-origin-when-cross-origin";
+        add_header Permissions-Policy "geolocation=(), microphone=(), camera=()";
+    }
+}

package.json

@@ -1,13 +1,13 @@
 {
   "name": "astro-deploy",
   "type": "module",
-  "version": "1.8.2",
+  "version": "1.29.0",
   "description": "A custom Astro.js template",
   "private": true,
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro check && pnpm run pwa:generate-assets && astro build",
+    "build": "astro check && pnpm run pwa:generate-assets && astro build && pagefind --site dist",
     "preview": "astro preview",
     "astro": "astro",
     "pwa:generate-assets": "pwa-assets-generator --preset minimal-2023 public/logo.svg",
@@ -15,41 +15,53 @@
     "upgrade": "pnpm update --interactive --latest",
     "commit": "cz"
   },
+  "packageManager": "pnpm@9.8.0",
   "dependencies": {
-    "@astrojs/check": "^0.5.6",
-    "@astrojs/react": "^3.0.10",
-    "@astrojs/sitemap": "^3.1.1",
-    "@astrojs/tailwind": "^5.1.0",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-slot": "^1.0.2",
-    "astro": "^4.4.5"
+    "@astrojs/alpinejs": "^0.4.0",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^4.1.0",
+    "@astrojs/react": "^4.2.1",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/tailwind": "^5.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "astro": "^5.4.2",
+    "astro-expressive-code": "^0.40.2",
+    "astro-icon": "^1.1.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
-    "@commitlint/config-conventional": "^18.6.2",
-    "@commitlint/cz-commitlint": "^18.6.1",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@commitlint/cz-commitlint": "^19.5.0",
+    "@directus/sdk": "^19.0.1",
+    "@iconify-json/line-md": "^1.2.1",
+    "@pagefind/default-ui": "^1.1.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@types/react": "^18.2.59",
-    "@types/react-dom": "^18.2.19",
-    "@vite-pwa/assets-generator": "^0.2.4",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/alpinejs": "^3.13.10",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vite-pwa/assets-generator": "^0.2.6",
+    "alpinejs": "^3.14.1",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
-    "commitizen": "^4.3.0",
+    "clsx": "^2.1.1",
+    "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
-    "lucide-react": "^0.341.0",
-    "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0",
-    "prettier-plugin-tailwindcss": "^0.5.11",
-    "pwa-asset-generator": "^6.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "semantic-release": "^23.0.2",
-    "sharp": "^0.33.2",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "^3.4.1",
+    "lucide-react": "^0.479.0",
+    "pagefind": "^1.1.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "pwa-asset-generator": "^6.3.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "semantic-release": "^24.1.1",
+    "sharp": "0.32.6",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^3.4.11",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.3.3"
+    "typescript": "^5.6.2"
   },
   "config": {
     "commitizen": {

public/site.webmanifest

@@ -25,7 +25,7 @@
 		}
 	],
 	"start_url": "/",
-	"theme_color": "#61a8e1",
-	"background_color": "#24213e",
+	"theme_color": "#1294c9",
+	"background_color": "#1f253c",
 	"display": "standalone"
 }

src/components/FeatureSection.astro

@@ -0,0 +1,29 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+	title: string;
+	description: string;
+	image: ImageMetadata;
+	isReversed?: boolean;
+}
+
+const { title, description, image, isReversed = false } = Astro.props;
+---
+
+<section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
+	<div
+		class={`grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24 ${isReversed ? 'lg:flex-row-reverse' : ''}`}>
+		<div class={`flex items-center justify-center ${isReversed ? 'lg:order-2' : ''}`}>
+			<Image class="mx-auto max-h-96 w-full rounded-xl shadow-lg" src={image} alt={title} />
+		</div>
+		<div class={`flex flex-col gap-y-4 ${isReversed ? 'lg:order-1' : ''}`}>
+			<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
+				{title}
+			</h2>
+			<p class="text-lg text-zinc-800 dark:text-zinc-300">
+				{description}
+			</p>
+		</div>
+	</div>
+</section>

src/components/ModeToggle.tsx

@@ -22,6 +22,7 @@ export function ModeToggle() {
 			theme === 'dark' ||
 			(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
 		document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
+		document.documentElement.setAttribute('data-theme', isDark ? 'dracula' : 'github-light');
 	}, [theme]);
 
 	return (

src/components/blog/Search.astro

@@ -0,0 +1,185 @@
+---
+import '@pagefind/default-ui/css/ui.css';
+---
+
+<site-search id="search" class="ms-auto">
+	<button
+		data-open-modal
+		disabled
+		class="flex h-9 w-9 items-center justify-center rounded-md ring-zinc-400 transition-all hover:ring-2">
+		<svg
+			aria-label="search"
+			class="h-7 w-7"
+			xmlns="http://www.w3.org/2000/svg"
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5">
+			<path stroke="none" d="M0 0h24v24H0z"></path>
+			<path d="M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M21 21l-6-6"></path>
+		</svg>
+	</button>
+	<dialog
+		aria-label="search"
+		class="bg-bgColor h-full max-h-full w-full max-w-full border border-zinc-400 shadow backdrop:backdrop-blur sm:mx-auto sm:mb-auto sm:mt-16 sm:h-max sm:max-h-[calc(100%-8rem)] sm:min-h-[15rem] sm:w-5/6 sm:max-w-[48rem] sm:rounded-md">
+		<div class="dialog-frame flex flex-col gap-4 p-6 pt-12 sm:pt-6">
+			<button
+				data-close-modal
+				class="ms-auto cursor-pointer rounded-md bg-zinc-200 p-2 font-semibold">
+				Close
+			</button>
+			{
+				import.meta.env.DEV ? (
+					<div class="mx-auto text-center">
+						<p>
+							Search is only available in production builds. <br />
+							Try building and previewing the site to test it out locally.
+						</p>
+					</div>
+				) : (
+					<div class="search-container">
+						<div id="deploy__search" />
+					</div>
+				)
+			}
+		</div>
+	</dialog>
+</site-search>
+
+<script>
+	class SiteSearch extends HTMLElement {
+		private openBtn: HTMLButtonElement;
+		private closeBtn: HTMLButtonElement;
+		private dialog: HTMLDialogElement;
+		private dialogFrame: HTMLDivElement;
+
+		constructor() {
+			super();
+			this.openBtn = this.querySelector<HTMLButtonElement>('button[data-open-modal]')!;
+			this.closeBtn = this.querySelector<HTMLButtonElement>('button[data-close-modal]')!;
+			this.dialog = this.querySelector('dialog')!;
+			this.dialogFrame = this.querySelector('.dialog-frame')!;
+
+			this.openBtn.addEventListener('click', this.openModal);
+			this.openBtn.disabled = false;
+			this.closeBtn.addEventListener('click', this.closeModal);
+		}
+
+		connectedCallback() {
+			// Listen for keyboard shortcut
+			window.addEventListener('keydown', this.onWindowKeydown);
+
+			// only add pagefind in production
+			if (import.meta.env.DEV) return;
+			const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
+			onIdle(async () => {
+				const { PagefindUI } = await import('@pagefind/default-ui');
+				new PagefindUI({
+					element: '#deploy__search',
+					baseUrl: import.meta.env.BASE_URL,
+					bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
+					showImages: false,
+					showSubResults: true,
+				});
+			});
+		}
+
+		disconnectedCallback() {
+			window.removeEventListener('keydown', this.onWindowKeydown);
+		}
+
+		onWindowClick = (event: MouseEvent) => {
+			// check if it's a link
+			const isLink = 'href' in (event.target || {});
+			// make sure the click is either a link or outside of the dialog
+			if (
+				isLink ||
+				(document.body.contains(event.target as Node) &&
+					!this.dialogFrame.contains(event.target as Node))
+			)
+				this.closeModal();
+		};
+
+		onWindowKeydown = (e: KeyboardEvent) => {
+			// check if it's the / key
+			if (e.key === '/' && !this.dialog.open) {
+				this.openModal();
+				e.preventDefault();
+			}
+		};
+
+		openModal = (event?: MouseEvent) => {
+			this.dialog.showModal();
+			this.querySelector('input')?.focus();
+			event?.stopPropagation();
+			window.addEventListener('click', this.onWindowClick);
+		};
+
+		closeModal = () => {
+			if (this.dialog.open) {
+				this.dialog.close();
+				window.removeEventListener('click', this.onWindowClick);
+			}
+		};
+	}
+
+	customElements.define('site-search', SiteSearch);
+</script>
+
+<style is:global>
+	:root {
+		--pagefind-ui-font: inherit;
+	}
+
+	#deploy__search .pagefind-ui__search-clear {
+		width: calc(60px * var(--pagefind-ui-scale));
+		padding: 0;
+		background-color: transparent;
+		overflow: hidden;
+	}
+	#deploy__search .pagefind-ui__search-clear:focus {
+		outline: 1px solid;
+	}
+	#deploy__search .pagefind-ui__search-clear::before {
+		content: '';
+		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'%3E%3C/path%3E%3C/svg%3E")
+			center / 60% no-repeat;
+		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'%3E%3C/path%3E%3C/svg%3E")
+			center / 60% no-repeat;
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	#deploy__search .pagefind-ui__result {
+		border: 0;
+	}
+
+	#search .pagefind-ui__result-link {
+		background-size: 100% 6px;
+		background-position: bottom;
+		background-repeat: repeat-x;
+		background-image: linear-gradient(transparent, transparent 5px);
+	}
+
+	#deploy__search .pagefind-ui__result-link:hover {
+		text-decoration: none;
+		background-image: linear-gradient(transparent, transparent 4px);
+	}
+
+	#search mark {
+		background-color: transparent;
+		font-weight: 600;
+	}
+</style>
+
+<style>
+	#deploy__search {
+		--pagefind-ui-border: theme('colors.zinc.400');
+		--pagefind-ui-border-width: 1px;
+	}
+</style>

src/components/blog/Table.astro

@@ -0,0 +1,9 @@
+---
+
+---
+
+<div class="mb-4 min-w-full overflow-x-auto">
+	<table class="my-2 min-w-full whitespace-nowrap text-sm">
+		<slot />
+	</table>
+</div>

src/components/layout/Footer.astro

@@ -0,0 +1,38 @@
+---
+import { Icon } from 'astro-icon/components';
+---
+
+<footer class="bg-gray-100 py-12 pb-20 dark:bg-gray-800 sm:pb-12">
+	<div class="mx-auto w-full max-w-7xl px-8">
+		<div class="flex flex-col items-center justify-between gap-8 md:flex-row">
+			<div>
+				<p
+					class="mb-2 text-center text-base font-normal text-zinc-900 antialiased dark:text-zinc-100 md:text-left">
+					© 2024
+					<a href="/" class="hover:text-blue-500">Astro Deploy</a>. All Rights Reserved.
+				</p>
+				<nav class="flex flex-wrap justify-center gap-4 md:justify-start">
+					<a href="/sitemap-index.xml" class="text-zinc-900 hover:text-blue-500 dark:text-zinc-100">
+						Sitemap
+					</a>
+				</nav>
+			</div>
+			<div class="flex flex-col items-center gap-4 md:flex-row">
+				<div class="flex gap-4 text-zinc-900 dark:text-zinc-100">
+					<a
+						href="mailto:astro@deployn.de"
+						class="block text-base font-light leading-relaxed text-inherit antialiased opacity-80 transition-opacity hover:opacity-100"
+						aria-label="Email">
+						<Icon name="line-md:email" class="size-5" fill="currentColor" aria-hidden="true" />
+					</a>
+					<a
+						href="https://github.com/deployn/astro-deploy"
+						class="block text-base font-light leading-relaxed text-inherit antialiased opacity-80 transition-opacity hover:opacity-100"
+						aria-label="GitHub Repository">
+						<Icon name="line-md:github" class="size-5" fill="currentColor" aria-hidden="true" />
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</footer>

src/components/layout/Header.astro

@@ -1,20 +1,34 @@
 ---
-import '@/styles/globals.css';
 import { Image } from 'astro:assets';
 import { ModeToggle } from '@/components/ModeToggle';
+import HeaderLink from './HeaderLink.astro';
+import { Icon } from 'astro-icon/components';
 
 import logoImage from '@/assets/images/logo.png';
----
 
-<script is:inline>
+const navLinks = [
+	{ href: '/', label: 'Home', icon: 'line-md:home' },
+	{ href: '/blog/', label: 'Blog', icon: 'line-md:document-list' },
+	{ href: '/recipes/', label: 'Recipes', icon: 'line-md:clipboard-list' },
+];
+
 const getThemePreference = () => {
 	if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
 		return localStorage.getItem('theme');
 	}
 	return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 };
+
+const setTheme = (document: Document) => {
+	const theme = getThemePreference();
+	document.documentElement.setAttribute('data-theme', theme ?? '');
+	document.documentElement.classList.toggle('dark', theme === 'dark');
+};
+---
+
+<script define:vars={{ setTheme }} is:inline>
 	const isDark = getThemePreference() === 'dark';
-	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
+	document.documentElement.classList.toggle('dark', isDark);
 
 	if (typeof localStorage !== 'undefined') {
 		const observer = new MutationObserver(() => {
@@ -23,19 +37,113 @@ import logoImage from '@/assets/images/logo.png';
 		});
 		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 	}
+
+	setTheme(document);
+
+	document.addEventListener('astro:before-swap', (ev) => {
+		setTheme(ev.newDocument);
+	});
 </script>
 
 <header
-	class="sticky top-0 z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8 lg:py-4">
-	<div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100">
+	class="sticky top-0 z-10 block h-16 w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8">
+	<div class="flex h-full items-center justify-between text-zinc-900 dark:text-zinc-100">
+		<button id="navToggle" class="hidden sm:block md:hidden" aria-label="Toggle navigation">
+			<Icon name="line-md:menu" class="h-6 w-6" />
+		</button>
 		<a
 			href="/"
-			class="mr-4 block cursor-pointer py-1.5 font-sans text-base font-medium leading-relaxed text-inherit antialiased">
+			class="mr-4 block cursor-pointer py-1.5 font-sans text-base font-semibold leading-relaxed text-inherit antialiased lg:ml-2">
 			<div class="flex items-center gap-2 lg:gap-4">
-				<Image src={logoImage} alt="Astro Deploy" class="-my-2 size-10 lg:-my-4 lg:size-14" />
-				Astro Deploy
+				<Image src={logoImage} alt="Astro Deploy" class="size-10 lg:size-14" loading="eager" />
+				<span class="hidden sm:inline">Astro Deploy</span>
 			</div>
 		</a>
+		<nav class="hidden items-center space-x-4 md:flex">
+			{
+				navLinks.map(({ href, label }) => (
+					<HeaderLink
+						href={href}
+						class="block rounded-lg px-4 py-2 text-center font-sans text-sm leading-normal text-zinc-900 antialiased transition-all hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-950 md:text-xl">
+						{label}
+					</HeaderLink>
+				))
+			}
+		</nav>
+		<div class="flex items-center">
 			<ModeToggle client:load />
 		</div>
+	</div>
 </header>
+
+<!-- Navigation Rail -->
+<nav
+	id="navRail"
+	class="fixed bottom-0 left-0 top-16 z-40 hidden w-16 flex-col items-center justify-start space-y-4 bg-white pt-4 shadow-md transition-transform duration-300 ease-in-out dark:bg-zinc-900 sm:flex md:hidden">
+	{
+		navLinks.map(({ href, label, icon }) => (
+			<HeaderLink
+				href={href}
+				class="group flex flex-col items-center justify-center p-2 hover:bg-gray-100 dark:hover:bg-zinc-800">
+				<Icon
+					name={icon}
+					class="mb-1 h-6 w-6 text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500"
+				/>
+				<span class="text-xs text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500">
+					{label}
+				</span>
+			</HeaderLink>
+		))
+	}
+</nav>
+
+<!-- Mobile Bottom Navigation -->
+<nav
+	class="fixed bottom-0 left-0 z-50 h-16 w-full border-t border-gray-200 bg-white dark:border-gray-600 dark:bg-zinc-900 sm:hidden">
+	<div class="mx-auto grid h-full max-w-lg grid-cols-3">
+		{
+			navLinks.map(({ href, label, icon }) => (
+				<HeaderLink
+					href={href}
+					class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-zinc-800">
+					<Icon
+						name={icon}
+						class="mb-1 h-6 w-6 text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500"
+					/>
+					<span class="text-xs text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500">
+						{label}
+					</span>
+				</HeaderLink>
+			))
+		}
+	</div>
+</nav>
+
+<script>
+	function setupNavigation() {
+		const navToggle = document.getElementById('navToggle');
+		const navRail = document.getElementById('navRail');
+		const mainContent = document.querySelector('main');
+
+		function toggleNavRail() {
+			navRail?.classList.toggle('-translate-x-full');
+			mainContent?.classList.toggle('sm:pl-16');
+			mainContent?.classList.toggle('sm:pl-0');
+		}
+
+		navToggle?.addEventListener('click', toggleNavRail);
+
+		// Check if we're on a secondary page and hide the rail if necessary
+		if (document.body.classList.contains('secondary-page')) {
+			navRail?.classList.add('-translate-x-full');
+			mainContent?.classList.remove('sm:pl-16');
+			mainContent?.classList.add('sm:pl-0');
+		}
+	}
+
+	// Run the setup on initial load
+	setupNavigation();
+
+	// Re-run the setup after each navigation
+	document.addEventListener('astro:after-swap', setupNavigation);
+</script>

src/components/layout/HeaderLink.astro

@@ -0,0 +1,20 @@
+---
+const { pathname } = Astro.url;
+const { class: className = '', href, ...props } = Astro.props;
+
+function isActiveLink(linkPath: string, currentPath: string) {
+	return (
+		linkPath === currentPath ||
+		linkPath === (currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath)
+	);
+}
+
+const isActive = isActiveLink(href, pathname);
+---
+
+<a
+	href={href}
+	class={`inline-block ${className} ${isActive ? 'font-bold underline' : 'font-medium no-underline'}`}
+	{...props}>
+	<slot />
+</a>

src/components/ui/Heading.astro

@@ -0,0 +1,25 @@
+---
+interface Props {
+	level?: 1 | 2 | 3 | 4 | 5 | 6;
+	classes?: string;
+}
+
+const { level = 2, classes = '', ...rest } = Astro.props as Props;
+
+const HeadingTag = `h${level}` as `h${1 | 2 | 3 | 4 | 5 | 6}`;
+
+const headingStyles = {
+	h1: 'text-4xl md:text-5xl lg:text-7xl font-bold',
+	h2: 'text-3xl md:text-4xl lg:text-5xl font-bold',
+	h3: 'text-2xl font-semibold',
+	h4: 'text-xl font-semibold',
+	h5: 'text-lg font-semibold',
+	h6: 'text-base font-semibold',
+};
+
+const classList = `${headingStyles[HeadingTag]} ${classes}`;
+---
+
+<HeadingTag class={classList.trim()} {...rest}>
+	<slot />
+</HeadingTag>

src/components/ui/button.tsx

@@ -1,56 +1,54 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
+	'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300',
 	{
 		variants: {
 			variant: {
-        default: "bg-zinc-900 text-zinc-50 hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90",
+				default:
+					'bg-zinc-900 text-zinc-50 hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90',
 				destructive:
-          "bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
+					'bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90',
 				outline:
-          "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+					'border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50',
 				secondary:
-          "bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
-        ghost: "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
-        link: "text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50",
+					'bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80',
+				ghost:
+					'hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50',
+				link: 'text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50',
 			},
 			size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+				default: 'h-10 px-4 py-2',
+				sm: 'h-9 rounded-md px-3',
+				lg: 'h-11 rounded-md px-8',
+				icon: 'h-10 w-10',
 			},
 		},
 		defaultVariants: {
-      variant: "default",
-      size: "default",
+			variant: 'default',
+			size: 'default',
 		},
 	}
-)
+);
 
 export interface ButtonProps
 	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
 		VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+	asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+		const Comp = asChild ? Slot : 'button';
 		return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
+			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+		);
 	}
-)
-Button.displayName = "Button"
+);
+Button.displayName = 'Button';
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/dropdown-menu.tsx

@@ -1,42 +1,40 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, children, ...props }, ref) => (
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 data-[state=open]:bg-zinc-100 dark:focus:bg-zinc-800 dark:data-[state=open]:bg-zinc-800",
-      inset && "pl-8",
+			'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 data-[state=open]:bg-zinc-100 dark:focus:bg-zinc-800 dark:data-[state=open]:bg-zinc-800',
+			inset && 'pl-8',
 			className
 		)}
-    {...props}
-  >
+		{...props}>
 		{children}
 		<ChevronRight className="ml-auto h-4 w-4" />
 	</DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -45,14 +43,13 @@ const DropdownMenuSubContent = React.forwardRef<
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+			'z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50',
 			className
 		)}
 		{...props}
 	/>
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -63,32 +60,32 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+				'z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50',
 				className
 			)}
 			{...props}
 		/>
 	</DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, ...props }, ref) => (
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50",
-      inset && "pl-8",
+			'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50',
+			inset && 'pl-8',
 			className
 		)}
 		{...props}
 	/>
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -97,12 +94,11 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50",
+			'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50',
 			className
 		)}
 		checked={checked}
-    {...props}
-  >
+		{...props}>
 		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 			<DropdownMenuPrimitive.ItemIndicator>
 				<Check className="h-4 w-4" />
@@ -110,9 +106,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 		</span>
 		{children}
 	</DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -121,11 +116,10 @@ const DropdownMenuRadioItem = React.forwardRef<
 	<DropdownMenuPrimitive.RadioItem
 		ref={ref}
 		className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50",
+			'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50',
 			className
 		)}
-    {...props}
-  >
+		{...props}>
 		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 			<DropdownMenuPrimitive.ItemIndicator>
 				<Circle className="h-2 w-2 fill-current" />
@@ -133,26 +127,22 @@ const DropdownMenuRadioItem = React.forwardRef<
 		</span>
 		{children}
 	</DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+		inset?: boolean;
 	}
 >(({ className, inset, ...props }, ref) => (
 	<DropdownMenuPrimitive.Label
 		ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+		className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
 		{...props}
 	/>
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -160,24 +150,18 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<DropdownMenuPrimitive.Separator
 		ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)}
+		className={cn('-mx-1 my-1 h-px bg-zinc-100 dark:bg-zinc-800', className)}
 		{...props}
 	/>
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
 	return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+		<span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+	);
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
 export {
 	DropdownMenu,
@@ -195,4 +179,4 @@ export {
 	DropdownMenuSubContent,
 	DropdownMenuSubTrigger,
 	DropdownMenuRadioGroup,
-}
+};

src/components/ui/pagination.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { type ButtonProps, buttonVariants } from '@/components/ui/button';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		className={cn('mx-auto flex w-full justify-center', className)}
+		{...props}
+	/>
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+	({ className, ...props }, ref) => (
+		<ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
+	)
+);
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
+	({ className, ...props }, ref) => <li ref={ref} className={cn('', className)} {...props} />
+);
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+	isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+	React.ComponentProps<'a'>;
+
+const PaginationLink = ({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (
+	<a
+		aria-current={isActive ? 'page' : undefined}
+		className={cn(
+			buttonVariants({
+				variant: isActive ? 'outline' : 'ghost',
+				size,
+			}),
+			className
+		)}
+		{...props}
+	/>
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn('gap-1 pl-2.5', className)}
+		{...props}>
+		<ChevronLeft className="h-4 w-4" />
+		<span>Previous</span>
+	</PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn('gap-1 pr-2.5', className)}
+		{...props}>
+		<span>Next</span>
+		<ChevronRight className="h-4 w-4" />
+	</PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+	<span
+		aria-hidden
+		className={cn('flex h-9 w-9 items-center justify-center', className)}
+		{...props}>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More pages</span>
+	</span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+};

src/content/blog/10-essential-web-development-tools-for-building-stunning-websites.mdx

@@ -0,0 +1,114 @@
+---
+title: '10 Essential Web Development Tools'
+description: 'Discover the must-have tools that will take your web development skills to the next level and help you create websites that shine in the digital landscape.'
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-03'
+dateModified: '2024-03-04'
+image: './10-essential-web-development-tools-for-building-stunning-websites.png'
+---
+
+Are you ready to elevate your web development game and build stunning websites that captivate your audience? In this blog post, we're diving into the world of web development tools that are essential for creating top-notch websites. From front-end tools that help you craft interactive user interfaces to backend tools that ensure seamless functionality, we've got you covered. Discover how optimization tools can boost your website's performance, visual design tools can make your site stand out, and collaborative tools can streamline your projects for maximum efficiency. Stay tuned as we unveil the must-have tools that will take your web development skills to the next level and help you create websites that shine in the digital landscape
+
+## Top Front-End Development Tools for Interactive User Interfaces
+
+When it comes to building stunning websites with interactive user interfaces, having the right front-end development tools can make all the difference. These tools are essential for web developers looking to create visually appealing and engaging websites that keep users coming back for more.
+
+1. **Code Editors**: Tools like Visual Studio Code, Sublime Text, and Atom are indispensable for writing and editing code efficiently. They offer features like syntax highlighting, auto-completion, and error checking to streamline the coding process.
+
+2. **CSS Preprocessors**: Sass and Less are popular CSS preprocessors that allow developers to write more maintainable and scalable CSS code. They offer features like variables, mixins, and nested rules, making styling web pages a breeze.
+
+3. **JavaScript Frameworks**: Frameworks like React, Angular, and Vue.js are essential for building dynamic and interactive user interfaces. They provide components, state management, and routing capabilities that simplify the development of complex web applications.
+
+4. **Task Runners**: Tools like Gulp and Webpack automate repetitive tasks like minification, compilation, and optimization of code. They help streamline the development workflow and improve the performance of web applications.
+
+5. **Browser Developer Tools**: Every web developer should be familiar with the developer tools built into browsers like Chrome and Firefox. These tools allow developers to inspect and debug web pages in real-time, making it easier to identify and fix issues.
+
+6. **Responsive Design Testing Tools**: Tools like BrowserStack and Responsinator help developers test their websites on different devices and screen sizes. Ensuring that websites are responsive is crucial for providing a seamless user experience across various platforms.
+
+7. **Version Control Systems**: Git is a widely used version control system that helps developers track changes to their codebase, collaborate with team members, and revert to previous versions if needed. It is essential for managing and organizing project files effectively.
+
+8. **Front-End Libraries**: Libraries like jQuery, Bootstrap, and Foundation provide pre-built components and styles that can be easily integrated into web projects. They help speed up development time and ensure a consistent look and feel across the website.
+
+9. **Graphic Design Tools**: Tools like Adobe Photoshop and Sketch are essential for creating visual assets like images, icons, and logos for websites. Having a good eye for design and the ability to create appealing visuals is crucial for building stunning websites.
+
+10. **API Testing Tools**: Tools like Postman and Swagger are essential for testing and debugging APIs used in web applications. They help developers ensure that APIs are functioning correctly and returning the expected results, improving the overall performance of web projects.
+
+By leveraging these essential front-end development tools, web developers can create visually stunning websites with interactive user interfaces that captivate audiences and deliver exceptional user experiences
+
+## Must-Have Backend Tools for Seamless Website Functionality
+
+When it comes to developing a website, having the right backend tools is crucial for ensuring seamless functionality and optimal performance. These tools play a significant role in supporting the frontend design and overall user experience. Here are some essential backend web development tools that every web developer should have in their toolkit:
+
+1. **Node.js**: This open-source, cross-platform runtime environment allows developers to build scalable network applications. With Node.js, you can execute JavaScript code server-side, making it ideal for building fast and lightweight web applications.
+
+2. **MongoDB**: As a popular NoSQL database, MongoDB is known for its flexibility and scalability. It is well-suited for handling large volumes of data and is commonly used in web development to store and manage dynamic content.
+
+3. **Express.js**: Express is a minimal and flexible Node.js framework that provides a robust set of features for web and mobile applications. It simplifies the process of building APIs and handling HTTP requests, making backend development more efficient.
+
+4. **Postman**: Postman is a collaboration platform for API development that allows developers to design, test, and document APIs quickly and easily. It helps streamline the backend development process by enabling efficient API testing and monitoring.
+
+5. **Git**: Git is a widely used version control system that allows developers to track changes in their codebase efficiently. It is essential for managing collaborative web development projects and ensuring seamless integration of backend code.
+
+6. **Docker**: Docker is a containerization platform that simplifies the process of packaging, distributing, and running applications. It enables developers to create isolated environments for their backend services, ensuring consistency across different development environments.
+
+7. **Nginx**: Nginx is a high-performance web server that is commonly used as a reverse proxy and load balancer. It helps optimize server resources and improve website performance by efficiently handling incoming client requests.
+
+8. **Redis**: Redis is an open-source, in-memory data structure store that is often used as a caching layer in web applications. It is known for its high performance and low latency, making it ideal for speeding up data retrieval in backend systems.
+
+9. **Swagger**: Swagger is an open-source tool for designing and documenting APIs in an interactive and user-friendly way. It helps streamline backend development by providing a standardized format for describing API endpoints and parameters.
+
+10. **Webpack**: Webpack is a popular module bundler for JavaScript applications that streamlines the process of bundling and optimizing frontend and backend assets. It helps improve website performance by efficiently managing dependencies and assets in a project.
+
+By incorporating these essential backend web development tools into your workflow, you can enhance the functionality and performance of your websites while ensuring a seamless user experience for visitors
+
+## Enhancing Website Performance with Optimization Tools
+
+When it comes to building websites, one of the key factors that can make or break the success of your site is its performance. Slow loading times, clunky functionality, and poor optimization can drive users away and impact your search engine rankings. That's where web development tools come in to save the day.
+
+Optimization tools play a crucial role in enhancing website performance. These tools are designed to streamline your code, optimize images, minify scripts, and improve overall site speed. By utilizing these tools, web developers can ensure that their websites load quickly, operate smoothly, and provide an optimal user experience.
+
+One essential optimization tool for web developers is a content delivery network (CDN). CDNs help deliver website content faster by caching files on servers located closer to the user, reducing latency and improving load times. Another useful tool is a performance monitoring service, which allows developers to track and analyze site performance metrics to identify areas for improvement.
+
+In addition to optimization tools, web developers can also leverage tools for code debugging, browser testing, responsive design, and more to ensure their websites are high-performing across all devices and platforms. By incorporating these essential web development tools into their workflow, developers can create stunning websites that not only look great but also function seamlessly, providing users with an exceptional browsing experience
+
+## Visual Design Tools for Creating Eye-Catching Websites
+
+When it comes to building visually captivating websites, having the right web development tools at your disposal can make all the difference. In the world of web development, the use of visual design tools is essential for creating websites that not only look stunning but also function seamlessly. These tools enable developers to bring their creative visions to life, ensuring that every element on a website is designed with precision and attention to detail.
+
+From graphic design software to prototyping tools, there is a wide array of web development tools that cater specifically to visual design. Tools like Adobe Photoshop and Sketch allow developers to create high-quality graphics and images that can enhance the overall look of a website. Prototyping tools such as InVision and Figma are invaluable for creating interactive prototypes that showcase the website's layout and user interface.
+
+In addition to graphic design and prototyping tools, developers can also leverage tools like Canva and Piktochart for creating visually appealing infographics and other graphics to enhance the website's content. These tools make it easy to add a creative touch to the website, making it more engaging for visitors.
+
+Furthermore, tools like ColorZilla and Adobe Color Wheel help developers choose the perfect color schemes for their websites, ensuring a cohesive and visually appealing design. With the right color combinations, developers can create websites that are not only visually striking but also evoke the right emotions and responses from users.
+
+In conclusion, visual design tools play a crucial role in creating eye-catching websites that stand out in a crowded online space. By incorporating these tools into the web development process, developers can ensure that every aspect of their websites is visually appealing, engaging, and memorable
+
+## Collaborative Tools for Streamlining Web Development Projects
+
+Web development projects often involve collaboration among multiple team members, including designers, developers, content creators, and project managers. To streamline these projects effectively, it is essential to utilize the right web development tools that support collaboration and enhance productivity. By leveraging these tools, teams can communicate efficiently, share resources seamlessly, and track project progress in real-time. Let's explore some essential web development tools that facilitate collaboration and streamline the web development process.
+
+1. **Version Control Systems (VCS)**: Tools like Git enable developers to work simultaneously on a project, track changes, merge code seamlessly, and resolve conflicts efficiently. Platforms like GitHub and Bitbucket provide a central repository for team members to collaborate on code development.
+
+2. **Project Management Software**: Platforms such as Trello, Asana, or Jira help teams organize tasks, set priorities, allocate resources, and track project timelines. These tools improve communication, streamline workflows, and enhance project visibility.
+
+3. **Collaboration Platforms**: Tools like Slack or Microsoft Teams facilitate real-time communication among team members through chat, video calls, and file sharing. These platforms help teams stay connected, brainstorm ideas, and resolve issues promptly.
+
+4. **Prototyping Tools**: Software like Figma or Adobe XD allows designers and developers to create interactive prototypes, share feedback, and iterate on designs collaboratively. These tools streamline the design process and ensure a seamless transition from design to development.
+
+5. **Code Editors**: Integrated development environments (IDEs) like Visual Studio Code or Sublime Text provide features for code editing, debugging, and version control integration. Developers can collaborate on code, share snippets, and customize their workspace for optimum productivity.
+
+6. **Browser Developer Tools**: Built-in browser tools such as Chrome DevTools or Firefox Developer Edition offer features for inspecting, debugging, and optimizing code in real-time. Developers can collaborate on troubleshooting issues and testing website performance across different devices.
+
+7. **Content Management Systems (CMS)**: Platforms like WordPress or Drupal enable content creators to manage website content collaboratively. Teams can create, edit, and publish content seamlessly, ensuring a consistent user experience across the site.
+
+8. **Responsive Design Testing Tools**: Tools like BrowserStack or Responsinator help teams test websites on multiple devices and screen sizes simultaneously. This ensures a responsive design that offers a consistent user experience across various platforms.
+
+9. **Accessibility Checkers**: Tools such as Axe or WAVE ensure that websites meet accessibility standards and are usable by individuals with disabilities. These tools help teams identify and fix accessibility issues collaboratively.
+
+10. **Analytics Tools**: Platforms like Google Analytics or Hotjar provide insights into website performance, user behavior, and conversion rates. Teams can analyze data collaboratively, make informed decisions, and optimize the website for better results.
+
+By incorporating these essential web development tools into your projects, you can foster collaboration, streamline workflows, and build stunning websites efficiently. Embracing the right tools can transform the web development process into a seamless and productive experience for your entire team
+
+## Conclusion
+
+In conclusion, mastering the art of web development requires utilizing a diverse set of tools to create websites that are not only visually stunning but also highly functional. From front-end tools for crafting engaging user interfaces to backend tools for ensuring seamless performance, each tool plays a crucial role in the web development process. By incorporating optimization tools for improved performance, visual design tools for enhanced aesthetics, and collaborative tools for efficient project management, developers can elevate their skills to create websites that truly shine in the digital realm. Embrace these essential web development tools and empower yourself to build websites that leave a lasting impression on your audience

src/content/blog/benefits-of-headless-cms-development-with-directus.mdx

@@ -0,0 +1,41 @@
+---
+title: 'Benefits of Headless CMS: Development with Directus'
+description: 'Discover how Directus flexibility, scalability, and omnichannel content delivery can enhance your web projects.'
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-08'
+image: './benefits-of-headless-cms-development-with-directus.png'
+---
+
+In the ever-evolving world of web development, finding the right tools to streamline content management while delivering a seamless user experience is paramount. Enter the realm of Headless Content Management Systems (CMS), where Directus stands out as a beacon of flexibility and efficiency. This blog post delves into the myriad benefits of adopting Directus for your headless CMS needs.
+
+![Directus Interface](@/assets/images/blog/directus-interface.png)
+
+## What is Directus?
+
+Directus is an open-source headless CMS that caters to the needs of developers, designers, and content creators alike. It separates the back-end content repository from the front-end presentation layer, enabling limitless possibilities for application development. Directus provides a rich suite of features including a dynamic API, an intuitive admin app, and customizable data models, making it a versatile choice for managing digital content.
+
+## Key Benefits of Using Directus
+
+1. **Flexibility and Scalability**
+   Directus shines when it comes to flexibility. It allows you to design your database schema exactly as you need it, without imposing any limitations on how data can be structured or related. This flexibility ensures that as your project grows or evolves, Directus can adapt seamlessly alongside it.
+
+2. **Enhanced Performance**
+   By decoupling the content management from the front-end, Directus enables developers to leverage modern front-end technologies and frameworks, such as React, Vue, or Angular, to build highly performant applications. This separation also means that content delivery can be optimized independently of the content management interface, leading to faster load times and a better overall user experience.
+
+3. **Omnichannel Content Delivery**
+   One of the hallmark features of a headless CMS is its ability to serve content across multiple platforms from a single content repository. Directus excels in this area by providing a powerful API that enables content delivery to websites, mobile apps, IoT devices, and more, ensuring a consistent content experience across all channels.
+
+4. **Customizable and Extensible**
+   Directus offers extensive customization options through its modular architecture. Developers have the freedom to extend the platform's functionality with custom extensions, hooks, and modules. Whether you need to integrate with third-party services or add unique features specific to your project, Directus provides the tools necessary to tailor the CMS to your requirements.
+
+5. **Ease of Use for Content Creators**
+   Despite its powerful features for developers, Directus does not compromise on usability for non-technical users. The admin interface is clean, intuitive, and fully customizable, making it easy for content creators to manage digital assets, edit content, and configure settings without having to rely on developer assistance.
+
+6. **Open Source and Community-Driven**
+   Directus is an open-source project with a vibrant community of contributors and users. This means that the platform is continuously evolving, with new features, improvements, and bug fixes being regularly introduced. The open-source nature also ensures that Directus remains transparent, secure, and free from vendor lock-in.
+
+## Conclusion
+
+Directus offers a compelling solution for teams looking to embrace the headless CMS paradigm. Its blend of flexibility, performance, and ease of use makes it an excellent choice for projects ranging from small websites to large-scale enterprise applications. By choosing Directus, developers can enjoy the freedom to create without constraints, while content creators can manage digital assets more efficiently than ever before.
+
+Embrace the future of content management with Directus, where creativity meets efficiency in the pursuit of digital excellence.

src/content/blog/comparing-mvc-frameworks.mdx

@@ -0,0 +1,113 @@
+---
+title: 'Comparing MVC Frameworks'
+description: 'A detailed comparison of popular MVC frameworks and their use cases in web development.'
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-04'
+image: './comparing-mvc-frameworks.png'
+---
+
+When it comes to web development, choosing the right framework can make all the difference. MVC (Model-View-Controller) frameworks have become a popular choice due to their structured approach to building applications. This blog post dives into some of the most popular MVC frameworks, comparing their features, performance, and use cases to help you make an informed decision.
+
+## Key Takeaways Table
+
+| Feature/Framework | Angular                  | React                    | Vue                  | Django               | Ruby on Rails    |
+| ----------------- | ------------------------ | ------------------------ | -------------------- | -------------------- | ---------------- |
+| Language          | TypeScript               | JavaScript (JSX)         | JavaScript           | Python               | Ruby             |
+| Learning Curve    | Steep                    | Moderate                 | Easy                 | Moderate             | Moderate         |
+| Performance       | High                     | High                     | High                 | Moderate             | Moderate         |
+| Use Case          | Large-scale applications | Single-page applications | Progressive web apps | Data-driven websites | Web applications |
+| Ecosystem         | Rich                     | Very Rich                | Rich                 | Rich                 | Rich             |
+| Community Support | Large                    | Very Large               | Large                | Large                | Large            |
+
+## Introduction
+
+MVC frameworks are a cornerstone of modern web development, offering a structured way to build scalable and maintainable applications. By separating concerns into three interconnected components - the Model, View, and Controller - MVC frameworks provide a clear architecture that enhances code quality and development speed.
+
+## Popular MVC Frameworks Compared
+
+### Angular
+
+Angular, developed by Google, is a TypeScript-based open-source web application framework. It's designed for developing single-page applications with a focus on high performance and scalability.
+
+- **Pros**: Robust, rich ecosystem, comprehensive documentation.
+- **Cons**: Steep learning curve due to its complexity and vastness.
+
+```jsx
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'app-hello-world',
+	template: `
+		<h1>Hello World!</h1>
+	`,
+})
+export class HelloWorldComponent {}
+```
+
+### React
+
+Although React is more of a library than a framework, it adopts the MVC pattern when used in combination with other libraries like Redux or MobX. Developed by Facebook, React is renowned for its virtual DOM feature that optimizes rendering and boosts performance.
+
+- **Pros**: High performance, massive community support, flexible.
+- **Cons**: JSX as a template syntax can be confusing for newcomers.
+
+```jsx
+import React from 'react';
+
+function HelloWorld() {
+	return <h1>Hello World!</h1>;
+}
+
+export default HelloWorld;
+```
+
+### Vue
+
+Vue is a progressive JavaScript framework used for building UIs and single-page applications. It's designed to be incrementally adoptable.
+
+- **Pros**: Easy learning curve, lightweight, and highly flexible
+- **Cons**: Smaller community compared to Angular and React.
+
+```jsx
+<template>
+  <h1>Hello World!</h1>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld'
+}
+</script>
+```
+
+### Django
+
+Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. It's particularly good for developing complex data-driven websites by following the DRY (Don't Repeat Yourself) principle.
+
+- **Pros**: Rapid development, includes an ORM (Object-Relational Mapping), great for data-driven websites.
+- **Cons**: Monolithic, not as suitable for smaller projects or microservices.
+
+```python
+from django.http import HttpResponse
+
+def hello_world(request):
+    return HttpResponse("Hello World!")
+```
+
+### Ruby on Rails
+
+Ruby on Rails is a server-side web application framework written in Ruby. It's designed to make programming web applications easier by making assumptions about what every developer needs to get started.
+
+- **Pros**: Convention over configuration, rapid development, great community.
+- **Cons**: Performance can be an issue for high-traffic applications.
+
+```ruby
+<!-- app/views/hello/world.html.erb -->
+<h1>Hello World!</h1>
+```
+
+## Conclusion
+
+Choosing the right MVC framework depends on various factors including project size, team expertise, and specific project requirements. Angular offers a comprehensive solution for enterprise-level applications. React shines in building high-performance user interfaces with significant community support. Vue is excellent for quick development of small to medium web projects due to its simplicity and flexibility. Django and Ruby on Rails are ideal for rapid development of data-driven websites and web applications with their convention over configuration philosophy.
+
+Remember, there is no one-size-fits-all solution in web development. Evaluating the specific needs of your project against what each framework offers is key to making the right choice.

src/content/blog/debugging-tips-for-astrojs.mdx

@@ -0,0 +1,46 @@
+---
+title: Debugging Tips for Astro.js Applications
+description: 'Learn efficient debugging techniques tailored for Astro.js apps.'
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-10'
+image: './debugging-tips-for-astrojs.png'
+---
+
+Debugging is an essential skill for developers, and when working with Astro.js applications, having efficient debugging techniques can save you time and frustration. In this blog post, we will explore some valuable tips to help you debug your Astro.js projects effectively.
+
+## Key Takeaways
+
+| Tip                          | Description                                                                                                                          |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| Utilize Astro Devtools       | Use Astro Devtools to inspect components, track state changes, and debug your application easily.                                    |
+| Console.log Strategically    | Place strategic console.log statements in your code to track variables, function outputs, and pinpoint issues quickly.               |
+| Check Dependencies Versions  | Ensure your package dependencies are up to date to avoid compatibility issues that could lead to bugs in your Astro.js app.          |
+| Use Breakpoints in VS Code   | Leverage breakpoints in VS Code to pause execution at specific points in your code and analyze the program's state during runtime.   |
+| Test with Different Browsers | Test your Astro.js app on various browsers to catch any browser-specific bugs that may arise and ensure cross-browser compatibility. |
+
+## 1. Utilize Astro Devtools
+
+Astro Devtools is a powerful tool that allows you to inspect components, track state changes, and debug your Astro.js application effectively. By utilizing Astro Devtools, you can streamline the debugging process and gain insights into the inner workings of your app.
+
+## 2. Console.log Strategically
+
+Strategic placement of console.log statements can be a lifesaver when debugging your Astro.js application. By logging variables, function outputs, or specific states, you can trace the flow of your code and identify potential issues swiftly.
+
+```javascript
+// Example of using console.log to debug
+console.log('Variable x:', x);
+```
+
+## 3. Check Dependencies Versions
+
+Keeping your package dependencies up to date is crucial to prevent compatibility issues that could introduce bugs into your Astro.js project. Regularly check for updates and ensure all dependencies are compatible with the latest version of Astro.js.
+
+## 4. Use Breakpoints in VS Code
+
+VS Code offers a powerful debugging feature with breakpoints that allow you to pause execution at specific points in your code. By setting breakpoints strategically, you can analyze the program's state at runtime and pinpoint bugs more efficiently.
+
+## 5. Test with Different Browsers
+
+Testing your Astro.js application on various browsers is essential to ensure cross-browser compatibility and catch any browser-specific bugs that may arise. By testing on different browsers, you can identify and resolve issues before they impact the user experience.
+
+By incorporating these debugging tips into your workflow, you can enhance your debugging skills and troubleshoot your Astro.js applications more effectively. Remember, debugging is a fundamental aspect of software development, and mastering these techniques will make you a more efficient and productive developer. Happy debugging!

src/content/blog/dockerizing-front-end-development.mdx

@@ -0,0 +1,90 @@
+---
+title: 'Dockerizing Front-End Development'
+description: 'A comprehensive guide on Dockerizing front-end development environments for consistent and portable setups.'
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-04'
+image: './dockerizing-front-end-development.png'
+---
+
+In the dynamic world of front-end development, ensuring consistency and portability across different environments can often be a challenge. Docker, a powerful tool for creating, deploying, and running applications by using containers, offers a solution to this problem. This blog post delves into the nitty-gritty of dockerizing your front-end development environment to enhance productivity and ensure a seamless workflow.
+
+## Key Takeaways
+
+| Aspect               | Details                                                                                                                                          |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| What is Docker?      | A platform that uses containers to make it easier to create, deploy, and run applications in any environment.                                    |
+| Benefits             | <ul><li>Consistency across environments</li><li>Easy collaboration</li><li> Simplified dependency management</li><li>Quick setup times</li></ul> |
+| Requirements         | <ul><li>Basic understanding of Docker</li><li>Docker installed on your machine</li></ul>                                                         |
+| Implementation Steps | <ol><li>Create a Dockerfile</li><li>Build the Docker image</li><li>Run the container</li></ol>                                                   |
+| Best Practices       | <ul><li>Use official base images</li><li>Minimize image layers</li><li>Leverage Docker Compose for multi-container setups</li></ul>              |
+| Tools                | <ul><li>Docker</li><li>Docker Compose (optional) </li></ul>                                                                                      |
+| Common Challenges    | <ul><li>Managing volumes for live reloading</li><li>Network configuration for API calls</li></ul>                                                |
+| Solutions            | <ul><li>Use Docker volumes properly</li><li>Configure Docker networks or use <code>--network="host"</code></li></ul>                             |
+
+## Introduction to Dockerizing Front-End Development
+
+Dockerizing your front-end development environment involves creating a Docker container that encapsulates your development environment and its dependencies. This approach not only ensures that all developers on a team are working within the same environment but also simplifies the process of setting up new development environments.
+
+## Benefits of Docker in Front-End Development
+
+- **Consistency**: Docker containers provide a consistent environment for every member of your team, regardless of their local setup.
+- **Collaboration**: Easy to share development environments without the "works on my machine" issue.
+- **Simplified Dependency Management**: All dependencies are contained and managed within the Docker container.
+- **Quick Setup**: New team members can get started with development quickly, without lengthy environment setup processes.
+
+## Getting Started
+
+Before diving into the implementation, ensure that you have Docker installed on your machine. Familiarity with basic Docker commands and concepts such as images, containers, and Dockerfiles is also beneficial.
+
+## Implementation Steps
+
+1. **Create a Dockerfile**: This file contains instructions for building your Docker image. It specifies the base image to use, the dependencies to install, and the commands to run.
+
+```Dockerfile
+# Use the official Node.js image as a parent image
+FROM node:14
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and install dependencies
+COPY package.json .
+RUN npm install
+
+# Copy the rest of your app's source code
+COPY . .
+
+# Expose port 3000 and start your app
+EXPOSE 3000
+CMD ["npm", "start"]
+```
+
+2. **Build the Docker Image**: Once your Dockerfile is ready, build the image using the following command:
+
+```bash
+docker build -t my-frontend-app .
+```
+
+3. **Run the Container**: After building the image, run your app in a container:
+
+```bash
+docker run -p 3000:3000 my-frontend-app
+```
+
+## Best Practices
+
+- **Use Official Base Images**: Always opt for official images as your base image to ensure reliability and security.
+- **Minimize Image Layers**: Combine commands in your Dockerfile to reduce the number of layers in your image, which can help to reduce build times and image size.
+- **Leverage Docker Compose**: For projects that require multiple containers (e.g., front-end, back-end, database), consider using Docker Compose to manage them easily.
+
+## Common Challenges and Solutions
+
+- **Live Reloading**: To enable live reloading, mount your project directory as a volume in the container:
+
+```bash
+docker run -v $(pwd):/app -p 3000:3000 my-frontend-app
+```
+
+- **API Calls**: For network issues related to API calls from within Docker, consider using Docker's network settings or set your container to use the host's network with `--network="host"`.
+
+Dockerizing your front-end development environment can significantly streamline your development process and ensure that all team members are on the same page. By following this guide, you'll be well on your way to leveraging Docker's benefits in your front-end projects. Happy coding!

src/content/blog/essential-frontend-tools-for-astro-js-developers.mdx

@@ -0,0 +1,71 @@
+---
+title: 'Essential Frontend Tools for Astro.js Developers'
+description: 'Discover the essential frontend tools every Astro.js developer should consider integrating into their development process.'
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-03'
+dateModified: '2024-03-04'
+image: './essential-frontend-tools-for-astro-js-developers.png'
+---
+
+Astro.js has rapidly become a favorite among developers for building fast, modern web applications. Its unique approach to loading only the necessary JavaScript has paved the way for optimized performance and better user experiences. As an Astro.js developer, having a toolkit filled with essential frontend tools can significantly streamline your workflow and enhance your project's quality. In this blog post, we'll explore those indispensable tools every Astro.js developer should consider integrating into their development process.
+
+## Key Takeaways
+
+| Tool Type         | Name               | Purpose                                              | Why Essential                                       |
+| ----------------- | ------------------ | ---------------------------------------------------- | --------------------------------------------------- |
+| Code Editor       | Visual Studio Code | Text editing and code management                     | Highly customizable, extensive plugin ecosystem     |
+| CSS Framework     | TailwindCSS        | Utility-first CSS framework                          | Efficient styling without leaving HTML              |
+| CSS Preprocessor  | Sass               | Writing more maintainable CSS                        | Add functionalities like variables, mixins          |
+| Language          | TypeScript         | Typed superset of JavaScript                         | Improved code quality, better tooling support       |
+| Version Control   | Git                | Tracking changes in source code                      | Facilitates collaboration and version tracking      |
+| Remote Repository | GitHub             | Hosting for Git repositories                         | Centralized codebase management                     |
+| Build Tool        | Webpack / Vite     | Optimizing the build process                         | Fast development server, efficient bundling         |
+| Linter/Formatters | ESLint/Prettier    | Ensuring code quality and consistency                | Identifies and fixes syntax errors, formats code    |
+| Component Library | Headless UI        | Designing UIs and integrating interactive components | Rapid UI development, customizable                  |
+| Package Manager   | npm/Yarn/PNPM      | Managing project dependencies                        | Efficient package management, dependency resolution |
+
+## Visual Studio Code
+
+Visual Studio Code (VS Code) is a lightweight but powerful source code editor that supports a wide range of programming languages and frameworks, including TypeScript and frameworks like Astro.js. Its vast ecosystem of extensions, such as the Tailwind CSS IntelliSense for seamless TailwindCSS integration and the Astro extension for better syntax highlighting and autocompletion, makes it an ideal choice for frontend developers.
+
+## TailwindCSS
+
+TailwindCSS is a utility-first CSS framework that enables developers to style their applications efficiently without leaving the HTML. It pairs exceptionally well with Astro.js, offering a way to build custom user interfaces with speed without the bloat of unused CSS. The combination of TailwindCSS's utility classes with Astro.js's component architecture allows for building highly responsive and visually appealing websites faster.
+
+## Headless UI
+
+When you need interactive components like dropdowns, modals, or tabs, Headless UI pairs perfectly with Tailwind, providing completely unstyled, fully accessible UI components that you can bring to life with your own styling.
+
+## CSS Preprocessor: Sass
+
+Sass is a powerful CSS extension language that enables developers to use variables, nested rules, mixins, and more, making CSS more maintainable. It integrates well with Astro.js, allowing for more dynamic styling options.
+
+## TypeScript
+
+TypeScript, a typed superset of JavaScript, provides optional static typing, classes, and interface. For developers working with Astro.js, TypeScript brings several advantages, such as improved code quality, easier debugging, and enhanced developer productivity through better tooling support. Integrating TypeScript into your Astro.js projects can significantly reduce runtime errors and lead to more maintainable codebases.
+
+## Version Control: Git
+
+Version control is non-negotiable in modern web development workflows. Git offers a robust system for tracking changes, collaborating with teams, and managing codebases across different stages of development. Leveraging Git's branching and merging capabilities ensures that development processes remain smooth and organized, even when integrating new features or experimenting with your Astro.js projects.
+
+## Remote Repository: GitHub
+
+GitHub is a popular platform for hosting Git repositories, providing a centralized location for managing and collaborating on codebases. It offers a wide range of features, such as issue tracking, pull requests, and continuous integration, making it an essential tool for Astro.js developers looking to streamline their development process and maintain a well-organized codebase.
+
+## Webpack / Vite
+
+While Astro.js comes with its build optimizations, understanding tools like Webpack or Vite can be beneficial for complex projects that require custom build processes or advanced optimization strategies. Vite, in particular, offers a fast development environment by leveraging modern JavaScript features, making it a good fit for projects using Astro.js and TypeScript. It enhances the developer experience with features like hot module replacement (HMR) and efficient bundling strategies.
+
+## ESLint & Prettier
+
+Maintaining code quality and consistency is crucial in team environments or even for individual developers aiming for best practices. ESLint helps identify and fix problems in your JavaScript/TypeScript code, while Prettier automatically formats your code according to specified style guidelines. Integrating these tools into your Astro.js projects ensures that your code is not only functional but also clean and consistent.
+
+## Package Manager: npm / Yarn / PNPM
+
+Package managers like npm, Yarn, and PNPM are essential for managing project dependencies and ensuring efficient package resolution. They provide a convenient way to install, update, and remove packages, making it easier to manage the various libraries and tools required for Astro.js development. Choosing the right package manager depends on your specific project needs and personal preferences, but all three are widely used and well-supported within the Astro.js community.
+
+## Conclusion
+
+The landscape of frontend web development is rich and diverse, offering a multitude of tools designed to improve efficiency, collaboration, and end-user experience. By incorporating these essential tools into your Astro.js projects, you're not just keeping up with modern development practices—you're also ensuring that your web applications are built on a solid foundation of performance, maintainability, and scalability.
+
+Remember, the best toolkit is one that suits your specific project needs and personal workflow preferences. Experimenting with these tools alongside Astro.js can make a significant difference in your development process, enabling you to focus more on creativity and less on the tedious aspects of programming. Happy coding!

src/content/blog/exploring-nodejs-development-trends-2024.mdx

@@ -0,0 +1,78 @@
+---
+title: 'Exploring the Latest Node.js Development Trends in 2024'
+description: 'Explore the latest trends in Node.js development that are shaping the future of web and application development.'
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-03'
+dateModified: '2024-03-04'
+image: './exploring-nodejs-development-trends-2024.png'
+---
+
+The landscape of Node.js development is always evolving, with each year bringing new trends, tools, and best practices. As we delve into 2024, it's crucial for developers and businesses alike to stay ahead of the curve. In this blog post, we'll explore the latest trends in Node.js development that are shaping the future of web and application development.
+
+## Key Takeaways
+
+| Trend                              | Description                                                                                                                                                                                    | Impact on Development                                         |
+| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| Serverless Architectures           | Adoption of serverless computing to reduce system administration tasks and enhance scalability.Adoption of serverless computing to reduce system administration tasks and enhance scalability. | Simplifies deployment, reduces costs.                         |
+| Full-stack JavaScript with Node.js | Leveraging Node.js for server-side scripting, enabling full-stack development with JavaScript.                                                                                                 | Streamlines development process, reduces context switching.   |
+| Increased Focus on Security        | Emphasis on implementing robust security practices from the start, including dependency audits and encryption.                                                                                 | Reduces vulnerabilities, protects sensitive data.             |
+| Adoption of GraphQL                | Increased integration of GraphQL to provide clients with precisely the data they request.                                                                                                      | Improves performance, reduces data transfer.                  |
+| TypeScript's Growing Popularity    | Widespread adoption of TypeScript for large-scale Node.js applications.                                                                                                                        | Enhances reliability, maintainability, and code management.   |
+| Performance Optimization           | Continuous exploration of techniques to optimize runtime efficiency, such as lazy loading and code splitting.                                                                                  | Improves application performance, user experience.            |
+| Cross-platform Development         | Node.js frameworks enabling developers to build desktop and mobile applications using web technologies.                                                                                        | Streamlines development processes across different platforms. |
+| Deno's Rise                        | Deno's growing popularity for its security features and support for TypeScript out of the box.                                                                                                 | Prompts discussions about the future direction of Node.js.    |
+| Microservices                      | Continued adoption of microservices architecture for better scalability and flexibility.                                                                                                       | Enables frequent and efficient deployment of updates.         |
+| AI and ML Integration              | Increasing integration of AI and ML capabilities in Node.js applications.                                                                                                                      | Empowers developers to create more intelligent solutions.     |
+| Edge Computing                     | Node.js applications running directly on edge devices or in edge data centers to improve performance and user satisfaction.                                                                    | Enhances performance and user satisfaction.                   |
+
+## 1. Rise of Serverless Architectures
+
+Serverless computing has been gaining traction over the years, and in 2024, it's more prevalent than ever. Node.js fits perfectly into this trend due to its lightweight nature and ability to handle asynchronous tasks efficiently. Developers are leveraging serverless platforms like AWS Lambdam Google Cloud Functions, and Azure Functions more extensively for building microservices, reducing operational costs, and improving scalability.
+
+## 2. Full-stack JavaScript with Node.js
+
+The concept of JavaScript everywhere has solidified with Node.js enabling server-side scripting. Full-stack development with JavaScript is now more streamlined, thanks to frameworks like Next.js and Nuxt.js, which work seamlessly with Node.js. This approach simplifies the development process, making it faster and more efficient by using a single language across the stack.
+
+## 3. Increased Focus on Security
+
+As Node.js applications become more complex and widespread, security is becoming a central concern. In 2024, we're seeing an increased emphasis on implementing robust security practices from the start. This includes regular dependency audits with tools like npm audit, embracing security linters, and adopting encryption for data protection. Open-source tools and community-driven initiatives are also playing a crucial role in identifying and patching vulnerabilities faster.
+
+## 4. Adoption of GraphQL
+
+GraphQL's popularity continues to rise as developers seek more efficient ways to query and manipulate data. Node.js applications are increasingly integrating GraphQL to provide clients with precisely the data they request, reducing the amount of data transferred over the network and improving performance. Apollo Server and Express-GraphQL are popular choices for setting up a GraphQL server with Node.js.
+
+## 5. TypeScript's Growing Popularity
+
+TypeScript has become indispensable in the Node.js ecosystem for large-scale applications. Its static type-checking ability adds a layer of reliability and maintainability that's hard to achieve with vanilla JavaScript. The trend shows a growing number of Node.js projects adopting TypeScript for better development experience, error reduction, and easier code management.
+
+## 6. Performance Optimization
+
+Performance remains a key focus, with the Node.js community continuously exploring ways to optimize runtime efficiency. Techniques like lazy loading, code splitting, and leveraging worker threads are becoming standard practices. Additionally, profiling tools and performance monitoring solutions are increasingly sophisticated, helping developers identify and address bottlenecks more effectively.
+
+## 7. Cross-platform Development
+
+Node.js is playing a significant role in cross-platform development, with frameworks like Electron and React Native enabling developers to build desktop and mobile applications using web technologies. This trend is empowering developers to create versatile applications with a single codebase, streamlining development processes across different platforms.
+
+## 8. Deno's Rise
+
+Although Node.js continues to be immensely popular, Deno — created by the original developer of Node.js — is garnering attention for its security features and support for TypeScript out of the box. While not a direct replacement, Deno's rise prompts discussions among developers about the future direction of server-side JavaScript environments.
+
+## 9. microservices
+
+The microservices architecture pattern remains a cornerstone in the Node.js community. By breaking down applications into smaller, loosely coupled services, developers can achieve better scalability and flexibility. This approach fits perfectly with the dynamic nature of Node.js, allowing teams to deploy updates more frequently and efficiently.
+
+## 10. AI and ML Integration
+
+Artificial Intelligence (AI) and Machine Learning (ML) are no longer just buzzwords but integral parts of modern web development. In 2024, we're seeing an increasing number of Node.js applications integrating AI and ML capabilities, from chatbots and personal assistants to sophisticated data analysis tools. This trend is empowering developers to create more intelligent, automated solutions that enhance user experiences.
+
+## 11. Edge Computing
+
+Edge computing is reshaping how data is processed by bringing computation closer to the data source. This trend is particularly relevant for IoT applications and services requiring low latency. With Node.js, developers can easily build lightweight applications that run directly on edge devices or in edge data centers, thus improving performance and user satisfaction.
+
+## Conclusion
+
+The landscape of Node.js development in 2024 is dynamic and exciting, marked by advancements that are making application development faster, more efficient, and more secure. As we continue to explore these trends, it's clear that Node.js remains at the forefront of web development innovation, adapting to meet the ever-evolving demands of developers and users alike.
+
+This exploration touches on some of the most influential trends in Node.js development for 2024. Whether you're building scalable web applications, focusing on security, or embracing new data querying paradigms, staying abreast of these trends will be key to leveraging Node.js effectively in your projects.
+
+Remember, technology is constantly changing, and what's popular today might be replaced tomorrow. Keeping an open mind and continuously learning are key to staying relevant in this exciting field.

src/content/blog/getting-started-with-astrojs.mdx

@@ -0,0 +1,112 @@
+---
+title: Getting Started with Astro.js
+description: An introductory guide to Astro.js, setting up your development environment.
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-10'
+image: './getting-started-with-astrojs.png'
+---
+
+Welcome to the world of Astro.js, where building fast, modern websites is more accessible than ever before! Whether you're a seasoned web developer or just dipping your toes into web development, Astro.js offers a unique approach to building websites that are performant, SEO-friendly, and enjoyable to create. In this beginner's guide, we'll walk you through the basics of Astro.js, setting up your development environment, and crafting your first page. Let's dive in!
+
+## Key Takeaways
+
+| Key Points                  | Details                                                                                                                   |
+| --------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| What is Astro.js?           | A modern frontend framework for building fast, static websites using components from your favorite JavaScript frameworks. |
+| Installation Requirements   | Node.js version 18.14.1 or higher.                                                                                        |
+| Creating Your First Project | Use `npm create astro@latest` command in your terminal.                                                                   |
+| Development Server          | Run `npm start` to launch a local development server.                                                                     |
+| Building Your Site          | Execute `npm run build` to generate a static build of your site.                                                          |
+| Adding Framework Components | Astro supports React, Vue, Svelte, and more with easy integration.                                                        |
+| Styling Options             | Utilize Tailwind CSS, vanilla CSS, or pre-processors like SCSS.                                                           |
+
+Astro.js is designed with performance and developer experience in mind. It allows you to write your UI using components from various frameworks (or none at all!) and render them to static HTML at build time.
+
+## Setting Up Your Development Environment
+
+To get started with Astro.js, you'll need Node.js installed on your computer. If you haven't already, download and install Node.js (version 14.15.0 or higher) from [nodejs.org](https://nodejs.org).
+
+Once Node.js is installed, open your terminal and run the following command to create a new Astro project:
+
+```bash
+npm create astro@latest
+```
+
+Follow the prompts in your terminal to customize your new project.
+
+## Launching Your Development Server
+
+Navigate into your new project directory and start the development server:
+
+```bash
+cd my-astro-project
+npm install
+npm start
+```
+
+This command will compile your project and serve it on a local development server, usually at `http://localhost:4321`. You can view your site by opening this URL in a web browser.
+
+## Building Your First Page
+
+Astro uses a file-based routing system. To create a new page, simply add a `.astro` file in the `src/pages/` directory. Here's a quick example:
+
+**src/pages/index.astro**
+
+```astro
+---
+// Frontmatter script space
+---
+
+<html>
+	<head>
+		<title>My Astro Website</title>
+	</head>
+	<body>
+		<h1>Hello, Astro!</h1>
+	</body>
+</html>
+```
+
+This code defines a basic HTML structure for your home page with a greeting message.
+
+## Adding Components
+
+Astro allows you to integrate components from other frameworks like React or Vue easily. For example, to use React components, first install the necessary dependencies:
+
+```bash
+npx astro add react
+```
+
+Then, you can import React components into your .astro files and use them alongside traditional HTML elements.
+
+**Example:**
+
+```astro
+---
+import MyReactComponent from '../components/MyReactComponent.jsx';
+---
+
+<div>
+	<MyReactComponent />
+</div>
+```
+
+## Styling Your Site
+
+Astro supports various styling options, including Tailwind CSS, which can be easily integrated into your project for rapid styling development.
+
+To add Tailwind CSS, first install the necessary dependencies:
+
+```bash
+npx astro add tailwind
+```
+
+Then follow the setup instructions in the Astro documentation to configure Tailwind CSS for your project.
+
+## Conclusion
+
+Congratulations! You've just set up your development environment and created your first page with Astro.js. From here, you can explore adding more pages, integrating components from your favorite JavaScript frameworks, and experimenting with different styling options to make your website uniquely yours.
+
+Astro.js offers an exciting approach to building modern websites that are optimized for performance right out of the box. With its support for various front-end frameworks and styling solutions, Astro.js provides the flexibility to build websites that meet today's standards for speed, SEO, and user experience.
+
+Start building with Astro.js today and see what you can create!

src/content/blog/mastering-markdown.mdx

@@ -0,0 +1,263 @@
+---
+title: 'Mastering Markdown: A Guide to Essential Elements'
+description: 'Master the essential Markdown elements to create engaging, well-structured content. Learn headings, emphasis, lists, links, and more.'
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-04-07'
+dateModified: '2024-04-14'
+image: './mastering-markdown.png'
+---
+
+## Introduction to Markdown
+
+Markdown is a lightweight markup language that allows you to format text easily and quickly. It's widely used for creating web content, documentation, and even e-books. In this article, we'll dive deep into the world of Markdown and explore its many features and benefits.
+
+Markdown was created by John Gruber in 2004 with the goal of making it easy to write and read formatted text. It has since become a popular choice for writers, developers, and content creators due to its simplicity and versatility.
+
+## Why Use Markdown?
+
+There are many reasons why you should consider using Markdown for your writing needs:
+
+1. It's easy to learn and use
+2. It's portable and can be used across different platforms
+3. It produces clean and readable output
+4. It's fast and efficient
+5. It's widely supported by many applications and tools
+
+Markdown allows you to focus on writing your content without worrying about complex formatting or layout. You can quickly add headings, lists, links, images, and more with just a few simple characters.
+
+## Basic Markdown Syntax
+
+To get started with Markdown, you need to know some basic syntax. Here are some of the most commonly used Markdown elements:
+
+| Element        | Syntax                             |
+| -------------- | ---------------------------------- |
+| Heading        | `# H1, ## H2, ### H3`              |
+| Bold           | `**bold text**`                    |
+| Italic         | `_italicized text_`                |
+| Link           | `[link text](https://example.com)` |
+| Image          | `![alt text](image.jpg)`           |
+| Blockquote     | `> blockquote`                     |
+| Ordered List   | `1. First item`                    |
+| Unordered List | `- First item`                     |
+| Code           | `` `code` ``                       |
+
+These are just a few examples of what you can do with Markdown. As you become more comfortable with the syntax, you'll discover many more ways to format your text and create rich, engaging content.
+
+## Headings
+
+Headings are used to create a hierarchy in your document. In Markdown, you can create headings using the `#` symbol followed by a space and the heading text. The number of `#` symbols determines the level of the heading. For example:
+
+```text
+# Heading 1
+## Heading 2
+### Heading 3
+```
+
+## Emphasis
+
+To emphasize text, you can use asterisks or underscores. A single asterisk or underscore will create _italic_ text, while double asterisks or underscores will create **bold** text. For example:
+
+```markdown
+_This text is italic_
+**This text is bold**
+```
+
+## Lists
+
+Markdown supports both ordered and unordered lists. To create an unordered list, use asterisks, plus signs, or hyphens. For an ordered list, use numbers followed by periods. For example:
+
+```markdown
+- Item 1
+- Item 2
+- Item 3
+
+1. First item
+2. Second item
+3. Third item
+```
+
+Unordered list:
+
+- Item 1
+- Item 2
+- Item 3
+
+Ordered list:
+
+1. First item
+2. Second item
+3. Third item
+
+## Links
+
+To create a link, enclose the link text in square brackets and the URL in parentheses. You can create internal links to other sections of your document by using the following syntax:
+
+```markdown
+[link text](#section-id)
+```
+
+For example, if you have a section with the heading "## Advanced Markdown techniques", you can create a link to it like this:
+
+```markdown
+[Go to Advanced Markdown techniques](#advanced-markdown-techniques)
+```
+
+This will create a clickable link that will take the reader directly to that section of the document.
+
+You can also add a title for the link by enclosing it in quotes after the URL. For example:
+
+```markdown
+[Visit GitHub](https://github.com/deployn/astro-deploy 'GitHub')
+```
+
+This will render as [Visit GitHub](https://github.com/deployn/astro-deploy 'GitHub').
+
+## Images
+
+To insert an image, use an exclamation mark followed by the alt text in square brackets and the image URL in parentheses. You can also add a title for the image by enclosing it in quotes after the URL. For example:
+
+```markdown
+![A beautiful sunset](https://example.com/sunset.jpg 'Sunset')
+```
+
+## Code
+
+To display inline code, enclose it in backticks. For code blocks, use triple backticks before and after the code. You can also specify the language of the code block for syntax highlighting. For example:
+
+Inline code: `console.log('Hello, World!')`
+
+Code block:
+
+```javascript
+function greet(name) {
+	return `Hello, ${name}!`;
+}
+```
+
+## Blockquotes
+
+To create a blockquote, use the > symbol followed by a space and the quote text. For example:
+
+> The best way to predict the future is to invent it. - Alan Kay
+
+## Tables
+
+You can create tables in Markdown by using pipes `|` and hyphens `-` to define the structure. For example:
+
+```markdown
+| Header 1 | Header 2 | Header 3 |
+| -------- | -------- | -------- |
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |
+```
+
+This will render as:
+
+| Header 1 | Header 2 | Header 3 |
+| -------- | -------- | -------- |
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |
+
+## Footnotes
+
+You can add footnotes to your content by using square brackets with a caret and an identifier `[^1]`. Then, at the bottom of your document, define the footnote content using the same identifier. For example:
+
+```markdown
+This is some text with a footnote.[^1]
+
+[^1]: This is the footnote content.
+```
+
+This will render as: This is some text with a footnote.[^1]
+
+[^1]: This is the footnote content.
+
+## Task Lists
+
+You can create task lists by using square brackets with a space `[ ]` for an incomplete task and `[x]` for a completed task. For example:
+
+```markdown
+- [x] Complete task
+- [ ] Incomplete task
+```
+
+This will render as:
+
+- [x] Complete task
+- [ ] Incomplete task
+
+## Strikethrough
+
+To create strikethrough text, use two tildes `~~` before and after the text. For example:
+
+```markdown
+~~This text is strikethrough~~
+```
+
+This will render as: ~~This text is strikethrough~~
+
+## Horizontal Rules
+
+To create a horizontal rule, use three or more asterisks, hyphens, or underscores on a line by themselves. For example:
+
+---
+
+## Markdown Editors and Tools
+
+While you can write Markdown in any text editor, there are many specialized Markdown editors and tools available that can make your life easier. Here are a few popular options:
+
+- [Typora](https://typora.io/) - A minimalist Markdown editor for Windows, Mac, and Linux
+- [Visual Studio Code](https://code.visualstudio.com/) - A powerful code editor with built-in Markdown support
+- [Dillinger](https://dillinger.io/) - An online Markdown editor with live preview
+- [StackEdit](https://stackedit.io/) - An online Markdown editor with real-time collaboration
+- [Bear](https://bear.app/) - A note-taking app for macOS and iOS with Markdown support
+- [Obsidian](https://obsidian.md/) - A powerful note-taking app with Markdown support and backlinking features
+- [Notion](https://www.notion.so/) - A versatile productivity tool with Markdown support and database features
+- [HackMD](https://hackmd.io/) - An online Markdown editor with real-time collaboration and version control
+- [Joplin](https://joplinapp.org/) - An open-source note-taking app with Markdown support and end-to-end encryption
+- [iA Writer](https://ia.net/writer) - A distraction-free writing app for Mac, iOS, and Android
+- [Markdown Monster](https://markdownmonster.west-wind.com/) - A powerful Markdown editor for Windows
+- [Github](https://github.com) - A web-based platform for version control and collaboration that supports Markdown
+
+These are just a few examples of the many Markdown editors and tools available. Choose the one that best fits your needs and workflow.
+
+## Markdown for Different Use Cases
+
+Markdown is a versatile language that can be used for many different purposes. Here are a few examples:
+
+### Blogging
+
+Many blogging platforms, such as [Ghost](https://ghost.org/), [Hashnode](https://hashnode.com/), [Dev.to](https://dev.to/), [Medium](https://medium.com/), and [WordPress](https://wordpress.com/), support Markdown. You can write your blog posts in Markdown and easily convert them to HTML for publishing.\_createMdxContent
+
+### Documentation
+
+Markdown is a popular choice for creating documentation, especially for software projects. Tools like [GitBook](https://www.gitbook.com/), [Read the Docs](https://readthedocs.org/), [MkDocs](https://www.mkdocs.org/), [Docusaurus](https://docusaurus.io/), [Docz](https://www.docz.site/) and [Sphinx](https://www.sphinx-doc.org/) allow you to create beautiful documentation from Markdown files.
+
+### E-books
+
+You can use Markdown to write and format e-books. Tools like [Pandoc](https://pandoc.org/), [Calibre](https://calibre-ebook.com/), and [Leanpub](https://leanpub.com/) can convert your Markdown files into various e-book formats, such as EPUB and MOBI.
+
+### Presentations
+
+Believe it or not, you can even create presentations using Markdown. Tools like [reveal.js](https://revealjs.com/), [Marp](https://marp.app/), [Remark](https://remarkjs.com/), and [GitPitch](https://gitpitch.com/) allow you to create slideshows using Markdown syntax.
+
+## Conclusion
+
+Markdown is a powerful and versatile language that can help you create beautiful and functional content quickly and easily. Whether you're a writer, developer, or content creator, learning Markdown is a valuable skill that can save you time and effort.
+
+In this article, we've covered the basics of Markdown syntax, as well as some advanced techniques and tools. We've also explored some of the many use cases for Markdown, from blogging and documentation to e-books and presentations.
+
+If you're new to Markdown, don't be intimidated by the syntax. Start with the basics and gradually work your way up to more advanced techniques. With practice and patience, you'll soon be a Markdown master!
+
+## Additional Resources
+
+If you want to learn more about Markdown, here are some additional resources to check out:
+
+- [Markdown Guide](https://www.markdownguide.org/) - A comprehensive guide to Markdown syntax and best practices
+- [CommonMark Spec](https://spec.commonmark.org/) - A standardized specification for Markdown
+- [GitHub Markdown Guide](https://guides.github.com/features/mastering-markdown/) - A guide to using Markdown on GitHub
+- [Markdown Cheatsheet](https://www.markdownguide.org/cheat-sheet/) - A quick reference guide to Markdown syntax
+- [Markdown Tutorial](https://www.markdowntutorial.com/) - An interactive tutorial for learning Markdown
+- [Awesome Markdown](https://github.com/mundimark/awesome-markdown) - A curated list of Markdown tools, libraries, and resources
+
+With these resources and the knowledge you've gained from this article, you'll be well on your way to mastering Markdown and creating amazing content. Happy writing!

src/content/blog/modern-web-frameworks-introduction.mdx

@@ -0,0 +1,100 @@
+---
+title: 'Introduction to Modern Web Frameworks'
+description: "A beginner's guide to understanding the purpose and advantages of modern web frameworks."
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-04'
+image: './modern-web-frameworks-introduction.png'
+---
+
+Welcome to the world of web development, where the landscape is constantly evolving, and the tools at a developer's disposal are more powerful than ever. If you're just starting out, or if you're curious about what modern web frameworks have to offer, you've come to the right place.
+
+## Key Takeaways
+
+| Key Point                 | Details                                                                                                                 |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| What Are Web Frameworks?  | Software platforms designed to support the development of web applications including web services, resources, and APIs. |
+| Purpose of Web Frameworks | Simplify the development process, enforce structure, ensure security, and enhance productivity.                         |
+| Advantages                | Speeds up development, promotes code reuse, offers built-in security features, and supports scalability.                |
+| Examples                  | React, Angular, Vue.js for front-end; Django, Flask, Ruby on Rails for back-end.                                        |
+
+## What Are Web Frameworks?
+
+At their core, web frameworks are software libraries designed to support the development of web applications, web services, and web resources. They aim to automate the overhead associated with common activities performed in web development. For example, many frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse.
+
+## Purpose of Web Frameworks
+
+The main purpose of using a web framework is to simplify the development process. They provide a standard way to build and deploy web applications on the internet. Here are some of the core purposes:
+
+- **Simplify Complexity**: They handle much of the plumbing and infrastructure, allowing developers to focus on writing the application itself.
+- **Enforce Structure**: Most frameworks impose a structure on an application right from the start, which can prevent bad practices and makes code more maintainable.
+- **Ensure Security**: Security features are often built-in, helping protect against common threats.
+- **Enhance Productivity**: By automating common tasks, frameworks significantly reduce development time.
+
+## Advantages of Modern Web Frameworks
+
+Modern web frameworks come with a plethora of advantages that make them indispensable in today's web development landscape:
+
+1. **Speeds Up Development Process**: With features like code generation and scaffolding, developers can get applications up and running in less time.
+2. **Promotes Code Reusability**: Many frameworks encourage the use of reusable components or modules, which can save time when developing similar applications.
+3. **Built-in Security Features**: From CSRF tokens to SQL injection prevention, modern frameworks have numerous security mechanisms in place.
+4. **Supports Scalability**: They are designed to help applications grow seamlessly in terms of data volume and user traffic.
+5. **Community Support**: Popular frameworks have large communities behind them, providing extensive documentation, forums, and third-party plugins.
+
+## Examples of Modern Web Frameworks
+
+### For Front-end Development:
+
+- **React**: A JavaScript library for building user interfaces.
+- **Angular**: A platform and framework for building single-page client applications using HTML and TypeScript.
+- **Vue.js**: A progressive framework for building user interfaces.
+
+#### Introducing Astro.js: The Modern Web Framework for Performance
+
+Astro.js is a cutting-edge web framework that stands out in the modern development ecosystem. It's built with the intent to deliver the best possible performance by shipping zero JavaScript by default and only hydrating components as needed when they interact. With Astro.js, you can build fast, content-focused websites while using any front-end framework you prefer, such as React, Vue.js, or Svelte.
+
+```html
+---
+// Example of an Astro component using TailwindCSS for styling
+import Navbar from '../components/Navbar.astro';
+---
+
+<Navbar />
+<main class="prose mx-auto p-5 lg:prose-xl">
+	<h1>Welcome to my blog built with Astro.js</h1>
+	<p>Astro.js allows us to create fast static websites with components we love.</p>
+</main>
+<footer>Built with Astro and TailwindCSS.</footer>
+```
+
+Astro's unique approach to web development prioritizes efficiency and optimal user experience by embracing the islands architecture, enabling partial hydration of components. It aligns seamlessly with modern CSS frameworks like TailwindCSS, facilitating rapid development of visually stunning interfaces with minimal effort.
+
+#### Embracing TypeScript in Astro.js
+
+Astro.js offers first-class TypeScript support straight out of the box, making it a breeze for developers to leverage type safety and advanced JavaScript features in their projects. This seamless integration enhances code quality and developer experience.
+
+```typescript
+// Define a TypeScript interface in an Astro component
+---
+interface UserProps {
+  name: string;
+}
+
+const UserGreeting: React.FC<UserProps> = ({ name }) => {
+  return <h1>Hello, {name}! Welcome to my Astro-powered blog.</h1>;
+};
+---
+
+<UserGreeting name="Astro Enthusiast" />
+```
+
+In this code block, we have a TypeScript interface `UserProps` and a `UserGreeting` component that uses this interface to type-check the `name` prop.
+
+Astro.js is transforming the landscape of web development, delivering performance-focused websites without compromising on the developer's ability to use their favorite tools and frameworks. Whether you're diving into web development or you're a seasoned developer looking for an edge in performance, Astro.js is an exciting framework to explore.
+
+### For Back-end Development:
+
+- **Django**: A high-level Python Web framework that encourages rapid development and clean, pragmatic design.
+- **Flask**: A micro web framework written in Python.
+- **Ruby on Rails**: A server-side web application framework written in Ruby.
+
+In conclusion, modern web frameworks are invaluable tools that streamline the web development process, ensure security, and enhance productivity. Whether you're a beginner looking to dive into the world of web development or an experienced developer exploring new frameworks, understanding the purpose and advantages of these tools is crucial. Happy coding!

src/content/blog/this-is-a-draft.mdx

@@ -0,0 +1,10 @@
+---
+title: 'Untitled'
+description: 'Untitled'
+datePublished: '2024-04-11'
+isDraft: true
+---
+
+# Untitled
+
+The `isDraft` field is a boolean field that you can use to mark a post as a draft. When set to `true` , the post won't be rendered in production. This is useful when you're working on a post and you don't want it to be published yet.

src/content/blog/top-10-ides-for-astrojs.mdx

@@ -0,0 +1,83 @@
+---
+title: 'Top 10 IDEs for Astro.js Development'
+description: 'Explore the best integrated development environments for Astro.js projects.'
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-10'
+image: './top-10-ides-for-astrojs.png'
+---
+
+When working on Astro.js projects, having the right Integrated Development Environment (IDE) can significantly boost productivity and streamline the development process. In this blog post, we will explore the top 10 IDEs that are well-suited for Astro.js development.
+
+## Key Takeaways
+
+| IDE                | Features                                                   | Compatibility         |
+| ------------------ | ---------------------------------------------------------- | --------------------- |
+| Visual Studio Code | Intuitive interface, extensive extensions, Git integration | Windows, macOS, Linux |
+| WebStorm           | Smart code completion, powerful refactoring tools          | Windows, macOS, Linux |
+| Sublime Text       | Lightweight, customizable, multiple selections             | Windows, macOS, Linux |
+| Nova               | Modern code editor, advanced code editing capabilities     | macOS                 |
+| Cursor             | AI-first code editor, designed to help developers          | Windows, macOS, Linux |
+| Vim                | Highly customizable, modal editing                         | Windows, macOS, Linux |
+| Eclipse            | Rich ecosystem, Java-based                                 | Windows, macOS, Linux |
+| Brackets           | Live preview, preprocessor support                         | Windows, macOS, Linux |
+| CodeSandbox        | Online IDE with collaboration features                     | Web-based             |
+| Repl.it            | Online IDE supporting multiple languages                   | Web-based             |
+
+Choosing the right IDE can make a world of difference in your development workflow. Let's dive into each of these IDEs in more detail.
+
+## 1. Visual Studio Code
+
+[Visual Studio Code](https://code.visualstudio.com/) (VS Code) is a popular choice among developers for its user-friendly interface and a plethora of extensions that cater to various needs. It offers seamless Git integration and is compatible with Windows, macOS, and Linux.
+
+## 2. WebStorm
+
+[WebStorm](https://www.jetbrains.com/webstorm/) is known for its intelligent code completion and robust refactoring tools. It provides a smooth development experience and supports Windows, macOS, and Linux platforms.
+
+## 3. Sublime Text
+
+[Sublime Text](https://www.sublimetext.com/) is a lightweight yet powerful IDE that allows for extensive customization. Its multiple selections feature is a favorite among developers working on Astro.js projects.
+
+## 4. Nova
+
+[Nova](https://nova.app/) is a powerful and modern code editor designed for macOS by Panic. With its intuitive interface, robust features, and extensions, Nova provides an excellent environment for Astro.js development. It offers advanced code editing capabilities, seamless Git integration, and a customizable workspace to cater to developers' needs. Consider exploring Nova as a versatile IDE option for enhancing your Astro.js projects on macOS.
+
+## 5. Cursor
+
+[Cursor](https://cursor.sh/) is a AI-first code editor that is designed to help developers write code faster and more efficiently. Cursor is installable on Windows, macOS and Linux, making it a versatile choice for Astro.js development.
+
+## 6. Vim
+
+[Vim](https://www.vim.org/) is a highly customizable IDE known for its modal editing capabilities. It is compatible with Windows, macOS, and Linux.
+
+## 7. Eclipse
+
+[Eclipse](https://www.eclipse.org/) boasts a rich ecosystem and is Java-based. It supports development on Windows, macOS, and Linux.
+
+## 8. Brackets
+
+[Brackets](https://brackets.io/) stands out for its live preview feature and robust preprocessor support. It is available for Windows, macOS, and Linux platforms.
+
+## 9. CodeSandbox
+
+[CodeSandbox](https://codesandbox.io/) is an online IDE that offers collaboration features for seamless team projects. It is accessible via web browsers.
+
+## 10. Repl.it
+
+[Repl.it](https://repl.it/) is an online IDE that supports multiple languages and provides a versatile development environment online.
+
+## My Top Pick: Visual Studio Code
+
+I personally recommend Visual Studio Code for Astro.js development due to its user-friendly interface, extensive extensions, and seamless Git integration. It has been my go-to IDE for Astro.js projects.
+
+If you need a CDE (Cloud Development Environment) for Astro.js, you can use [Code Server](https://docs.linuxserver.io/images/docker-code-server/) to run Visual Studio Code in a Docker container.
+
+Choosing the right IDE ultimately depends on your preferences and workflow requirements. Experiment with a few options to find the one that best suits your Astro.js development needs.
+
+Happy coding! 🚀
+
+```javascript
+const helloAstro = () => {
+	console.log('Hello Astro.js!');
+};
+helloAstro();
+```

src/content/blog/unleasing-the-power-of-astro-js-for-better-web-development.mdx

@@ -0,0 +1,97 @@
+---
+title: 'Unleashing the Power of Astro.js'
+description: 'Explore the wonders of Astro.js, a transformative tool reshaping web development.'
+author: [{ type: 'Person', name: 'Jewgeni', url: 'https://deployn.de' }]
+datePublished: '2024-03-03'
+dateModified: '2024-04-11'
+image: './unleasing-the-power-of-astro-js-for-better-web-development.png'
+---
+
+## Introduction
+
+Welcome to an exciting and immersive exploration of Astro.js, a transformative tool that is revolutionizing the world of web development. In this comprehensive blog post, we will take you on a deep dive into the wonders of Astro.js, showcasing its remarkable ability to supercharge website performance and introduce unparalleled versatility in modern applications.
+
+Whether you're a seasoned developer with years of experience under your belt or just embarking on your web development journey, this guide will illuminate the incredible potential of Astro.js and how it can streamline and enhance your development process.
+
+## Understanding the Magic Behind Astro.js
+
+What sets Astro.js apart from other web development tools is its unique ability to seamlessly merge static and dynamic content, enabling instant loading while still providing dynamic capabilities. This powerful blend not only optimizes performance but also simplifies the development process, allowing you to focus on crafting exceptional user interfaces without compromising on speed.
+
+By leveraging server-side pre-rendering, Astro.js significantly reduces the burden on the client-side, resulting in lightning-fast, responsive websites. Its flexible architecture supports a wide range of front-end frameworks, giving you the freedom to unleash your creativity while still harnessing the benefits of Astro.js.
+
+Here's a simple example of how you can create a basic Astro.js component:
+
+```astro
+---
+const name = 'John Doe';
+---
+
+<h1>Hello, {name}!</h1>
+```
+
+## Optimizing Website Performance with Astro.js
+
+One of the key strengths of Astro.js lies in its ability to dramatically improve website loading times by pre-rendering pages and efficiently serving static assets. This approach minimizes server load and bandwidth usage, ultimately enhancing the user experience and ensuring a smooth, seamless browsing experience.
+
+Astro.js's component-based architecture promotes modularity and reusability, streamlining the development process and boosting overall performance. The hybrid rendering model strikes the perfect balance between speed and interactivity, delivering users a fast and engaging experience across all devices.
+
+## Harnessing the Benefits of Astro.js for Web Development
+
+Astro.js is a game-changer when it comes to optimizing workflows and maximizing performance. By avoiding the pitfalls of heavy JavaScript frameworks, Astro.js ensures quick loading times and smooth operation across a wide range of devices, from desktop computers to mobile phones.
+
+The modular, component-based design of Astro.js encourages code reusability and maintains consistency throughout your projects, simplifying maintenance and reducing development time. Additionally, Astro.js offers a unified build system that reduces complexity and minimizes potential errors arising from disparate technologies.
+
+Here's an example of how you can import and use components in Astro.js:
+
+```astro
+---
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+---
+
+<html>
+	<body>
+		<Header />
+		<main>
+			<!-- Page content goes here -->
+		</main>
+		<Footer />
+	</body>
+</html>
+```
+
+## Exploring the Versatility of Astro.js in Modern Applications
+
+One of the standout features of Astro.js is its incredible versatility. Its modular architecture allows it to seamlessly adapt to various project requirements and use cases, whether you're building web applications, mobile apps, or anything in between. With a rich set of features and a well-documented API, Astro.js empowers developers to create highly functional and interactive applications.
+
+Performance and optimization are at the core of Astro.js, ensuring that your applications are fast, responsive, and lightweight. The extensive plugin library further expands the capabilities of Astro.js, enabling you to integrate additional functionalities and tailor your projects to specific needs.
+
+Here's an example of how you can use Astro.js with a popular front-end framework like React:
+
+```astro
+---
+import { ReactComponent } from '../components/ReactComponent.jsx';
+---
+
+<html>
+	<body>
+		<ReactComponent client:load />
+	</body>
+</html>
+```
+
+## Pro Tips for Maximizing the Potential of Astro.js
+
+- **Optimize Your Build Process**: Utilize partial hydration and code splitting techniques to create efficient builds that load only the necessary components, reducing overall bundle size and improving performance.
+- **Utilize Static Site Generation**: For content-heavy websites, take advantage of Astro.js's static site generation capabilities. By pre-rendering pages at build time, you can achieve lightning-fast loading speeds and optimize performance.
+- **Experiment with Component Composition**: Astro.js allows you to mix and match components from different libraries and frameworks. Don't be afraid to experiment with component composition to find the perfect combination that meets your project's unique requirements.
+- **Implement Server-Side Rendering**: When dealing with dynamic content or components that require server-side rendering for SEO purposes, Astro.js has you covered. Utilize server-side rendering to ensure that your pages are properly indexed by search engines and provide a seamless user experience.
+- **Stay Updated with the Latest Features**: Astro.js is constantly evolving, with new features and improvements being added regularly. Keep yourself informed about the latest updates and explore how you can leverage them to enhance your projects and stay ahead of the curve.
+
+## Conclusion
+
+Astro.js is a transformative tool that is revolutionizing the world of web development. By enhancing performance, offering versatile solutions for modern applications, and simplifying the development process, Astro.js empowers developers to create exceptional digital experiences.
+
+Through this immersive exploration, we have shed light on the incredible potential of Astro.js and how it can streamline your workflow, boost website speed, and introduce unparalleled flexibility in your projects. Armed with this knowledge and the pro tips provided, you are now equipped to leverage the full power of Astro.js and take your web development skills to new heights.
+
+Embrace the future of web development with Astro.js and embark on a journey of innovation, performance optimization, and boundless creativity. The possibilities are endless, and the impact you can make is truly remarkable.

src/content/config.ts

@@ -0,0 +1,33 @@
+import { z, defineCollection } from 'astro:content';
+
+const blogCollection = defineCollection({
+	type: 'content',
+	schema: ({ image }) =>
+		z.object({
+			isDraft: z.boolean().optional(),
+			title: z.string(),
+			description: z.string(),
+			author: z
+				.array(
+					z.object({
+						type: z.string().default('Person'),
+						name: z.string(),
+						url: z.string().url().optional(),
+					})
+				)
+				.optional(),
+			datePublished: z
+				.string()
+				.transform((str) => new Date(str))
+				.optional(),
+			dateModified: z
+				.string()
+				.transform((str) => new Date(str))
+				.optional(),
+			image: image().optional(),
+		}),
+});
+
+export const collections = {
+	blog: blogCollection,
+};

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/BaseLayout.astro

@@ -1,22 +1,42 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
+import '@/styles/globals.css';
 import Header from '@/components/layout/Header.astro';
-const { title } = Astro.props;
+import Footer from '@/components/layout/Footer.astro';
+
+interface Props {
+	title: string;
+	description: string;
+	lang?: string;
+	noindex?: boolean;
+	nofollow?: boolean;
+}
+const { title, description, lang = 'en', noindex, nofollow } = Astro.props as Props;
 ---
 
-<html lang="en">
+<html lang={lang}>
 	<head>
+		<title>{title}</title>
+		<meta name="description" content={description} />
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta name="theme-color" content="#61a8e1" />
+		<meta
+			name="robots"
+			content={`${noindex ? 'noindex' : 'index'}, ${nofollow ? 'nofollow' : 'follow'}`}
+		/>
 		<link rel="icon" href="/favicon.ico" sizes="48x48" />
 		<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
 		<link rel="manifest" href="/site.webmanifest" />
-		<title>{title}</title>
+		<link rel="sitemap" href="/sitemap-index.xml" />
+		<ViewTransitions />
 	</head>
-	<body class="dark:bg-black">
+	<body class="flex min-h-screen flex-col dark:bg-secondary">
 		<Header />
-		<main>
+		<main class="flex-grow pb-20 sm:pb-0 sm:pl-16 md:pl-0">
+			<!-- Added padding-left for sm screens -->
 			<slot />
 		</main>
+		<Footer />
 	</body>
 </html>

src/lib/directus.ts

@@ -0,0 +1,18 @@
+import { createDirectus, rest } from '@directus/sdk';
+
+const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de';
+
+type Recipe = {
+	status: string;
+	name: string;
+	image: string;
+	description: string;
+};
+
+type Schema = {
+	Recipe: Recipe[];
+};
+
+const directus = createDirectus<Schema>(DIRECTUS_URL).with(rest());
+
+export default directus;

src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+	return twMerge(clsx(inputs));
 }

src/pagefind-default-ui.d.ts

@@ -0,0 +1 @@
+declare module '@pagefind/default-ui';

src/pages/404.astro

@@ -0,0 +1,12 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro';
+---
+
+<BaseLayout title="Astro Deploy 404" description="404: Page not found.">
+	<header class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
+		<h1 class="text-center text-zinc-900 dark:text-zinc-200">404: Page Not Found</h1>
+		<p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
+			The page you are looking for does not exist. Please check the URL or return to the home page.
+		</p>
+	</header>
+</BaseLayout>

src/pages/blog/[...page].astro

@@ -0,0 +1,194 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import Heading from '@/components/ui/Heading.astro';
+import Search from '@/components/blog/Search.astro';
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from '@/components/ui/pagination';
+import { Image } from 'astro:assets';
+
+interface BlogPost {
+	data: {
+		title: string;
+		description: string;
+		datePublished?: string;
+		dateModified?: string;
+		author?: [
+			{
+				type?: string;
+				name: string;
+				url?: string;
+			},
+		];
+		image?: string;
+		isDraft?: boolean;
+	};
+	slug: string;
+}
+
+export async function getStaticPaths({ paginate }: { paginate: Function }) {
+	const allBlogposts = await getCollection('blog');
+	const publishedBlogPosts: any = (post: BlogPost) => !post.data.isDraft;
+	const sortedPosts = allBlogposts.filter(publishedBlogPosts).sort((a, b) => {
+		const dateA = a.data.dateModified
+			? new Date(a.data.dateModified)
+			: a.data.datePublished
+				? new Date(a.data.datePublished)
+				: new Date(0);
+		const dateB = b.data.dateModified
+			? new Date(b.data.dateModified)
+			: b.data.datePublished
+				? new Date(b.data.datePublished)
+				: new Date(0);
+		return dateB.getTime() - dateA.getTime();
+	});
+
+	const postsPerPage = 6;
+
+	return paginate(sortedPosts, {
+		pageSize: postsPerPage,
+	});
+}
+
+const {
+	page,
+}: {
+	page: {
+		data: BlogPost[];
+		url: { prev: string; current: string; next: string };
+		currentPage: number;
+		lastPage: number;
+	};
+} = Astro.props;
+---
+
+<BaseLayout
+	title={`Blog Page ${page.currentPage} | Astro Deploy`}
+	description="Explore insightful articles on our Blog: Dive into a world of knowledge through posts crafted with expertise. Discover, learn, and grow with us.">
+	<div class="container mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
+		<div class="mb-12 text-center">
+			<Heading level={1}>Blog</Heading>
+			<Search />
+			<p class="mt-4 text-xl text-zinc-600 dark:text-zinc-400">
+				Here are some blogposts, they are located in the repository as mdx files.
+			</p>
+		</div>
+		<hr class="my-8 border-t border-zinc-300 dark:border-zinc-700" />
+		<div class="grid grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3">
+			{
+				page.data.map((post) => (
+					<div class="overflow-hidden rounded-lg bg-white p-6 shadow-lg transition duration-500 ease-in-out hover:-translate-y-1 hover:shadow-2xl dark:bg-zinc-800">
+						{post.data.image && (
+							<a href={`/blog/${post.slug}/`}>
+								<Image
+									src={post.data.image}
+									alt={post.data.title}
+									inferSize
+									class="h-48 w-full object-cover transition duration-500 ease-in-out hover:scale-105"
+								/>
+							</a>
+						)}
+						<div class="p-6">
+							<h2
+								transition:name={post.data.title}
+								class="mb-3 text-2xl font-bold leading-tight text-zinc-800 transition duration-300 ease-in-out hover:text-primary-600 dark:text-zinc-100 dark:hover:text-primary-400">
+								<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
+							</h2>
+							<div class="mb-4 text-sm text-zinc-600 dark:text-zinc-400">
+								<div class="mb-2 flex flex-wrap items-center">
+									{post.data.author && (
+										<>
+											<span class="mr-2">By</span>
+											{post.data.author.map((author, index) => (
+												<span class="mr-2">
+													{author.url ? (
+														<a
+															href={author.url}
+															class="font-medium text-primary-600 underline hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
+															{author.name}
+														</a>
+													) : (
+														<span class="font-medium text-primary-600 dark:text-primary-400">
+															{author.name}
+														</span>
+													)}
+													{post.data.author && index < post.data.author.length - 1 && (
+														<span>, </span>
+													)}
+												</span>
+											))}
+										</>
+									)}
+								</div>
+								<div class="flex flex-wrap items-center">
+									{post.data.datePublished && (
+										<time datetime={post.data.datePublished} class="mr-4">
+											<span class="mr-1">Published:</span>
+											{new Date(post.data.datePublished).toLocaleDateString('en-US', {
+												year: 'numeric',
+												month: 'short',
+												day: 'numeric',
+											})}
+										</time>
+									)}
+									{post.data.dateModified && (
+										<time datetime={post.data.dateModified}>
+											<span class="mr-1">Updated:</span>
+											{new Date(post.data.dateModified).toLocaleDateString('en-US', {
+												year: 'numeric',
+												month: 'short',
+												day: 'numeric',
+											})}
+										</time>
+									)}
+								</div>
+							</div>
+							<p class="text-zinc-600 dark:text-zinc-400">{post.data.description}</p>
+						</div>
+					</div>
+				))
+			}
+		</div>
+		<div class="mt-12 text-center text-black dark:text-white">
+			<Pagination>
+				<PaginationContent>
+					{
+						page.currentPage > 1 && (
+							<>
+								<PaginationItem>
+									<PaginationPrevious href={`${page.url.prev}/`} />
+								</PaginationItem>
+								<PaginationItem>
+									<PaginationLink href="/blog/">1</PaginationLink>
+								</PaginationItem>
+							</>
+						)
+					}
+					<PaginationItem>
+						<PaginationLink href={`${page.url.current}/`} isActive
+							>{page.currentPage}
+						</PaginationLink>
+					</PaginationItem>
+					{
+						page.currentPage < page.lastPage && (
+							<>
+								<PaginationItem>
+									<PaginationLink href={`/blog/${page.lastPage}/`}>{page.lastPage}</PaginationLink>
+								</PaginationItem>
+								<PaginationItem>
+									<PaginationNext href={`${page.url.next}/`} />
+								</PaginationItem>
+							</>
+						)
+					}
+				</PaginationContent>
+			</Pagination>
+		</div>
+	</div>
+</BaseLayout>

src/pages/blog/[...slug].astro

@@ -0,0 +1,104 @@
+---
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import Table from '@/components/blog/Table.astro';
+import '@/styles/prose.css';
+import { Image } from 'astro:assets';
+
+export async function getStaticPaths() {
+	const blogEntries = await getCollection('blog');
+	return blogEntries
+		.filter((entry) => !entry.data.isDraft)
+		.map((entry) => ({
+			params: { slug: entry.slug },
+			props: { entry },
+		}));
+}
+
+interface Props {
+	entry: CollectionEntry<'blog'>;
+}
+
+const { entry } = Astro.props as Props;
+
+if (!entry) {
+	return Astro.redirect('/404');
+}
+
+const { Content } = await entry.render();
+const components = { table: Table };
+const {
+	title = '',
+	description = '',
+	author = [],
+	datePublished = '',
+	dateModified = '',
+	image = '',
+} = entry.data;
+
+const formatDate = (dateString: string) => {
+	const date = new Date(dateString);
+	return date.toLocaleDateString('en-US', {
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+	});
+};
+
+const descriptionMeta =
+	description.length > 158 ? description.substring(0, 155) + '...' : description;
+---
+
+<BaseLayout title={title} description={descriptionMeta}>
+	<div
+		class="container prose mx-auto px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl"
+		data-pagefind-body>
+		<h1 class="text-4xl font-bold">{title}</h1>
+		<div class="mt-2 text-sm text-gray-600">
+			{
+				author.length > 0 && (
+					<span>
+						By{' '}
+						{author.map((a, index) => (
+							<span>
+								{a.url ? (
+									<a href={a.url} target="_blank" rel="noopener noreferrer">
+										{a.name}
+									</a>
+								) : (
+									a.name
+								)}
+								{index < author.length - 1 ? ', ' : ''}
+							</span>
+						))}
+					</span>
+				)
+			}
+			{
+				datePublished && (
+					<span class="ml-2">Published on {formatDate(datePublished.toString())}</span>
+				)
+			}
+			{
+				dateModified && (
+					<span class="ml-2">Last updated on {formatDate(dateModified.toString())}</span>
+				)
+			}
+		</div>
+		{
+			image && (
+				<Image
+					src={image as unknown as string}
+					alt={title}
+					inferSize
+					class="mt-8 h-96 w-full rounded-lg object-cover"
+				/>
+			)
+		}
+
+		<div class="mt-8">
+			<Content components={components} />
+		</div>
+	</div>
+</BaseLayout>

src/pages/index.astro

@@ -1,7 +1,123 @@
 ---
+import { Icon } from 'astro-icon/components';
 import BaseLayout from '@/layouts/BaseLayout.astro';
+import Heading from '@/components/ui/Heading.astro';
+import FeatureSection from '@/components/FeatureSection.astro';
+
+import index1 from '@/assets/images/index-1.png';
+import index2 from '@/assets/images/index-2.png';
+import index3 from '@/assets/images/index-3.png';
+import index4 from '@/assets/images/index-4.png';
+import index5 from '@/assets/images/index-5.png';
+
+const features = [
+	{
+		title: 'Revolutionize Website Development',
+		description:
+			'Astro Deploy revolutionizes development with Astro.js 4 and Docker for scalable solutions.',
+		image: index1,
+	},
+	{
+		title: 'Accelerate Website Development with Astro Deploy',
+		description:
+			'Astro Deploy expedites website development with pre-configured Astro.js boilerplate, Docker, and Tailwind CSS, enabling businesses to launch their online presence swiftly and engage customers effectively.',
+		image: index2,
+	},
+	{
+		title: 'Docker Integration',
+		description:
+			'The Docker integration ensures smooth deployment and scalability of your Astro.js 4 project. Embrace containerization technology to streamline your development process and enhance efficiency.',
+		image: index3,
+	},
+	{
+		title: 'Tailwind CSS Styling',
+		description:
+			'Utilizing the power of Tailwind CSS, crafting visually appealing designs that are responsive and user-friendly. Bring your vision to life with customizable styles that reflect your brand identity.',
+		image: index4,
+	},
+	{
+		title: 'MDX Blog Setup',
+		description:
+			"Enhance your website's content management capabilities with MDX Blog integration. Set up an MDX-powered blog for seamless content creation and management, empowering you to engage your audience effectively.",
+		image: index5,
+	},
+];
 ---
 
-<BaseLayout title="Astro Deploy">
-	<div class="flex items-center justify-center px-4 pt-48 dark:text-white">Hello World</div>
+<BaseLayout
+	title="Astro Deploy"
+	description="Launch your site with Astro Deploy: A cutting-edge solution featuring Astro.js, Docker, and Tailwind CSS for seamless, scalable web development.">
+	<header class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
+		<Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200">
+			Deploy Your
+			<span
+				class="bg-gradient-to-r from-accent-600 via-accent-600 to-zinc-900 bg-clip-text text-transparent dark:from-accent dark:to-zinc-200">
+				Astro.js
+			</span>
+			Site!
+		</Heading>
+		<p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
+			Supercharge your website with the Astro Deploy boilerplate with Docker support for
+			out-of-this-world web experiences. Launch today!
+		</p>
+		<div class="mt-8 flex justify-center">
+			<a
+				href="https://github.com/deployn/astro-deploy"
+				class="inline-flex items-center justify-center gap-x-3 rounded-full bg-primary-600 px-8 py-4 text-center text-base text-sm font-medium ring-4 ring-transparent focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-base-50 dark:focus:ring-offset-zinc-800">
+				<span>Get started!</span>
+				<Icon name="line-md:chevron-right" class="size-3" />
+			</a>
+		</div>
+	</header>
+
+	<section
+		class="mx-auto max-w-6xl px-8 py-12 text-base-900 dark:text-base-100 sm:px-6 lg:px-8 lg:py-16">
+		<Heading
+			level={2}
+			classes="max-w-3xl text-center mx-auto pb-2 bg-clip-text bg-gradient-to-r from-primary-700 to-primary-500 dark:from-primary-500 dark:to-primary-300 text-transparent">
+			Launch Stunning Websites Effortlessly with Astro Deploy
+		</Heading>
+		<p class="mx-auto mt-4 max-w-4xl text-center text-xl text-zinc-900/80 dark:text-zinc-400">
+			Empower your success with Astro Deploy. Leverage cutting-edge technologies for seamless
+			experiences.
+		</p>
+	</section>
+
+	{
+		features.map((feature, index) => (
+			<FeatureSection
+				title={feature.title}
+				description={feature.description}
+				image={feature.image}
+				isReversed={index % 2 !== 0}
+			/>
+		))
+	}
+
+	<section class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl">
+		<div
+			class="absolute inset-0 my-6 rounded bg-gray-800 lg:-skew-y-1 xl:-mx-2 xl:my-20 xl:rotate-2">
+		</div>
+		<div
+			class="absolute left-6 top-3 size-12 rotate-45 -skew-y-3 rounded-full bg-primary-400 lg:left-6 xl:top-14">
+		</div>
+		<div
+			class="absolute -left-6 top-2 size-16 rotate-45 -skew-y-3 bg-primary-600 transition-all duration-500 hover:rounded-3xl xl:top-12">
+		</div>
+
+		<div class="relative flex flex-col items-center gap-8 md:flex-row md:gap-16">
+			<div class="text-center md:w-7/12 md:text-left">
+				<h2 class="mb-4 text-4xl font-black text-white">Deploy your site</h2>
+				<p class="text-xl leading-relaxed text-gray-300">Start building amazing sites, today.</p>
+			</div>
+			<div class="flex justify-center md:w-5/12">
+				<a
+					href="https://github.com/deployn/astro-deploy"
+					class="inline-flex items-center justify-center gap-2 rounded-full border border-primary-700 bg-primary-700 px-8 py-4 font-semibold leading-6 text-white hover:border-primary-600 hover:bg-primary-600 focus:ring focus:ring-primary-400 focus:ring-opacity-50 active:border-primary-700 active:bg-primary-700">
+					<span>Get Started</span>
+					<Icon name="line-md:chevron-right" class="size-3" />
+				</a>
+			</div>
+		</div>
+	</section>
 </BaseLayout>

src/pages/recipes.astro

@@ -0,0 +1,50 @@
+---
+import directus from '@/lib/directus.ts';
+import { readItems } from '@directus/sdk';
+
+import { Image } from 'astro:assets';
+
+const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de';
+
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import Heading from '@/components/ui/Heading.astro';
+
+const recipes = await directus.request(
+	readItems('Recipe', {
+		fields: ['name', 'description', 'image'],
+		sort: ['name'],
+	})
+);
+---
+
+<BaseLayout
+	title="Recipes | Astro Deploy"
+	description="Feast on favorite recipes: A curated collection of delightful dishes, sourced directly from our CMS. Discover new flavors and inspire your culinary journey.">
+	<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
+		<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
+			<Heading level={1}>Recipes</Heading>
+			<p class="mt-5">
+				Here are some of my favorite recipes. They are fetched through Directus CMS.
+			</p>
+		</div>
+		<hr class="mb-12 dark:border-zinc-700/75" />
+		<ul class="grid gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 xl:gap-x-8">
+			{
+				recipes.map((recipe) => (
+					<li class="overflow-hidden rounded-lg bg-white shadow dark:bg-zinc-800">
+						<Image
+							class="h-48 w-full object-cover"
+							src={`${DIRECTUS_URL}/assets/${recipe.image}`}
+							inferSize
+							alt={recipe.name}
+						/>
+						<div class="p-6">
+							<h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{recipe.name}</h2>
+							<p class="mt-2 text-base text-zinc-600 dark:text-zinc-400">{recipe.description}</p>
+						</div>
+					</li>
+				))
+			}
+		</ul>
+	</div>
+</BaseLayout>

src/styles/prose.css

@@ -0,0 +1,18 @@
+.prose {
+	@apply break-words;
+	@apply prose-a:text-primary-600 prose-a:underline prose-a:transition prose-a:duration-150 prose-a:ease-in-out prose-a:hover:text-primary-500 prose-a:focus:outline-none prose-a:focus:ring-2 prose-a:focus:ring-primary-500 prose-a:dark:text-primary-400 prose-a:dark:hover:text-primary-300;
+	@apply prose-ul:mb-4 prose-ul:ml-8;
+	@apply prose-ol:mb-4 prose-ol:ml-8;
+	@apply prose-li:mb-2;
+	@apply prose-code:rounded prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:text-sm prose-code:text-base-600 prose-code:dark:bg-gray-800 prose-code:dark:text-base-400;
+	code::before {
+		content: '';
+	}
+	code::after {
+		content: '';
+	}
+	pre code {
+		@apply block overflow-auto rounded bg-gray-800 p-4 text-white;
+	}
+	@apply prose-blockquote:my-4 prose-blockquote:border-l-4 prose-blockquote:border-secondary-300 prose-blockquote:pl-4 prose-blockquote:dark:border-secondary-600;
+}

tailwind.config.mjs

@@ -4,14 +4,85 @@ export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	prefix: '',
 	theme: {
+		screens: {
+			xs: { max: '600px' },
+			sm: '600px',
+			md: '840px',
+			lg: '1200px',
+			xl: '1600px',
+
+			'h-xs': { raw: '(max-height: 600px)' },
+			'h-sm': { raw: '(min-height: 600px)' },
+			'h-md': { raw: '(min-height: 840px)' },
+			'h-lg': { raw: '(min-height: 1200px)' },
+			'h-xl': { raw: '(min-height: 1600px)' },
+		},
 		container: {
 			center: true,
 			padding: '2rem',
 			screens: {
-				'2xl': '1400px',
+				xl: '1600px',
 			},
 		},
 		extend: {
+			colors: {
+				primary: {
+					50: '#f1fafe',
+					100: '#e2f3fc',
+					200: '#bfe7f8',
+					300: '#86d6f3',
+					400: '#46c0ea',
+					500: '#1ea8d9',
+					600: '#1294c9',
+					700: '#0f6d95',
+					800: '#105b7c',
+					900: '#134c67',
+					950: '#0d3144',
+					DEFAULT: '#1294c9',
+				},
+				secondary: {
+					50: '#f3f6fb',
+					100: '#e3ebf6',
+					200: '#cddcf0',
+					300: '#aac5e6',
+					400: '#82a7d8',
+					500: '#648acd',
+					600: '#5171bf',
+					700: '#4660af',
+					800: '#3e4f8f',
+					900: '#364472',
+					950: '#1f253c',
+					DEFAULT: '#1f253c',
+				},
+				base: {
+					50: '#f4f6f9',
+					100: '#ebeef3',
+					200: '#d2dbe5',
+					300: '#aabccf',
+					400: '#7c98b4',
+					500: '#5b7b9c',
+					600: '#486381',
+					700: '#3b5069',
+					800: '#334459',
+					900: '#2f3b4b',
+					950: '#1f2632',
+					DEFAULT: '#f4f6f9',
+				},
+				accent: {
+					50: '#fff3ed',
+					100: '#fee5d6',
+					200: '#fcc7ac',
+					300: '#faa077',
+					400: '#f66c3d',
+					500: '#f34a1c',
+					600: '#e43112',
+					700: '#bd2111',
+					800: '#971c15',
+					900: '#791a15',
+					950: '#410a09',
+					DEFAULT: '#f66c3d',
+				},
+			},
 			keyframes: {
 				'accordion-down': {
 					from: { height: '0' },
@@ -28,5 +99,5 @@ export default {
 			},
 		},
 	},
-	plugins: [require('tailwindcss-animate')],
+	plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 };