feat(templates): whatsapp-chat + notes-app cards, markup rollout

docs/.vitepress/config.ts

@@ -65,7 +65,7 @@ export default defineConfig({
           text: 'Social Media',
           collapsed: true,
           items: [
-            { text: 'Social Quote', link: '/templates/social-quote' },            { text: 'Dev Quote', link: '/templates/dev-quote' },            { text: 'Twitter/X Quote', link: '/templates/twitter-quote' },            { text: 'TikTok Quote', link: '/templates/tiktok-quote' },            { text: 'Instagram Story', link: '/templates/instagram-story' },            { text: 'LinkedIn Card', link: '/templates/linkedin-card' },            { text: 'Pinterest Pin', link: '/templates/pinterest-pin' },            { text: 'Social Poll', link: '/templates/social-poll' },            { text: 'Tweet Embed', link: '/templates/tweet-embed' }
+            { text: 'Social Quote', link: '/templates/social-quote' },            { text: 'Dev Quote', link: '/templates/dev-quote' },            { text: 'Twitter/X Quote', link: '/templates/twitter-quote' },            { text: 'TikTok Quote', link: '/templates/tiktok-quote' },            { text: 'WhatsApp Chat', link: '/templates/whatsapp-chat' },            { text: 'Notes App', link: '/templates/notes-app' },            { text: 'Instagram Story', link: '/templates/instagram-story' },            { text: 'LinkedIn Card', link: '/templates/linkedin-card' },            { text: 'Pinterest Pin', link: '/templates/pinterest-pin' },            { text: 'Social Poll', link: '/templates/social-poll' },            { text: 'Tweet Embed', link: '/templates/tweet-embed' }
           ],
         },
         {

docs/templates/index.md

@@ -759,6 +759,20 @@ Cosy ships with **148 templates** out of the box. Browse the gallery below, or u
     <span class="dims">1080×1350</span>
   </div>
 </a>
+<a href="./whatsapp-chat" class="template-card">
+  <img src="https://s3.ajianaz.dev/hermes/codecoradev/cosy/preview/whatsapp-chat.png" alt="WhatsApp Chat" loading="lazy" />
+  <div class="template-info">
+    <h3>WhatsApp Chat</h3>
+    <span class="dims">1080×1350</span>
+  </div>
+</a>
+<a href="./notes-app" class="template-card">
+  <img src="https://s3.ajianaz.dev/hermes/codecoradev/cosy/preview/notes-app.png" alt="Notes App" loading="lazy" />
+  <div class="template-info">
+    <h3>Notes App</h3>
+    <span class="dims">1080×1350</span>
+  </div>
+</a>
 <a href="./rate-limit" class="template-card">
   <img src="https://s3.ajianaz.dev/hermes/codecoradev/cosy/preview/rate-limit.png" alt="Rate Limit" loading="lazy" />
   <div class="template-info">

docs/templates/notes-app.md

@@ -0,0 +1,50 @@
+# Notes App
+
+## Preview
+
+![Notes App](https://s3.ajianaz.dev/hermes/codecoradev/cosy/preview/notes-app.png)
+
+## Dimensions
+
+- **Width:** 1080px
+- **Height:** 1350px
+- **Aspect Ratio:** 1080:1350
+
+## Fonts
+
+- Inter
+
+## Slide Fields
+
+| Field | Type | Required | Max Length |
+|-------|------|----------|------------|
+| `title` | text | — | 40 |
+| `body` | text | ✅ | 400 |
+| `note_bg` | color | — | — |
+| `title_color` | color | — | — |
+| `body_color` | color | — | — |
+| `note_timestamp` | text | — | 30 |
+
+`body` supports inline markup: `*bold*`, `_italic_`, `*color:#hex*...*color*`.
+`note_bg` defaults to the iOS notes yellow (`#fef9c3`).
+
+## Brand Fields
+
+| Field | Type | Required | Default |
+|-------|------|----------|---------|
+| `brand_name` | text | ✅ | — |
+| `brand_handle` | text | ✅ | — |
+| `bg_color` | bg | — | #1e1e2e |
+| `bg_color_end` | bg | — | #11111b |
+| `accent_color` | text | — | #cba6f7 |
+| `accent_color_end` | text | — | #89b4fa |
+| `bg_image` | image | — | — |
+| `bg_image_opacity` | number | — | 0.15 |
+| `bg_overlay_opacity` | number | — | 0.7 |
+| `logo` | image | — | — |
+
+## Usage
+
+```bash
+cosy render --template notes-app --data input.json --output output.png
+```

docs/templates/whatsapp-chat.md

@@ -0,0 +1,59 @@
+# WhatsApp Chat
+
+## Preview
+
+![WhatsApp Chat](https://s3.ajianaz.dev/hermes/codecoradev/cosy/preview/whatsapp-chat.png)
+
+## Dimensions
+
+- **Width:** 1080px
+- **Height:** 1350px
+- **Aspect Ratio:** 1080:1350
+
+## Fonts
+
+- Inter
+
+## Slide Fields
+
+| Field | Type | Required | Max Length |
+|-------|------|----------|------------|
+| `contact_name` | text | — | 24 |
+| `contact_status` | text | — | 24 |
+| `text_color` | color | — | — |
+| `m1_text` | text | — | 120 |
+| `m1_side` | text | — | 5 |
+| `m2_text` | text | — | 120 |
+| `m2_side` | text | — | 5 |
+| `m3_text` | text | — | 120 |
+| `m3_side` | text | — | 5 |
+| `m4_text` | text | — | 120 |
+| `m4_side` | text | — | 5 |
+| `m5_text` | text | — | 120 |
+| `m5_side` | text | — | 5 |
+| `m6_text` | text | — | 120 |
+| `m6_side` | text | — | 5 |
+
+Message fields support inline markup: `*bold*`, `_italic_`, `*color:#hex*...*color*`.
+Each `mN_side` is `left` (default) or `right`.
+
+## Brand Fields
+
+| Field | Type | Required | Default |
+|-------|------|----------|---------|
+| `brand_name` | text | ✅ | — |
+| `brand_handle` | text | ✅ | — |
+| `bg_color` | bg | — | #1e1e2e |
+| `bg_color_end` | bg | — | #11111b |
+| `accent_color` | text | — | #cba6f7 |
+| `accent_color_end` | text | — | #89b4fa |
+| `bg_image` | image | — | — |
+| `bg_image_opacity` | number | — | 0.15 |
+| `bg_overlay_opacity` | number | — | 0.7 |
+| `logo` | image | — | — |
+
+## Usage
+
+```bash
+cosy render --template whatsapp-chat --data input.json --output output.png
+```

templates/notes-app/defaults.json

@@ -0,0 +1,18 @@
+{
+  "brand": {
+    "brand_name": "ajianaz",
+    "brand_handle": "@ajianaz",
+    "bg_color": "#1e1e2e",
+    "bg_color_end": "#11111b",
+    "accent_color": "#cba6f7",
+    "accent_color_end": "#89b4fa",
+    "show_brand": false
+  },
+  "slides": [
+    {
+      "title": "Catatan penting",
+      "body": " inget ya: *gaji bukan ukuran value kamu*. value itu pas kamu bisa bilang *nggak* ke hal yang _nggak ngerespon_. sisanya cuma _noise_.",
+      "note_timestamp": "Today 21:14"
+    }
+  ]
+}

templates/notes-app/schema.json

@@ -0,0 +1,108 @@
+{
+  "id": "notes-app",
+  "name": "Notes App",
+  "dimensions": {
+    "width": 1080,
+    "height": 1350
+  },
+  "fonts": [
+    "Inter"
+  ],
+  "brand_fields": {
+    "show_brand": {
+      "type": "boolean",
+      "required": false,
+      "default": false,
+      "description": "Show brand name/handle watermark at bottom. Default: false."
+    },
+    "brand_name": {
+      "type": "text",
+      "required": true,
+      "max": 30
+    },
+    "brand_handle": {
+      "type": "text",
+      "required": true,
+      "max": 30
+    },
+    "bg_color": {
+      "type": "bg",
+      "required": false,
+      "default": "#1e1e2e"
+    },
+    "bg_color_end": {
+      "type": "bg",
+      "required": false,
+      "default": "#11111b"
+    },
+    "accent_color": {
+      "type": "text",
+      "required": false,
+      "default": "#cba6f7"
+    },
+    "accent_color_end": {
+      "type": "text",
+      "required": false,
+      "default": "#89b4fa"
+    },
+    "bg_image": {
+      "type": "image",
+      "required": false,
+      "description": "Background image — local path or http(s) URL (PNG/JPG/WebP)."
+    },
+    "bg_image_opacity": {
+      "type": "number",
+      "required": false,
+      "default": 0.15,
+      "description": "Opacity of the background image (0.0-1.0)."
+    },
+    "bg_overlay_opacity": {
+      "type": "number",
+      "required": false,
+      "default": 0.7,
+      "description": "Opacity of the gradient overlay when bg_image is set. Default: 0.7."
+    },
+    "logo": {
+      "type": "image",
+      "required": false,
+      "description": "Brand logo path (PNG/SVG). Rendered at bottom-right corner."
+    }
+  },
+  "slide_fields": {
+    "title": {
+      "type": "text",
+      "required": false,
+      "max": 40,
+      "description": "Note title (first line, bold)."
+    },
+    "body": {
+      "type": "text",
+      "required": true,
+      "max": 400,
+      "wrap_width": 34,
+      "options": ["markup"],
+      "description": "Note body text. Supports *bold*, _italic_, *color:#hex*...*color*."
+    },
+    "note_bg": {
+      "type": "color",
+      "required": false,
+      "description": "Note paper color (default iOS yellow #fef9c3)."
+    },
+    "title_color": {
+      "type": "color",
+      "required": false,
+      "description": "Title text color (default #1e1e2e)."
+    },
+    "body_color": {
+      "type": "color",
+      "required": false,
+      "description": "Body text color (default #3a3a3c)."
+    },
+    "note_timestamp": {
+      "type": "text",
+      "required": false,
+      "max": 30,
+      "description": "Timestamp text in the window bar (default 'Today')."
+    }
+  }
+}

templates/quote-stack/schema.json

@@ -80,7 +80,10 @@
       "type": "text",
       "required": true,
       "max": 120,
-      "wrap_width": 35
+      "wrap_width": 35,
+      "options": [
+        "markup"
+      ]
     },
     "q1_author": {
       "type": "text",
@@ -91,7 +94,10 @@
       "type": "text",
       "required": true,
       "max": 120,
-      "wrap_width": 35
+      "wrap_width": 35,
+      "options": [
+        "markup"
+      ]
     },
     "q2_author": {
       "type": "text",
@@ -102,7 +108,10 @@
       "type": "text",
       "required": true,
       "max": 120,
-      "wrap_width": 35
+      "wrap_width": 35,
+      "options": [
+        "markup"
+      ]
     },
     "q3_author": {
       "type": "text",