تطور الموقع الشخصي: من بطاقة React Discord إلى معمارية الجزر في Astro 5

نادرًا ما يظل الموقع الشخصي للمطور ثابتًا؛ فهو يتطور باستمرار مع نضج الخبرة الهندسية وتغير حزمة الأدوات ومتطلبات الأداء. وتحدد المعمارية الأساسية الخصائص الحيوية للموقع — سرعة أول عرض للمحتوى (FCP)، دقة الفهرسة في محركات البحث (SEO)، موثوقية بطاقات المعاينة (OpenGraph)، وسلاسة إدارة المقالات التقنية على المدى الطويل.

يستعرض هذا المقال رحلة التطوير عبر ثلاثة أجيال متتالية: من صفحة HTML+CSS البسيطة، مرورًا بالبطاقة التفاعلية React-Discord-Business-Card، وصولاً إلى منصة OneHeka Portfolio الحديثة المعتمدة على Astro 5 ومعمارية الجزر (Islands Architecture).

---

1. التسلسل الزمني للأجيال: من الصفحات الثابتة إلى الجزر التفاعلية

تم تصميم كل جيل لمعالجة متطلبات محددة مع إبراز قيود حزمة التقنيات المستخدمة:

[ الجيل الأول: صفحات HTML + CSS الثابتة ]
  صفحة هبوط بسيطة، وظائف محدودة، بدون أي تفاعل
       │
       ▼ (الحاجة إلى هوية بصرية تفاعلية مستوحاة من Discord)
[ الجيل الثاني: React Discord Business Card (SPA) ]
  React و Vite/CRA و CSS/Framer Motion لمحاكاة واجهة ملف Discord
       │
       ▼ (التوسع: مدونة، دراسات هندسية، تعدد اللغات، تحسين FCP و SEO)
[ الجيل الثالث: OneHeka Portfolio (Astro 5 + React 19 Islands) ]
  Astro 5 و Tailwind CSS v4 وجزر React 19 ومجموعات المحتوى
  مع دعم 4 لغات (RTL/LTR) وأداء 100/100 في Lighthouse

مقارنة معمارية للأجيال الثلاثة

المعيار	الجيل الأول: HTML+CSS	الجيل الثاني: بطاقة React Discord	الجيل الثالث: OneHeka Portfolio
حزمة التقنيات	HTML5, CSS3 نقي	React, Vite, Tailwind, Framer Motion	Astro 5, React 19, Tailwind v4, Zod
نمط العرض	ملفات ثابتة	تطبيق أحادي الصفحة (CSR)	توليد صفحات ثابتة (SSG) + جزر تفاعلية
حجم الصفحة الأساسي	~5–10 كيلوبايت	~250–400 كيلوبايت (حزمة JS)	~15–30 كيلوبايت (HTML + CSS نقي)
سرعة أول رسم (FCP)	0.2 ثانية	1.4–2.4 ثانية	0.1–0.3 ثانية
التفاعلية	منعدمة	كاملة (لكنها مكلفة في الأداء)	موجهة ودقيقة (client:*)
SEO و OpenGraph	ثابت	ضعيف (حاوية <div id="root"> فارغة)	توليد خادمي ثابت لـ 4 لغات
قابلية التوسع	كتابة يدوية	تعقيد في إدارة الحالة والمسارات	مجموعات محتوى صارمة وآمنة بالأنماط

---

2. الجيل الثاني: React Discord Business Card وقيود SPA

ركز الجيل الثاني على محاكاة هوية ملف Discord الشخصي: شريط الرأس المتحرك، الشارات، حالة النشاط الفورية، النوافذ التفاعلية، وروابط التواصل.

القيود المعمارية لتطبيقات React SPA

على الرغم من جاذبية الواجهة، واجه المشروع صعوبات بنيوية عند محاولة تحويله إلى منصة متكاملة تضم المقالات والدراسات الهندسية:

1. تأخير العرض الأول والتفاعل (FCP & TTI): يتلقى المتصفح صفحة HTML فارغة (<div id="root"></div>) ويضطر لتنزيل وتحليل حزمة React بأكملها قبل عرض أول حرف للمستخدم.
2. غياب الفهرسة ومعاينات OpenGraph الموثوقة: غالبًا ما تلتقط محركات البحث وتطبيقات المراسلة (Telegram و Discord و Twitter) صفحات فارغة بسبب انتهاء مهلة تنفيذ جافاسكريبت.
3. تضخم الشيفرة البرمجية: إضافة التوجيه المتعدد عبر react-router-dom وقواميس الترجمة الثقيلة والاستيراد الكسول (React.lazy) زاد من تعقيد المشروع بدون فائدة حقيقية للمحتوى النصي.

---

3. نموذج Astro 5: معمارية الجزر وانعدام جافاسكريبت الافتراضي

في الجيل الثالث — OneHeka Portfolio — تم الانتقال بالكامل إلى Astro 5 بالاعتماد على Astro Islands:

• يتم تحويل جميع الصفحات (المقالات، المشاريع، الترويسة والتذييل) افتراضيًا إلى HTML و CSS ثابت بدون أي كود جافاسكريبت في جانب العميل.
• يتم استدعاء مكونات React كـ «جزر» مستقلة وتفاعلية بدقة:

---
import { TableOfContents } from "@/components/molecules/table-of-contents";
import { ShareButton } from "@/components/molecules/share-button";
import { CommandMenu } from "@/components/molecules/command-menu";
import MainLayout from "@/layouts/main.astro";

const { headings, lang, title, description } = Astro.props;
---

<MainLayout title={title} description={description} lang={lang}>
    <!-- محتوى ثابت: HTML دلالي، 0 كيلوبايت جافاسكريبت -->
    <article class='prose min-w-0 max-w-full'>
        <slot />
    </article>

    <!-- جزر React التفاعلية تُفعل حسب الحاجة -->
    <TableOfContents headings={headings} lang={lang} client:load />
    <ShareButton lang={lang} client:load />
    <CommandMenu lang={lang} client:idle />
</MainLayout>

استراتيجيات تفعيل الجزر:

• client:load — التفعيل فور تحميل الصفحة (شريط التمرير المخصص CustomScrollbar، جدول المحتويات TableOfContents).
• client:idle — التفعيل عند تفرغ خيط المعالجة الرئيسي في المتصفح (لوحة الأوامر CommandMenu، زر المشاركة ShareButton).
• client:visible — تحميل السكربت فقط عندما يدخل العنصر في مجال رؤية المستخدم (Viewport).

---

4. المحتوى الآمن بالأنماط: Content Collections و Zod

تتم إدارة الدراسات الهندسية والمقالات عبر ميزة Content Collections (src/content.config.ts) مع التحقق الصارم من صحة البيانات أثناء البناء:

import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const blog = defineCollection({
    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
    schema: z.object({
        title: z.string(),
        description: z.string(),
        pubDate: z.coerce.date(),
        updatedDate: z.coerce.date().optional(),
        tags: z.array(z.string()).optional().default([]),
        lang: z.enum(['ru', 'en', 'zh', 'ae']).default('ru')
    })
})

export const collections = { blog }

أي خطأ في البيانات الوصفية لملف Markdown (حقل ناقص، تاريخ غير صحيح، أو لغة غير معتمدة) يوقف عملية البناء فورًا مع تحديد السطر المعني، مما يمنع نشر صفحات معطوبة.

---

5. التدويل وتعدد اللغات (i18n): 4 لغات ودعم RTL

يوفر الموقع دعمًا أصيلاً لأربع لغات:

• 🇷🇺 الروسية (ru)
• 🇬🇧 الإنجليزية (en)
• 🇨🇳 الصينية (zh)
• 🇦🇪 العربية (ae) — مع دعم كامل لاتجاه الكتابة من اليمين إلى اليسار (dir="rtl").

بدلاً من تحميل قواميس ضخمة في الذاكرة، يقوم Astro بتوليد صفحات ثابتة لكل لغة مع وسوم hreflang الصحيحة والروابط المعيارية.

---

6. نظام التصميم الحديث: Tailwind v4 و Geist Font و React Aria

بُنيت الواجهة باستخدام أحدث الأدوات:

• Tailwind CSS v4 المعتمد على محرك Vite للتحديث الفوري أثناء التطوير.
• Geist Variable Font من Vercel لقراءة ممتازة للخطوط والشيفرات البرمجية.
• React Aria Components لضمان إمكانية الوصول الكاملة (a11y) وإدارة التركيز ومطابقة قارئات الشاشة.
• لوحة الأوامر Cmd+K المبنية بـ cmdk مع التعرف التلقائي على نظام التشغيل وتأثيرات الانتقال السلسة.

---

7. الخلاصات الهندسية

1. تطبيقات SPA ليست الخيار الأمثل للمحتوى: استخدام React أحادي الصفحة للمدونات يرفع حجم الحزمة بدون داعٍ ويؤثر سلبًا على سرعة التحميل و SEO.
2. معمارية الجزر هي التوازن المثالي: يجمع Astro 5 بين تجربة تطوير React القوية وأداء صفحات HTML الثابتة الفائقة.
3. أمان الأنماط الشامل: يضمن التحقق عبر Zod و TypeScript خلو بنية المحتوى ومكونات الواجهة من الأخطاء قبل النشر.