فہرستِ مضامین

1. بنیادی Markdown صلاحیتیں
2. Lists، Tasks اور Footnotes
3. Tables اور Code Highlighting
4. GitHub طرز کے Alerts
5. KaTeX فارمولے
6. Mermaid ڈایاگرامز
7. Duckquill Shortcodes
8. HTML Extension صلاحیتیں
9. Buttons اور فوری نیویگیشن
10. صفحہ سطح کے Front Matter فیچرز
11. Backlinks ڈیمو

یہ پوسٹ اس سائٹ کی ڈیمو بلاگ پیج ہے، جس کا مقصد rich-text اور extended formatting صلاحیتوں کو ایک جگہ پر دکھانا اور validate کرنا ہے۔

بنیادی Markdown صلاحیتیں

متن کی اسٹائلز: bold، italic، strikethrough، inline code، اور ملا ہوا انداز all together۔

• اندرونی لنک: Home
• بیرونی لنک: Zola Documentation
• Emoji: 😭😂🥺🤣❤️✨🙏😍🥰😊

یہ quote block ہے۔

یہاں nested quote ہے:

Duckquill واضح اور منظم تکنیکی لکھائی کے لیے بہت موزوں ہے۔

Lists، Tasks اور Footnotes

• عام آئٹم A
• عام آئٹم B
  • nested آئٹم B.1
  • nested آئٹم B.2
• عام آئٹم C

1. مواد لکھیں
2. لوکل preview دیکھیں
3. شائع کریں

• ٹاسک 1: عام Markdown extensions فعال کریں
• ٹاسک 2: Mermaid سپورٹ شامل کریں
• ٹاسک 3: اسے showcase پوسٹ میں refactor کریں
• ٹاسک 4: مزید عملی examples شامل کرتے رہیں

Footnote مثال¹ اور linked footnote²۔

Definition List مثال:

Mermaid

گراف اسٹرکچر کو متن سے بیان کریں، پھر خودکار طور پر SVG میں render کریں۔

KaTeX

LaTeX ریاضیاتی فارمولوں کی تیز رفتار rendering۔

Duckquill Shortcodes

تھیم سطح کے فیچر extensions، جیسے alert, image, video, youtube۔

Tables اور Code Highlighting

fn main() {
    println!("Duckquill demo blog");
}

1[extra]
2show_copy_button = true
3show_reading_time = true
4show_share_button = true

GitHub طرز کے Alerts

یہ NOTE alert ہے، جو پس منظر سیاق کے لیے استعمال ہوتا ہے۔

یہ TIP alert ہے، عملی تجاویز کے لیے۔

یہ IMPORTANT alert ہے، اہم مراحل پر زور دینے کے لیے۔

یہ WARNING alert ہے، ممکنہ مسائل کی نشاندہی کے لیے۔

یہ CAUTION alert ہے، خطرناک رویوں کی وضاحت کے لیے۔

KaTeX فارمولے

Inline formula: $E = mc^2$.

Block formula:

$$ f(x) = \int_{-\infty}^{\infty}\hat{f}(\xi)e^{2\pi i\xi x},d\xi $$

Mermaid ڈایاگرامز

نیچے دیا گیا mermaid بلاک flowchart کے طور پر render ہوتا ہے:

flowchart LR
    A[Writing] --> B[Git Commit]
    B --> C[Zola Build]
    C --> D[Static Deploy]
    D --> E[Visit Site]

ایک اور sequence diagram مثال:

sequenceDiagram
    participant U as User
    participant G as Git Repo
    participant Z as Zola
    U->>G: push content
    G-->>Z: trigger build
    Z-->>U: generated public site

Duckquill Shortcodes

alert shortcode (یہ GitHub alerts سے الگ ہے؛ یہ theme shortcode ہے):

یہ note shortcode alert ہے۔

یہ tip shortcode alert ہے۔

یہ important shortcode alert ہے۔

یہ warning shortcode alert ہے۔

یہ caution shortcode alert ہے۔

Image shortcode (بنیادی استعمال):

Image shortcode (مزید اختیارات):

یہ متن start floating image behavior دکھاتا ہے، جہاں تصویر پیراگراف کے آغاز کی سمت چپکی رہتی ہے۔

یہ متن end floating image behavior دکھاتا ہے، جہاں تصویر پیراگراف کے اختتام کی سمت چپکی رہتی ہے۔

Video shortcode (بنیادی اور autoplay مثالیں):

YouTube / Vimeo / Mastodon shortcode links:

• YouTube example link
• Vimeo example link
• Mastodon example link

(نوٹ: اس showcase میں third-party embeds کے شور سے بچنے کے لیے یہاں انہیں links کے طور پر دکھایا گیا ہے۔)

CRT shortcode:

user@duckquill-demo:~$ zola check
Checking site...
-> Site content: OK

HTML Extension صلاحیتیں

عام inline HTML tags بھی براہ راست کام کرتے ہیں:

• ASCII
• Ctrl + K
• highlighted key text
• this is a spoiler text
• this is a solid spoiler text
• old plan new plan
• this is an inline quotation
• demo-output.log: all checks passed
• this sentence is underlined

یہ <small> side note text کی مثال ہے۔

فارم اور interaction widget مثالیں:

•  Mermaid فعال کریں
•  KaTeX فعال کریں
•  Backlinks فعال کریں
•  Dark
•  Light

Accent color:

Content density:

Image + caption composition (figure + figcaption):

Progress bar مثال (range input کے ساتھ page script کے ذریعے منسلک):

Buttons اور فوری نیویگیشن

صفحہ سطح کے Front Matter فیچرز

featured = true کے علاوہ یہ صفحہ یہ بھی دکھاتا ہے:

• banner = "banner-feature-en.png": پوسٹ بینر اور فہرست thumbnail.
• accent_color / accent_color_dark: صفحہ سطح پر accent override.
• styles = ["css/feature-demo-blog.css"] اور scripts = ["js/feature-demo-blog.js"]: صفحہ مخصوص styles/scripts.
• emoji_favicon = "🧪": براؤزر ٹیب کے لیے emoji favicon.

یہ سیکشن صفحہ سطح کی config rendering کی توثیق کے لیے ایک مختصر checklist ہے۔

Backlinks ڈیمو

میں نے about صفحے سے اس پوسٹ کا ایک لنک شامل کیا ہے۔

اگر quick-action buttons میں Backlinks آئٹم نظر آئے تو internal backlink index درست چل رہا ہے۔

اگر اوپر کے تمام modules صحیح render ہوں تو اس کا مطلب ہے کہ بلاگ کی rich-text صلاحیت اب زیادہ تر عام لکھائی کے scenarios کور کرتی ہے۔