@cenk1cenk2/md-printer 2.21.0 → 3.0.0

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>

package/templates/invoice/components/Client.svelte

@@ -0,0 +1,42 @@
+<!--
+  @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 font-bold">{t('fields.date')}</td>
+          <td class="w-[70%] text-right align-middle font-semibold">{date}</td>
+        </tr>
+        <tr>
+          <td class="w-[30%] text-left align-middle font-bold border-t! border-t-gray-100/30!">{t('fields.id')}</td>
+          <td class="w-[70%] text-right align-middle font-semibold border-t! border-t-gray-100/30!">{id}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/templates/invoice/components/Company.svelte

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

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

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

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

@@ -0,0 +1,34 @@
+<!--
+  @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}

package/templates/invoice/components/Totals.svelte

@@ -0,0 +1,47 @@
+<!--
+  @component
+  Subtotal, tax and total summary of the invoice.
+-->
+<script>
+  import { round } from '../round.js'
+
+  /**
+   * @type {{
+   *   subtotal: number,
+   *   tax: number,
+   *   total: number,
+   *   currency: string,
+   *   t: (key: string) => string
+   * }}
+   */
+  let { subtotal, tax, total, currency, t } = $props()
+</script>
+
+<div class="col-span-5 flex flex-col justify-center m-8 mr-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-[55%] text-left align-middle font-semibold">{t('summary.subtotal')}</td>
+          <td class="w-[45%] text-right align-middle font-semibold">{round(subtotal)}{currency}</td>
+        </tr>
+        <tr>
+          <td class="w-[55%] text-left align-middle font-semibold border-t! border-t-gray-100/30!">{t('summary.tax')}</td>
+          <td class="w-[45%] text-right align-middle font-semibold border-t! border-t-gray-100/30!">
+            {#if tax > 0}
+              {round(tax)}{currency}
+            {:else}
+              —
+            {/if}
+          </td>
+        </tr>
+        <tr>
+          <td class="w-[55%] text-left align-middle font-bold text-primary-500 border-t-2! border-t-primary-500!">{t('summary.total')}</td>
+          <td class="w-[45%] text-right align-middle font-bold text-primary-500 border-t-2! border-t-primary-500!">
+            {round(total)}{currency}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/templates/invoice/round.js

@@ -0,0 +1,2 @@
+// two decimals at most, printed without trailing zeros
+export const round = (value) => Math.round(Number(value) * 100) / 100

package/templates/invoice/settings.json

@@ -1,12 +1,9 @@
 {
-  "body_class": [],
-  "document_title": "{{ date }} - Invoice from {{ company.name }}{% if company.tax_number %} ({{ company.tax_number }}){% endif %} to {{ client.name }}{% if client.tax_number %} ({{ client.tax_number }}){% endif %} - #{{ id }}",
-  "highlight_style": "atom-one-dark",
   "i18n": {
     "language": "en",
     "fallback": "en"
   },
-  "pdf_options": {
+  "pdfOptions": {
     "format": "A4",
     "margin": "0mm 0mm 12mm 0mm",
     "printBackground": true

package/templates/kilic.dev/Template.svelte

@@ -0,0 +1,102 @@
+<script>
+  import { Markdown, Page, PageNumber, Title, TotalPages } from '@cenk1cenk2/md-printer/components'
+
+  let { data } = $props()
+
+  const logo = 'https://main.s3.kilic.dev/html/icon.png'
+</script>
+
+<svelte:head>
+  {#if data.documentTitle}
+    <title>{data.documentTitle}</title>
+  {/if}
+</svelte:head>
+
+<Page>
+  {#snippet header()}
+    <header style="margin: 0 auto; text-align: center; font-family: monospace; color: #242424">
+      <img height="24" src={logo} alt="logo" />
+    </header>
+  {/snippet}
+
+  {#snippet footer()}
+    <footer style="margin: 0 auto; text-align: center; font-size: 8px; color: #38404b; width: 100%; border-top: 1px solid #efefef; padding-top: 8px">
+      <img height="8" src={logo} alt="logo" />
+      <span>kilic.dev</span>
+      -
+      <Title />
+      -
+      <PageNumber />/<TotalPages />
+    </footer>
+  {/snippet}
+
+  <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/kilic.dev/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