موقع أرشيف أكاديمي لمؤرّخ الفنّ لو بينغ

نظرة عامة على المشروع

في مطلع 2024، وكنتُ حينها أعمل مستقلًّا، طلب منّي مؤرّخ الفنّ وقيّم المعارض لو بينغ أن أبني له موقعه الشخصي الرسمي. تولّيتُ وحدي ترتيب المتطلّبات، ونمذجة المحتوى، وتصميم الشاشات، والتطوير والنشر. بدأتُ في يناير 2024 ونشرتُ في مارس، وما زلتُ أتعهّده بالصيانة منذ ذلك الحين.

الموقع من نوع الأرشيف الأكاديمي. رتّبتُ فيه ثمرةَ عقود من بحث لو بينغ في ستّة أقسام: نبذة، ومنشورات، ومعارض، ومراجع، ودراسات مفردة عن فنّانين، وتعليم. أمّا الصفحة الرئيسة فتعرض آخر المستجدّات. والمحتوى كلّه يديره العميل بنفسه من Sanity CMS، دون حاجة إلى أن أتدخّل.

التكوين التقني

الموقع كلّه على Astro، والمحتوى موضوع في Sanity. وتُنفَّذ استعلامات GROQ كلّها وقت البناء، والناتج HTML ساكن خالص، فلا وصول إلى نظام إدارة المحتوى وقت التشغيل. وبفضل ذلك لا يتحمّل العميل كلفة خادم، ولا يسقط الموقع إن تعطّل نظام إدارة المحتوى.

لا أستعمل جزر React إلا حيث يلزم التفاعل: Swiper لدوّارة المعارض، وyet-another-react-lightbox لصندوق الضوء في مجموعات الصور، ومعاينة الصورة عند المرور في صفحات القوائم كتبتُها بنفسي. ومكوّن مجموعات الصور فيه فوق ذلك تحميلٌ مؤجَّل على مرحلتين بـ IntersectionObserver: يُحمَّل التنفيذ ديناميكيًّا بعد دخول المكوّن نطاقَ العرض، ويُعرض قبل ذلك هيكل عظمي بديل.

نمذجة المحتوى وتصيير النصّ الغنيّ

محتوى العميل متفاوت الأشكال، فقد يجتمع في صفحة واحدة متنٌ ومجموعة صور وخطّ زمني ومنشورات ذات صلة وروابط خارجية. لذلك فكّكتُ صفحة التفاصيل إلى منظومة كتل قابلة للتركيب. فللمحرّر أن يعيد ترتيب ثمانية أنواع من الكتل كما يشاء في نظام إدارة المحتوى، وتوزّعها الواجهة على المكوّن المقابل لكلّ نوع. وإن ظهر شكل جديد من المحتوى، كفى أن يُضاف تفرّعٌ واحد.

المتن مكتوب بـ Portable Text، غير أن النصّ الغنيّ الذي يقتضيه المحتوى الأكاديمي يتجاوز إمكاناته الافتراضية، فوسّعتُه ببعض الإضافات في طبقة التصيير.

• الحواشي الأكاديمية: تُرقَّم الإشارة في المتن والتعليق في آخر الصفحة ترقيمًا تلقائيًّا، ويمكن الانتقال بينهما في الاتجاهين
• المراجع الداخلية: تُحلّ مراجعُ المستندات في نظام إدارة المحتوى إلى مسارات فعلية وقت البناء، مع ذاكرة مؤقّتة تمنع جلب المرجع نفسه مرارًا
• العلامات المخصّصة: العريض والمائل والمسطَّر والرابط الداخلي والرابط الخارجي، لكلٍّ منها مكوّنه الخاصّ في التصيير، وتظهر للرابط أيقونة تختلف بحسب كونه داخليًّا أو خارجيًّا
• الكتل المضمَّنة: يمكن إقحام صورة مفردة أو مجموعة صور أو مقطع فيديو في أيّ موضع من المتن

معالجة الصور والنشر

الصور التي يرفعها العميل متفاوتة المقاسات، فأوحّدها وقت البناء بـ sharp في srcset متجاوب بثلاث صيغ: AVIF وWebP وJPEG. وإن أخفق تحويل صورة أُعيدت المحاولة تلقائيًّا، فإن أخفقت ثانيةً تُخطَّى تلك الصورة وحدها ويُسجَّل ذلك في السجلّ — كي لا توقف صورةٌ واحدة تالفة عمليةَ البناء كلّها.

يُنشَر الموقع على استضافة الأصول الساكنة في Cloudflare Workers. وهيّأتُ إلى جانبه صفحةَ حالة داخلية لا تُدرَج في خريطة الموقع، تعرض وقت البناء وبصمة الالتزام وعدد كلّ نوع من المحتوى، فيستطيع العميل بعد تعديل المحتوى أن يتحقّق بنفسه من ظهور تعديله. أمّا نجاح النشر أو إخفاقه فيصل إشعارًا بالبريد من GitHub Actions.

الصيانة بعد التسليم

ما زال الموقع يعمل بعد النشر، وأتعهّده بالصيانة عند الحاجة. وفي النصف الثاني من 2025 أدخلتُ عليه تحديثًا كبيرًا واحدًا: جاريتُ بـ Astro وTailwind وReact أحدثَ إصداراتها الرئيسة حينها، وأعدتُ كتابة طبقة الأنماط، وأكملتُ البيانات المهيكلة وتحسين محرّكات البحث، ونقلتُ وجهة النشر من Cloudflare Pages إلى Workers.

أبقيتُ القيود الهندسية في حدود ما يناسب حجم المشروع: قابلتُ بنيةَ بيانات Sanity بتعريفات أنواع TypeScript، وشغّلتُ ESLint تلقائيًّا قبل كلّ التزام، وفصلتُ المنطق الخالص كالتصفّح بين الصفحات في دوالّ مستقلّة وكتبتُ لها اختبارات وحدة. ولأنه ليس مشروعًا كبيرًا، لم أفرش عليه منظومة اختبارات شاملة.