📋 جدول المحتويات

🌟 نظرة عامة

Web Page Builder هي إضافة متكاملة لـ Visual Studio Code تتيح لك إنشاء صفحات ويب احترافية بسهولة ويسر.

🎯 لماذا Web Page Builder؟

✨ المميزات

1️⃣ محرر HTML متقدم

┌─────────────────────────────────────┐
│  🔤 محرر أكواد متقدم                │
│  🎨 تلوين الكود التلقائي            │
│  ↩️ دعم التراجع والإعادة            │
│  💾 حفظ سريع وفعال                  │
└─────────────────────────────────────┘

2️⃣ معاينة فورية

┌─────────────────────────────────────┐
│  👁️ معاينة حية أثناء التحرير        │
│  🔄 تحديث تلقائي فوري               │
│  🖱️ سحب وإفلات العناصر              │
│  📱 معاينة متجاوبة                  │
└─────────────────────────────────────┘

3️⃣ شريط جانبي للوسوم

4️⃣ إدارة الملفات

┌─────────────────────────────────────┐
│  📂 فتح ملفات HTML و XHTML          │
│  💾 حفظ باسم مع اختيار الموقع       │
│  ⚠️ تأكيد قبل استبدال الكود         │
└─────────────────────────────────────┘

📥 التثبيت

🛒 من VS Code Marketplace

1️⃣ افتح VS Code
2️⃣ اضغط Ctrl+Shift+X (أو Cmd+Shift+X على Mac)
3️⃣ ابحث عن "Web Page Builder"
4️⃣ اضغط "Install" ✅

📦 من ملف VSIX

1️⃣ حمّل ملف .vsix
2️⃣ افتح VS Code
3️⃣ اضغط Ctrl+Shift+P (أو Cmd+Shift+P على Mac)
4️⃣ اكتب "Extensions: Install from VSIX"
5️⃣ اختر الملف المحمّل ✅

🚀 الاستخدام

🎬 بدء الاستخدام

graph LR
    A[فتح VS Code] --> B[الضغط على أيقونة الإضافة]
    B --> C[بدء إنشاء الصفحة]
    C --> D[🎉 صفحة جاهزة!]

⌨️ اختصارات سريعة

📜 الأوامر

📁 هيكل المشروع

📦 web-page-builder/
├── 📂 src/
│   ├── 📂 commands/
│   │   └── 📄 index.ts              # أوامر الإضافة
│   ├── 📂 events/
│   │   └── 📄 codeEventEmitter.ts   # نظام الأحداث
│   ├── 📂 panels/
│   │   ├── 📄 editorPanel.ts        # لوحة المحرر
│   │   └── 📄 webPageBuilderPanel.ts # لوحة المعاينة
│   ├── 📂 providers/
│   │   └── 📄 sidebarProvider.ts    # موفر الشريط الجانبي
│   └── 📂 webviews/
│       ├── 📄 sidebarWebview.html   # HTML الشريط الجانبي
│       ├── 📄 sidebar.css           # تنسيق الشريط الجانبي
│       ├── 📄 sidebar.js            # سكربت الشريط الجانبي
│       ├── 📄 webPageBuilderPanel.html # HTML المعاينة
│       ├── 📄 webPageBuilderPanel.css  # تنسيق المعاينة
│       └── 📄 webPageBuilderPanel.js   # سكربت المعاينة
├── 📄 package.json                  # إعدادات الإضافة
├── 📄 tsconfig.json                 # إعدادات TypeScript
└── 📄 README.md                     # هذا الملف

🤝 المساهمة

📝 خطوات المساهمة

1️⃣ Fork المشروع
2️⃣ إنشاء فرع جديد
   git checkout -b feature/amazing-feature
3️⃣ Commit التغييرات
   git commit -m '✨ إضافة ميزة رائعة'
4️⃣ Push إلى الفرع
   git push origin feature/amazing-feature
5️⃣ فتح Pull Request 🎉

🛠️ التطوير

📋 المتطلبات

🔨 البناء والتشغيل

# تثبيت التبعيات
npm install

# بناء المشروع
npm run compile

# مراقبة التغييرات
npm run watch

# تشغيل الاختبارات
npm run test

🧪 التشغيل في وضع التطوير

1️⃣ افتح المشروع في VS Code
2️⃣ اضغط F5 لتشغيل الإضافة في نافذة جديدة
3️⃣ اختبر التغييرات مباشرة! 🚀

📞 الدعم

👥 المساهمون الرئيسيون

💚 توكل على الله وابدأ على بركته!

الدعاء لوالدي ولجميع المسلمين.

🌐 روابط مفيدة

📦 إضافات أخرى من فريق 4Techs

📄 الترخيص

MIT License

هذا المشروع مرخص تحت رخصة MIT
راجع ملف LICENSE للتفاصيل