LoveIt-tailwindcss — قالب Hugo مُعاد بناؤه على Tailwind مع دعم RTL

مشتقّ من قالب LoveIt لـ Hugo، مع هدف محدد: أن يصبح صالحاً للمدوّنات العربية دون ترقيعات.

نظرة عامة

LoveIt-tailwindcss إعادة بناء لقالب LoveIt الشهير لمولّد المواقع الساكنة Hugo، بثلاثة أهداف معلنة في المستودع ومُنجزة:

• دعم اللغات ذات الاتجاه من اليمين إلى اليسار (RTL).
• تحويل القالب بالكامل إلى Tailwind CSS.
• إضافة صفحة مشاريع لم تكن في الأصل.

التركيب يتمّ كأي قالب Hugo، عبر وحدة فرعية في Git:

git submodule add https://github.com/i99dev/LoveIt-tailwindcss.git themes/LoveIt-tailwindcss
cd themes/LoveIt-tailwindcss && npm install

وتوثيق الإعداد هو توثيق LoveIt الأصلي نفسه، مع استبدال اسم المستودع فقط.

المشكلة

أغلب قوالب Hugo الجاهزة تفترض اتجاهاً واحداً دون أن تقول ذلك صراحةً. ومن يكتب بالعربية يكتشف الافتراض متأخراً:

1. الاتجاه مدفون في الأنماط. خصائص مثل margin-left وpadding-right وtext-align: left منثورة عبر ملفات القالب؛ إضافة dir="rtl" وحدها تقلب النص وتترك التخطيط مكسوراً.
2. الحل الشائع يضاعف الصيانة. إضافة ملف rtl.css ينقض ما قبله تعني نسختين من كل قرار تصميمي، وانحرافاً مؤكّداً بينهما مع الوقت.
3. قاعدة أنماط قديمة. تعديل قالب مكتوب بـ SCSS مخصص يعني قراءة أنماط الآخرين قبل تغيير أي هامش.

التخطيط

رُتّبت الأهداف الثلاثة ترتيباً يجعل كلّ واحد يخدم ما بعده، لا أن تُنفّذ متوازية:

المرحلة	العمل	لماذا بهذا الترتيب
1	التحويل إلى Tailwind CSS	يوحّد مصدر الأنماط قبل مسّ الاتجاه
2	دعم RTL	يصبح تغيير أدوات يسار/يمين إلى منطقية عملاً ميكانيكياً
3	صفحة المشاريع	ميزة جديدة تُبنى فوق أساس ثنائي الاتجاه منذ لحظتها الأولى

القرارات المعمارية

Tailwind CSS بدل طبقة RTL منفصلة. هذا هو قرار المشروع المحوري. الطريقة المعتادة — ملف أنماط مقلوب يُحمّل عند اللغات العربية — تعمل في أول يوم وتتفكّك عند أول مكوّن جديد. مع Tailwind تُكتب المسافات بمنطق "بداية/نهاية" لا "يسار/يمين"، فتخدم القاعدة نفسها الاتجاهين دون تكرار، ويصبح الاتجاه خاصية في المستند لا فرعاً في الأنماط.

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

التوزيع كوحدة فرعية في Git. القالب يُركّب داخل themes/ ويُحدّث بـ git submodule update، فيبقى منفصلاً عن محتوى المدوّنة ويستفيد من تحديثاته أي موقع يستخدمه.

النشر من خلال GitHub Actions. يوفّر المستودع مسار عمل جاهزاً يُوضع في .github/workflows/gh-pages.yml، ويفعل أربعة أشياء عند كل دفعة إلى main:

1. سحب المستودع، ثم git submodule update --init --recursive لجلب القالب — وهي الخطوة التي ينساها الجميع فيبنى الموقع بلا تصميم.
2. تجهيز Hugo عبر peaceiris/actions-hugo.
3. البناء بـ hugo --minify.
4. النشر من ./public إلى GitHub Pages.

التنفيذ

الناتج قالب يحتفظ ببنية LoveIt وخيارات إعداده — فمن يعرف الأصل يعرف هذا — لكن طبقته المرئية مكتوبة بـ Tailwind، وصفحاته تعمل بالعربية والإنجليزية معاً. وأُضيفت إليه صفحة مشاريع تعرض أعمال المطوّر — وهي ما كان يُبنى عادةً يدوياً فوق القالب الأصلي.

النتيجة والدروس

قالب واحد يصلح لمدوّنة عربية أولاً، دون أن يصير الدعم العربي ترقيعاً فوق تصميم إنجليزي.

1. RTL قرار معماري لا ميزة. متى عُومل كميزة تُضاف في النهاية، تحوّل إلى سلسلة استثناءات لا تنتهي.
2. توحيد طبقة الأنماط يسبق أي إصلاح. بدون مصدر واحد للمسافات، كل إصلاح اتجاه يُطبّق مرتين ويُنسى مرة.
3. توزيع القالب جزء من المنتج. مسار عمل جاهز وتعليمات تركيب واضحة تختصر على المستخدم أكثر ممّا تفعله أي ميزة إضافية.

الروابط

• المستودع: github.com/i99dev/LoveIt-tailwindcss
• القالب الأصلي: github.com/dillonzq/LoveIt
• توثيق الإعداد: hugoloveit.com