Start Here

🎨 Start Here: Glyph Documentation Guide

Welcome! This guide will help you navigate the glyph documentation.

⚡ Quick Links

I want to…	Go to…
👀 See all glyphs visually	index.html
🔍 Look up a specific character	QUICK-REFERENCE.md
📖 Learn the system	README.md
📚 See every detail	COMPLETE-REFERENCE.md
📊 View documentation stats	SUMMARY.md

🎯 Choose Your Path

🆕 First Time Here?

START → README.md → Try some examples → Explore index.html

Best path for newcomers:

1. Read README.md (5 min) - Understand the basics
2. Try examples from the “Quick Start” section
3. Open index.html - See all glyphs visually
4. Refer to QUICK-REFERENCE.md as needed

💻 Developer?

START → README.md (API section) → QUICK-REFERENCE.md → Code examples

Best path for developers:

1. Jump to API section in README.md
2. Check QUICK-REFERENCE.md for patterns
3. Copy code examples and start coding
4. Reference COMPLETE-REFERENCE.md for specific glyphs

🎨 Designer?

START → index.html → COMPLETE-REFERENCE.md → Sample SVGs

Best path for designers:

1. Open index.html - Visual gallery
2. Browse COMPLETE-REFERENCE.md - See all renders
3. Check pages/samples/*.svg - Download examples
4. Use specifications from README.md

📚 Researcher?

START → SUMMARY.md → COMPLETE-REFERENCE.md → Source code

Best path for technical research:

1. Read SUMMARY.md - Overview and stats
2. Study COMPLETE-REFERENCE.md - Full details
3. Review README.md - Technical specs
4. Examine source code in pages/src/utils/alphabet/

📁 File Guide

🌟 Main Files (Start Here)

README.md - 7.4KB, 297 lines

Your main documentation hub
✓ System overview
✓ Quick start guide
✓ API reference
✓ Usage examples
✓ Technical specs

index.html - 8.2KB, 333 lines

Interactive visual gallery
✓ Browse all glyphs
✓ Adjust block size
✓ Dark theme UI
✓ Responsive layout

📖 Reference Files

COMPLETE-REFERENCE.md - 30KB, 1380 lines

Everything about every glyph
✓ All 26 letters (A-Z)
✓ All 6 symbols
✓ ASCII grids
✓ SVG previews
✓ Usage examples

QUICK-REFERENCE.md - 5.6KB, 233 lines

Fast lookup and patterns
✓ Character by width
✓ Common patterns
✓ One-liner examples
✓ Cheat sheet format

📊 Meta Files

SUMMARY.md - 8.3KB, 332 lines

Documentation overview
✓ File descriptions
✓ Statistics
✓ Navigation guide
✓ Technical details

START-HERE.md - This file

Navigation guide
✓ Quick links
✓ Recommended paths
✓ File descriptions

🎨 What’s Available

Characters

• 26 Letters: A-Z (uppercase only)
• 6 Symbols: - | ’ ” ? !
• Total: 32 glyphs

Formats

• Markdown: 5 files (README, Complete, Quick, Summary, Start Here)
• HTML: 1 interactive gallery
• SVG: 6 sample files

Documentation

• 2,700+ lines of documentation
• ~70KB total size
• 100% coverage of all glyphs

💡 Tips

For Quick Answers

→ Use QUICK-REFERENCE.md lookup tables

For Copy-Paste

→ Check code examples in QUICK-REFERENCE.md

For Visual Preview

→ Open index.html in any browser

For Complete Details

→ Browse COMPLETE-REFERENCE.md

For Understanding

→ Read README.md from start to finish

🚀 Common Tasks

”I want to render text”

import { blockyTextToSVG } from './pages/src/utils/alphabet';
const svg = blockyTextToSVG('HELLO');

📖 More examples: README.md

”What characters are available?”

Letters: A-Z
Symbols: - | ' " ? !

📖 Full list: QUICK-REFERENCE.md

”How wide is letter X?”

See lookup table in QUICK-REFERENCE.md

”Show me all glyphs”

Open index.html or browse COMPLETE-REFERENCE.md

”What colors are used?”

Dark theme (default):
- PRIMARY: #F1ECEC
- SECONDARY: #B7B1B1
- TERTIARY: #4B4646

📖 More details: README.md

🎯 Recommended Reading Order

Quick Path (15 minutes)

1. README.md → Quick Start section
2. index.html → Browse visually
3. QUICK-REFERENCE.md → Copy examples

Thorough Path (45 minutes)

1. README.md → Full read
2. COMPLETE-REFERENCE.md → Browse glyphs
3. QUICK-REFERENCE.md → Study patterns
4. index.html → Explore interactively

Deep Dive (2+ hours)

1. SUMMARY.md → Understand structure
2. README.md → Technical specs
3. COMPLETE-REFERENCE.md → All glyphs
4. Source code → Implementation details

📚 External Resources

Source Code

• pages/src/utils/alphabet/ - Glyph definitions
• pages/src/utils/alphabet/glyphs/ - Individual glyph files
• pages/src/utils/blocky-text-to-svg.ts - Rendering engine

Sample Files

• pages/samples/*.svg - Pre-generated examples

Scripts

• pages/generate-glyph-docs.mjs - Doc generator
• pages/generate-samples.mjs - SVG generator

❓ FAQ

Q: Can I use lowercase letters?
A: No, only uppercase A-Z is supported.

Q: Are numbers available?
A: Not yet. Numbers 0-9 are planned for future releases.

Q: How do I change colors?
A: Use the theme option: blockyTextToSVG('TEXT', { theme: 'dark' }) or 'light'

Q: Can I adjust the size?
A: Yes, use blockSize option: blockyTextToSVG('TEXT', { blockSize: 12 })

Q: Where are ASCII grids?
A: See COMPLETE-REFERENCE.md for grids of all glyphs

Q: Is there an interactive demo?
A: Yes! Open index.html in your browser

🎉 Ready to Start?

Pick your path above and dive in!

Most popular starting points:

1. 🌟 index.html - Visual exploration
2. 📖 README.md - Comprehensive guide
3. ⚡ QUICK-REFERENCE.md - Fast lookup

---

💡 Tip: Bookmark this page for easy navigation!

Last Updated: November 17, 2025