Zahit | Simplicity is Depth, Not Lack

Zahit Theme: Advanced Customization & Colors

Sat, 23 May 2026 00:00:00 GMT

Welcome to the Zahit advanced customization guide! Since Zahit is designed under pure minimalist aesthetics, the codebase is kept raw, transparent, and extremely easy to tweak. In this tutorial, we will show you how to update your biographical profile card, tweak key CSS properties inside the global design system, and customize the translation dictionaries.

👤 1. Editing Core Metadata: `src/config.ts`

To personalize your name, current role, short biography, and social links, open the file src/config.ts. This file exports three main configurations:

SITE_CONFIG

Defines your global website parameters:

title: Shown in browser tabs and page layout headers.
description: Used for default SEO metadata description.
url: The canonical root domain address where your blog is deployed.

AUTHOR

Maintains your profile card data:

name: Your full name.
role: Localized roles for Turkish (tr) and English (en).
bio: Localized short summaries rendered under your avatar image.
avatar: Path to your profile picture (placed in /public/, e.g., /profile.jpeg).

SOCIALS

A list of social accounts rendered as rounded floating icons in the desktop sidebar or mobile footer:

export const SOCIALS = [
  {
    label: 'GitHub',
    href: 'https://github.com/johndoe',
    icon: 'mdi:github',
  },
  // Add more links using the same schema structure
];

Note: Any Iconify code prefix (like mdi:) can be referenced to render custom SVGs automatically.

🎨 2. Customizing Themes and Color Schemes

Zahit’s design is fully controlled by CSS variables inside src/styles/global.css. You can completely restyle the theme color scheme and typography by editing the values defined inside the :root pseudo-selector:

:root {
  /* Main Colors */
  --bg-color: #00022b;     /* Deep canvas background color */
  --dark: #010e54;         /* Accented panels & container backdrops */
  --accent: #0855b1;       /* Primary link text, borders, and buttons */
  --light: #4fa5d8;        /* Hover effects, dynamic titles & bright cues */
  --text-color: #daeaff;   /* Softer tinted shade ensuring text readability */

  /* Typography */
  --font-family-body: 'Source Sans 3', sans-serif;
  --font-family-heading: 'Source Sans 3', sans-serif;

  /* Layout Widths */
  --site-width: 80%;       /* Global responsiveness container width constraint */
  --content-padding: 2rem;
}

Creating a Forest Green Theme:

For example, to transition the theme from a space-blue look into a dark forest theme, swap the color variables:

:root {
  --bg-color: #0d1a0d;
  --dark: #1b331b;
  --accent: #2e662e;
  --light: #66cc66;
  --text-color: #e2f2e2;
}

🗣️ 3. Modifying Dict Translations: `src/i18n/ui.ts`

All the UI-related static text fragments (such as navigations, “Published on” text, or the “Contents” sidebar title) are stored inside the src/i18n/ui.ts file.

To add or modify translation strings, look at the ui object:

export const ui = {
  tr: {
    'nav.home': 'Ana Sayfa',
    'toc.title': 'İçindekiler',
  },
  en: {
    'nav.home': 'Home',
    'toc.title': 'Contents',
  },
} as const;

Simply update the corresponding string values, or add new keys to adapt the dictionary according to your requirements.

Conclusion

Zahit is built to remain out of your way and let your content shine. By leveraging the clean separation of src/config.ts, pure CSS tokens, and static dictionary keys, customizing your portfolio site is a matter of minutes.

Happy coding, and enjoy sharing your thoughts with the world!

Zahit Theme: How to Write and Organize Content

Thu, 21 May 2026 00:00:00 GMT

One of Zahit’s most powerful assets is its clean, out-of-the-box support for bilingual content management. This guide will walk you through the folder architecture of your posts, formatting your post metadata (frontmatter), and utilizing Zahit’s smart language switcher to link Turkish and English posts.

📂 Content Directory Structure

All blog posts reside under the src/content/blog/ directory. Within this directory, articles are organized into localized subfolders:

src/content/blog/tr/ — Holds your Turkish articles.
src/content/blog/en/ — Holds your English articles.

Astro automatically parses all files ending with .md or .mdx inside these subfolders thanks to the content collection loader defined in src/content.config.ts.

📋 The Post Frontmatter Schema

Every markdown post must contain a metadata block at the very top, enclosed by triple dashes ---. Zahit’s content collection schema enforces the following fields:

---
title: 'Your Article Title'
description: 'A brief description of your article.'
pubDate: '2026-05-17'
tags: ['tag1', 'tag2']
translationKey: 'unique-post-identifier'
---

Explaining the Fields:

title & description: Essential fields rendered at the top of the article and dynamically injected into the HTML <head> tag for optimal SEO indexation.
pubDate: The publication date. Zahit uses this date to sort posts chronologically and group them dynamically by year inside the /archive/ page.
tags: An array of tags. Make sure to include zahit-guide if you want them grouped under the theme guide archive.
translationKey: A custom unique text key linking the English and Turkish translations of the post together.

🌐 The Smart i18n Switching Mechanism

Zahit implements an advanced routing system inside the header language navigation toggle. When a visitor is reading an English post and clicks “TR”, the theme does not simply bounce them to the Turkish home page.

Instead, it searches through your blog collection to find a Turkish post that shares the exact same translationKey value.

If an identical key is found: It seamlessly redirects the reader directly to the Turkish translation page.
If no matching key is found: It gracefully redirects the reader to the /tr/archive/ page.

Best Practice Example:

To write a post about minimalist design in both languages:

Create src/content/blog/tr/sadelik.md containing translationKey: 'simplicity-post'.
Create src/content/blog/en/simplicity.md containing translationKey: 'simplicity-post'.

With this configuration, readers can toggle back and forth between English and Turkish on the fly without ever losing their place.

Next Steps

Now that you know how to organize and draft posts, you are ready to adjust the design tokens, switch colors, and modify your social link matrices.

Read our final guide: Zahit Theme: Advanced Customization & Colors to learn more.

Zahit Theme: Step-by-Step Installation Guide

Sun, 17 May 2026 00:00:00 GMT

Welcome to the Zahit installation guide! Zahit is a raw, flat minimalist Astro v6 theme built on the philosophy that simplicity is depth. In this guide, we will walk you through the process of cloning the repository, installing the required dependencies, and starting the local development environment.

Prerequisites

Before we begin, make sure you have the following prerequisites installed on your system:

Node.js: Version 22.12.0 or higher is recommended. You can verify your version by running:
```
node --version
```
Git: Essential for cloning the repository and managing your source code versions.

Step 1: Clone the Repository

To install Zahit, you first need to clone the repository to your local directory. Open your terminal and run the following command:

git clone https://github.com/kuscadev/Zahit.git

Once the cloning process is complete, navigate into the project directory:

cd Zahit

Step 2: Install Project Dependencies

Zahit uses lightweight dependencies like @astrojs/mdx for content rendering and astro-icon for flat SVG styling. Run the following command in the root folder of the project to install all required packages:

npm install

This command will read the package.json file and create the local node_modules folder.

Step 3: Run the Development Server

Now that the installation is complete, you can start Astro’s rapid local development server:

npm run dev

Your terminal will display the active local URL, which is usually:

  ┃ Local    http://localhost:4321/

Open your favorite web browser and navigate to http://localhost:4321/ to view your live, interactive minimalist environment! Any changes you make to the source code will update automatically in real-time.

Next Steps

Now that your Zahit theme is successfully installed and running, you are ready to configure your profile details and write your first bilingual blog post.

Proceed to our next guide: Zahit Theme: How to Write and Organize Content to learn more about the structure of content collections and dynamic i18n routing.

Markdown Guide: Basic Syntax

Sat, 10 May 2025 00:00:00 GMT

Markdown is a lightweight markup language that lets you create formatted documents using plain text. It's the most natural way to produce content on Astro-based sites like Zahit. ## Headings ``` # H1 Heading ## H2 Heading ### H3 Heading ``` ## Text Formatting Use double asterisks for **bold text**, single asterisks for *italics*, and double tildes for ~~strikethrough~~. > Use `>` for blockquotes. This is a great way to highlight important sentences you want readers to notice. ## Lists Unordered list: - First item - Second item - Nested item - Third item Ordered list: 1. Do this first 2. Then this 3. Finally this ## Links and Images Add links in the format [Astro official site](https://astro.build). ## Code Blocks Use backticks for inline `code`. ```javascript function zahit() { return 'Simplicity is depth, not lack.'; } ``` ## Tables | Syntax | Description | |--------|-------------| | `**bold**` | Bold text | | `*italic*` | Italic text | | `[text](url)` | Link | Markdown takes minutes to learn and a lifetime to appreciate.

Zahit | Simplicity is Depth, Not Lack

Zahit Theme: Advanced Customization & Colors

👤 1. Editing Core Metadata: src/config.ts

SITE_CONFIG

AUTHOR

SOCIALS

🎨 2. Customizing Themes and Color Schemes

Creating a Forest Green Theme:

🗣️ 3. Modifying Dict Translations: src/i18n/ui.ts

Conclusion

Zahit Theme: How to Write and Organize Content

📂 Content Directory Structure

📋 The Post Frontmatter Schema

Explaining the Fields:

🌐 The Smart i18n Switching Mechanism

Best Practice Example:

Next Steps

Zahit Theme: Step-by-Step Installation Guide

Prerequisites

Step 1: Clone the Repository

Step 2: Install Project Dependencies

Step 3: Run the Development Server

Next Steps

Markdown Guide: Basic Syntax

👤 1. Editing Core Metadata: `src/config.ts`

🗣️ 3. Modifying Dict Translations: `src/i18n/ui.ts`