HTML ثابت بمكوّنات حية

صفحات Soonex ملفات HTML عادية. ومع ذلك تتبدّل علامات التبويب، وينفتح الأكورديون، وتنسدل القائمة، ويعدّ العدّاد التنازلي. إليك كيف يعمل ذلك.

التوليد باستخدام Tableau

كل قسم من الصفحة الرئيسية مكوّن HEEx وظيفي داخل lib/pages/home/. يستدعيها Tableau وقت البناء ويكتب النتيجة في _site/. أما مقالات المدوّنة فهي ملفات Markdown داخل _posts/ تُعرض بالقالب نفسه.

التفعيل باستخدام Corex

تُخرج مكوّنات Corex ترميزًا يحمل سمات phx-hook. وفي المتصفح يسجّل assets/js/site.js الخطافات المطابقة، ويربط كل منها آلة حالات من Zag تتولى التنقل بلوحة المفاتيح والتركيز وحالات ARIA.

import { Marquee } from "corex/marquee" 

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

بلا أدوات Node

يعمل Tailwind وesbuild كمهام Mix بملفات تنفيذية مثبّتة الإصدار. لا يوجد package.json، ولا تشغّل بيئة CI الأمر npm install أبدًا.

mix assets.build   # Corex design CSS, Tailwind, esbuild mix build          # full production build into _site/ 

فحص في كل تشغيل

يبني mix test الموقع، ويشغّل خادمًا محليًا، ويُجري تدقيق إمكانية الوصول axe على الصفحة الرئيسية بالإنجليزية والعربية في Chrome دون واجهة. إذا أفسد تغيير ما التباين أو الدلالات، تفشل الاختبارات قبل أي نشر.