dokio-create-template 1.0.1 → 1.0.2

package/INSTALLATION.md

@@ -0,0 +1,516 @@
+# Installation & Usage Guide - Step by Step
+
+This guide walks you through **everything** you need to know to install and use `dokio-create-template`.
+
+---
+
+## 📦 Installation
+
+### Option 1: Global Installation (Recommended)
+
+Install the package globally so you can use it from anywhere:
+
+```bash
+npm install -g dokio-create-template
+```
+
+After installation, verify it works:
+
+```bash
+dokio-create-template --version
+```
+
+### Option 2: Use with npx (No Installation)
+
+If you don't want to install globally, use `npx`:
+
+```bash
+npx dokio-create-template
+```
+
+This will download and run the latest version each time.
+
+### Option 3: Local Installation (For Development)
+
+If you want to modify the package:
+
+```bash
+# Clone or download the package
+cd dokio-create-template
+
+# Install dependencies
+npm install
+
+# Link it globally for testing
+npm link
+
+# Now you can run it
+dokio-create-template
+```
+
+---
+
+## 🚀 Usage
+
+### Basic Usage
+
+Simply run the command and follow the prompts:
+
+```bash
+dokio-create-template
+```
+
+### What You'll Be Asked
+
+The CLI will ask you a series of questions:
+
+#### 1. Template Type
+```
+? What type of template do you want to create?
+  ❯ General (Image)
+    PDF
+    Email
+    Video
+```
+
+**Choose based on your needs:**
+- **General**: For images (social media graphics, banners)
+- **PDF**: For print materials (brochures, flyers, certificates)
+- **Email**: For email campaigns (newsletters, marketing emails)
+- **Video**: For video content (social media videos, ads)
+
+#### 2. Template Name
+```
+? Template name: My Awesome Template
+```
+
+This is the human-readable name that will appear in Dokio.
+
+#### 3. Template ID
+```
+? Template ID (slug): my-awesome-template
+```
+
+This is the unique identifier. It auto-generates from your template name, but you can customize it.
+
+**Rules:**
+- Only lowercase letters
+- Numbers allowed
+- Hyphens allowed
+- No spaces or special characters
+
+#### 4. Subdomain
+```
+? Subdomain: test
+```
+
+The Dokio subdomain where this template will be used. Common values:
+- `test` - For testing
+- `staging` - For staging environment
+- `production` - For production
+
+#### 5. Output Directory
+```
+? Output directory: ./my-awesome-template
+```
+
+Where the files will be created. Defaults to `./{template-id}`
+
+### PDF-Specific Questions
+
+If you selected **PDF**, you'll also be asked:
+
+#### 6. Prince Version
+```
+? Prince version:
+  ❯ 15
+    11
+```
+
+- **Version 15**: Supports Flexbox (recommended)
+- **Version 11**: Older version, limited features
+
+#### 7. Resizable Template
+```
+? Is this a resizable template? (y/N)
+```
+
+Say **Yes** if users should be able to change the page size (A4, A3, A5, etc.)
+
+#### 8. Dynamic Page Count
+```
+? Will this template have dynamic page count? (y/N)
+```
+
+Say **Yes** if users should be able to add/remove pages
+
+---
+
+## 📁 What Gets Generated
+
+After running the command, you'll get 4 files:
+
+### 1. `index.html`
+The main template markup with Handlebars syntax.
+
+**Example:**
+```html
+<div class="container">
+  <h1>{{{heading}}}</h1>
+  <p>{{{body-text}}}</p>
+</div>
+```
+
+### 2. `style.scss.hbs`
+The stylesheet with SCSS support and Handlebars.
+
+**Example:**
+```scss
+.container {
+  padding: 20px;
+  background-color: #{{background-color}};
+}
+```
+
+### 3. `data.yaml`
+Template configuration and field definitions.
+
+**Example:**
+```yaml
+fields_data:
+  heading:
+    type: text
+    title: Heading
+    default: Welcome
+```
+
+### 4. `CHANGELOG.md`
+Version history for your template.
+
+---
+
+## ✏️ Customizing Your Template
+
+### Step 1: Open the Files
+
+Navigate to your template directory:
+
+```bash
+cd my-awesome-template
+```
+
+Open the files in your favorite code editor:
+
+```bash
+code .  # VS Code
+atom .  # Atom
+subl .  # Sublime
+```
+
+### Step 2: Add Fields in data.yaml
+
+Want to add a new field? Edit `data.yaml`:
+
+```yaml
+fields_data:
+  # Add a text field
+  subtitle:
+    type: text
+    title: Subtitle
+    default: Your subtitle here
+    placeholder: Enter subtitle
+  
+  # Add a color field
+  accent-color:
+    type: colour
+    title: Accent Color
+    customisable: true
+    options:
+      'FF0000': Red
+      '0000FF': Blue
+  
+  # Add an image field
+  logo:
+    type: image
+    title: Company Logo
+    placeholder: logo.png
+    options:
+      min_width: 400
+      min_height: 400
+```
+
+### Step 3: Use Fields in index.html
+
+Reference your fields using triple curly braces:
+
+```html
+<div class="page">
+  <!-- Text field -->
+  <h2>{{{subtitle}}}</h2>
+  
+  <!-- Image field -->
+  <img src="{{{logo}}}" alt="Logo" />
+  
+  <!-- Color field (in inline styles) -->
+  <div style="background-color: #{{accent-color}};">
+    Content here
+  </div>
+</div>
+```
+
+### Step 4: Style in style.scss.hbs
+
+Add your styles (with optional Handlebars):
+
+```scss
+.page {
+  padding: 20mm;
+  
+  h2 {
+    color: #{{accent-color}};
+    font-size: 24pt;
+  }
+  
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+```
+
+---
+
+## 🎯 Complete Examples
+
+### Example 1: Creating a Business Card (PDF)
+
+```bash
+$ dokio-create-template
+
+? Template type: PDF
+? Template name: Business Card
+? Template ID: business-card
+? Subdomain: production
+? Output directory: ./business-card
+? Prince version: 15
+? Resizable: No
+? Dynamic pages: No
+```
+
+**Customize data.yaml:**
+```yaml
+dimension_width: 90
+dimension_height: 55
+fields_data:
+  name:
+    type: text
+    title: Name
+    default: John Doe
+  
+  title:
+    type: text
+    title: Job Title
+    default: CEO
+  
+  phone:
+    type: text
+    title: Phone
+    placeholder: "+1 234 567 8900"
+  
+  email:
+    type: email
+    title: Email
+    placeholder: john@example.com
+```
+
+### Example 2: Creating a Newsletter (Email)
+
+```bash
+$ dokio-create-template
+
+? Template type: Email
+? Template name: Monthly Newsletter
+? Template ID: monthly-newsletter
+? Subdomain: marketing
+? Output directory: ./newsletter
+```
+
+**Customize data.yaml:**
+```yaml
+fields_data:
+  subject:
+    type: text
+    title: Email Subject
+    maximum_characters: 100
+  
+  hero-headline:
+    type: text
+    title: Hero Headline
+    default: This Month's Top Stories
+  
+  articles:
+    type: modules
+    title: Articles
+    modules:
+      article:
+        title: Article
+        fields:
+          article-title:
+            type: text
+            title: Title
+          article-content:
+            type: textarea
+            title: Content
+          article-link:
+            type: url
+            title: Read More Link
+```
+
+### Example 3: Creating a Social Media Post (General)
+
+```bash
+$ dokio-create-template
+
+? Template type: General (Image)
+? Template name: Instagram Post
+? Template ID: instagram-post
+? Subdomain: social
+? Output directory: ./instagram-post
+```
+
+**Customize data.yaml:**
+```yaml
+dimension_width: 1080
+dimension_height: 1080
+fields_data:
+  main-text:
+    type: text
+    title: Main Text
+    maximum_characters: 50
+  
+  background-image:
+    type: image
+    title: Background Image
+    options:
+      min_width: 1080
+      min_height: 1080
+      crop:
+        allowed_aspect_ratio_options:
+          - square
+  
+  overlay-color:
+    type: colour
+    title: Overlay Color
+    customisable: true
+    options:
+      '000000': Black
+      'FFFFFF': White
+```
+
+---
+
+## 📤 Uploading to Dokio
+
+Once you've customized your template:
+
+1. **Log into Dokio**
+   - Go to your Dokio dashboard
+   - Navigate to **Templates**
+
+2. **Create New Template**
+   - Click **New Template** or **Upload**
+
+3. **Upload Files**
+   - Upload `data.yaml` first
+   - Upload `index.html`
+   - Upload `style.scss.hbs`
+
+4. **Test in Studio**
+   - Open the template in Dokio Studio
+   - Fill in the fields
+   - Generate a preview
+   - Download/export when ready
+
+---
+
+## 🔧 Troubleshooting
+
+### "Command not found"
+
+**Problem**: After installing, you get `command not found: dokio-create-template`
+
+**Solution**:
+```bash
+# Check npm global path
+npm config get prefix
+
+# Add to PATH (in ~/.bashrc or ~/.zshrc)
+export PATH="$PATH:$(npm config get prefix)/bin"
+
+# Reload shell
+source ~/.bashrc
+```
+
+### "Permission denied"
+
+**Problem**: Permission error during global install
+
+**Solution**:
+```bash
+# Use sudo (macOS/Linux)
+sudo npm install -g dokio-create-template
+
+# Or fix npm permissions (recommended)
+# See: https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
+```
+
+### Files not generating
+
+**Problem**: Command runs but no files appear
+
+**Solution**:
+```bash
+# Check current directory
+pwd
+
+# Verify output directory exists
+ls -la ./your-template-name
+
+# Try specifying full path
+dokio-create-template
+# When asked for output directory: /full/path/to/output
+```
+
+---
+
+## 🎓 Learning Resources
+
+- **Quick Start**: See `QUICKSTART.md`
+- **Setup Guide**: See `SETUP.md`
+- **Dokio Docs**: https://docs.dokio.com
+- **Developer Reference**: Your uploaded PDF
+
+---
+
+## 💡 Tips & Best Practices
+
+1. **Start Simple**: Begin with the generated template, then add features
+2. **Test Often**: Upload to Dokio and test after each change
+3. **Version Control**: Use git to track your changes
+4. **Document Changes**: Update CHANGELOG.md when you make changes
+5. **Reuse Templates**: Create a base template, then duplicate and customize
+
+---
+
+## 🆘 Getting Help
+
+If you're stuck:
+
+1. Check this guide
+2. Read the Dokio Developer Reference PDF
+3. Visit Dokio documentation: https://docs.dokio.com
+4. Contact Dokio support: https://support.dokio.com
+
+---
+
+**You're all set!** 🎉 Start creating amazing Dokio templates!

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Dokio @jeikudev
+Copyright (c) 2026 Dokio
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/QUICKSTART.md

@@ -0,0 +1,218 @@
+# Quick Start Guide
+
+Get up and running with `dokio-create-template` in 5 minutes!
+
+## Step 1: Install the Package
+
+```bash
+npm install -g dokio-create-template
+```
+
+## Step 2: Run the CLI
+
+```bash
+dokio-create-template
+```
+
+## Step 3: Answer the Prompts
+
+### Example: Creating a PDF Brochure
+
+```
+🚀 Dokio Template Generator
+
+? What type of template do you want to create? 
+  ❯ PDF
+
+? Template name: 
+  Marketing Brochure
+
+? Template ID (slug): 
+  marketing-brochure
+
+? Subdomain: 
+  test
+
+? Output directory: 
+  ./marketing-brochure
+
+? Prince version: 
+  ❯ 15
+
+? Is this a resizable template? 
+  No
+
+? Will this template have dynamic page count? 
+  Yes
+```
+
+## Step 4: Navigate to Your Template
+
+```bash
+cd marketing-brochure
+ls
+```
+
+You should see:
+- `index.html`
+- `style.scss.hbs`
+- `data.yaml`
+- `CHANGELOG.md`
+
+## Step 5: Customize Your Template
+
+### Edit data.yaml
+
+Add more fields or modify existing ones:
+
+```yaml
+fields_data:
+  company-name:
+    type: text
+    title: Company Name
+    default: My Company
+  
+  logo:
+    type: image
+    title: Company Logo
+    placeholder: logo.png
+```
+
+### Edit index.html
+
+Add your HTML structure:
+
+```html
+<div class="page">
+  <img src="{{{logo}}}" alt="Logo" class="logo" />
+  <h1>{{{company-name}}}</h1>
+  <div class="body-text">{{{body-text}}}</div>
+</div>
+```
+
+### Edit style.scss.hbs
+
+Add your styles:
+
+```scss
+.logo {
+  width: 50mm;
+  height: auto;
+  margin-bottom: 10mm;
+}
+```
+
+## Step 6: Upload to Dokio
+
+1. Log into your Dokio account
+2. Navigate to Templates
+3. Click "New Template"
+4. Upload your files:
+   - `index.html`
+   - `style.scss.hbs`
+   - `data.yaml`
+5. Test your template in the studio!
+
+## Common Customizations
+
+### Adding a New Text Field
+
+In `data.yaml`:
+```yaml
+fields_data:
+  subtitle:
+    type: text
+    title: Subtitle
+    default: Your subtitle here
+```
+
+In `index.html`:
+```html
+<h2>{{{subtitle}}}</h2>
+```
+
+### Adding a Color Field
+
+In `data.yaml`:
+```yaml
+fields_data:
+  accent-color:
+    type: colour
+    title: Accent Color
+    customisable: true
+    options:
+      'FF0000': Red
+      '00FF00': Green
+      '0000FF': Blue
+```
+
+In `index.html` or `style.scss.hbs`:
+```css
+.highlight {
+  color: #{{accent-color}};
+}
+```
+
+### Adding an Image Field
+
+In `data.yaml`:
+```yaml
+fields_data:
+  hero-image:
+    type: image
+    title: Hero Image
+    placeholder: hero.jpg
+    options:
+      min_width: 1200
+      min_height: 600
+```
+
+In `index.html`:
+```html
+<img src="{{{hero-image}}}" alt="Hero" class="hero" />
+```
+
+## Template Types Quick Reference
+
+### General (Image)
+- Best for: Social graphics, banners, thumbnails
+- Dimensions: Pixels
+- Exports: JPG, PNG
+
+### PDF
+- Best for: Print materials, documents, certificates
+- Dimensions: Millimeters
+- Exports: PDF (hi-res, low-res, print-ready)
+
+### Email
+- Best for: Marketing emails, newsletters
+- Responsive: Yes
+- Exports: HTML, ZIP, URL
+
+### Video
+- Best for: Social media videos, ads
+- Dimensions: 1920x1080
+- Exports: 1080p video
+
+## Tips
+
+1. **Test locally**: Use the Dokio studio to preview your changes
+2. **Version control**: Keep track of changes in `CHANGELOG.md`
+3. **Modular design**: Use modules for repeatable sections
+4. **Validate**: Test with different content lengths
+5. **Accessibility**: Add alt text to images, use semantic HTML
+
+## Next Steps
+
+- Read the [Dokio Developer Reference](/uploads/Dokio_Developer_Reference.pdf)
+- Explore advanced features (modules, conditionals, copydecks)
+- Check out example templates on Dokio
+- Join the Dokio community
+
+## Need Help?
+
+- Documentation: https://docs.dokio.com
+- Support: https://support.dokio.com
+- Developer Reference: See your Dokio Developer Reference PDF
+
+Happy templating! 🚀