lashman/typogenie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

docs: release 1.0.0

Browse Source 
- Updated README to reflect Windows Portable focus
- Removed references to Mac/Linux builds
- Updated tech stack and project structure documentation
- Updated Contributing section
This commit is contained in:
TypoGenie
2026-02-01 19:17:10 +02:00
parent 95e423f632
commit f1d9feb14f
2 changed files with 45 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
README.md
View File

@@ -22,7 +22,7 @@
</p>
<p>
<img src="https://img.shields.io/badge/Desktop_App-Windows%20%7C%20macOS%20%7C%20Linux-blue?style=for-the-badge" alt="Desktop Apps" />
<img src="https://img.shields.io/badge/Desktop_App-Windows_Portable-blue?style=for-the-badge&logo=windows&logoColor=white" alt="Windows App" />
</p>
<p>
@@ -81,7 +81,7 @@ In a world where document formatting tools are increasingly locked behind paywal
- **🎨 150+ Typography Styles** — Curated across 8 aesthetic categories
- **📐 Multiple Paper Sizes** — A4 and Letter formats supported
- **💾 Local Processing** — Your documents never leave your machine
- **🖥️ Native Desktop Apps** — Built with Tauri for Windows, macOS, and Linux
- **🖥️ Native Desktop App** — Built with Tauri for Windows (Portable EXE)
- **📥 One-Click Export** — Clean `.docx` files ready for Microsoft Word
### 🏛️ Style Categories
@@ -157,16 +157,13 @@ Every style includes meticulously configured:
Just download and run:
- 🪟 **Windows**: `TypoGenie.exe` — Single executable, runs immediately
- 🍎 **macOS**: `TypoGenie.app` — Drag and run
- 🐧 **Linux**: `TypoGenie.AppImage` — Make executable and run
**How it works:**
```
📁 Your Folder/
├── 🚀 TypoGenie.exe ← Run this
└── 📂 TypoGenie-Data/ ← Auto-created on first run
├── config.json ← Your settings
└── cache/ ← Temporary files
├── 📂 templates/ ← JSON templates (must be next to EXE)
└── 📂 TypoGenie-Data/ ← Auto-created on first run (settings/cache)
```
✅ **No installer** — Just double-click the EXE
@@ -211,24 +208,17 @@ npm run desktop
npm run desktop:build
```
**Build outputs:**
**Build output:**
| Platform | Output Location | Result |
|----------|----------------|--------|
| **Windows** | `src-tauri/target/release/typogenie.exe` | ⚡ **Portable EXE** — Run immediately, no install |
| **Windows** | `src-tauri/target/release/bundle/nsis/*.exe` | 📦 NSIS Installer (optional) |
| **macOS** | `src-tauri/target/release/bundle/dmg/*.dmg` | 🍎 DMG with App bundle |
| **Linux** | `src-tauri/target/release/bundle/appimage/*.AppImage` | 🐧 Portable AppImage |
| **Windows** | `src-tauri/target/release/TypoGenie.exe` | ⚡ **Portable EXE** — Run immediately, no install |
**For the truly portable Windows experience:**
```bash
# After building, grab the raw EXE:
copy src-tauri\target\release\typogenie.exe "C:\Path\To\Your\Portable\Folder\"
# Run it:
"C:\Path\To\Your\Portable\Folder\typogenie.exe"
# Creates TypoGenie-Data/ folder next to EXE automatically
```
1. Build the release (`npm run tauri build`).
2. Copy `TypoGenie.exe` from `src-tauri/target/release/` to a new folder.
3. **CRITICAL**: Copy the `src-tauri/templates/` folder to that SAME folder.
4. Run `TypoGenie.exe`.
### Usage
@@ -273,42 +263,9 @@ copy src-tauri\target\release\typogenie.exe "C:\Path\To\Your\Portable\Folder\"
### Style System Deep Dive
Each style in TypoGenie is defined by a comprehensive configuration object:
Styles in TypoGenie are defined entirely in **JSON**, making them easy to edit and share.
```typescript
interface StyleOption {
id: string; // Unique identifier
name: string; // Display name
category: string; // Grouping category
description: string; // What this style evokes
vibe: string; // Emotional keywords
googleFontsImport: string; // Font resources
wordConfig: {
heading1: DocxStyleConfig; // H1 formatting rules
heading2: DocxStyleConfig; // H2 formatting rules
body: DocxStyleConfig; // Body text rules
accentColor: string; // Theme accent color
};
previewCss: string; // Web preview styling
}
```
**The Dual Rendering Challenge:**
TypoGenie maintains two parallel rendering paths for every style:
1. **Web Preview** — CSS-based preview in the browser
2. **DOCX Export** — Programmatic document generation via the `docx` library
This ensures WYSIWYG fidelity: what you see in the preview is what you get in Word.
### Adding Custom Styles
Want to contribute a new style to the collective? Here's how:
1. **Choose a Category** — Find the appropriate file in `/styles/`
2. **Define Your Style** — Create a complete `StyleOption` object:
**Template Structure (`.json`):**
```json
{
@@ -317,23 +274,10 @@ Want to contribute a new style to the collective? Here's how:
"category": "Creative",
"description": "A brief description of the aesthetic",
"vibe": "Keywords that capture the feeling",
"googleFontsImport": "https://fonts.googleapis.com/css2?family=YourFont&display=swap",
"googleFontsImport": "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap",
"typography": {
"fonts": {
"heading": "Your Font",
"body": "Your Body Font",
"code": "Your Code Font"
},
"colors": {
"text": "1a1a1a",
"textSecondary": "4a4a4a",
"background": "ffffff",
"accent": "6366f1",
"border": "e5e5e5",
"codeBg": "f3f4f6",
"blockquoteBg": "f9fafb",
"blockquoteBorder": "6366f1"
}
"fonts": { "heading": "Roboto", "body": "Roboto" },
"colors": { "text": "1a1a1a", "background": "ffffff", "accent": "6366f1" }
},
"elements": {
"h1": {
@@ -343,26 +287,26 @@ Want to contribute a new style to the collective? Here's how:
"bold": true,
"spacing": { "before": 24, "after": 12, "line": 1.2 }
},
"p": {
"font": "body",
"size": 11,
"color": "text",
"spacing": { "before": 0, "after": 10, "line": 1.5 }
}
// ... define other elements (h2-h6, blockquote, code, etc.)
},
"page": {
"margins": { "top": 72, "bottom": 72, "left": 72, "right": 72 },
"columns": 1,
"header": true,
"footer": true
...
}
}
```
3. **Save It** — Save as a `.json` file in `src-tauri/templates/<category>/`
4. **Build** — The app automatically loads JSON templates at runtime
5. **Share With All** — Submit a PR so everyone benefits!
**The Dual Rendering Architecture:**
TypoGenie maintains two parallel rendering paths:
1. **Web Preview** — Dynamically generates CSS from your JSON config on the fly.
2. **DOCX Export** — Programmatically builds Word styles using the exact same JSON config.
This ensures WYSIWYG fidelity: what you see in the preview is what you get in Word.
### Adding Custom Styles
Want to contribute a new style?
1. **Create a JSON file** in a folder inside `templates/` (e.g., `templates/my-category/my-style.json`).
2. **Define your style** using the schema above.
3. **Restart the app** (or click refresh) — TypoGenie automatically discovers all `.json` files in the `templates/` directory.
### Configuration Options
@@ -373,14 +317,6 @@ Want to contribute a new style to the collective? Here's how:
| **A4** | 210mm × 297mm | International use, academic papers |
| **Letter** | 8.5in × 11in | US/Canada, business documents |
#### Margins
All documents use generous, readable margins:
- **Top/Bottom:** 1 inch (25.4mm)
- **Left/Right:** 1.2 inches (30.5mm)
This follows established typographic best practices for comfortable reading.
<br/>
---
@@ -405,40 +341,24 @@ npm run tauri # Access Tauri CLI directly
```
typogenie/
├── 📁 src/ # Source code
│ ├── 📁 components/ # React components
├── 📁 src/ # Frontend source code (React)
│ ├── 📁 components/ # UI components
│ │ ├── FileUpload.tsx # Drag-and-drop upload zone
│ │ ├── StyleSelector.tsx # Style gallery with live preview
│ │ ├── Preview.tsx # Final preview & DOCX export
│ │ └── StylePreviewModal.tsx # (Optional) Modal preview
│ ├── 📁 styles/ # Typography style definitions
│ ├── 📄 main.tsx # React entry point
│ ├── 📄 App.tsx # Main application component
│ ├── 📄 types.ts # TypeScript interfaces
│ └── 📄 constants.ts # Configuration exports
│ │ ├── StyleSelector.tsx # Style gallery
│ │ └── Preview.tsx # Final preview & export
│ ├── 📁 services/ # Logic
│ │ ├── templateLoader.ts # Loads JSON templates via Rust
│ │ └── templateRenderer.ts # Generates CSS/DOCX from JSON
│ ├── 📁 hooks/ # React hooks
│ └── 📄 App.tsx # Main application component
├── 📁 src-tauri/ # Tauri desktop app
│ ├── 📁 src/ # Rust source code
│ ├── 📁 icons/ # App icons
│ ├── 📁 src/ # Rust backend code (filesystem access)
│ ├── 📁 templates/ # DEFAULT TEMPLATES (bundled with app)
│ │ ├── 📁 minimalist/
│ │ ├── 📁 tech/
│ │ └── ...
│ ├── 📄 Cargo.toml # Rust dependencies
│ └── 📄 tauri.conf.json # Tauri configuration
├── 📁 styles/ # Typography style definitions
│ ├── index.ts # Aggregates all categories
│ ├── minimalist.ts # 11 clean styles
│ ├── corporate.ts # 13 professional styles
│ ├── editorial.ts # Magazine aesthetics
│ ├── tech.ts # Modern tech vibes
│ ├── creative.ts # Artistic expressions
│ ├── vintage.ts # Historical elegance
│ ├── lifestyle.ts # Warm & personal
│ ├── industrial.ts # Technical & mechanical
│ ├── academic.ts # Scholarly formats
│ ├── volume1.ts # Legacy collection
│ └── volume2.ts # Extended collection
├── 📁 services/ # (Currently empty - local processing!)
├── 📄 App.tsx # Main application with state machine
├── 📄 types.ts # TypeScript interfaces
├── 📄 constants.ts # Configuration exports
├── 📄 index.html # Entry HTML with Tailwind CDN
└── 📄 vite.config.ts # Build configuration
```

BIN
TypoGenie-v1.0.0-Windows-Portable.zip Normal file
View File

Binary file not shown.