@cenk1cenk2/md-printer 2.21.0 → 3.1.0

package/oclif.manifest.json

@@ -4,16 +4,15 @@
       "aliases": [],
       "args": {
         "file": {
-          "description": "File to be processed.",
+          "description": "Markdown or yaml file to render.",
           "name": "file"
         },
         "output": {
-          "description": "Output file that will be generated. Overwrites the one define in front-matter.",
-          "name": "output",
-          "required": false
+          "description": "Output file. Overwrites the one defined in front-matter.",
+          "name": "output"
         }
       },
-      "description": "Generates a PDF from the given markdown file with the selected HTML template.",
+      "description": "Renders a markdown or yaml file through a Svelte template into a PDF or HTML document.",
       "flags": {
         "log-level": {
           "description": "Set the log level of the application.",
@@ -57,20 +56,14 @@
         "stdin": {
           "char": "I",
           "description": "Read the input from stdin.",
-          "exclusive": [
-            "file"
-          ],
           "name": "stdin",
-          "required": false,
-          "hasDynamicHelp": false,
-          "multiple": false,
-          "type": "option"
+          "allowNo": false,
+          "type": "boolean"
         },
         "input-filetype": {
           "char": "f",
-          "description": "File type to be processed. By default it is detected by the file extension.",
+          "description": "Input file type. Detected from the file extension, markdown for stdin and unknown extensions.",
           "name": "input-filetype",
-          "default": "md",
           "hasDynamicHelp": false,
           "multiple": false,
           "options": [
@@ -82,9 +75,8 @@
         },
         "output-filetype": {
           "char": "F",
-          "description": "File type to be processed. By default it is detected by the file extension.",
+          "description": "Output file type, defaults to pdf. Overwrites the one defined in front-matter.",
           "name": "output-filetype",
-          "default": "pdf",
           "hasDynamicHelp": false,
           "multiple": false,
           "options": [
@@ -95,23 +87,22 @@
         },
         "stdout": {
           "char": "O",
-          "description": "Write to stdout instead of a file.",
+          "description": "Write the output to stdout instead of a file.",
           "name": "stdout",
           "allowNo": false,
           "type": "boolean"
         },
         "template": {
           "char": "t",
-          "description": "HTML template for the generated PDF file.",
+          "description": "Built-in template name or path to a template directory, defaults to \"default\". Overwrites the one defined in front-matter.",
           "name": "template",
-          "default": "default",
           "hasDynamicHelp": false,
           "multiple": false,
           "type": "option"
         },
         "title": {
           "char": "T",
-          "description": "Overwrite document title.",
+          "description": "Document title. Overwrites the one defined in front-matter or the template.",
           "name": "title",
           "hasDynamicHelp": false,
           "multiple": false,
@@ -119,7 +110,7 @@
         },
         "language": {
           "char": "l",
-          "description": "Language code for template translations. Overwrites the one defined in front-matter and template settings.",
+          "description": "Language for template translations. Overwrites the one defined in front-matter and template settings.",
           "name": "language",
           "hasDynamicHelp": false,
           "multiple": false,
@@ -127,31 +118,50 @@
         },
         "browser": {
           "char": "b",
-          "description": "Browser path that is going to be used for the PDF generation.",
+          "description": "Browser executable used for printing. Discovered automatically when omitted (Brave, Chrome, Chromium, Edge).",
           "name": "browser",
-          "default": "/usr/bin/brave",
           "hasDynamicHelp": false,
           "multiple": false,
           "type": "option"
         },
-        "watch": {
-          "char": "w",
-          "description": "Watch the changes on the given file.",
-          "name": "watch",
+        "continuous": {
+          "description": "Render the PDF as a single continuous page without page breaks.",
+          "name": "continuous",
           "allowNo": false,
           "type": "boolean"
         },
-        "dev": {
-          "char": "d",
-          "description": "Run with Chrome browser instead of publishing the file.",
-          "name": "dev",
+        "preview": {
+          "char": "p",
+          "description": "Rebuild whenever the input, the template or its assets change, show the HTML and the PDF in a live preview and rewrite the output file when there is one.",
+          "name": "preview",
           "allowNo": false,
           "type": "boolean"
         },
-        "continuous": {
-          "description": "Render PDF as a single continuous page without page breaks.",
-          "name": "continuous",
-          "allowNo": false,
+        "host": {
+          "description": "Loopback host for the preview server, it serves the files next to the input and is never exposed to the network.",
+          "name": "host",
+          "default": "127.0.0.1",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "options": [
+            "127.0.0.1",
+            "localhost",
+            "::1"
+          ],
+          "type": "option"
+        },
+        "port": {
+          "description": "Port for the preview server, random when 0.",
+          "name": "port",
+          "default": 0,
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
+        "open": {
+          "description": "Open the preview window, --no-open keeps rebuilding and writing without one.",
+          "name": "open",
+          "allowNo": true,
           "type": "boolean"
         },
         "sign": {
@@ -165,6 +175,9 @@
           "name": "sign-provider",
           "hasDynamicHelp": false,
           "multiple": false,
+          "options": [
+            "a-trust"
+          ],
           "type": "option"
         },
         "sign-certificate": {
@@ -185,5 +198,5 @@
       "enableJsonFlag": false
     }
   },
-  "version": "2.21.0"
+  "version": "3.1.0"
 }

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@cenk1cenk2/md-printer",
-  "version": "2.21.0",
-  "description": "A markdown printer.",
-  "module": "dist/index.mjs",
+  "version": "3.1.0",
+  "description": "Render markdown or yaml through Svelte templates into PDF or HTML with Puppeteer.",
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://gitlab.kilic.dev/utils/md-printer"
+    "url": "https://gitlab.kilic.dev/utils/md-printer.git"
   },
   "author": "Cenk Kilic",
   "license": "MIT",
@@ -17,7 +16,6 @@
     "access": "public"
   },
   "files": [
-    "/config",
     "/bin",
     "/dist",
     "/oclif.manifest.json",
@@ -31,85 +29,121 @@
       "target": "./dist/commands/index.mjs"
     },
     "plugins": [
-      "@oclif/plugin-help"
+      "@oclif/plugin-help",
+      "@cenk1cenk2/oclif-common"
     ],
-    "hooks": {
-      "init": [
-        "./dist/hooks/update-notifier.hook"
-      ],
-      "command_not_found": "./dist/hooks/not-found.hook"
-    },
     "topicSeparator": " "
   },
   "engines": {
-    "node": ">=24.0.0"
+    "node": ">=24.15.0"
   },
   "keywords": [
+    "markdown",
+    "pdf",
+    "svelte",
+    "tailwind",
+    "puppeteer",
+    "invoice",
+    "cli",
     "oclif",
     "cenk1cenk2"
   ],
   "dependencies": {
-    "@cenk1cenk2/oclif-common": "^7.1.0",
+    "@cenk1cenk2/oclif-common": "^8.0.0",
+    "@fontsource/montserrat": "^5.3.0",
     "@listr2/manager": "^4.3.1",
     "@nestjs/common": "^12.1.2",
     "@oclif/core": "^5.1.2",
     "@oclif/plugin-help": "^7.0.2",
     "@signpdf/placeholder-plain": "^3.3.0",
     "@signpdf/utils": "^3.3.0",
-    "@tailwindcss/forms": "^0.5.11",
-    "@tailwindcss/postcss": "^4.3.3",
+    "@tailwindcss/node": "^4.3.3",
+    "@tailwindcss/oxide": "^4.3.3",
     "@tailwindcss/typography": "^0.5.20",
+    "change-case": "^5.4.4",
     "chokidar": "^5.0.0",
-    "fs-extra": "^11.4.1",
-    "get-port": "^7.2.0",
-    "gray-matter": "^4.0.3",
+    "enhanced-resolve": "^5.26.0",
+    "entities": "^8.1.0",
+    "es-toolkit": "^1.52.0",
+    "github-markdown-css": "^5.9.0",
+    "hast-util-from-html": "^2.0.3",
+    "hast-util-to-html": "^9.0.5",
+    "highlight.js": "^11.12.0",
     "i18next": "^26.4.2",
+    "lightningcss": "^1.33.0",
     "listr2": "^11.2.0",
-    "md-to-pdf": "^5.2.5",
-    "nunjucks": "^3.2.4",
-    "postcss": "^8.5.29",
-    "puppeteer": "^25.12.0",
+    "lowlight": "^3.3.0",
+    "mime": "^4.1.1",
+    "perfect-debounce": "^2.1.0",
+    "property-information": "^7.2.0",
+    "puppeteer-core": "^25.13.0",
+    "raw-body": "^4.0.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark-directive": "^4.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "rolldown": "^1.2.13",
     "rxjs": "^7.8.2",
-    "showdown": "^2.1.0",
+    "serve-static": "^2.2.1",
     "source-map-support": "^0.5.21",
+    "srcset": "^5.0.3",
+    "svelte": "^5.57.2",
     "tailwindcss": "^4.3.3",
-    "yaml": "^2.9.1"
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.1.0",
+    "vfile": "^6.0.3",
+    "vfile-matter": "^5.0.1",
+    "which": "^7.0.0",
+    "write-file-atomic": "^8.0.0",
+    "yaml": "^2.9.1",
+    "zod": "^4.6.7"
   },
   "devDependencies": {
     "@cenk1cenk2/cz-cc": "^3.0.6",
     "@cenk1cenk2/eslint-config": "^3.3.9",
     "@tsconfig/node24": "^24.0.5",
-    "@types/fs-extra": "^11.0.4",
+    "@types/hast": "^3.0.5",
+    "@types/mdast": "^4.0.4",
     "@types/node": "^24.19.1",
-    "@types/nunjucks": "^3.2.6",
-    "@types/showdown": "^2.0.6",
+    "@types/serve-static": "^2.2.0",
+    "@types/which": "^3.0.4",
+    "@types/write-file-atomic": "^4.0.3",
     "eslint": "^10.12.0",
+    "eslint-plugin-svelte": "^3.23.1",
     "execa": "^10.1.0",
-    "globby": "^16.2.4",
     "oclif": "^6.0.2",
     "prettier": "^3.9.9",
-    "prettier-plugin-jinja-template": "^2.2.0",
-    "theme-colors": "^0.1.0",
-    "tpm": "^1.4.14",
+    "prettier-plugin-svelte": "^4.1.1",
+    "svelte-eslint-parser": "^1.9.0",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "tsdown": "^0.23.0",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.4"
   },
   "config": {
     "commitizen": {
       "path": "./node_modules/@cenk1cenk2/cz-cc"
     }
   },
+  "bugs": {
+    "url": "https://gitlab.kilic.dev/utils/md-printer/-/issues"
+  },
+  "homepage": "https://gitlab.kilic.dev/utils/md-printer",
   "scripts": {
     "dev": "./bin/dev.js",
     "start": "./bin/run.js",
     "build": "tsdown",
     "dev:start": "tsdown --watch src/",
-    "clean": "rimraf oclif.manifest.json",
     "format": "prettier --write src/ --log-level warn && eslint --fix",
     "lint": "eslint",
     "manifest": "oclif manifest",
-    "docs:toc": "oclif readme"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
 }

package/templates/default/Template.svelte

@@ -0,0 +1,83 @@
+<script>
+  import { Markdown, Page } from '@cenk1cenk2/md-printer/components'
+
+  let { data } = $props()
+</script>
+
+<svelte:head>
+  {#if data.documentTitle}
+    <title>{data.documentTitle}</title>
+  {/if}
+</svelte:head>
+
+<Page>
+  <Markdown />
+</Page>
+
+<style lang="postcss">
+  @import 'github-markdown-css/github-markdown-light.css';
+  @import '@fontsource/montserrat/latin-400.css';
+  @import '@fontsource/montserrat/latin-ext-400.css';
+  @import '@fontsource/montserrat/latin-700.css';
+  @import '@fontsource/montserrat/latin-ext-700.css';
+  @import '@fontsource/montserrat/latin-800.css';
+  @import '@fontsource/montserrat/latin-ext-800.css';
+
+  .markdown-body {
+    font-size: 11px;
+    font-family: 'Montserrat', sans-serif;
+  }
+
+  .markdown-body h1,
+  .markdown-body h2 {
+    font-weight: 800;
+  }
+
+  .markdown-body h3,
+  .markdown-body h4,
+  .markdown-body h5,
+  .markdown-body h6,
+  .markdown-body strong,
+  .markdown-body b {
+    font-weight: 700;
+  }
+
+  .markdown-body pre > code {
+    white-space: pre-wrap;
+    padding: 0;
+    margin: 0;
+  }
+
+  .markdown-body .document-title-header {
+    height: 500px;
+    margin: auto auto;
+    padding-top: 50%;
+    break-after: page;
+    border-bottom: 0;
+    font-size: 2.5em;
+  }
+
+  .markdown-body pre {
+    padding: 12px 8px;
+  }
+
+  .markdown-body output pre {
+    margin-top: -36px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: 2px solid #d1d9e0;
+  }
+
+  .markdown-body output::before {
+    padding: 4px 16px;
+    position: relative;
+    top: -24px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-top: 2px solid #d1d9e0;
+    color: #59636e;
+    background-color: #f6f8fa;
+    content: '> output';
+    font-size: 0.85em;
+  }
+</style>

package/templates/default/settings.json

@@ -1,7 +1,5 @@
 {
-  "body_class": ["markdown-body"],
-  "highlight_style": "atom-one-dark",
-  "pdf_options": {
+  "pdfOptions": {
     "format": "A4",
     "margin": "18mm 12mm",
     "printBackground": true

package/templates/invoice/Template.svelte

@@ -0,0 +1,247 @@
+<script>
+  import Client from './components/Client.svelte'
+  import Company from './components/Company.svelte'
+  import Items from './components/Items.svelte'
+  import Notes from './components/Notes.svelte'
+  import Payment from './components/Payment.svelte'
+  import Signature from './components/Signature.svelte'
+  import Totals from './components/Totals.svelte'
+  import { Page, PageNumber, TotalPages, Title } from '@cenk1cenk2/md-printer/components'
+
+  let { data, content, t, signature } = $props()
+
+  const { company = {}, client = {}, payment = {}, currency = '', date, id } = $derived(data)
+
+  const rows = $derived.by(() =>
+    (data.items ?? []).map((item) => {
+      const subtotal = item.quantity * item.price
+      const tax = (subtotal * item.tax) / 100
+
+      return {
+        item,
+        subtotal,
+        tax,
+        total: subtotal + tax
+      }
+    })
+  )
+  const calculatedSubtotal = $derived(rows.reduce((sum, row) => sum + row.subtotal, 0))
+  const calculatedTax = $derived(rows.reduce((sum, row) => sum + row.tax, 0))
+  const calculatedTotal = $derived(calculatedSubtotal + calculatedTax)
+
+  const title = $derived(
+    `${date} - Invoice from ${company.name}${company.tax_number ? ` (${company.tax_number})` : ''} to ${client.name}${client.tax_number ? ` (${client.tax_number})` : ''} - #${id}`
+  )
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+</svelte:head>
+
+<Page>
+  {#snippet footer()}
+    <div style="margin: 0 auto; text-align: center; font-size: 8px; color: #38404b; width: 100%; padding-top: 8px; margin-bottom: -8px;">
+      <Title />
+      -
+      <b> <PageNumber />/<TotalPages /> </b>
+    </div>
+  {/snippet}
+
+  <div class="max-w-full leading-tight prose grid">
+    <section id="header" class="relative grid grid-cols-12">
+      <Company {company} {t} />
+    </section>
+    <section id="client" class="grid grid-cols-12">
+      <Client {client} {date} {id} {t} />
+    </section>
+    <section id="items" class="grid grid-cols-12">
+      <Items {rows} {currency} {t} />
+    </section>
+    <section id="payment" class="grid grid-cols-12">
+      <Payment {payment} {t} />
+      <div class="col-span-1"></div>
+      <Totals subtotal={calculatedSubtotal} tax={calculatedTax} total={calculatedTotal} {currency} {t} />
+    </section>
+    <section id="footer" class="grid grid-cols-12">
+      <Notes {content} {t} />
+      <div class="col-span-1"></div>
+      <Signature {signature} {t} />
+    </section>
+  </div>
+</Page>
+
+<style lang="postcss">
+  @import '@fontsource/montserrat/latin-400.css';
+  @import '@fontsource/montserrat/latin-ext-400.css';
+  @import '@fontsource/montserrat/latin-500.css';
+  @import '@fontsource/montserrat/latin-ext-500.css';
+  @import '@fontsource/montserrat/latin-700.css';
+  @import '@fontsource/montserrat/latin-ext-700.css';
+  @import '@fontsource/montserrat/latin-800.css';
+  @import '@fontsource/montserrat/latin-ext-800.css';
+  @import '@fontsource/montserrat/latin-900.css';
+  @import '@fontsource/montserrat/latin-ext-900.css';
+
+  @import 'tailwindcss';
+  @plugin '@tailwindcss/typography';
+
+  @theme {
+    --font-sans: 'Montserrat';
+    --font-serif: 'Montserrat';
+    --font-weight-semibold: 700;
+    --font-weight-bold: 800;
+    --font-weight-extrabold: 900;
+    --color-primary-500: #cd0043;
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: #abb2bf;
+    --color-gray-200: #979eab;
+    --color-gray-300: #7c8a9d;
+    --color-gray-400: #5c6370;
+    --color-gray-500: #4b5263;
+    --color-gray-600: #2c333d;
+    --color-gray-700: #22282f;
+    --color-gray-800: #1e2127;
+    --color-gray-900: #17191e;
+    --color-gray-950: oklch(13% 0.028 261.692);
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+
+  body {
+    font-family: var(--font-sans);
+  }
+
+  address {
+    @apply text-sm;
+    white-space: pre-line;
+  }
+
+  /* Typography styles converted from config */
+  .prose a {
+    text-decoration: none;
+  }
+
+  .prose h1 {
+    font-weight: 800;
+    padding-top: 0.1875rem;
+    /* 0.75 * 0.25rem */
+    padding-bottom: 0.1875rem;
+    margin-bottom: 0;
+    margin-top: 0;
+    border-width: 0;
+  }
+
+  .prose h2 {
+    font-weight: 800;
+    padding-top: 0.125rem;
+    /* 0.5 * 0.25rem */
+    padding-bottom: 0.125rem;
+    margin-bottom: 0;
+    margin-top: 0;
+    border-width: 0;
+  }
+
+  .prose h3 {
+    font-weight: 700;
+    padding-top: 0.0625rem;
+    /* 0.25 * 0.25rem */
+    padding-bottom: 0.0625rem;
+    margin-bottom: 0;
+    margin-top: 0;
+    border-width: 0;
+  }
+
+  p {
+    margin: 0.1em 0em;
+  }
+
+  .prose blockquote {
+    font-weight: 400;
+    color: var(--color-gray-600);
+    font-style: normal;
+    quotes: '\201C' '\201D' '\2018' '\2019';
+  }
+
+  .prose blockquote p:first-of-type::before {
+    content: '';
+  }
+
+  .prose blockquote p:last-of-type::after {
+    content: '';
+  }
+
+  .prose ul > li {
+    padding-left: 1em;
+    text-align: left;
+  }
+
+  .prose ol > li {
+    padding-left: 1em;
+    text-align: left;
+  }
+
+  .prose ol > li::before {
+    top: calc(0.875em - 0.1em);
+  }
+
+  .prose ul > li::before {
+    top: calc(0.875em - 0.1em);
+  }
+
+  html {
+    font-size: 12px;
+  }
+
+  .page-break {
+    page-break-after: always;
+  }
+
+  .text-vertical {
+    text-orientation: upright;
+    writing-mode: vertical-lr;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    @apply p-4;
+  }
+
+  /* md-to-pdf ships github-markdown-css, which sets `table { display: block }` for horizontal
+   * scrolling. That collapses rows into an anonymous max-content box, so column widths are ignored. */
+  table {
+    display: table;
+    width: 100%;
+  }
+
+  table th {
+    @apply bg-gray-700 text-white;
+  }
+
+  table tr {
+    border-top: 0;
+    break-inside: avoid;
+  }
+
+  /* zebra rows only pay off over many rows, so striping is opt-in; the short key/value
+   * tables use hairline row dividers instead and stay quieter beside the items table.
+   * The reset is needed because md-to-pdf's markdown.css stripes every table itself. */
+  table tr:nth-child(even) {
+    background-color: transparent;
+  }
+
+  table.striped tr:nth-child(even) {
+    @apply bg-gray-50;
+  }
+
+  table th,
+  table td,
+  table tr {
+    border: 0;
+    padding: 0.5em 0.5em;
+  }
+</style>