aramesh-backend/frontend

Aramesh Construction Group — Frontend

A modern React + Vite + TypeScript frontend application with a luxurious dark theme (Background: #27221c, Accent: #d5874c). All text content and assets are fetched dynamically from the backend API (GET /api/site).

Typography & Smart Bidi Text

The Pinar font is installed and served locally. The application no longer relies on any external servers or CDNs for font rendering, and the UI is fully localized for Persian (Farsi) users.

Smart Bidi Typography: To maintain perfect visual weight and baseline alignment when mixing English words within Persian text, we utilize a dynamic CSS calculation for Latin characters: calc(1em - 2px). This ensures that English text automatically scales down slightly to match the natural density and baseline of the Persian font, preventing any visual imbalance in mixed-language sentences.

Recent UI/UX Improvements

• Projects Map Restoration: Successfully re-integrated and mounted the interactive project overview map directly at the top of the Projects page to display all project markers.
• Project Details Update: Revamped and updated the presentation of project details for better clarity and structure.
• Stats Section Relocation: Moved the statistics (metrics) section higher up in the page layout for better visibility and impact.
• FAQ Section Redesign: Refactored the FAQ layout into a centered vertical stack with full RTL/LTR responsiveness, featuring an integrated centered header block (title, description, and accent line) and direction-aware (text-start) accordion content.
• Newsletter Section Polish: Updated the newsletter container to a clean solid bg-copper background while introducing high-contrast button styling (bg-ink default transitioning to white on hover) preserving site-wide kinetic animation logic.
• Article Cards Spacing: Refined vertical layout spacing and responsive gaps between title, excerpt, and footer blocks without impacting typography scales.
• Tiptap Editor Fixes:
  • Resolved the initialization bug where the editor body remained empty during edit mode.
  • Fixed Tiptap block boundaries so formatting a new line (e.g., changing it to H2) no longer alters the formatting of the previous line.
• Dynamic TOC & Layout:
  • The Table of Contents (TOC) is now strictly position: sticky and extracts all H2/H3 tags flawlessly.
  • The entire article layout (including Author, Read Time, and TOC) dynamically flips RTL/LTR based on the article's primary language.

CMS, SEO & Editor Features

The project includes a robust, custom-built Digital Twin (Admin Panel) with advanced content management capabilities, emphasizing a premium UI/UX:

• Advanced SEO & Featured Media: Dynamic meta_description fields (150-160 characters). The Featured Image component features a compact layout with smart data-binding: the Alt text auto-fills based on the title (e.g., [Title] - تصویر شاخص) as a smart fallback to ensure SEO compliance, while still allowing full manual overrides for precise custom keyword targeting.
• Precise Category Management: A flawlessly integrated, single-select category dropdown using react-select (Creatable) and react-hook-form. It allows creating new categories on the fly while retaining them in the global list, seamlessly matching the strict single-category backend schema.
• Article Metadata & Reading Time: A beautifully designed metadata component displaying the author's avatar, name, publication date, and an auto-calculated dynamic reading time (displayed dynamically with Persian numerals, e.g., "۵ دقیقه مطالعه") directly below the H1 title.
• Dynamic Table of Contents (TOC): Auto-generates a clickable TOC from h2 and h3 tags within the article, using a custom Persian-supported slugify logic for anchor links.
• Custom Tiptap WYSIWYG Editor:
  • Fixed Toolbar & Typography: Dedicated LTR/RTL toggles (data-dir="ltr|rtl") mapped to a fixed toolbar that ensures layout stability.
  • Advanced Image & Caption Nodes: Built via ReactNodeViewRenderer, rendering HTML wrapped in <figure><figcaption>. Features strictly isolated UI deletion controls.
  • Animated Link Modal: A premium, auto-opening modal with smooth fade/scale transition effects. Includes seamless checkbox toggles for "Open in new tab" (target="_blank" rel="noopener noreferrer") and SEO link attributes (nofollow/dofollow).
• Full Jalali (Shamsi) Calendar Integration:
  • Admin panel utilizes react-multi-date-picker for a visual Persian date selection experience.
  • Frontend and text displays rely on native Intl.DateTimeFormat to render dates and numerals perfectly in Persian.

Development Setup

npm install
npm run dev

In development mode, Vite proxies /api and /media requests to Traefik (port 5173). Therefore, the Docker stack must be running. The backend API URL is read from the VITE_API_URL environment variable in src/config.ts; an empty default implies same-origin requests.

Build & Production

The build process runs on the host machine. The Docker container only serves the generated static files in the dist/ directory using Caddy:

npm run build

Note: The backend reads the dist/ directory (mounted at /srv/frontend in Docker Compose) to inject SEO metadata into the /blog and /projects pages. After making any frontend changes, running npm run build and restarting the backend is sufficient.

Key Modules & Architecture

• src/api.tsx — Handles site data loading and draft article merging for the admin view.
• src/admin/ — Live editing layer (Digital Twin): includes the admin toolbar, entity drawers, and the article editor.
• src/seo.ts — Manages page-level SEO tags (Title, Description, Open Graph, Canonical, JSON-LD).
• src/data/site.ts — Shared TypeScript data models and interfaces.

حالا اگر بخواهید این تغییرات جدید را هم در پیام کامیت خود بیاورید، می‌توانید از این کامیت یک‌خطی استفاده کنید:

```bash
git commit -m "docs: update README with project details revamp, stats section relocation, FAQ layout, and map restoration"