feat: port all template categories to JSON format
- 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
This commit is contained in:
TypoGenie
186
src-tauri/TEMPLATES-README.md
Normal file
186
src-tauri/TEMPLATES-README.md
Normal file
@@ -0,0 +1,186 @@
|
||||
# TypoGenie Templates
|
||||
|
||||
Templates in TypoGenie are stored as JSON files in the `TypoGenie-Data/templates/` folder.
|
||||
|
||||
## Folder Structure
|
||||
|
||||
```
|
||||
TypoGenie-Data/
|
||||
└── templates/
|
||||
├── minimalist/
|
||||
│ ├── swiss-grid.json
|
||||
│ └── minimalist-white.json
|
||||
├── tech/
|
||||
│ ├── tech-startup.json
|
||||
│ └── code-editor.json
|
||||
└── my-category/ ← Create new folders for custom categories!
|
||||
└── my-template.json
|
||||
```
|
||||
|
||||
- Each **subfolder** in `templates/` is a category
|
||||
- Each **.json file** in a category folder is a template
|
||||
- Categories and templates are automatically discovered when the app loads
|
||||
|
||||
## Template JSON Format
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "my-template",
|
||||
"name": "My Template Name",
|
||||
"category": "My Category",
|
||||
"description": "A short description of this template",
|
||||
"vibe": "Keywords describing the style",
|
||||
"googleFontsImport": "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
|
||||
"wordConfig": {
|
||||
"heading1": {
|
||||
"font": "Inter",
|
||||
"size": 28,
|
||||
"color": "000000",
|
||||
"bold": true,
|
||||
"align": "left",
|
||||
"spacing": { "before": 400, "after": 200, "line": 240 }
|
||||
},
|
||||
"heading2": {
|
||||
"font": "Inter",
|
||||
"size": 16,
|
||||
"color": "333333",
|
||||
"bold": true,
|
||||
"align": "left",
|
||||
"spacing": { "before": 320, "after": 160, "line": 240 }
|
||||
},
|
||||
"body": {
|
||||
"font": "Inter",
|
||||
"size": 10,
|
||||
"color": "444444",
|
||||
"align": "left",
|
||||
"spacing": { "before": 0, "after": 160, "line": 280 }
|
||||
},
|
||||
"accentColor": "6366F1"
|
||||
},
|
||||
"previewCss": "font-family: 'Inter', sans-serif; h1 { font-size: 28pt; font-weight: 700; } h2 { font-size: 16pt; font-weight: 700; } p { font-size: 10pt; line-height: 1.6; }"
|
||||
}
|
||||
```
|
||||
|
||||
## Field Reference
|
||||
|
||||
### Required Fields
|
||||
|
||||
- **id**: Unique identifier for the template (used in filenames, no spaces)
|
||||
- **name**: Display name shown in the app
|
||||
- **category**: Category name (should match the folder name)
|
||||
- **description**: Brief description of the template
|
||||
- **wordConfig**: Microsoft Word styling configuration
|
||||
- **heading1**: Style for H1 headings
|
||||
- **heading2**: Style for H2 headings
|
||||
- **body**: Style for body text
|
||||
- **accentColor**: Accent color for borders and highlights (hex, no #)
|
||||
- **previewCss**: CSS for the live preview (single line, no line breaks)
|
||||
|
||||
### Optional Fields
|
||||
|
||||
- **vibe**: Descriptive keywords for the template
|
||||
- **googleFontsImport**: Google Fonts URL for web preview
|
||||
|
||||
## Text Configuration Options
|
||||
|
||||
### Font Settings
|
||||
- **font**: Font family name (must be installed on user's system for Word)
|
||||
- **size**: Font size in points (pt)
|
||||
- **color**: Hex color code (without #)
|
||||
- **bold**: true/false
|
||||
- **italic**: true/false
|
||||
- **allCaps**: true/false (transform text to uppercase)
|
||||
- **tracking**: Character spacing (in twips, optional)
|
||||
- **align**: "left", "center", "right", or "both" (justify)
|
||||
|
||||
### Spacing
|
||||
- **spacing.before**: Space before paragraph (in twips)
|
||||
- **spacing.after**: Space after paragraph (in twips)
|
||||
- **spacing.line**: Line spacing (in twips, 240 = single, 360 = 1.5, 480 = double)
|
||||
|
||||
### Borders (Optional)
|
||||
```json
|
||||
"border": {
|
||||
"top": { "color": "000000", "space": 10, "style": "single", "size": 12 },
|
||||
"bottom": { "color": "000000", "space": 10, "style": "single", "size": 12 },
|
||||
"left": { "color": "000000", "space": 10, "style": "single", "size": 24 },
|
||||
"right": { "color": "000000", "space": 10, "style": "single", "size": 12 }
|
||||
}
|
||||
```
|
||||
|
||||
Border styles: `"single"`, `"double"`, `"dotted"`, `"dashed"`, `"thick"`
|
||||
|
||||
### Shading/Background (Optional)
|
||||
```json
|
||||
"shading": {
|
||||
"fill": "F0F0F0",
|
||||
"color": "auto",
|
||||
"style": "clear"
|
||||
}
|
||||
```
|
||||
|
||||
## Adding Custom Templates
|
||||
|
||||
1. Create a new folder in `TypoGenie-Data/templates/` (or use existing)
|
||||
2. Create a `.json` file with your template configuration
|
||||
3. Click the **Refresh** button in the app, or restart the app
|
||||
4. Your template will appear in the style selector!
|
||||
|
||||
## Tips
|
||||
|
||||
- Use Google Fonts that have good Microsoft Word equivalents
|
||||
- Test your template with both A4 and Letter paper sizes
|
||||
- The previewCss should match the wordConfig styling as closely as possible
|
||||
- Use hex colors without the # prefix
|
||||
- Keep template IDs lowercase with hyphens (e.g., `my-awesome-template`)
|
||||
|
||||
## Example: Dark Theme Template
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "dark-mode",
|
||||
"name": "Dark Mode",
|
||||
"category": "Modern",
|
||||
"description": "Dark theme with high contrast for reduced eye strain",
|
||||
"vibe": "Dark, Modern, Accessible",
|
||||
"googleFontsImport": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap",
|
||||
"wordConfig": {
|
||||
"heading1": {
|
||||
"font": "Inter",
|
||||
"size": 32,
|
||||
"color": "FFFFFF",
|
||||
"bold": true,
|
||||
"align": "left",
|
||||
"spacing": { "before": 400, "after": 200, "line": 240 },
|
||||
"shading": { "fill": "1A1A1A", "color": "auto", "style": "clear" }
|
||||
},
|
||||
"heading2": {
|
||||
"font": "Inter",
|
||||
"size": 18,
|
||||
"color": "E0E0E0",
|
||||
"bold": true,
|
||||
"align": "left",
|
||||
"spacing": { "before": 320, "after": 160, "line": 240 }
|
||||
},
|
||||
"body": {
|
||||
"font": "Inter",
|
||||
"size": 11,
|
||||
"color": "CCCCCC",
|
||||
"align": "left",
|
||||
"spacing": { "before": 0, "after": 160, "line": 280 },
|
||||
"shading": { "fill": "121212", "color": "auto", "style": "clear" }
|
||||
},
|
||||
"accentColor": "6366F1"
|
||||
},
|
||||
"previewCss": "font-family: 'Inter', sans-serif; background: #121212; color: #CCCCCC; h1 { font-size: 32pt; font-weight: 700; color: #FFFFFF; background: #1A1A1A; padding: 16px; margin-bottom: 24px; } h2 { font-size: 18pt; font-weight: 700; color: #E0E0E0; margin-top: 32px; margin-bottom: 16px; } p { font-size: 11pt; line-height: 1.6; color: #CCCCCC; margin-bottom: 14px; }"
|
||||
}
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
- **Template not showing**: Check that the JSON is valid (use a JSON validator)
|
||||
- **Fonts not working**: Ensure the font is installed on your system
|
||||
- **Preview looks different from Word**: Adjust previewCss to match wordConfig
|
||||
- **Category not showing**: Make sure the folder contains at least one valid .json file
|
||||
|
||||
Click **Refresh** in the app to reload templates without restarting!
|
||||
Reference in New Issue
Block a user