md2pdf2 0.2.0 → 0.2.2

package/README.md

@@ -29,6 +29,16 @@ md2pdf2 convert input.md --template my-template.hbs -o output.pdf
 md2pdf2 dev input.md
 ```
 
+## Agent Skill
+
+Install the md2pdf2 skill for Claude Code, Amp, OpenCode etc:
+
+```bash
+npx skills add areai51/md2pdf2
+```
+
+This adds the skill to your Claude Code environment, enabling intelligent PDF generation with automatic template selection and markdown formatting.
+
 ## Dev Mode
 
 Start a live preview server to see your markdown rendered in different templates:

package/dist/dev-server.js

@@ -292,7 +292,7 @@ function getDevHTML(port) {
   <div class="toast" id="toast"><span class="toast-dot"></span><span id="toastMsg">Reloading...</span></div>
   <div class="sidebar">
     <div class="sidebar-header">
-      <h1>Templates</h1>
+      <h1>md2pdf2</h1>
       <p id="currentTemplate"><span style="color: #22c55e;">●</span> Watching for changes</p>
     </div>
     <div class="template-list" id="templateList"></div>

package/dist/template-engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-engine.d.ts","sourceRoot":"","sources":["../src/template-engine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,qBAAa,cAAc;IACzB,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,QAAQ,CAAkD;gBAEtD,MAAM,EAAE,YAAY;IAUhC,OAAO,CAAC,eAAe;YAST,sBAAsB;IAW9B,YAAY,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAKvD,mBAAmB,IAAI,IAAI;IAiD3B,OAAO,CAAC,eAAe;IAIvB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAIpD,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM;CAQlF"}
+{"version":3,"file":"template-engine.d.ts","sourceRoot":"","sources":["../src/template-engine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,qBAAa,cAAc;IACzB,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,QAAQ,CAAkD;gBAEtD,MAAM,EAAE,YAAY;IAUhC,OAAO,CAAC,eAAe;YAaT,sBAAsB;IAW9B,YAAY,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAKvD,mBAAmB,IAAI,IAAI;IAiD3B,OAAO,CAAC,eAAe;IAIvB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAIpD,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM;CASlF"}

package/dist/template-engine.js

@@ -18,6 +18,11 @@ export class TemplateEngine {
         Handlebars.registerHelper('currentDate', () => {
             return new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
         });
+        Handlebars.registerHelper('slice', (str, start, end) => {
+            if (typeof str !== 'string')
+                return '';
+            return str.slice(start, end);
+        });
     }
     async loadPartialsFromConfig(partialsConfig) {
         for (const [name, path] of Object.entries(partialsConfig)) {
@@ -93,7 +98,8 @@ export class TemplateEngine {
             content,
             frontMatter,
             styles,
-            partials: this.partials
+            partials: this.partials,
+            ...frontMatter
         });
     }
 }

package/dist/template-engine.js.map

@@ -1 +1 @@
-{"version":3,"file":"template-engine.js","sourceRoot":"","sources":["../src/template-engine.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,OAAO,cAAc;IACjB,QAAQ,CAA8B;IACtC,QAAQ,GAA+C,EAAE,CAAC;IAElE,YAAY,MAAoB;QAC9B,4BAA4B;QAC5B,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,wCAAwC;QACxC,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;YACpB,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,UAAU,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE;YACvD,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QACH,UAAU,CAAC,cAAc,CAAC,aAAa,EAAE,GAAG,EAAE;YAC5C,OAAO,IAAI,IAAI,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;QACpG,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,KAAK,CAAC,sBAAsB,CAAC,cAAsC;QACzE,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;YAC1D,IAAI,CAAC;gBACH,MAAM,OAAO,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;gBAC1C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACpD,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,IAAI,CAAC,oCAAoC,IAAI,UAAU,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC;YACnF,CAAC;QACH,CAAC;IACH,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,YAAoB;QACrC,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC,YAAY,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IACxD,CAAC;IAED,mBAAmB;QACjB,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4CpB,CAAC;QACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IACxD,CAAC;IAEO,eAAe,CAAC,OAAe;QACrC,OAAO,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,eAAe,CAAC,IAAY,EAAE,OAAe;QAC3C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACpD,CAAC;IAED,MAAM,CAAC,OAAe,EAAE,WAAgC,EAAE,MAAc;QACtE,OAAO,IAAI,CAAC,QAAQ,CAAC;YACnB,OAAO;YACP,WAAW;YACX,MAAM;YACN,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;IACL,CAAC;CACF"}
+{"version":3,"file":"template-engine.js","sourceRoot":"","sources":["../src/template-engine.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,OAAO,cAAc;IACjB,QAAQ,CAA8B;IACtC,QAAQ,GAA+C,EAAE,CAAC;IAElE,YAAY,MAAoB;QAC9B,4BAA4B;QAC5B,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,wCAAwC;QACxC,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;YACpB,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,UAAU,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE;YACvD,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QACH,UAAU,CAAC,cAAc,CAAC,aAAa,EAAE,GAAG,EAAE;YAC5C,OAAO,IAAI,IAAI,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;QACpG,CAAC,CAAC,CAAC;QACH,UAAU,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,GAAW,EAAE,KAAa,EAAE,GAAY,EAAE,EAAE;YAC9E,IAAI,OAAO,GAAG,KAAK,QAAQ;gBAAE,OAAO,EAAE,CAAC;YACvC,OAAO,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,KAAK,CAAC,sBAAsB,CAAC,cAAsC;QACzE,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;YAC1D,IAAI,CAAC;gBACH,MAAM,OAAO,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;gBAC1C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACpD,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,IAAI,CAAC,oCAAoC,IAAI,UAAU,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC;YACnF,CAAC;QACH,CAAC;IACH,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,YAAoB;QACrC,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC,YAAY,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IACxD,CAAC;IAED,mBAAmB;QACjB,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4CpB,CAAC;QACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IACxD,CAAC;IAEO,eAAe,CAAC,OAAe;QACrC,OAAO,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,eAAe,CAAC,IAAY,EAAE,OAAe;QAC3C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACpD,CAAC;IAED,MAAM,CAAC,OAAe,EAAE,WAAgC,EAAE,MAAc;QACtE,OAAO,IAAI,CAAC,QAAQ,CAAC;YACnB,OAAO;YACP,WAAW;YACX,MAAM;YACN,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,GAAG,WAAW;SACf,CAAC,CAAC;IACL,CAAC;CACF"}

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "md2pdf2",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Convert Markdown to PDF using customizable templates",
   "type": "module",
   "main": "dist/cli.js",
   "bin": {
     "md2pdf2": "dist/cli.js"
   },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node dist/cli.js",
+    "test": "node dist/cli.js convert examples/demo.md -o demo.pdf",
+    "lint": "eslint src --ext .ts",
+    "prepublishOnly": "npm run build"
+  },
   "keywords": [
     "markdown",
     "pdf",
@@ -45,12 +53,5 @@
   "files": [
     "dist",
     "templates"
-  ],
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "start": "node dist/cli.js",
-    "test": "node dist/cli.js convert examples/demo.md -o demo.pdf",
-    "lint": "eslint src --ext .ts"
-  }
-}
+  ]
+}

package/templates/newsletter.hbs

@@ -2,118 +2,215 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{#if frontMatter.title}}{{frontMatter.title}}{{else}}Newsletter{{/if}}</title>
+  <title>{{title}}</title>
   <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
     body {
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-      line-height: 1.65;
-      color: #1a1a1a;
-      max-width: 600px;
-      margin: 0 auto;
-      padding: 0;
-      background: #f9f9f9;
-    }
-    .container {
-      background: #ffffff;
-      padding: 40px 50px;
-      margin: 20px 0;
-      border-radius: 8px;
-    }
-    .header {
-      text-align: center;
-      padding-bottom: 30px;
-      border-bottom: 1px solid #eee;
-      margin-bottom: 30px;
-    }
-    .header h1 {
-      font-size: 1.75rem;
-      margin: 0 0 8px 0;
-      color: #111;
-    }
-    .header .date {
-      font-size: 0.85rem;
-      color: #888;
-    }
-    .content h2 {
-      font-size: 1.35rem;
-      margin-top: 2rem;
-      margin-bottom: 0.75rem;
-      color: #111;
-    }
-    .content h3 {
-      font-size: 1.1rem;
-      margin-top: 1.5rem;
-      margin-bottom: 0.5rem;
-    }
-    .content p {
-      margin-bottom: 1rem;
+      font-family: Georgia, 'Times New Roman', serif;
+      font-size: 11pt;
+      line-height: 1.8;
       color: #333;
-    }
-    .content a {
-      color: #0066cc;
-      text-decoration: underline;
-    }
-    .content code {
-      background: #f0f0f0;
-      padding: 0.15em 0.4em;
-      border-radius: 3px;
-      font-size: 0.9em;
-      font-family: 'SF Mono', Monaco, monospace;
-    }
-    .content pre {
-      background: #f5f5f5;
-      padding: 1rem;
-      border-radius: 6px;
-      overflow-x: auto;
-      font-size: 0.85rem;
-      line-height: 1.5;
-    }
-    .content pre code { background: none; padding: 0; }
-    .content blockquote {
-      border-left: 3px solid #0066cc;
-      margin: 1.25rem 0;
-      padding: 0.25rem 0 0.25rem 1rem;
-      color: #555;
+      background: #f0ebe3;
+    }
+
+    /* ── WRAPPER ── */
+    .wrapper {
+      max-width: 680px;
+      margin: 32px auto;
+      background: #fff;
+      border: 1px solid #ddd;
+      box-shadow: 0 2px 20px rgba(0,0,0,0.08);
+    }
+
+    /* ── MASTHEAD ── */
+    .masthead {
+      background: #1a1a1a;
+      color: white;
+      padding: 48px 56px 36px;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .masthead::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 4px;
+      background: linear-gradient(90deg, #d4a437, #e8c46a, #d4a437);
+    }
+
+    .masthead-label {
+      font-family: -apple-system, 'Helvetica Neue', sans-serif;
+      font-size: 8pt;
+      letter-spacing: 4px;
+      text-transform: uppercase;
+      color: #d4a437;
+      margin-bottom: 14px;
+    }
+
+    .masthead h1 {
+      font-size: 30pt;
+      font-weight: 700;
+      letter-spacing: -0.5px;
+      line-height: 1.1;
+      margin-bottom: 10px;
+      color: white;
+    }
+
+    .masthead-meta {
+      font-family: -apple-system, 'Helvetica Neue', sans-serif;
+      font-size: 9pt;
+      color: rgba(255,255,255,0.5);
+      letter-spacing: 0.5px;
+    }
+
+    /* ── BODY ── */
+    .body {
+      padding: 48px 56px;
+    }
+
+    h1 { display: none; } /* Used in masthead */
+
+    h2 {
+      font-size: 17pt;
+      font-weight: 700;
+      color: #1a1a1a;
+      margin-top: 2em;
+      margin-bottom: 0.5em;
+      line-height: 1.2;
+      position: relative;
+      padding-bottom: 10px;
+    }
+    h2::after {
+      content: '';
+      position: absolute;
+      bottom: 0; left: 0;
+      width: 40px; height: 3px;
+      background: #d4a437;
+    }
+
+    h3 {
+      font-size: 13pt;
+      color: #222;
+      margin-top: 1.5em;
+      margin-bottom: 0.4em;
+    }
+
+    p { margin-bottom: 1em; }
+
+    p:first-of-type::first-letter {
+      font-size: 3em;
+      font-weight: 700;
+      float: left;
+      line-height: 0.75;
+      padding-right: 8px;
+      padding-top: 4px;
+      color: #d4a437;
+    }
+
+    blockquote {
+      border-left: 3px solid #d4a437;
+      margin: 1.8em 0;
+      padding: 16px 24px;
+      background: #fdf8f0;
       font-style: italic;
+      font-size: 12pt;
+      color: #555;
     }
-    .content ul, .content ol {
-      padding-left: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .content li { margin-bottom: 0.5rem; }
-    .highlight {
-      background: #fff3cd;
-      padding: 15px 20px;
-      border-radius: 6px;
-      margin: 1.25rem 0;
+
+    a { color: #b8860b; }
+
+    ul, ol { margin: 0.8em 0 0.8em 1.6em; }
+    li { margin-bottom: 0.4em; }
+
+    hr {
+      border: none;
+      text-align: center;
+      margin: 2em 0;
+      color: #ccc;
+    }
+    hr::before {
+      content: '— ◆ —';
+      letter-spacing: 6px;
+      color: #ccc;
+      font-size: 9pt;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 1.5em 0;
+      font-size: 10pt;
+    }
+    th {
+      background: #1a1a1a;
+      color: white;
+      padding: 8px 14px;
+      text-align: left;
+      font-family: -apple-system, sans-serif;
+      font-size: 9pt;
+      letter-spacing: 0.5px;
+    }
+    td {
+      padding: 8px 14px;
+      border-bottom: 1px solid #eee;
     }
+    tr:nth-child(even) td { background: #fdf8f0; }
+
+    code {
+      font-family: 'SF Mono', monospace;
+      font-size: 9pt;
+      background: #f5f0e8;
+      padding: 1px 5px;
+      border-radius: 2px;
+    }
+
+    /* ── FOOTER ── */
     .footer {
+      background: #1a1a1a;
+      color: rgba(255,255,255,0.5);
       text-align: center;
-      padding-top: 30px;
-      margin-top: 40px;
-      border-top: 1px solid #eee;
-      font-size: 0.85rem;
-      color: #888;
-    }
+      padding: 28px 56px;
+      font-family: -apple-system, 'Helvetica Neue', sans-serif;
+      font-size: 8.5pt;
+      letter-spacing: 0.3px;
+    }
+
+    .footer a { color: #d4a437; }
+
+    /* ── PRINT ── */
     @media print {
-      body { background: #fff; }
-      .container { box-shadow: none; margin: 0; }
+      body { background: white; }
+      .wrapper { box-shadow: none; border: none; margin: 0; }
+      .masthead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+      .footer { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
     }
   </style>
 </head>
 <body>
-  <div class="container">
-    <div class="header">
-      <h1>{{#if frontMatter.title}}{{frontMatter.title}}{{else}}Newsletter{{/if}}</h1>
-      <div class="date">{{#if frontMatter.date}}{{frontMatter.date}}{{else}}{{currentDate}}{{/if}}</div>
+  <div class="wrapper">
+
+    <div class="masthead">
+      <div class="masthead-label">Newsletter</div>
+      <h1>{{#if title}}{{title}}{{else}}The Weekly Brief{{/if}}</h1>
+      <div class="masthead-meta">
+        {{#if author}}By {{author}} · {{/if}}{{#if date}}{{date}}{{/if}}
+      </div>
     </div>
-    <div class="content">
+
+    <div class="body">
       {{{content}}}
     </div>
+
     <div class="footer">
-      Generated with md2pdf2
+      {{#if footer_text}}{{footer_text}}{{else}}
+        You're receiving this because you subscribed. ·
+        <a href="#">Unsubscribe</a>
+      {{/if}}
     </div>
+
   </div>
 </body>
 </html>

package/templates/professional-report.hbs

@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap');
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      font-size: 11pt;
+      line-height: 1.7;
+      color: #1a1a2e;
+      background: #fff;
+    }
+
+    /* ── COVER PAGE ── */
+    .cover {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      background: linear-gradient(135deg, #0f3460 0%, #16213e 60%, #1a1a2e 100%);
+      color: white;
+      padding: 80px 72px;
+      page-break-after: always;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .cover::before {
+      content: '';
+      position: absolute;
+      top: -100px; right: -100px;
+      width: 500px; height: 500px;
+      background: radial-gradient(circle, rgba(233,69,96,0.25) 0%, transparent 70%);
+      border-radius: 50%;
+    }
+
+    .cover::after {
+      content: '';
+      position: absolute;
+      bottom: -80px; left: -80px;
+      width: 400px; height: 400px;
+      background: radial-gradient(circle, rgba(22,158,255,0.2) 0%, transparent 70%);
+      border-radius: 50%;
+    }
+
+    .cover-logo {
+      font-size: 13pt;
+      font-weight: 600;
+      letter-spacing: 3px;
+      text-transform: uppercase;
+      opacity: 0.7;
+      z-index: 1;
+    }
+
+    .cover-main { z-index: 1; }
+
+    .cover-tag {
+      display: inline-block;
+      background: rgba(233,69,96,0.9);
+      color: white;
+      font-size: 8pt;
+      font-weight: 600;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+      padding: 6px 14px;
+      border-radius: 2px;
+      margin-bottom: 28px;
+    }
+
+    .cover h1 {
+      font-family: 'Playfair Display', Georgia, serif;
+      font-size: 42pt;
+      font-weight: 700;
+      line-height: 1.1;
+      margin-bottom: 20px;
+      letter-spacing: -0.5px;
+    }
+
+    .cover-subtitle {
+      font-size: 14pt;
+      font-weight: 300;
+      opacity: 0.75;
+      max-width: 480px;
+    }
+
+    .cover-footer {
+      z-index: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      border-top: 1px solid rgba(255,255,255,0.15);
+      padding-top: 24px;
+    }
+
+    .cover-meta { font-size: 10pt; opacity: 0.65; }
+    .cover-meta strong { display: block; opacity: 1; font-weight: 500; }
+
+    /* ── CONTENT ── */
+    .content {
+      max-width: 720px;
+      margin: 0 auto;
+      padding: 60px 72px;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: 600;
+      line-height: 1.25;
+      margin-top: 2em;
+      margin-bottom: 0.6em;
+      color: #0f3460;
+    }
+
+    h1 { font-size: 22pt; border-bottom: 3px solid #e94560; padding-bottom: 10px; }
+    h2 { font-size: 16pt; border-bottom: 1px solid #e0e0e0; padding-bottom: 8px; }
+    h3 { font-size: 13pt; color: #16213e; }
+    h4 { font-size: 11pt; color: #16213e; font-weight: 600; }
+
+    p { margin-bottom: 1em; }
+
+    a { color: #e94560; text-decoration: none; }
+
+    strong { font-weight: 600; color: #0f3460; }
+    em { font-style: italic; color: #444; }
+
+    /* Tables */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 1.5em 0;
+      font-size: 10pt;
+    }
+    thead {
+      background: #0f3460;
+      color: white;
+    }
+    thead th {
+      padding: 10px 14px;
+      text-align: left;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+    }
+    tbody tr:nth-child(even) { background: #f8f9fc; }
+    tbody tr:hover { background: #eef1f8; }
+    tbody td {
+      padding: 9px 14px;
+      border-bottom: 1px solid #e5e9f0;
+    }
+
+    /* Code */
+    code {
+      background: #f0f3f9;
+      color: #c7254e;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-size: 9pt;
+      padding: 2px 6px;
+      border-radius: 3px;
+    }
+    pre {
+      background: #1a1a2e;
+      color: #e2e8f0;
+      padding: 20px 24px;
+      border-radius: 6px;
+      overflow-x: auto;
+      margin: 1.5em 0;
+      border-left: 4px solid #e94560;
+    }
+    pre code {
+      background: none;
+      color: inherit;
+      padding: 0;
+      font-size: 9pt;
+      line-height: 1.6;
+    }
+
+    /* Blockquotes */
+    blockquote {
+      border-left: 4px solid #e94560;
+      margin: 1.5em 0;
+      padding: 12px 20px;
+      background: #fef5f7;
+      color: #555;
+      font-style: italic;
+      border-radius: 0 4px 4px 0;
+    }
+
+    /* Lists */
+    ul, ol {
+      margin: 0.8em 0 0.8em 1.5em;
+    }
+    li { margin-bottom: 0.3em; }
+    li::marker { color: #e94560; }
+
+    /* Callout / Info box using blockquote with > **Note** */
+    blockquote strong:first-child {
+      display: block;
+      color: #0f3460;
+      font-style: normal;
+      margin-bottom: 4px;
+    }
+
+    /* Horizontal Rule */
+    hr {
+      border: none;
+      border-top: 2px solid #e5e9f0;
+      margin: 2em 0;
+    }
+
+    /* Page numbers */
+    @page { margin: 0; }
+    .page-number {
+      position: fixed;
+      bottom: 24px;
+      right: 48px;
+      font-size: 9pt;
+      color: #999;
+    }
+
+    /* Print */
+    @media print {
+      body { font-size: 10.5pt; }
+      .cover { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+      pre, blockquote, table { page-break-inside: avoid; }
+      h2, h3 { page-break-after: avoid; }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Cover Page -->
+  <div class="cover">
+    <div class="cover-logo">{{#if author}}{{author}}{{else}}Professional Report{{/if}}</div>
+    <div class="cover-main">
+      <div class="cover-tag">Report</div>
+      <h1>{{#if title}}{{title}}{{else}}Document Title{{/if}}</h1>
+      {{#if subtitle}}<p class="cover-subtitle">{{subtitle}}</p>{{/if}}
+    </div>
+    <div class="cover-footer">
+      <div class="cover-meta">
+        <strong>Prepared by</strong>
+        {{#if author}}{{author}}{{else}}—{{/if}}
+      </div>
+      <div class="cover-meta" style="text-align:right">
+        <strong>Date</strong>
+        {{#if date}}{{date}}{{else}}—{{/if}}
+      </div>
+    </div>
+  </div>
+
+  <!-- Content -->
+  <div class="content">
+    {{{content}}}
+  </div>
+
+</body>
+</html>

package/templates/resume.hbs

@@ -2,133 +2,210 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{#if frontMatter.name}}{{frontMatter.name}} - Resume{{else}}Resume{{/if}}</title>
+  <title>{{title}}</title>
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
+
     body {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
+      font-size: 10pt;
       line-height: 1.5;
-      color: #2c3e50;
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 0;
+      color: #2d2d2d;
+      background: #fff;
+    }
+
+    /* ── HEADER ── */
+    .resume-header {
+      background: #1b262c;
+      color: white;
+      padding: 40px 56px;
+      display: flex;
+      align-items: center;
+      gap: 32px;
+    }
+
+    .header-avatar {
+      width: 80px; height: 80px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #00b4d8, #0077b6);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 28pt; font-weight: 700; color: white;
+      flex-shrink: 0;
+    }
+
+    .header-info h1 {
+      font-size: 22pt;
+      font-weight: 700;
+      letter-spacing: -0.5px;
+      color: white;
+      margin: 0 0 4px;
+    }
+
+    .header-role {
       font-size: 11pt;
+      color: #00b4d8;
+      font-weight: 500;
+      margin-bottom: 10px;
     }
-    .header {
-      text-align: center;
-      padding: 30px 0;
-      border-bottom: 2px solid #3498db;
-    }
-    .header h1 {
-      font-size: 28pt;
-      font-weight: 300;
+
+    .header-contact {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px 20px;
+      font-size: 9pt;
+      color: rgba(255,255,255,0.65);
+    }
+
+    /* ── BODY LAYOUT ── */
+    .resume-body {
+      display: grid;
+      grid-template-columns: 220px 1fr;
+      min-height: calc(100vh - 160px);
+    }
+
+    /* ── SIDEBAR ── */
+    .sidebar {
+      background: #f4f8fb;
+      padding: 36px 28px;
+      border-right: 1px solid #e0e8ee;
+    }
+
+    .sidebar-section { margin-bottom: 28px; }
+
+    .sidebar-label {
+      font-size: 7.5pt;
+      font-weight: 700;
       letter-spacing: 2px;
-      margin-bottom: 8px;
-      color: #2c3e50;
-    }
-    .header .contact {
-      font-size: 10pt;
-      color: #7f8c8d;
-    }
-    .header .contact a {
-      color: #3498db;
-      text-decoration: none;
-      margin: 0 10px;
-    }
-    .section {
-      padding: 20px 0;
-      border-bottom: 1px solid #eee;
-    }
-    .section:last-child { border-bottom: none; }
-    .section-title {
-      font-size: 12pt;
-      font-weight: 600;
-      color: #3498db;
       text-transform: uppercase;
-      letter-spacing: 1px;
-      margin-bottom: 15px;
-    }
-    .section h2 {
-      font-size: 11pt;
-      margin-bottom: 4px;
-      color: #2c3e50;
-    }
-    .section h3 {
-      font-size: 10pt;
-      font-weight: normal;
-      color: #7f8c8d;
-      margin-bottom: 8px;
+      color: #0077b6;
+      margin-bottom: 10px;
+      padding-bottom: 4px;
+      border-bottom: 2px solid #00b4d8;
     }
-    .section p {
+
+    .skill-bar {
       margin-bottom: 8px;
-      font-size: 10pt;
     }
-    .section ul {
-      padding-left: 20px;
-      margin-bottom: 15px;
-    }
-    .section li {
-      font-size: 10pt;
-      margin-bottom: 4px;
-    }
-    .skills-grid {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    .skill-tag {
-      background: #ecf0f1;
-      padding: 4px 12px;
-      border-radius: 3px;
+    .skill-bar span {
       font-size: 9pt;
-      color: #2c3e50;
-    }
-    .entry {
-      margin-bottom: 20px;
-    }
-    .entry-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      margin-bottom: 5px;
-    }
-    .entry-title {
+      display: block;
+      margin-bottom: 3px;
+      color: #333;
+    }
+    .skill-track {
+      height: 4px;
+      background: #dde8f0;
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .skill-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #0077b6, #00b4d8);
+      border-radius: 2px;
+    }
+
+    /* ── MAIN CONTENT ── */
+    .main {
+      padding: 36px 48px;
+    }
+
+    h1 { display: none; } /* Hidden — shown in header */
+    h2 {
+      font-size: 11pt;
+      font-weight: 700;
+      letter-spacing: 1.5px;
+      text-transform: uppercase;
+      color: #0077b6;
+      border-bottom: 2px solid #e0e8ee;
+      padding-bottom: 6px;
+      margin-bottom: 16px;
+      margin-top: 28px;
+    }
+    h2:first-child { margin-top: 0; }
+    h3 {
       font-size: 11pt;
       font-weight: 600;
+      color: #1b262c;
+      margin-bottom: 2px;
     }
-    .entry-date {
-      font-size: 9pt;
-      color: #7f8c8d;
+    h4 {
+      font-size: 9.5pt;
+      font-weight: 400;
+      color: #0077b6;
+      margin-bottom: 4px;
     }
-    .entry-company {
-      font-size: 10pt;
-      color: #7f8c8d;
-      margin-bottom: 8px;
+    p { margin-bottom: 0.7em; font-size: 9.5pt; color: #444; }
+
+    ul {
+      margin: 0.3em 0 0.8em 1.2em;
+      list-style: none;
+      padding: 0;
     }
-    a { color: #3498db; text-decoration: none; }
-    code {
-      background: #f8f9fa;
-      padding: 0.15em 0.4em;
-      border-radius: 3px;
-      font-size: 0.9em;
+    li {
+      margin-bottom: 4px;
+      font-size: 9.5pt;
+      color: #444;
+      padding-left: 1em;
+      position: relative;
+    }
+    li::before {
+      content: '▸';
+      position: absolute;
+      left: 0;
+      color: #00b4d8;
+      font-size: 8pt;
+    }
+
+    .job-meta {
+      display: flex;
+      justify-content: space-between;
+      font-size: 8.5pt;
+      color: #888;
+      margin-bottom: 6px;
     }
+
+    /* ── PRINT ── */
     @media print {
-      body { padding: 0.5in; }
-      .section { page-break-inside: avoid; }
+      body { font-size: 9.5pt; }
+      .resume-header, .sidebar {
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+      }
     }
   </style>
 </head>
 <body>
-  <div class="header">
-    <h1>{{#if frontMatter.name}}{{frontMatter.name}}{{else}}Your Name{{/if}}</h1>
-    <div class="contact">
-      {{#if frontMatter.email}}<a href="mailto:{{frontMatter.email}}">{{frontMatter.email}}</a>{{/if}}
-      {{#if frontMatter.phone}}<a href="tel:{{frontMatter.phone}}">{{frontMatter.phone}}</a>{{/if}}
-      {{#if frontMatter.linkedin}}<a href="{{frontMatter.linkedin}}">LinkedIn</a>{{/if}}
-      {{#if frontMatter.github}}<a href="{{frontMatter.github}}">GitHub</a>{{/if}}
+
+  <div class="resume-header">
+    <div class="header-avatar">
+      {{#if initials}}{{initials}}{{else}}{{#if title}}{{slice title 0 1}}{{else}}?{{/if}}{{/if}}
+    </div>
+    <div class="header-info">
+      <h1>{{#if title}}{{title}}{{else}}Full Name{{/if}}</h1>
+      <div class="header-role">{{#if role}}{{role}}{{else}}Professional Title{{/if}}</div>
+      <div class="header-contact">
+        {{#if email}}<span>✉ {{email}}</span>{{/if}}
+        {{#if phone}}<span>✆ {{phone}}</span>{{/if}}
+        {{#if location}}<span>⌖ {{location}}</span>{{/if}}
+        {{#if website}}<span>⬡ {{website}}</span>{{/if}}
+      </div>
+    </div>
+  </div>
+
+  <div class="resume-body">
+    <div class="sidebar">
+      <!-- Sidebar rendered by separate partial or manually -->
+      {{#if skills_sidebar}}
+        <div class="sidebar-section">
+          <div class="sidebar-label">Skills</div>
+          {{{skills_sidebar}}}
+        </div>
+      {{/if}}
+    </div>
+    <div class="main">
+      {{{content}}}
     </div>
   </div>
-  <main>{{{content}}}</main>
+
 </body>
 </html>