npm - dokio-create-template - Versions diffs - 1.0.2 → 1.1.3 - Mend

dokio-create-template 1.0.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/LICENSE +1 -1
package/README.md +153 -43
package/bin/cli.js +1 -1
package/dist/creator.d.ts +2 -0
package/dist/creator.d.ts.map +1 -0
package/dist/creator.js +170 -0
package/dist/creator.js.map +1 -0
package/dist/index.d.ts +3 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +21 -0
package/dist/index.js.map +1 -0
package/dist/types.d.ts +32 -0
package/dist/types.d.ts.map +1 -0
package/dist/types.js +3 -0
package/dist/types.js.map +1 -0
package/package.json +35 -5
package/templates/email/CHANGELOG.md +1 -0
package/templates/general/CHANGELOG.md +1 -0
package/templates/general/data.yaml +7 -10
package/templates/general/index.html +14 -15
package/templates/general/style.scss.hbs +2 -3
package/templates/pdf/CHANGELOG.md +1 -0
package/templates/pdf/index.html +14 -14
package/templates/pdf/style.scss.hbs +1 -8
package/EXAMPLES.md +0 -609
package/INSTALLATION.md +0 -516
package/QUICKSTART.md +0 -218
package/SETUP.md +0 -192
package/STRUCTURE.txt +0 -0
package/index.js +0 -1
package/lib/creator.js +0 -144

package/templates/general/index.html CHANGED Viewed

@@ -1,16 +1,15 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{TEMPLATE_NAME}}</title>
-</head>
-<body>
-  <div class="container" style="background-color: #{{background-color}};">
-    <div class="content">
-      <h1 class="heading">{{{heading}}}</h1>
-      <div class="body-text">{{{body-text}}}</div>
-    </div>
+{{!--
+The HTML boilerplate is already in the Dokio Hub.
+Just wrap your content in a div with a class of "page" and you're good to go!
+Dokio Reference: https://rb.gy/u57yes
+--}}
+<div class="page">
+  <div class="content">
+    <h1 class="heading">{{{heading}}}</h1>
+    <div class="body-text">{{{body-text}}}</div>
   </div>
-</body>
-</html>
+</div>

package/templates/general/style.scss.hbs CHANGED Viewed

@@ -1,5 +1,4 @@
-// {{TEMPLATE_NAME}} Styles
-// Mode: General (Image)
+{{!-- MODE: General Template (Image)--}}
 * {
   margin: 0;
@@ -13,7 +12,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
-.container {
+.page {
   width: 400px;
   height: 400px;
   display: flex;

package/templates/pdf/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,7 @@
 ## [1.0.0] - {{DATE}}
 ### Added
 - Initial PDF template creation
 - Prince version {{PRINCE_VERSION}} support
 - Rich text editor for body content

package/templates/pdf/index.html CHANGED Viewed

@@ -1,15 +1,15 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>{{TEMPLATE_NAME}}</title>
-</head>
-<body>
-  <div class="page">
-    <div class="content">
-      <h1 class="heading" style="color: #{{primary-color}};">{{{heading}}}</h1>
-      <div class="body-text">{{{body-text}}}</div>
-    </div>
+{{!--
+The HTML boilerplate is already in the Dokio Hub.
+Just wrap your content in a div with a class of "page" and you're good to go!
+Dokio Reference: https://rb.gy/u57yes
+--}}
+<div class="page">
+  <div class="content">
+    <h1 class="heading">{{{heading}}}</h1>
+    <div class="body-text">{{{body-text}}}</div>
   </div>
-</body>
-</html>
+</div>

package/templates/pdf/style.scss.hbs CHANGED Viewed

@@ -1,8 +1,5 @@
-// {{TEMPLATE_NAME}} Styles
-// Mode: PDF
-// Prince Version: {{PRINCE_VERSION}}
+{{!-- MODE: PDF Template --}}
-// Page setup
 @page {
   size: A4 portrait;
   margin: 15mm;
@@ -20,12 +17,10 @@
   }
 }
-// PDF color conversion
 @prince-pdf {
   prince-pdf-color-conversion: full;
 }
-// Reset
 * {
   margin: 0;
   padding: 0;
@@ -92,13 +87,11 @@ body {
   }
 }
-// Utility: prevent orphans and widows
 p {
   orphans: 3;
   widows: 3;
 }
-// Utility: page breaks
 .page-break {
   page-break-before: always;
 }

package/EXAMPLES.md DELETED Viewed

@@ -1,609 +0,0 @@
-# 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! 🎨