Dictionary Quick Reference Card

🚀 Quick Start

Create New Topic

1# 1. Create content page
2hugo new content/docs/dictionary/[topic-name]/index.md --kind dictionary
3
4# 2. Create data file
5mkdir -p data/dictionary/[topic-name]
6touch data/dictionary/[topic-name]/vocabulary.yaml
7
8# 3. Edit content page and update shortcode reference
9# 4. Add vocabulary entries to YAML file

📝 YAML Entry Template

1- word: example
2  part_of_speech: noun
3  urdu_meaning: مثال
4  example_en: This is an example sentence.
5  example_ur: یہ ایک مثالی جملہ ہے۔
6  additional_example_ur: مزید مثال (optional)

Note: Tags are handled in the page frontmatter, not in individual vocabulary entries.

🎨 Shortcode Usage

Accordion Format (Recommended)

1{{< vocabulary-accordion "dictionary.topic-name.vocabulary" >}}

Table Format (Compact)

1{{< vocabulary-list "dictionary.topic-name.vocabulary" >}}

📂 File Structure

content/docs/dictionary/
  └── [topic-name]/
      └── index.md ──┐
                     │ References
data/dictionary/     │
  └── [topic-name]/  │
      └── vocabulary.yaml ←┘

🔗 Path Convention

Rule: Replace / with . and use hyphens

✅ Checklist for New Topic

• Created content page with archetype
• Created data directory and YAML file
• Updated frontmatter (title, description, sourceType, sourceName)
• Updated shortcode reference in content
• Added at least one vocabulary entry
• Validated YAML syntax
• Tested locally (dev server)
• Verified Urdu text displays correctly
• Checked accordion/list functionality
• Committed to git

📝 Recent Changes

Latest (v1.2) - Typography Improvements

• ✅ Jameel Noori Nastaleeq font (local hosting)
• ✅ Word-spacing: 0.2em
• ✅ Removed italic styling from Urdu examples
• ✅ Font sizes: 1.4em (accordion), 1.3em (list)
• ✅ Line-height: 2.2

Key Files Changed:

• layouts/shortcodes/vocabulary-accordion.html
• layouts/shortcodes/vocabulary-list.html
• static/fonts/Jameel-Noori-Nastaleeq.ttf (new)

Git: b3c2e95d - feat: improve Urdu text rendering

✅ Checklist for New Topic

• Created content page with archetype
• Created data directory and YAML file
• Updated frontmatter (title, description, sourceType, sourceName)
• Updated shortcode reference in content
• Added at least one vocabulary entry
• Validated YAML syntax
• Tested locally (dev server)
• Verified Urdu text displays correctly
• Checked accordion/list functionality
• Committed to git

🎨 Font & Styling

Font Files

static/fonts/Jameel-Noori-Nastaleeq.ttf  # Primary Urdu font
static/fonts/README.md                    # Installation guide

CSS Locations

Accordion styling: layouts/shortcodes/vocabulary-accordion.html

• Font declaration: lines 83-91
• .urdu-text class: lines 92-98
• Accordion buttons: lines 99-101
• Accordion body: lines 106-108

List styling: layouts/shortcodes/vocabulary-list.html

• Font declaration: lines 43-51
• .vocabulary-list .urdu-text class: lines 52-58
• Table styling: lines 59-65

CSS Classes Reference

 1/* Main Urdu text styling */
 2.urdu-text                        # Accordion Urdu text
 3.vocabulary-list .urdu-text       # List Urdu text
 4
 5/* Container classes */
 6.vocabulary-accordion             # Accordion wrapper
 7.vocabulary-list                  # List wrapper
 8
 9/* Bootstrap accordion */
10.accordion-button                 # Accordion header
11.accordion-body                   # Accordion content

Typography Settings

1/* Accordion */
2font-size: 1.4em
3line-height: 2.2
4word-spacing: 0.2em
5
6/* List */
7font-size: 1.3em
8line-height: 2.2
9word-spacing: 0.2em

Font Troubleshooting

❌ Font not loading?

1. Check file exists: ls -lh static/fonts/Jameel-Noori-Nastaleeq.ttf
2. Verify filename (hyphens, not spaces)
3. Restart Hugo server
4. Check browser console for 404 errors

❌ Urdu text looks wrong?

• Check UTF-8 encoding in YAML files
• Verify dir="rtl" in shortcode
• Clear browser cache
• Try fallback font: Noto Nastaliq Urdu

🛠️ Common Commands

 1# Start dev server
 2npm run dev:memory
 3
 4# Build production
 5npm run build:production-fast
 6
 7# Create from archetype
 8hugo new content/docs/dictionary/[topic]/index.md --kind dictionary
 9
10# Check Hugo version
11hugo version
12
13# Validate YAML (online)
14# Visit: http://www.yamllint.com/

🎯 Part of Speech Values

• noun - Naming word
• verb - Action word
• adjective - Descriptive word
• adverb - Modifies verb/adjective
• phrase - Multi-word expression
• noun/verb - Multiple uses
• technical-term - Specialized vocabulary
• abbreviation - Shortened form

🏷️ Suggested Frontmatter Tags

Note: Use these tags in the page frontmatter (index.md), not in vocabulary YAML data.

By Topic

• vocabulary, dictionary, military, technical, business
• programming, ai, devops, css, web-development

By Source Type

• course, book, video, article, documentation

By Difficulty

• beginner, intermediate, advanced, reference

🐛 Quick Troubleshooting

📋 Frontmatter Essentials

 1---
 2title: "Topic Vocabulary"
 3linkTitle: "Short Name"
 4description: |
 5  Brief description
 6type: docs
 7sourceType: course  # course, book, video, article, general
 8sourceName: "Full Source Name"
 9topic: "Main Subject"
10tags:
11  - vocabulary
12  - your-topic
13categories:
14  - dictionary
15series:
16  - Dictionary
17nav_weight: 1
18---

💡 Best Practices

1. One topic per folder - Keep vocabulary organized
2. Descriptive folder names - Use ibm-rag-course not course1
3. Alphabetical order - Sort words in YAML (optional but neat)
4. Consistent formatting - Follow template exactly
5. Validate before commit - Use YAML validator
6. Backup data files - Git commit regularly
7. Test locally first - Always check before deploying
8. Natural Urdu - Use proper script and grammar

📞 Need Help?

1. Check complete-guide.md
2. Review examples in /data/dictionary/
3. Test with existing working topics
4. Ask specific questions with error details

Pro Tip: Keep this file bookmarked for quick reference! 🔖