🧠 ليه عملت الموقع؟
كان بقالي فترة ببحث في موضوع معين في الداتا ستراكشر و حبيت أوثق اللي وصلتله فى مقالة بالعربي على dev.to أو hashnode بس للأسف دعم اللغة العربية مكنش متوفر خالص.
حاولت أدور على بدايل و لم أجد غير حل واحد و هو إني اعمل مدونتى الخاصة و تحمست جدا للفكرة لأنى كنت عاوز اعمل كده من زمان بس كنت مكسل و دلوقتي الفرصة المناسبة إني اعمل المشروع اللي كنت عاوز اعمله من زمان
🧰 إختيار الأدوات المناسبة
بدأت ابحث إزاي اعمل مدونتى و إيه الفريمورك و اللغة اللي هتكون مناسبة للمشروع ده و الحمد لله أن لغة الجافا سكريبت (لغتي اللى متخصص فيها و بشتغل بيها) هى أكثر لغة مناسبة و في كمية فريمورك مبنية بيها بتسهل بناء المدونات و المواقع الشبيهة
أشهرهم جيكل و هيوجو و أسترو و هى كلها فيها ميزة توليد الصفح الثابتة بحيث أن الموقع بيتبنى وقت البروداكشن و يتعمل شوية صفح بالhtml , css اللي ممكن يتم تخديمهم بسهولة من خلال صفح جيت هاب أو netlify بشكل مجاني تماما و من غير ما احتاج تأجير سيرفر أو ادفع فلوس
و كمان ميزة الفريمورك ديه أن عندها دعم للماركداون عن طريق أن اكتب اللي أنا عاوزه في ملف بصيغة الماركداون عادي خالص زي ما كنت هعمل فى dev.to أو هاش نود و هي عندها محرك بيحول ملفات الماركداون ل html عادي خالص, للعلم بالشئ هما مش بيعملوا المحرك ده بنفسهم من الصفر ولكن بيستخدموا حلول موجودة جاهزة ممكن أي حد يستخدمها زي جولدمارك أو ريمارك
أخترت أني استخدم فريمورك أسترو لأنها على عكس هيوجو و جيكل القدام فى الموضوع ده , هي فريمورك حديثة جدا و لكنها مش محصورة بس فى موضوع توليد الصفح الثابتة بل ده واحدة من مميزاتها و استخداماتها لأنها فى حقيقة الأمر أقرب ل nextjs و لكن أوسع منها بحيث أنك تقدر تستخدم ريأكت أو فيو أو أنجيلر أو سفيليت لتصميم الواجهات و دي حاجة هما أول ناس يعملوها و مسمينها إستراتيجية الجزر و ده بيتيح مساحة أوسع من التعديل و اللعب و ده شئ بحبه جدا و مش معني أنها جديدة أنها مغمورة على العكس عندها مجتمع قوي و توثيق أكثر من رائع و متجر ثيمات فكل ده شجعنى أني استخدمها
بدأت رحلتي بأني دورت في متجر الثيمات على ثيم كويس يكون أساس كويس ابني عليه علشان مبدأش من الصفر و وقع الأختيار على ثيم أسترو بيبر و هو يعتبر أشهره ثيم للمدونات على المتجر و الحقيقة كان فى ثيمات تانية منظرها أحلي بس اخترت هذا الثيم علشان كان أكثرهم نضوجا و كان تحت التطوير بانتظام, فمن مميزات الثيم ده:
- بساطة التصميم
- صديق لمحركات البحث (SEO friendly)
- يدعم الإتاحية لذوى الهمم
- يستخدم تايب سكريبت (TS)
- تيل ويند لتنسيق الصفحات بواسطة css
- دعم لتلخيص المواقع (RSS)
- توليد صور شارة (OG images)
⚔️ التحدي الحقيقي
للأسف الثيمة مكنتش بتدعم اللغة العربية بأي شكل من الأشكال و هنا كان التحدي بالنسبة ليا اللي هيتطلب شوية مجهود حلوين مني علشان اتعلم Astro.js و أعرف إزاي اخليه يدعم العربية و بعد شوية بحث اكتشفت إني محتاج اعمل الأتي
-
إضافة ترجمة/توطين للثيمة ذات نفسها من خلال إضافة I18n Routing
-
إستخدام تنسيقات css الجاهلة بإتجاهات الكتابة
- مثال بسيط:
text-align: left; // ❌دايما من اليسار سواء عربي أو إنجليزي text-align: start; // ✅من اليسار في الإنجيليزي و من اليمين فى العربي- ومثال تاني شائع (في الـ padding):
padding-left: 16px; /* ❌ ثابت */ padding-inline-start: 16px; /* ✅ بيتحوّل حسب اتجاه اللغة */- وكمان تيل ويند (tailwind) بتدعم التنسيقات الجاهلة لإتجاهات الكتابة من أول إصدار 3.3
الحمد لله عملت التعديلات اللي فوق ديه و كانت كبيره جدا و تعبتني لغاية لما خلصتها , فاستخسرت إني اخليها لنفسي بس و حبيت أنشرها علشان اللي يجيي بعدي ميعدش إختراع العجلة فقررت أنشر الثيمة بتاعة أسترو بيبر بعد لما ضيفتلها دعم الترجمة على متجر ثيمات أسترو
و الجيت هاب ريبو الحمد لله جابت 37 نجمة لغاية دلوقتي ! 🎉
Loading repository information...
و بعد كده عملت ريبو جديدة مبنية علي الثيمة بتاعتي للمدونة الخاصة بيا اللي أنت حاليا بتقرأ المقالة دي من عليها.
🏁 و في الآخر
المشروع ده كان فرصة ممتازة إني اتعلم عن ال github actions و ال CI/CD و قدرت اعمل github actions workflow علشان يتأكد من ال linting و ال format و يتأكد الأختبارات بتاعة الكود كله سليمة و لو كل ده تمام ينشر التعديلات الجديدة
اتعلمت عن مدير الحزم الجديد pnpm لأنة محبوب جداً فى المجتمع بتاع أسترو و فعلا كان سريع و ممتاز
اتعلمت إزاي أدير مشروع مفتوح المصدر و إزاي اعمل changelog و أنظم الإصدارات الخاصة بالمشروع
فى الأخر كان مشروع جميلة جداً و فعلاً اتعلمت منه كتير 😌