Zahit Theme

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 Teması: Gelişmiş Özelleştirme ve Stil Ayarları

Sat, 23 May 2026 00:00:00 GMT

Zahit gelişmiş özelleştirme rehberine hoş geldiniz! Zahit, saf minimalist estetik ilkelerine uygun tasarlandığı için kod yapısı oldukça sade, şeffaf ve düzenlemesi son derece kolaydır. Bu rehberde, yazar profil kartınızı güncellemeyi, global tasarım sistemindeki temel CSS parametrelerini ayarlamayı ve çeviri sözlüklerini değiştirmeyi öğreneceğiz.

👤 1. Temel Site Ayarlarını Düzenleme: `src/config.ts`

Adınızı, mevcut rolünüzü, kısa biyografinizi ve sosyal medya adreslerinizi değiştirmek için src/config.ts dosyasını açmanız yeterlidir. Bu dosya dışa aktarılan üç ana yapılandırma nesnesi barındırır:

SITE_CONFIG

Web sitenizin global parametrelerini belirler:

title: Tarayıcı sekmelerinde ve sayfa başlıklarında görüntülenir.
description: Varsayılan SEO açıklaması (meta description) olarak kullanılır.
url: Blogunuzun yayında olduğu alan adı adresi.

AUTHOR

Sol taraftaki profil kartınızın verilerini barındırır:

name: Tam adınız.
role: Türkçe (tr) ve İngilizce (en) dillerine göre rolleriniz.
bio: Profil fotoğrafınızın altında yer alacak kısa biyografi yazınız.
avatar: Profil fotoğrafınızın klasör yolu (Örn: /src/assets altına eklenen /profile.jpg).

SOCIALS

Sidebar veya mobil footer alanında ikon şeklinde gösterilecek sosyal medya hesaplarınızın listesidir:

export const SOCIALS = [
  {
    label: 'GitHub',
    href: 'https://github.com/johndoe',
    icon: 'mdi:github',
  },
  // Benzer şablonu kopyalayarak yeni sosyal ağlar ekleyebilirsiniz
];

Not: İkonlar için Iconify MDI kodlarını doğrudan kullanabilirsiniz.

🎨 2. Temayı ve Renkleri Özelleştirme

Zahit’in tüm tasarımı src/styles/global.css içerisindeki CSS değişkenleri ile yönetilir. :root seçicisi altındaki değerleri değiştirerek sitenizin tüm renklerini ve yazı tiplerini anında değiştirebilirsiniz:

:root {
  /* Renkler */
  --bg-color: #00022b;     /* Derin uzay mavisi arka plan */
  --dark: #010e54;         /* Kartlar ve koyu panel alanları */
  --accent: #0855b1;       /* Birincil vurgu rengi (Bağlantılar ve sınırlar) */
  --light: #4fa5d8;        /* Hover durumları ve parlak detay renkleri */
  --text-color: #daeaff;   /* Yüksek okunabilirlik sağlayan buz mavisi metin tonu */

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

  /* Genişlikler */
  --site-width: 80%;       /* Global genişlik oranı */
  --content-padding: 2rem;
}

Örnek: Orman Yeşili Tema Oluşturma

Temayı mavi tonlardan koyu yeşil bir orman temasına dönüştürmek için renk kodlarını şu şekilde güncelleyebilirsiniz:

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

🗣️ 3. Çeviri Kelimelerini Güncelleme: `src/i18n/ui.ts`

Sitedeki tüm navigasyon menüleri, “Yayınlanma Tarihi” veya “İçindekiler” gibi statik kelimeler src/i18n/ui.ts dosyasında saklanır.

Bu kelimeleri değiştirmek veya yeni bir kelime eklemek için ui nesnesini düzenlemeniz yeterlidir:

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

Değişiklikleri kaydettiğinizde sitenizdeki tüm statik butonlar ve navigasyon metinleri güncellenecektir.

Sonuç

Zahit, dikkatinizi dağıtmadan sadece yazmaya odaklanabilmeniz için sade tasarlandı. CSS değişkenleri, config.ts ayrımı ve statik çeviri sözlüğü sayesinde portföyünüzü dakikalar içinde tamamen kendinize ait bir alana dönüştürebilirsiniz.

Keyifli kodlamalar ve yazımlar dileriz!

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 Teması: İçerik Kullanımı ve Çoklu Dil Yapısı

Thu, 21 May 2026 00:00:00 GMT

Zahit temasının en güçlü özelliklerinden biri, iki dilli (Türkçe ve İngilizce) içerik yönetimine sunduğu yerleşik ve akıcı destektir. Bu rehberde, yazılarınızın klasör yapısını nasıl düzenleyeceğinizi, gönderi üst bilgilerini (frontmatter) nasıl biçimlendireceğinizi ve akıllı dil geçiş sistemini nasıl verimli kullanacağınızı öğreneceğiz.

📂 İçerik Klasör Yapısı

Tüm blog yazıları src/content/blog/ klasörü altında tutulur. Bu dizin içinde, yazılar dillere göre iki alt klasöre ayrılmıştır:

src/content/blog/tr/ — Türkçe yazılarınızın bulunacağı klasör.
src/content/blog/en/ — İngilizce yazılarınızın bulunacağı klasör.

Astro, src/content.config.ts dosyasında tanımlanan koleksiyon yükleyicisi sayesinde bu klasörler içindeki .md ve .mdx uzantılı tüm dosyaları otomatik olarak tarar ve derler.

📋 Gönderi Şablonu ve Parametreler (Frontmatter)

Her markdown yazısının en başında, üç tire --- işaretleri arasına yerleştirilmiş bir üst bilgi (meta veri) bloğu yer almalıdır. Zahit şemasının zorunlu kıldığı alanlar şunlardır:

---
title: 'Yazınızın Başlığı'
description: 'Yazınızın kısa bir özeti veya açıklaması.'
pubDate: '2026-05-17'
tags: ['etiket1', 'etiket2']
translationKey: 'benzersiz-yazi-anahtari'
---

Alanların Açıklamaları:

title & description: Yazının başında gösterilen ve arama motorları (SEO) için HTML <head> etiketlerine dinamik olarak aktarılan zorunlu alanlardır.
pubDate: Yayınlanma tarihi. Zahit bu tarihi yazıları kronolojik sıralamak ve arşiv sayfasında yıllara göre otomatik gruplamak için kullanır.
tags: Yazı etiketleri. Bu yazıların rehber arşivinde listelenmesi için etiketler arasına zahit-guide eklemeyi unutmayın.
translationKey: Bir yazının Türkçe ve İngilizce karşılıklarını birbirine bağlayan tamamen benzersiz ortak bir metin anahtarıdır.

🌐 Akıllı Dil Geçiş Mekanizması Nasıl Çalışır?

Zahit, sayfa üst bilgi alanındaki (Header.astro) dil yönlendirmesinde akıllı bir mantık barındırır. Bir ziyaretçi Türkçe bir yazı okurken sağ üstteki “EN” butonuna tıkladığında, sistem onu İngilizce ana sayfaya fırlatmaz.

Bunun yerine, tüm içerik havuzunu tarayarak o sırada okunan yazı ile tamamen aynı translationKey değerine sahip İngilizce yazıyı arar:

Eğer eşleşen bir yazı bulunursa: Ziyaretçiyi doğrudan o yazının İngilizce çeviri sayfasına yönlendirir.
Eğer eşleşen bir yazı bulunamazsa: Ziyaretçiyi güvenli bir şekilde İngilizce arşiv sayfasına (/en/archive/) yönlendirir.

Uygulamalı Örnek:

Örneğin, minimal tasarım üzerine iki dilde bir yazı hazırlamak istiyorsunuz:

src/content/blog/tr/sadelik.md dosyasını oluşturun ve içine translationKey: 'simplicity-post' ekleyin.
src/content/blog/en/simplicity.md dosyasını oluşturun ve içine translationKey: 'simplicity-post' ekleyin.

Bu basit ayar sayesinde, okuyucularınız diledikleri anda hiçbir içerik kaybı veya kopukluk yaşamadan Türkçe ve İngilizce çeviriler arasında geçiş yapabilirler.

Sonraki Adımlar

Artık yazılarınızı nasıl düzenleyeceğinizi ve yayınlayacağınızı biliyorsunuz. Bir sonraki aşamada tasarım şablonlarını, CSS renk tonlarını ve sosyal medya ağınızı nasıl güncelleyeceğinizi öğrenebilirsiniz.

Son rehberimize geçiş yapın: Zahit Teması: Gelişmiş Özelleştirme ve Stil Ayarları

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.

Zahit Teması: Adım Adım Kurulum Rehberi

Sun, 17 May 2026 00:00:00 GMT

Zahit kurulum rehberine hoş geldiniz! Zahit, sadeliğin eksiklik değil derinlik olduğu felsefesiyle üretilmiş, ham ve düz minimalist bir Astro v6 temasıdır. Bu rehberde, depoyu klonlamaktan yerel geliştirme sunucusunu ayağa kaldırmaya kadar tüm kurulum adımlarını öğreneceğiz.

Gereksinimler

Kuruluma başlamadan önce sisteminizde aşağıdaki araçların kurulu olduğundan emin olun:

Node.js: 22.12.0 veya üzeri bir sürüm tavsiye edilir. Sürümünüzü kontrol etmek için terminalde şu komutu çalıştırabilirsiniz:
```
node --version
```
Git: Proje kodlarını indirmek ve versiyonlamak için gereklidir.

Adım 1: Projeyi Klonlayın

Zahit temasını kullanmak için öncelikle GitHub deposunu bilgisayarınıza indirmelisiniz. Terminali açın ve aşağıdaki komutu girin:

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

Klonlama işlemi tamamlandıktan sonra proje klasörünün içerisine geçiş yapın:

cd Zahit

Adım 2: Bağımlılıkları Yükleyin

Zahit, yazıların işlenmesi için @astrojs/mdx ve ikonların yönetimi için astro-icon gibi hafif kütüphaneler kullanır. Projenin ana dizininde aşağıdaki komutu çalıştırarak gerekli tüm paketleri yükleyin:

npm install

Bu komut package.json dosyasını okuyacak ve yerel node_modules klasörünü oluşturacaktır.

Adım 3: Geliştirme Sunucusunu Başlatın

Paket kurulumları tamamlandığına göre Astro’nun hızlı ve dinamik yerel sunucusunu başlatmaya hazırsınız:

npm run dev

Terminal ekranınızda projenin çalıştığı yerel adres görüntülenecektir (genellikle):

  ┃ Local    http://localhost:4321/

Tarayıcınızı açıp http://localhost:4321/ adresine giderek minimalist ve şık sitenizi anında görüntüleyebilirsiniz! Kod üzerinde yapacağınız her değişiklik tarayıcıda anlık olarak yenilenecektir.

Sonraki Adımlar

Tebrikler, Zahit temanız başarıyla kuruldu ve çalışıyor! Artık yazar biyografinizi özelleştirebilir ve ilk iki dilli blog yazınızı kaleme alabilirsiniz.

Yazı oluşturma ve çoklu dil sistemini öğrenmek için bir sonraki rehberimize göz atın: Zahit Teması: İçerik Kullanımı ve Çoklu Dil Yapısı

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.

Markdown Rehberi: Temel Sözdizimi

Sat, 10 May 2025 00:00:00 GMT

Markdown, düz metin kullanarak biçimlendirilmiş belgeler oluşturmanıza olanak tanıyan hafif bir işaret dilidir. Zahit gibi Astro tabanlı sitelerde içerik üretmenin en doğal yolu budur. ## Başlıklar ``` # H1 Başlık ## H2 Başlık ### H3 Başlık ``` ## Metin Biçimlendirme **Kalın metin** için çift yıldız, *italik* için tek yıldız kullanılır. ~~Üstü çizili~~ metin için ise çift tilde. > Alıntı blokları için `>` karakterini kullanabilirsiniz. Okuyucunun dikkatini çekmek istediğiniz önemli cümleleri bu şekilde vurgulayabilirsiniz. ## Listeler Sırasız liste: - Birinci madde - İkinci madde - İç içe madde - Üçüncü madde Sıralı liste: 1. Önce bunu yap 2. Sonra şunu 3. En son bunu ## Bağlantılar ve Görseller [Astro resmi sitesi](https://astro.build) formatında bağlantı ekleyebilirsiniz. ## Kod Blokları Satır içi `kod` için backtick kullanılır. ```javascript function zahit() { return 'Sadelik, eksiklik değil derinliktir.'; } ``` ## Tablolar | Sözdizimi | Açıklama | |-----------|----------| | `**kalın**` | Kalın metin | | `*italik*` | İtalik metin | | `[metin](url)` | Bağlantı | Markdown öğrenmek birkaç dakika alır; ustalaşmak ise sizi özgür kılar.

Zahit Theme

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 Teması: Gelişmiş Özelleştirme ve Stil Ayarları

👤 1. Temel Site Ayarlarını Düzenleme: src/config.ts

SITE_CONFIG

AUTHOR

SOCIALS

🎨 2. Temayı ve Renkleri Özelleştirme

Örnek: Orman Yeşili Tema Oluşturma

🗣️ 3. Çeviri Kelimelerini Güncelleme: src/i18n/ui.ts

Sonuç

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 Teması: İçerik Kullanımı ve Çoklu Dil Yapısı

📂 İçerik Klasör Yapısı

📋 Gönderi Şablonu ve Parametreler (Frontmatter)

Alanların Açıklamaları:

🌐 Akıllı Dil Geçiş Mekanizması Nasıl Çalışır?

Uygulamalı Örnek:

Sonraki Adımlar

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

Zahit Teması: Adım Adım Kurulum Rehberi

Gereksinimler

Adım 1: Projeyi Klonlayın

Adım 2: Bağımlılıkları Yükleyin

Adım 3: Geliştirme Sunucusunu Başlatın

Sonraki Adımlar

Markdown Guide: Basic Syntax

Markdown Rehberi: Temel Sözdizimi

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

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

👤 1. Temel Site Ayarlarını Düzenleme: `src/config.ts`

🗣️ 3. Çeviri Kelimelerini Güncelleme: `src/i18n/ui.ts`