Skip to content

FEATURES.md

Latest commit

 

History

History
175 lines (154 loc) · 10.2 KB

FEATURES.md

File metadata and controls

175 lines (154 loc) · 10.2 KB

SnapCode Features Overview

┌─────────────────────────────────────────────────────────────────────────────┐
│                              SNAPCODE                                        │
│                    "ngode-ngide kode ngadi-ngadi"                           │
│                                                                              │
│              56KB Buildless Markdown-to-Image Generator                      │
│                      ✓ Auto-saved locally                                   │
└─────────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────────┐
│  EDITOR PANEL                          │  PREVIEW PANEL                      │
│ ┌─────────────────────────────────┐    │ ┌─────────────────────────────────┐ │
│ │ [Copy]                          │    │ │ [Copy] [Copy Image] [Export PNG]│ │
│ ├─────────────────────────────────┤    │ │ [⛶ Fullscreen] [🖨 Print]       │ │
│ │                                 │    │ ├─────────────────────────────────┤ │
│ │  # Your Markdown Here           │    │ │ ┌─────────────────────────────┐ │ │
│ │                                 │    │ │ │ ● ● ●  README.md            │ │ │
│ │  - Bullet points ✓              │    │ │ ├─────────────────────────────┤ │ │
│ │  1. Numbered lists ✓            │    │ │ │                             │ │ │
│ │  ```code blocks```              │    │ │ │  Your Markdown Here         │ │ │
│ │  $math formulas$                │    │ │ │                             │ │ │
│ │  ```mermaid diagrams```         │    │ │ │  • Bullet points            │ │ │
│ │                                 │    │ │ │  1. Numbered lists          │ │ │
│ │  📁 Drag & drop files here      │    │ │ │                             │ │ │
│ │                                 │    │ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────┘    │ ├─────────────────────────────────┤ │
│                                        │ │ [↶ Undo] [↷ Redo] 3/5  [Clear] │ │
│                                        │ └─────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────────┐
│  SETTINGS & OPTIONS                                                          │
│ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ ┌───────────────────┐ │
│ │ Theme         │ │ Window Style  │ │ Font Size     │ │ Features          │ │
│ │ ○ Dracula     │ │ ○ macOS       │ │ [14px    ▼]   │ │ ☑ Fira Code       │ │
│ │ ○ Monokai     │ │ ○ Windows 11  │ │               │ │ ☑ Mermaid         │ │
│ │ ○ GitHub      │ │ ○ Windows 10  │ │               │ │ ☑ KaTeX           │ │
│ │ ○ Nord        │ │ ○ ChromeOS    │ │               │ │                   │ │
│ └───────────────┘ └───────────────┘ └───────────────┘ └───────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘

✅ Implemented Features

🎨 Core Features

Feature Status Description
Markdown Rendering ✅ Full markdown support via marked.js
Syntax Highlighting ✅ Prism.js with multiple languages
Code Themes ✅ Dracula, Monokai, GitHub, Nord
Window Styles ✅ macOS, Windows 11/10, ChromeOS
Fira Code Ligatures ✅ Beautiful code typography
Bullet Points ✅ Proper list styling (fixed)
Numbered Lists ✅ Proper ordered list styling

📊 Advanced Rendering

Feature Status Description
Mermaid Diagrams ✅ Flowcharts, sequence diagrams, etc
KaTeX Math ✅ LaTeX math formulas
Lazy Loading ✅ Heavy libs loaded on-demand

💾 Data Persistence

Feature Status Description
Auto-save Content ✅ Saves to localStorage every 500ms
Save Settings ✅ Theme, font size, preferences
Undo/Redo ✅ 50-step history with Ctrl+Z/Y
Clear Saved ✅ Reset to default content

🖼️ Export Options

Feature Status Description
Export PNG ✅ Download as PNG image
Copy Image ✅ Copy to clipboard
Copy Text ✅ Copy markdown source
Print View ✅ Print-friendly CSS

⌨️ Keyboard Shortcuts

Shortcut Action
Ctrl+E Export PNG
Ctrl+Shift+C Copy Image
Ctrl+Shift+T Copy Text
Ctrl+Z Undo
Ctrl+Y / Ctrl+Shift+Z Redo
F11 / Ctrl+Shift+F Toggle Fullscreen
Escape Exit Fullscreen

🎯 UX Polish

Feature Status Description
Fullscreen Mode ✅ Distraction-free preview
Drag & Drop ✅ Drop files to import
Visual Drag Feedback ✅ Purple ring on drag-over
History Indicator ✅ Shows undo/redo position
Auto-save Indicator ✅ "✓ Auto-saved locally"

♿ Accessibility

Feature Status Description
ARIA Labels ✅ Screen reader support
Skip to Content ✅ Keyboard navigation
Focus Indicators ✅ Visible focus rings
Semantic HTML ✅ Proper heading structure

⚡ Performance

Feature Status Description
Lazy Load KaTeX ✅ ~300KB saved on initial load
Lazy Load Mermaid ✅ ~500KB saved on initial load
Service Worker ✅ Offline support
FOUC Prevention ✅ No flash of unstyled content

📁 File Structure

snapcode.me/
├── index.html          # Single-file app (56KB)
├── sw.js               # Service Worker
├── static/
│   └── favicon.ico
├── content/            # Sample markdown files
├── LICENSE             # MIT
├── README.md
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
├── TODO.md
├── OPTIMIZATION.md
└── FEATURES.md         # This file

🚀 Tech Stack

  • Alpine.js - Reactive UI (13KB)
  • Tailwind CSS - Styling (CDN)
  • marked.js - Markdown parsing
  • DOMPurify - XSS protection
  • Prism.js - Syntax highlighting
  • html2canvas - Image export
  • Mermaid - Diagrams (lazy)
  • KaTeX - Math formulas (lazy)

📊 Bundle Size

┌────────────────────────────────────────┐
│ Initial Load (Critical Path)           │
├────────────────────────────────────────┤
│ index.html        ~70KB                │
│ Alpine.js         ~13KB                │
│ Tailwind CSS      ~CDN                 │
│ marked.js         ~40KB                │
│ DOMPurify         ~20KB                │
│ Prism.js          ~30KB                │
│ html2canvas       ~200KB               │
├────────────────────────────────────────┤
│ Total Initial     ~373KB               │
└────────────────────────────────────────┘

┌────────────────────────────────────────┐
│ Lazy Loaded (On Demand)                │
├────────────────────────────────────────┤
│ Mermaid           ~500KB               │
│ KaTeX             ~300KB               │
├────────────────────────────────────────┤
│ Saved on initial  ~800KB ✓             │
└────────────────────────────────────────┘

Last updated: December 2024