Zahi (زاهي) is a modern, fast Hugo theme designed for Arabic content with RTL support. It's built as a digital garden / personal knowledge base with Obsidian-like features.

• RTL & Arabic Optimized - Built from the ground up for Arabic content with proper RTL layout
• Dark/Light Mode - Toggle between themes with smooth transitions, no flash on page load
• Responsive Design - Looks great on all devices
• Fast Performance - Minimal JavaScript, optimized assets

• Wiki-style Links - Use [[Page Title]] syntax to link between notes (green = valid, red = broken)
• Knowledge Graph - Interactive D3.js force-directed graph showing connections between posts and tags
• Enhanced Graph Page - Full-page graph with filtering (pages/tags/connected), search, zoom controls, and fullscreen mode
• Backlinks - Automatically shows which pages link to the current page
• Series Support - Group related posts into ordered collections with progress tracking

• Project Showcase - Beautiful grid layout for displaying your projects
• Project Types - Support for personal, open-source, client, and contribution projects with color-coded badges
• Project Status - Track project status (completed, in-progress, maintained, archived)
• Featured Projects - Highlight your best work with featured badges
• Technology Tags - Display tech stack with stylish badges
• Filtering - Filter projects by type with smooth animations
• Responsive Cards - Project cards with thumbnails, descriptions, and action buttons

• Table of Contents - Collapsible TOC for easy navigation
• Reading Time - Auto-calculated based on word count
• Search - Fast client-side search with Fuse.js (Ctrl+K / Cmd+K)
• Tags - Organize content with tags
• Syntax Highlighting - Beautiful code blocks with Dracula theme (Chroma-based)
• Copy Code Button - One-click code copying
• Disqus Comments - Optional comment integration

• Open Graph - Full social media preview support
• Twitter Cards - Optimized Twitter sharing
• JSON-LD - Structured data for articles and breadcrumbs
• Sitemap & RSS - Auto-generated feeds
• Canonical URLs - Proper URL handling

Live demo: https://zahi.netlify.app/

cd your-hugo-site
git submodule add https://github.com/mohamedelhefni/zahi.git themes/zahi

Add to your hugo.toml:

[module]
  [[module.imports]]
    path = "github.com/mohamedelhefni/zahi"

Then run:

hugo mod get -u

Download the theme and extract it to themes/zahi in your Hugo site.

Add to your hugo.toml:

theme = "zahi"
languageCode = "ar"
defaultContentLanguage = "ar"

[taxonomies]
tag = "tags"
series = "series"

[outputs]
home = ["HTML", "RSS", "JSON"]

[params]
description = "وصف موقعك"
author = "اسمك"

[params.social]
twitter = "username"
github = "username"
linkedin = "username"

[menu]
[[menu.main]]
name = "الرئيسية"
url = "/"
weight = 1

[[menu.main]]
name = "المقالات"
url = "/posts/"
weight = 2

[[menu.main]]
name = "المشاريع"
url = "/projects/"
weight = 3

[[menu.main]]
name = "الوسوم"
url = "/tags/"
weight = 4

[[menu.main]]
name = "السلاسل"
url = "/series/"
weight = 5

[[menu.main]]
name = "الشبكة"
url = "/graph/"
weight = 6

---
title: "عنوان المقالة"
date: 2024-01-15
tags: ["وسم1", "وسم2"]
toc: true
---

محتوى المقالة...

Link to other posts using wiki-style syntax:

اقرأ المزيد في [[عنوان صفحة أخرى]]

Create a series by adding to frontmatter:

---
title: "الجزء الأول: المقدمة"
series: "اسم السلسلة"
seriesOrder: 1
seriesDescription: "وصف السلسلة"
---

Pin posts to the homepage:

---
title: "مقالة مثبتة"
pinned: true
---

Create projects in content/projects/:

---
title: "اسم المشروع"
date: 2024-01-15
description: "وصف قصير للمشروع"
thumbnail: "/images/project-thumb.png"
type: "personal"  # personal, open-source, client, contribution
status: "completed"  # completed, in-progress, maintained, archived
featured: true
technologies: ["Hugo", "Tailwind CSS", "JavaScript"]
demoUrl: "https://demo.example.com"
repoUrl: "https://github.com/user/repo"
websiteUrl: "https://example.com"
---

وصف تفصيلي للمشروع...

The theme includes an interactive knowledge graph that visualizes connections between your content:

• Article Graph: Each post shows a mini-graph of related content
• Full Graph Page: Navigate to /graph/ for the complete knowledge map
• Features:
  • Filter by pages, tags, or connected nodes only
  • Search for specific content
  • Zoom and pan controls
  • Fullscreen mode
  • Click nodes to navigate
  • Hover to highlight connections

• Hugo Extended v0.112.0+
• Node.js (for Tailwind CSS)

# Clone the repository
git clone https://github.com/mohamedelhefni/zahi.git
cd zahi

# Install dependencies
pnpm install

# Start Hugo server
cd exampleSite && hugo server

# Watch Tailwind CSS (in another terminal)
npx tailwindcss -i ./static/css/style.css -o ./static/css/output.css --watch

npx tailwindcss -i ./static/css/style.css -o ./static/css/output.css --minify

zahi/
├── archetypes/
│   ├── default.md
│   └── projects.md        # Project template
├── exampleSite/           # Demo site
├── images/
│   ├── screenshot.png     # Theme screenshot
│   └── tn.png             # Thumbnail
├── layouts/
│   ├── _default/
│   ├── graph/             # Knowledge graph pages
│   ├── partials/
│   ├── projects/          # Projects section
│   ├── series/            # Series taxonomy
│   └── shortcodes/
├── static/
│   ├── css/
│   │   ├── style.css      # Source styles
│   │   ├── output.css     # Compiled Tailwind
│   │   └── syntax.css     # Code highlighting
│   └── js/
├── hugo.toml              # Hugo version requirements
├── theme.toml             # Theme metadata
└── README.md

• IBM Plex Sans Arabic - Font
• Tailwind CSS - Styling
• D3.js - Knowledge graph
• Fuse.js - Search

MIT License

Mohamed Elhefni

• GitHub: @mohamedelhefni