@cenk1cenk2/md-printer 3.2.23 → 3.3.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@cenk1cenk2/md-printer",
-  "version": "3.2.23",
+  "version": "3.3.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.git"
+    "url": "https://gitlab.kilic.dev/utils/md-printer.git",
+    "directory": "packages/md-printer"
   },
   "author": "Cenk Kilic",
   "license": "MIT",
@@ -18,8 +19,7 @@
   "files": [
     "/bin",
     "/dist",
-    "/oclif.manifest.json",
-    "templates/"
+    "/oclif.manifest.json"
   ],
   "oclif": {
     "bin": "md-printer",
@@ -49,11 +49,15 @@
     "cenk1cenk2"
   ],
   "dependencies": {
+    "@cenk1cenk2/md-printer-template-cv": "1.0.0",
+    "@cenk1cenk2/md-printer-template-default": "1.0.0",
+    "@cenk1cenk2/md-printer-template-invoice": "1.0.0",
+    "@cenk1cenk2/md-printer-template-kilic.dev": "1.0.0",
+    "@cenk1cenk2/md-printer-template-mail": "1.0.0",
     "@cenk1cenk2/oclif-common": "^8.0.2",
-    "@fontsource/montserrat": "^5.3.0",
     "@listr2/manager": "^4.3.3",
     "@nestjs/common": "^12.3.2",
-    "@oclif/core": "^5.1.10",
+    "@oclif/core": "^5.1.11",
     "@oclif/plugin-help": "^7.0.6",
     "@signpdf/placeholder-plain": "^4.0.0",
     "@signpdf/utils": "^4.0.0",
@@ -65,16 +69,16 @@
     "chokidar": "^6.0.0",
     "enhanced-resolve": "^5.26.0",
     "entities": "^9.0.0",
-    "es-toolkit": "^1.53.0",
-    "github-markdown-css": "^5.9.0",
+    "es-toolkit": "^1.53.1",
     "hast-util-from-html": "^2.0.3",
     "hast-util-to-html": "^9.0.6",
     "highlight.js": "^11.12.0",
-    "i18next": "^26.5.11",
+    "i18next": "^26.7.1",
     "lightningcss": "^1.33.0",
     "listr2": "^11.4.0",
     "lowlight": "^3.3.0",
     "mime": "^4.1.2",
+    "mupdf": "^1.28.1",
     "perfect-debounce": "^2.1.0",
     "pkijs": "^4.0.1",
     "property-information": "^7.2.0",
@@ -105,22 +109,15 @@
     "zod": "^4.6.7"
   },
   "devDependencies": {
-    "@cenk1cenk2/cz-cc": "^3.0.12",
-    "@cenk1cenk2/eslint-config": "^3.4.5",
     "@tsconfig/node24": "^24.0.5",
     "@types/hast": "^3.0.5",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^26.6.5",
+    "@types/node": "^26.6.6",
     "@types/serve-static": "^2.2.0",
     "@types/which": "^3.0.4",
     "@types/write-file-atomic": "^4.0.3",
-    "eslint": "^10.13.0",
-    "eslint-plugin-svelte": "^3.23.1",
     "execa": "^10.2.1",
     "oclif": "^6.0.15",
-    "prettier": "^3.9.10",
-    "prettier-plugin-svelte": "^4.1.1",
-    "svelte-eslint-parser": "^1.10.0",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "tsdown": "^0.23.4",
@@ -128,11 +125,6 @@
     "vite": "^8.3.5",
     "vitest": "^5.0.5"
   },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/@cenk1cenk2/cz-cc"
-    }
-  },
   "bugs": {
     "url": "https://gitlab.kilic.dev/utils/md-printer/-/issues"
   },
@@ -142,8 +134,6 @@
     "start": "./bin/run.js",
     "build": "tsdown",
     "dev:start": "tsdown --watch src/",
-    "format": "prettier --write src/ --log-level warn && eslint --fix",
-    "lint": "eslint",
     "manifest": "oclif manifest",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"

package/templates/default/Template.svelte

@@ -1,83 +0,0 @@
-<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 +0,0 @@
-{
-  "pdfOptions": {
-    "format": "A4",
-    "margin": "18mm 12mm",
-    "printBackground": true
-  }
-}

package/templates/invoice/Template.svelte

@@ -1,247 +0,0 @@
-<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>

package/templates/invoice/components/Client.svelte

@@ -1,42 +0,0 @@
-<!--
-  @component
-  Recipient details and the date/id table of the invoice.
--->
-<script>
-  /**
-   * @type {{
-   *   client: { name?: string, tax_number?: string, address?: string },
-   *   date: string,
-   *   id: string | number,
-   *   t: (key: string) => string
-   * }}
-   */
-  let { client, date, id, t } = $props()
-</script>
-
-<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100">
-  <p class="text-vertical">{t('sections.to')}</p>
-</div>
-<div class="col-span-5 flex flex-col justify-start p-4">
-  <h2>{client.name}</h2>
-  {#if client.tax_number}
-    <h3>{client.tax_number}</h3>
-  {/if}
-  <address>{(client.address ?? '').trim()}</address>
-</div>
-<div class="col-span-6 flex items-center justify-center text-xs py-4 pl-4 pr-16">
-  <div class="w-full overflow-hidden rounded-xl border-y-2 shadow-md shadow-gray-300 border-gray-900!">
-    <table class="w-full table-auto my-0!">
-      <tbody>
-        <tr>
-          <td class="w-[30%] text-left align-middle text-sm font-bold">{t('fields.date')}</td>
-          <td class="w-[70%] text-right align-middle text-sm font-semibold whitespace-nowrap">{date}</td>
-        </tr>
-        <tr>
-          <td class="w-[30%] text-left align-middle text-sm font-bold border-t! border-t-gray-100/30!">{t('fields.id')}</td>
-          <td class="w-[70%] text-right align-middle text-sm font-semibold whitespace-nowrap border-t! border-t-gray-100/30!">{id}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>

package/templates/invoice/components/Company.svelte

@@ -1,41 +0,0 @@
-<!--
-  @component
-  Logo, sender details and invoice title cells of the invoice header.
--->
-<script>
-  /**
-   * @type {{
-   *   company: { name?: string, tax_number?: string, address?: string, phone?: string, email?: string, website?: string },
-   *   t: (key: string) => string
-   * }}
-   */
-  let { company, t } = $props()
-</script>
-
-<img
-  src="https://main.s3.kilic.dev/html/icon.png"
-  alt="logo"
-  class="absolute h-40 top-1/2 left-1/2 -translate-x-1/2 -translate-y-[62%] drop-shadow-lg drop-shadow-gray-900 z-10"
-/>
-<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100">
-  <p class="text-vertical">{t('sections.from')}</p>
-</div>
-<div class="col-start-2 col-span-5 flex flex-col justify-start p-4 pt-10 mr-12">
-  <h1>{company.name}</h1>
-  <h3>{company.tax_number}</h3>
-  <address>{(company.address ?? '').trim()}</address>
-  <div class="flex flex-col text-sm">
-    {#if company.phone}
-      <a href="tel:{company.phone}">{company.phone}</a>
-    {/if}
-    {#if company.email}
-      <a href="mailto:{company.email}">{company.email}</a>
-    {/if}
-    {#if company.website}
-      <a href={company.website}>{company.website}</a>
-    {/if}
-  </div>
-</div>
-<div class="col-span-6 bg-gray-900 rounded-bl-4xl flex flex-col justify-center text-center">
-  <p class="p-4 font-bold text-white text-6xl">{t('invoice')}</p>
-</div>

package/templates/invoice/components/Items.svelte

@@ -1,66 +0,0 @@
-<!--
-  @component
-  Table of invoice line items with their subtotal, tax and total.
--->
-<script>
-  import { round } from '../round.js'
-
-  /**
-   * @type {{
-   *   rows: { item: { description?: string, quantity: number, unit?: string, price: number, tax: number }, subtotal: number, tax: number, total: number }[],
-   *   currency: string,
-   *   t: (key: string) => string
-   * }}
-   */
-  let { rows, currency, t } = $props()
-</script>
-
-<div class="col-span-12 px-16 py-4">
-  <div class="overflow-hidden rounded-xl border-y-2 shadow-md shadow-gray-300 border-gray-900!">
-    <table class="striped w-full table-auto my-0!">
-      <thead class="border-b-1 border-b-gray-900! border-x-2 border-x-gray-900!">
-        <tr>
-          <th scope="col" class="w-md text-center">
-            {t('table.description')}
-          </th>
-          <th scope="col" class="w-[10%] text-center">
-            {t('table.quantity')}
-          </th>
-          <th scope="col" class="w-[10%] text-center">
-            {t('table.price')}
-          </th>
-          <th scope="col" class="w-[10%] text-center">
-            {t('table.subtotal')}
-          </th>
-          <th scope="col" class="w-[10%] text-center">
-            {t('table.tax')}
-          </th>
-          <th scope="col" class="w-[14%] font-semibold text-center">
-            {t('table.total')}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {#each rows as row, index (index)}
-          <tr>
-            <td class="text-left align-middle">{row.item.description}</td>
-            <td class="text-center align-middle">{row.item.quantity} {row.item.unit}</td>
-            <td class="text-center align-middle">{row.item.price}{currency}</td>
-            <td class="text-center align-middle">{round(row.subtotal)}{currency}</td>
-            <td class="text-center align-middle">
-              {#if row.tax > 0}
-                <div class="flex flex-row items-center">
-                  <span class="w-8 shrink-0 mr-1 py-px rounded-full text-center text-[0.50rem] font-semibold bg-gray-700 text-white">{row.item.tax}%</span>
-                  <span>{round(row.tax)}{currency}</span>
-                </div>
-              {:else}
-                <span class="font-semibold">—</span>
-              {/if}
-            </td>
-            <td class="font-semibold text-right align-middle">{round(row.total)}{currency}</td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </div>
-</div>

package/templates/invoice/components/Notes.svelte

@@ -1,21 +0,0 @@
-<!--
-  @component
-  Rendered markdown body of the document as the invoice notes.
--->
-<script>
-  /**
-   * @type {{
-   *   content: string,
-   *   t: (key: string) => string
-   * }}
-   */
-  let { content, t } = $props()
-</script>
-
-<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100">
-  <p class="text-vertical">{t('sections.notes')}</p>
-</div>
-<div class="col-span-5 flex flex-col p-4 text-sm leading-tight prose">
-  <!-- eslint-disable-next-line svelte/no-at-html-tags -- markdown input is trusted, same as the document itself -->
-  {@html content}<br />
-</div>

package/templates/invoice/components/Payment.svelte

@@ -1,25 +0,0 @@
-<!--
-  @component
-  Bank details of the payee, shown beside the totals.
--->
-<script>
-  /**
-   * @type {{
-   *   payment: { bank?: string, address?: string, bic?: string, routing?: string, name?: string, iban?: string },
-   *   t: (key: string) => string
-   * }}
-   */
-  let { payment, t } = $props()
-</script>
-
-<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100 bg-gray-900">
-  <p class="text-vertical">{t('sections.payment')}</p>
-</div>
-<div class="col-span-5 flex flex-col p-4 ml-[-1px] pl-5 justify-center bg-gray-700 rounded-r-4xl text-white">
-  <span>{payment.bank}</span>
-  <address>{(payment.address ?? '').trim()}</address>
-  <span>{payment.bic}</span>
-  <span>{payment.routing}</span>
-  <span class="mt-4 font-semibold">{payment.name}</span>
-  <span class="font-semibold">{payment.iban}</span>
-</div>

package/templates/invoice/components/Signature.svelte

@@ -1,34 +0,0 @@
-<!--
-  @component
-  Signature block of the invoice: the digital signature when signing is enabled, an empty box otherwise.
--->
-<script>
-  import { SignatureBlock } from '@cenk1cenk2/md-printer/components'
-
-  /**
-   * @type {{
-   *   signature?: { date: string, name?: string, issuer?: string, serial?: string },
-   *   t: (key: string) => string
-   * }}
-   */
-  let { signature, t } = $props()
-</script>
-
-{#if signature}
-  <div class="col-span-5 flex flex-col justify-center m-8 mr-16">
-    <SignatureBlock
-      {signature}
-      labels={{
-        title: t('signed.title'),
-        by: t('signed.by'),
-        date: t('signed.date'),
-        issuer: t('signed.issuer'),
-        verify: t('signed.verify')
-      }}
-    />
-  </div>
-{:else}
-  <div class="col-span-5 flex flex-col justify-end text-center m-8 mr-16 p-4 pb-0 border-2 border-gray-50! rounded-xl text-xs text-gray-100 h-36">
-    <p>{t('signature')}</p>
-  </div>
-{/if}