Zahit

Zahit is a raw, flat minimalist Astro v6 portfolio and blog theme that combines a content-first reading experience with built-in Turkish/English internationalization. Developed by kuscadev and released under the MIT License, the theme is a static-site template that takes Markdown and MDX posts with YAML frontmatter as input and produces a dark, high-contrast website with a deep space blue background (#00022b), ice-blue accents (#4fa5d8), and tinted text (#daeaff) designed for comfortable reading.

What is Zahit?

Zahit is an open-source portfolio and blog theme built on Astro v6.3+ with MDX integration, available as a GitHub repository with a live demo at astro-zahit.netlify.app. It takes localized Markdown or MDX content from src/content/blog/ plus a site configuration (src/config.ts) and generates a fully static website with Turkish at the root / and English under /en/. The template includes a [lang] dynamic route for localized pages, a dynamic [...slug].astro blog post resolver, an archive page, and per-language "About" pages.

Key Features

• Bilingual routing with smart post redirects — Turkish is the default locale at /, English is served under /en/, and the language switcher maps posts via a shared translationKey frontmatter value; if a translation is missing, it falls back to the target language's archive page.
• Year-grouped archive page — posts in archive.astro are grouped by publication year at compile time, with links that slide slightly right on hover.
• ScrollSpy table of contents — the BlogPost.astro layout parses h2 and h3 headings from MDX and applies an .active class to the current section in a sticky ToC sidebar.
• One-click code copy buttons — a hover overlay on pre blocks copies code to the clipboard and shows a temporary animated checkmark for 2 seconds.
• Responsive profile sidebar — sticky author and social links on desktop, with the avatar automatically hidden below 860px screen widths via CSS media queries.
• Locale-aware 404 page — detects the language from the URL path and returns localized error messages plus contextual home/archive buttons.
• Pure CSS design system — all colors, typography, and widths are defined as CSS variables in global.css, with no utility framework.

Who is it for?

• Developers and creative technologists who want a portfolio and blog with minimal client-side JavaScript and a clean, flat aesthetic.
• Bilingual bloggers who write in Turkish and English and want translated posts linked automatically through translationKey.
• System administrators and technical writers who need good code display (copy buttons, ToC) and high-contrast dark reading.
• Theme customizers who prefer editing CSS variables in a single global.css file over learning a utility class framework.

What can you do with Zahit?

• Publish a bilingual technical blog: write MDX files in src/content/blog/tr/ and /en/, give them matching translationKey values, and readers can switch languages while keeping their place.
• Build a minimalist portfolio: customize src/config.ts with your name, bio, role text in both languages, and social links using MDI icons, and the sticky profile sidebar surfaces them on desktop.
• Create a distraction-free reading experience: the dark high-contrast palette, year-grouped archive, and ScrollSpy ToC keep long-form articles navigable without heavy widgets.

How does Zahit work?

Zahit runs on a standard Astro workflow: clone the repo, install dependencies with npm install, then use npm run dev for local preview at localhost:4321. Production builds are generated with npm run build into ./dist/, deployable to Netlify, Vercel, or GitHub Pages. Configuration is done by editing src/config.ts for author data and socials, src/i18n/ui.ts for menu/UI labels, and src/styles/global.css for theme colors.

Pros and cons

• Pros: MIT-licensed and free; bilingual i18n works out of the box; styling is centralized in CSS variables; built-in code copy, ToC, and archive features support long-form writing.
• Cons: Requires Node.js 22.12.0 or newer; only Turkish and English locales are pre-configured, so adding another language means editing src/i18n/ui.ts and the language schema.

FAQ

Is Zahit free?

Yes. Zahit is open-source software released under the MIT License, so you can use, modify, and deploy it freely, including for commercial projects.

What Node.js version does Zahit require?

The repository badge specifies Node.js >= 22.12.0. You'll need this version (or newer) to run npm install and the Astro build scripts.

How do I create translated posts?

Place the Turkish version in src/content/blog/tr/ and the English version in src/content/blog/en/, then give both frontmatter sections the same translationKey string. The language switcher will link them; if only one exists, it falls back to the other language's archive page.

Can I change the colors?

Yes. The theme's entire palette is defined as CSS variables in src/styles/global.css (for example --bg-color, --accent, and --light). Update those values and the whole site, including hover states and borders, reflects the change.

Where can I deploy Zahit?

The production build outputs a static dist/ directory that works on any static host. The README explicitly mentions Netlify, Vercel, and GitHub Pages as deployment targets.