السيرة الذاتية ككود: أناقة RenderCV
إذا كنت مهندساً أو أكاديمياً، فإن كتابة السير الذاتية في MS Word هي كابوس للتنسيق، وغالباً ما تكون قوالب LaTeX المخصصة معقدة للغاية للمحافظة عليها.
مؤخراً، عثرت على مشروع بايثون رائع يسمى RenderCV. يتيح لك كتابة محتوى سيرتك الذاتية في ملف YAML نظيف ومنظم ويقوم بإنشاء ملف PDF منسق بشكل جميل مع طباعة مثالية باستخدام Typst في الخلفية. إنه يعامل سيرتك الذاتية ككود، مما يعني أنه يمكنك التحكم في إصداراتها والتركيز بشكل كامل على المحتوى وترك التنسيق والهوامش والأبعاد للأداة لتقوم بها.
ومع ذلك، تم تصميم RenderCV في المقام الأول كأداة واجهة خط أوامر (CLI). في كل مرة تجري فيها تغييراً، يتعين عليك تشغيل rendercv render John_Doe_CV.yaml وفحص المخرجات وفتح عارض PDF والتحقق من التنسيق.
أردت سد هذه الفجوة عن طريق إضافة محرر ويب حي - تطبيق ويب محلي أحادي الصفحة مع محرر Monaco جنباً إلى جنب، ومعاينة حية لملف PDF، والتحقق الفوري من المخطط، وتبديل الأقسام والسمات التفاعلية.
بمساعدة Gemini، نجحت في بناء ودمج واجهة الويب هذه مباشرة في RenderCV! إليك كيف فعلنا ذلك.
المكونات التقنية والبنية
للحفاظ على محرر الويب خفيف الوزن وسريعاً وبأقل قدر من الاعتماديات، اخترنا:
- الخلفية: FastAPI + Uvicorn — مثالي لكتابة واجهات برمجة تطبيقات عالية الأداء وتقديم الملفات الثابتة.
- الواجهة الأمامية: HTML5 + CSS حديث + JavaScript — لتجنب خطوات البناء المعقدة. استخدمنا Monaco Editor (عبر CDN) لتجربة كتابة YAML على مستوى VS Code، وأيقونات Lucide للعناصر البصرية السلسة.
- الرندرة: واجهة برمجة تطبيقات بايثون لـ RenderCV — استدعاء النماذج الداخلية للمكتبة مباشرة لتحليل المستندات Typst و PDF والتحقق منها وبنائها في الذاكرة.
1. تصميم واجهة FastAPI الخلفية (web_app.py)
قلب الخادم هو نقطة النهاية /api/render. عندما يكتب المستخدم YAML في واجهة الويب، ترسلها الواجهة الأمامية إلى نقطة النهاية هذه. تتعامل الخلفية مع ثلاث مهام رئيسية:
- رندرة PDF: نقوم بتجميع سلسلة YAML باستخدام وظائف RenderCV الداخلية وإرجاع بايتات PDF الخام.
- تبديل أقسام السيرة الذاتية: يتيح لك RenderCV إخفاء أو إظهار أقسام من سيرتك الذاتية. نقوم بتحليل YAML الوارد وتحديد جميع الأقسام المتاحة واستبعاد الأقسام التي اختار المستخدم إخفاءها.
- تحديد الأخطاء المنظمة: عندما يفشل التحقق، يرمي RenderCV خطأ
RenderCVUserValidationError. نقوم بالتقاط هذا الخطأ واستخراج أرقام السطور والأعمدة الدقيقة للحقل غير الصالح وإرجاع استجابة JSON نظيفة حتى يتمكن Monaco من إظهار خطوط متعرجة حمراء في موضع الخطأ تماماً!
2. واجهة ويب متميزة (index.html)
بالنسبة لواجهة المستخدم، أردنا شيئاً يبدو متميزاً وسريع الاستجابة. ساعدني Gemini في كتابة تصميم حديث يتميز بـ:
- سمة داكنة HSL: خلفيات داكنة وتأثيرات ضبابية (
backdrop-filter: blur) وتدرجات بنفسجية حية. - تقسيم الشاشة جنباً إلى جنب: محرر Monaco على اليسار وعارض PDF حي على اليمين.
- عناصر تحكم ديناميكية: مبدل السمات، وقائمة منسدلة للأقسام للتحكم الديناميكي، ووحدة تحكم للتحقق من الأخطاء في الأسفل مع إمكانية التركيز على السطر الخاطئ عند الضغط على الخطأ.
3. لفه في CLI (web_command.py)
لتسهيل الأمر على المستخدمين، أضفنا أمراً جديداً إلى CLI الخاص بـ RenderCV:
1 | rendercv web |
يطلق هذا الأمر خادم Uvicorn FastAPI المحلي ويفتح متصفحك تلقائياً.
سعيد بالترميز!