feat(callout): revamp of the callouts (#767)

* feat(callout): revamp of the callouts

* fix: doc

* chore: refactor gh alert

* feat: same colors on callouts and gh alerts

* docs: more relevant examples

* docs: i18n

* docs: update existing callouts
This commit is contained in:
Ludovic Fernandez
2025-08-22 00:31:16 +02:00
committed by GitHub
parent a3635ea638
commit f4d75a4e5b
27 changed files with 448 additions and 114 deletions

View File

@@ -14,24 +14,44 @@ prev: /docs/guide/shortcodes
> [هشدارهای سبک GitHub](../../markdown#alerts) از [نسخه 0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) پشتیبانی می‌شوند.
> این ویژگی از سینتکس Markdown برای رندر کردن callout استفاده می‌کند که باعث بهبود قابلیت حمل و خوانایی محتوا می‌شود.
## أمثلة
## أمثلة
{{< callout >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
{{< callout type="info" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
{{< callout type="warning" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
{{< callout type="error" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
{{< callout type="important" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
### تقصير
{{< callout emoji="🌐">}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< callout >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* callout */>}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
### معلومات
### Info
{{< callout type="info" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
@@ -40,27 +60,83 @@ prev: /docs/guide/shortcodes
{{</* /callout */>}}
```
### تحذير
### Warning
{{< callout type="warning" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout type="warning" */>}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
### خطأ
### Error
{{< callout type="error" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
### Important
{{< callout type="important" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout type="important" */>}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
### أيقونة مخصصة
{{< callout icon="sparkles" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout icon="sparkles" */>}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
{{< callout type="important" icon="sparkles" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout type="important" icon="sparkles" */>}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
### الرموز التعبيرية
{{< callout emoji="🌐" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```
{{< callout type="info" emoji="" >}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{< /callout >}}
```markdown
{{</* callout type="info" emoji="" */>}}
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
{{</* /callout */>}}
```