dokio-create-template 1.0.1 → 1.0.2

package/EXAMPLES.md

@@ -0,0 +1,609 @@
+# Template Examples
+
+This document provides real-world examples of templates you can create with `dokio-create-template`.
+
+---
+
+## Example 1: Event Flyer (PDF)
+
+### Generate the Template
+
+```bash
+dokio-create-template
+```
+
+**Answers:**
+- Template type: `PDF`
+- Template name: `Event Flyer`
+- Template ID: `event-flyer`
+- Subdomain: `marketing`
+- Output directory: `./event-flyer`
+- Prince version: `15`
+- Resizable: `Yes`
+- Dynamic pages: `No`
+
+### Customize data.yaml
+
+```yaml
+---
+name: event-flyer - Event Flyer
+mode: pdf
+prince_version: 15
+subdomain: marketing
+dimension_mode: mm
+resizable: true
+page_count: 1
+dimension_width: 210
+dimension_height: 297
+compositing_data: {}
+export_options:
+  downloadables:
+    hi_res:
+      title: Print-Ready PDF
+      renderer: pdf
+      marks: true
+      bleed: true
+fields_data:
+  event-title:
+    type: text
+    title: Event Title
+    default: Summer Music Festival
+    maximum_characters: 50
+  
+  event-date:
+    type: datepicker
+    title: Event Date
+    display_format: DD MMMM YYYY
+    minimum_date: today
+  
+  event-location:
+    type: text
+    title: Location
+    placeholder: Enter venue name
+  
+  event-description:
+    type: richtext
+    title: Description
+    toolbar:
+      - bold
+      - italic
+      - ul
+  
+  hero-image:
+    type: image
+    title: Hero Image
+    options:
+      min_width: 1240
+      min_height: 1754
+      crop:
+        allowed_aspect_ratio_options:
+          - custom
+  
+  brand-color:
+    type: colour
+    title: Brand Color
+    customisable: true
+    options:
+      'FF6B35': Orange
+      '004E89': Navy
+      'F7931E': Gold
+```
+
+---
+
+## Example 2: Email Newsletter (Email)
+
+### Generate the Template
+
+```bash
+dokio-create-template
+```
+
+**Answers:**
+- Template type: `Email`
+- Template name: `Weekly Newsletter`
+- Template ID: `weekly-newsletter`
+- Subdomain: `communications`
+- Output directory: `./weekly-newsletter`
+
+### Customize data.yaml
+
+```yaml
+---
+name: weekly-newsletter - Weekly Newsletter
+mode: email
+sendable: true
+subdomain: communications
+export_options:
+  downloadables:
+    hosted-html:
+      title: Download HTML
+      host_files: true
+      output: zip
+fields_data:
+  subject:
+    type: text
+    title: Email Subject
+    default: "This Week's Highlights"
+    maximum_characters: 100
+  
+  preheader:
+    type: text
+    title: Preheader
+    maximum_characters: 150
+  
+  header-logo:
+    type: image
+    title: Company Logo
+    placeholder: logo.png
+  
+  featured-articles:
+    type: modules
+    title: Featured Articles
+    maximum: 3
+    button_title: Add Article
+    modules:
+      article:
+        title: Article
+        fields:
+          article-image:
+            type: image
+            title: Article Image
+            options:
+              min_width: 600
+              min_height: 400
+          article-title:
+            type: text
+            title: Article Title
+            maximum_characters: 80
+          article-excerpt:
+            type: textarea
+            title: Excerpt
+            maximum_characters: 200
+          article-url:
+            type: url
+            title: Read More Link
+  
+  footer-text:
+    type: textarea
+    title: Footer Text
+    output_html_safe: true
+```
+
+---
+
+## Example 3: Social Media Graphics (General)
+
+### Generate the Template
+
+```bash
+dokio-create-template
+```
+
+**Answers:**
+- Template type: `General (Image)`
+- Template name: `Quote Graphic`
+- Template ID: `quote-graphic`
+- Subdomain: `social`
+- Output directory: `./quote-graphic`
+
+### Customize data.yaml
+
+```yaml
+---
+name: quote-graphic - Quote Graphic
+mode: general
+subdomain: social
+dimension_mode: px
+page_count: 1
+dimension_width: 1080
+dimension_height: 1080
+compositing_data: {}
+export_options:
+  downloadables:
+    png_chrome:
+      title: PNG Download
+      renderer: image
+      format: png
+    jpg_chrome:
+      title: JPG Download
+      renderer: image
+      format: jpg
+fields_data:
+  quote-text:
+    type: textarea
+    title: Quote
+    default: "The best way to predict the future is to create it."
+    maximum_characters: 200
+  
+  author:
+    type: text
+    title: Author
+    default: Peter Drucker
+    maximum_characters: 50
+  
+  background-style:
+    type: conditional
+    title: Background Style
+    selector:
+      type: select
+      options:
+        solid: Solid Color
+        gradient: Gradient
+        image: Image
+    panels:
+      - condition_type: equal_to
+        condition: solid
+        fields:
+          bg-color:
+            type: colour
+            title: Background Color
+            customisable: true
+            options:
+              '0079C8': Blue
+              'FF6B35': Orange
+              '2C3E50': Dark Gray
+      
+      - condition_type: equal_to
+        condition: gradient
+        fields:
+          gradient-start:
+            type: colour
+            title: Gradient Start
+            customisable: true
+          gradient-end:
+            type: colour
+            title: Gradient End
+            customisable: true
+      
+      - condition_type: equal_to
+        condition: image
+        fields:
+          bg-image:
+            type: image
+            title: Background Image
+            options:
+              min_width: 1080
+              min_height: 1080
+  
+  text-color:
+    type: colour
+    title: Text Color
+    customisable: true
+    options:
+      'FFFFFF': White
+      '000000': Black
+```
+
+---
+
+## Example 4: Certificate (PDF)
+
+### Generate the Template
+
+```bash
+dokio-create-template
+```
+
+**Answers:**
+- Template type: `PDF`
+- Template name: `Certificate of Achievement`
+- Template ID: `certificate`
+- Subdomain: `training`
+- Output directory: `./certificate`
+- Prince version: `15`
+- Resizable: `No`
+- Dynamic pages: `No`
+
+### Customize data.yaml
+
+```yaml
+---
+name: certificate - Certificate of Achievement
+mode: pdf
+prince_version: 15
+subdomain: training
+dimension_mode: mm
+page_count: 1
+dimension_width: 297
+dimension_height: 210  # A4 Landscape
+compositing_data: {}
+export_options:
+  downloadables:
+    certificate-pdf:
+      title: Download Certificate
+      renderer: pdf
+      bleed: false
+      marks: false
+fields_data:
+  recipient-name:
+    type: text
+    title: Recipient Name
+    placeholder: Enter full name
+    override_required: true
+  
+  course-title:
+    type: text
+    title: Course Title
+    default: Web Development Fundamentals
+    override_required: true
+  
+  completion-date:
+    type: datepicker
+    title: Completion Date
+    display_format: DD MMMM YYYY
+    maximum_date: today
+  
+  instructor-name:
+    type: text
+    title: Instructor Name
+    placeholder: Enter instructor name
+  
+  certificate-number:
+    type: generator
+    # Auto-generates random ID
+  
+  signature-image:
+    type: image
+    title: Signature
+    placeholder: signature.png
+    options:
+      allowed_file_types:
+        - png
+        - jpg
+  
+  border-style:
+    type: select
+    title: Border Style
+    options:
+      classic: Classic
+      modern: Modern
+      minimal: Minimal
+    default: classic
+```
+
+---
+
+## Example 5: Product Catalog (PDF Multi-page)
+
+### Generate the Template
+
+```bash
+dokio-create-template
+```
+
+**Answers:**
+- Template type: `PDF`
+- Template name: `Product Catalog`
+- Template ID: `product-catalog`
+- Subdomain: `sales`
+- Output directory: `./product-catalog`
+- Prince version: `15`
+- Resizable: `No`
+- Dynamic pages: `Yes`
+
+### Customize data.yaml
+
+```yaml
+---
+name: product-catalog - Product Catalog
+mode: pdf
+prince_version: 15
+subdomain: sales
+dimension_mode: mm
+page_count: 1
+has_dynamic_page_count: true
+dimension_width: 210
+dimension_height: 297
+compositing_data: {}
+export_options:
+  downloadables:
+    catalog-pdf:
+      title: Download Catalog
+      renderer: pdf
+fields_data:
+  catalog-title:
+    type: text
+    title: Catalog Title
+    default: 2026 Product Catalog
+  
+  company-logo:
+    type: image
+    title: Company Logo
+    placeholder: logo.png
+  
+  products:
+    type: modules
+    title: Products
+    button_title: Add Product
+    modules:
+      product:
+        title: Product
+        title_source: product-name
+        fields:
+          product-name:
+            type: text
+            title: Product Name
+            placeholder: Enter product name
+          
+          product-image:
+            type: image
+            title: Product Image
+            options:
+              min_width: 800
+              min_height: 600
+          
+          product-description:
+            type: richtext
+            title: Description
+            toolbar:
+              - bold
+              - italic
+              - ul
+          
+          product-price:
+            type: numeric
+            title: Price
+            placeholder: 0.00
+            minimum: 0
+            resolution: 0.01
+          
+          product-sku:
+            type: text
+            title: SKU
+            placeholder: Enter SKU
+          
+          specifications:
+            type: textarea
+            title: Specifications
+            placeholder: Enter product specifications
+  
+  primary-color:
+    type: colour
+    title: Primary Brand Color
+    customisable: true
+    options:
+      '0079C8': Corporate Blue
+      '2C3E50': Dark Gray
+```
+
+---
+
+## Example 6: Video Ad Template (Video)
+
+### Generate the Template
+
+```bash
+dokio-create-template
+```
+
+**Answers:**
+- Template type: `Video`
+- Template name: `Product Ad`
+- Template ID: `product-ad-30s`
+- Subdomain: `marketing`
+- Output directory: `./product-ad`
+
+### Customize data.yaml
+
+```yaml
+---
+name: product-ad-30s - Product Ad
+mode: video
+subdomain: marketing
+duration: '30'
+highlight_point: '27'
+dimension_height: 1080
+dimension_width: 1920
+export_options:
+  downloadables:
+    hi-res:
+      title: 1080p HD
+fields_data:
+  product-name:
+    type: text
+    title: Product Name
+    default: Amazing Product
+  
+  tagline:
+    type: text
+    title: Tagline
+    default: Change your life today
+    maximum_characters: 60
+  
+  call-to-action:
+    type: text
+    title: Call to Action
+    default: Visit our website
+  
+  website-url:
+    type: url
+    title: Website URL
+  
+  product-image:
+    type: image
+    title: Product Image
+    options:
+      min_width: 1920
+      min_height: 1080
+  
+  logo:
+    type: image
+    title: Company Logo
+    placeholder: logo.png
+  
+  background-video-style:
+    type: select
+    title: Background Style
+    options:
+      product-focus: Product Focus
+      lifestyle: Lifestyle
+      minimal: Minimal
+    default: product-focus
+  
+  primary-color:
+    type: colour
+    title: Primary Color
+    customisable: true
+    options:
+      'FF6B35': Orange
+      '0079C8': Blue
+      '2ECC71': Green
+  
+  secondary-color:
+    type: colour
+    title: Secondary Color
+    customisable: true
+    options:
+      'FFFFFF': White
+      '2C3E50': Dark Gray
+```
+
+---
+
+## Tips for Each Template Type
+
+### PDF Templates
+- Use millimeters for dimensions
+- Include bleed (usually 3-5mm) for print
+- Test with Prince to ensure proper rendering
+- Use page breaks for multi-page layouts
+- Consider resizable options for flexibility
+
+### Email Templates
+- Keep width at 600px for best compatibility
+- Test on multiple email clients
+- Use web-safe fonts
+- Inline CSS for best results
+- Include alt text for images
+- Test mobile responsiveness
+
+### General (Image) Templates
+- Use pixels for dimensions
+- Consider standard social media sizes:
+  - Instagram: 1080x1080
+  - Facebook: 1200x630
+  - Twitter: 1200x675
+- Optimize for web (RGB color mode)
+- Keep file sizes reasonable
+
+### Video Templates
+- Standard HD: 1920x1080
+- Consider animation timing
+- Keep text on screen long enough to read
+- Use web-safe fonts
+- Test video rendering
+
+---
+
+## Next Steps
+
+After creating your template:
+
+1. **Test locally** in Dokio Studio
+2. **Iterate** based on feedback
+3. **Document** changes in CHANGELOG.md
+4. **Version control** with Git
+5. **Share** with your team
+
+Happy templating! 🎨