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

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.

CMS, SEO & Editor Features

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

Advanced SEO Management: Dynamic meta_description fields (150-160 characters) and fully managed Image Alt texts (with auto-fallback to titles/filenames) ensure high search engine visibility.
Tags & Categorization: Integrated react-select for modern category selection and creatable dynamic tags.
Article Metadata UI: A beautifully designed metadata component displaying the author's avatar, name, and publication date right 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:
- Specific block-level toggling for Headings (H1: 18px, H2: 16px, H3: 14px) and Paragraphs (14px).
- A custom feature to wrap English text blocks in LTR styling (<span dir="ltr" class="english-text"> at 12px) for perfect bi-directional text alignment.
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.

3.0 KiB Raw Blame History