@cenk1cenk2/md-printer 2.21.0 → 3.1.0

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

package/templates/mail/Template.svelte

@@ -0,0 +1,166 @@
+<script>
+  import { Page } from '@cenk1cenk2/md-printer/components'
+
+  let { content } = $props()
+</script>
+
+<svelte:head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta charset="UTF-8" />
+</svelte:head>
+
+<Page>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -- markdown input is trusted, same as the document itself -->
+  <div class="leading-tight prose">{@html content}</div>
+</Page>
+
+<style lang="postcss">
+  @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 '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;
+  }
+
+  /* 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;
+  }
+
+  table th {
+    @apply bg-gray-700 text-white;
+  }
+
+  table tr {
+    border-top: 0;
+    @apply even:bg-gray-50;
+  }
+
+  table th,
+  table td,
+  table tr {
+    border: 0;
+    padding: 0.5em 0.5em;
+  }
+</style>

package/templates/mail/settings.json

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

package/dist/hooks/not-found.hook.mjs

@@ -1,7 +0,0 @@
-import { notFoundHook } from "@cenk1cenk2/oclif-common";
-
-//#region src/hooks/not-found.hook.ts
-var not_found_hook_default = notFoundHook;
-
-//#endregion
-export { not_found_hook_default as default };

package/dist/hooks/update-notifier.hook.mjs

@@ -1,7 +0,0 @@
-import { updateNotifierHook } from "@cenk1cenk2/oclif-common";
-
-//#region src/hooks/update-notifier.hook.ts
-var update_notifier_hook_default = updateNotifierHook;
-
-//#endregion
-export { update_notifier_hook_default as default };

package/dist/interfaces/pupeteer.mjs

@@ -1 +0,0 @@
-export {  };

package/templates/default/main.css

@@ -1,73 +0,0 @@
-@import url(https://unpkg.com/github-markdown-css/github-markdown-light.css);
-@import url('https://fonts.bunny.net/css?family=montserrat:100,200,300,400,500,600,700,800,900&display=swap');
-@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono);
-
-.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;
-}
-
-.page-break {
-  page-break-after: always;
-}
-
-.markdown-body pre > code {
-  white-space: pre-wrap;
-  padding: 0;
-  margin: 0;
-
-  font-family: 'Roboto Mono', monospace;
-}
-
-.markdown-body .document-title-header {
-  height: 500px;
-  margin: auto auto;
-  padding-top: 50%;
-  page-break-after: always;
-  border-bottom: 0;
-  font-size: 2.5em;
-}
-
-.markdown-body pre {
-  background-color: #1e2127;
-  padding: 12px 8px;
-}
-
-.markdown-body output pre {
-  margin-top: -36px;
-  background-color: #1e2127;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-top-color: #38404b;
-  border-top-width: 2px;
-  border-top-style: solid;
-}
-
-.markdown-body output::before {
-  padding: 4px 16px;
-  position: relative;
-  top: -24px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  color: #a0a0a0;
-  background-color: #1e2127;
-  content: '> output';
-  font-size: 0.85em;
-  border-top-color: #38404b;
-  border-top-width: 2px;
-  border-top-style: solid;
-}

package/templates/invoice/.gitignore

@@ -1 +0,0 @@
-/main.css