عدسة

نادرًا ما يجد عشاق التصوير الناطقون بالعربية مكانًا واحدًا يجمع الدروس العملية بتجربة قراءة عصرية وجذابة. معظم المحتوى بالإنجليزية، أو في صفحات مزدحمة يصعب تصفحها على الجوال.

كان على الموقع أن يبدو عربيًا أصيلًا — من اليمين إلى اليسار من أول سطر — وأن يجعل استكشاف 28 مقالًا سهلًا حسب الموضوع أو بالبحث.

حفظ المحتوى في مصدر JSON واحد منظّم — العنوان والملخص والتصنيف والكاتب والصورة والتاريخ ومدة القراءة والوسوم وعلامة «مميز» — لتُولَّد كل الصفحات من البيانات نفسها، ولا تحتاج المقالات الجديدة أي كود جديد.

تصميم التصفح حول ثلاثة أسئلة يطرحها القارئ: ما الذي يستحق القراءة أولًا (المميز)، وما الجديد (الأحدث)، وما الذي يخص اهتمامي (التصنيفات).

ثيم داكن بروح التصوير مع لون برتقالي دافئ يترك الصور تقود المشهد. تنتقل الصفحة الرئيسية من واجهة جريئة إلى المقالات المختارة، ثم الأحدث، ثم التصنيفات مع عدد مقالات كل منها، ثم الاشتراك في النشرة البريدية.

الواجهة كلها مرتبة من اليمين إلى اليسار بمقاييس خطوط عربية أولًا، وتبقى مريحة من أصغر جوال إلى أعرض شاشة.

React مع React Router: الرئيسية، والمدونة، وصفحة لكل مقال على /blog/:slug، ومن نحن، والخصوصية، والشروط، وصفحة 404 مخصصة. ومدير تمرير يعيد كل صفحة جديدة إلى الأعلى ويتبع روابط الأقسام داخل الصفحة بسلاسة.

صفحة كل مقال تحلّل محتواه إلى أقسام بعناوين، وتقترح مقالات ذات صلة من التصنيف نفسه.

كان الجزء الأصعب جعل فلتر التصنيف والبحث النصي وترقيم الصفحات تعمل معًا دون تعارض. كان على الفلترة أن تعيد القارئ إلى الصفحة الأولى، وعلى البحث الفارغ أن يعيد القائمة كاملة، وعلى القارئ القادم من رابط تصنيف في مكان آخر بالموقع أن يصل إلى قائمة مفلترة مسبقًا.

كان الحل اشتقاق القائمة المعروضة في مكان واحد: فلتر محفوظ بـ useMemo على التصنيف والبحث، ثم اقتطاع للصفحة الحالية. ويُنقل التصنيف في الرابط كمعامل ‎?category=‎، فتفتح الروابط من الرئيسية أو الفوتر أو صفحة المقال المدونةَ مفلترة مسبقًا — ويمكن مشاركة تلك الروابط.

يُنتج Vite نسخة إنتاج خفيفة، ولأن المحتوى يُشحن كملف JSON ثابت فلا يوجد API يُنتظر — تظهر المقالات فورًا أثناء التصفح.

مدونة سريعة وعربية بالكامل يجد فيها القارئ ما يحتاجه بنقرتين — بالتصنيف أو البحث أو عبر رابط مُشارَك. المدونة منشورة على Vercel وكودها متاح للعموم على GitHub.