60f39ed961
- Ported Minimalist templates to JSON (Swiss Grid, Brutalist, etc.) - Ported Tech templates to JSON (SaaS, Terminal, Cyberpunk, etc.) - Ported Creative templates to JSON (Art Gallery, Zine, Pop Art, etc.) - Ported Industrial templates to JSON (Blueprint, Factory, Schematic, etc.) - Ported Nature templates to JSON (Botanical, Ocean, Mountain, etc.) - Ported Lifestyle templates to JSON (Cookbook, Travel, Coffee House, etc.) - Ported Vintage templates to JSON (Art Deco, Medieval, Retro 80s, etc.) - Updated README.md to reflect the new JSON-based style system (example configuration and contribution workflow) - Completed migration of over 150 styles to the new architecture
111 lines
3.5 KiB
Markdown
111 lines
3.5 KiB
Markdown
# TypoGenie Templates
|
|
|
|
This folder contains all the document style templates for TypoGenie. Templates are organized by category.
|
|
|
|
## Creating Custom Templates
|
|
|
|
You can create your own templates! Just create a JSON file with the following structure:
|
|
|
|
```json
|
|
{
|
|
"id": "my-custom-style",
|
|
"name": "My Custom Style",
|
|
"category": "Custom",
|
|
"description": "A brief description of this style",
|
|
"vibe": "Keywords describing the mood",
|
|
"googleFontsImport": "https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap",
|
|
"wordConfig": {
|
|
"heading1": {
|
|
"font": "Your Font",
|
|
"size": 28,
|
|
"color": "000000",
|
|
"bold": true,
|
|
"align": "left",
|
|
"spacing": { "before": 400, "after": 200, "line": 240 }
|
|
},
|
|
"heading2": {
|
|
"font": "Your Font",
|
|
"size": 14,
|
|
"color": "333333",
|
|
"bold": true,
|
|
"align": "left",
|
|
"spacing": { "before": 280, "after": 140, "line": 240 }
|
|
},
|
|
"body": {
|
|
"font": "Your Font",
|
|
"size": 11,
|
|
"color": "333333",
|
|
"align": "left",
|
|
"spacing": { "before": 0, "after": 180, "line": 300 }
|
|
},
|
|
"accentColor": "FF5733"
|
|
},
|
|
"previewCss": "font-family: 'Your Font', sans-serif; h1 { font-size: 28pt; font-weight: 700; color: #000; margin-bottom: 20px; }"
|
|
}
|
|
```
|
|
|
|
## Template Structure
|
|
|
|
### Required Fields
|
|
|
|
- **id**: Unique identifier (lowercase, no spaces)
|
|
- **name**: Display name for the UI
|
|
- **category**: Category for grouping (e.g., "Minimalist", "Editorial", "Tech")
|
|
- **description**: Short description shown in the UI
|
|
- **vibe**: Keywords describing the style
|
|
- **googleFontsImport**: URL to import fonts from Google Fonts
|
|
- **wordConfig**: Configuration for Word document generation
|
|
- **previewCss**: CSS for the preview pane
|
|
|
|
### Word Config Options
|
|
|
|
For each style (heading1, heading2, body):
|
|
|
|
- **font**: Font family name (must match Google Fonts import)
|
|
- **size**: Font size in points
|
|
- **color**: Hex color without # (e.g., "000000")
|
|
- **bold**: true/false
|
|
- **italic**: true/false
|
|
- **underline**: true/false
|
|
- **allCaps**: true/false
|
|
- **smallCaps**: true/false
|
|
- **tracking**: Letter spacing in twips (1/20 of a point)
|
|
- **align**: "left", "center", "right", "both" (justify)
|
|
- **spacing**: Object with `before`, `after`, and `line` (all in twips)
|
|
- **border**: Optional border configuration
|
|
- **shading**: Optional background shading
|
|
|
|
### Where to Place Templates
|
|
|
|
#### For Personal Use (Recommended)
|
|
Place templates in the user data folder:
|
|
- Windows: `%APPDATA%/TypoGenie/TypoGenie-Data/templates/`
|
|
- macOS: `~/Library/Application Support/TypoGenie/TypoGenie-Data/templates/`
|
|
- Linux: `~/.config/TypoGenie/TypoGenie-Data/templates/`
|
|
|
|
Or use the "Open Templates Folder" button in the app.
|
|
|
|
#### For Distribution
|
|
Place templates in this folder (src-tauri/templates/) organized by category subfolders, then rebuild the app.
|
|
|
|
## Categories
|
|
|
|
- **Core**: Essential versatile styles
|
|
- **Minimalist**: Clean, simple designs
|
|
- **Editorial**: Magazine and newspaper styles
|
|
- **Corporate**: Business and professional
|
|
- **Tech**: Technology and startup
|
|
- **Creative**: Bold and artistic
|
|
- **Vintage**: Retro and nostalgic
|
|
- **Lifestyle**: Elegant and refined
|
|
- **Academic**: Scholarly and formal
|
|
- **Industrial**: Raw and utilitarian
|
|
|
|
## Tips
|
|
|
|
1. Test your template with various content types (headings, lists, code blocks, etc.)
|
|
2. Ensure the Word config and preview CSS match for consistency
|
|
3. Use web-safe fonts or Google Fonts for best compatibility
|
|
4. Colors should be hex without the # prefix in wordConfig
|
|
5. Colors should be hex WITH the # prefix in previewCss
|