feat: use tailwind css

.gitignore

@@ -1,2 +1,5 @@
 config.json
 lou-taylor.json
+index.html
+invoice.pdf
+

pkg/invoice/report/assets/style.css

@@ -1,86 +1,139 @@
-@page {
+.markdown h1 {
-  size: A4;
+  font-size: 2.25em;     /* relative to base 12pt */
-  padding: 2cm;
+  font-weight: 700;      /* font-bold */
-}
+  margin-top: 1.5em;
-@page:first {
+  margin-bottom: 1em;
-  padding: 0;
-}
-@media print {
-  .page,
-  .page-break {
-    break-after: page;
-  }
 }
 
-.first-page {
+.markdown h2 {
-  margin-left: 2cm;
+  font-size: 1.875em;
-  margin-right: 2cm;
+  font-weight: 600;
+  margin-top: 1.25em;
+  margin-bottom: 0.75em;
 }
 
-body {
+.markdown h3 {
-  font-family: sans-serif;
+  font-size: 1.5em;
-  font-size: 12pt;
+  font-weight: 600;
-  color: #333;
+  margin-top: 1em;
-}
-
-section {
-  margin-bottom: 3em;
-}
-p {
-  margin-top: 0.25em;
   margin-bottom: 0.5em;
 }
 
-header {
+.markdown h4 {
-  display: flex;
+  font-size: 1.25em;
-  justify-content: space-between;
+  font-weight: 500;
-  margin-bottom: 40px;
+  margin-top: 0.75em;
+  margin-bottom: 0.5em;
+}
 
-  h2 {
+.markdown p {
+  margin-bottom: 1em;
+}
+
+.markdown a {
+  color: #2563eb;
+  text-decoration: none;
+}
+.markdown a:hover {
+  text-decoration: underline;
+}
+
+.markdown strong {
+  font-weight: 600;
+  color: #111827;
+}
+
+.markdown em {
+  font-style: italic;
+}
+
+.markdown code {
+  background-color: #f3f4f6;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875em;  /* relative to base 12pt */
+  padding: 0.125em 0.25em;
+  border-radius: 0.25em;
+}
+
+.markdown pre {
+  background-color: #111827;
+  color: #f3f4f6;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875em;
+  padding: 1em;
+  border-radius: 0.5em;
+  overflow-x: auto;
+  margin-bottom: 1em;
+}
+
+.markdown blockquote {
+  border-left: 4px solid #d1d5db;
+  padding-left: 1em;
+  font-style: italic;
+  color: #4b5563;
+  margin-bottom: 1em;
+}
+
+.markdown ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+  margin-bottom: 1em;
   margin-top: 0;
-  }
-}
-h1 {
-  margin: 0;
-  font-size: 2em;
-}
-h2 {
-  margin-top: 0.5em;
 }
 
-table {
+.markdown ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+  margin-bottom: 1em;
+  margin-top: 0;
+}
+
+.markdown li {
+  margin-bottom: 0.25em;
+  line-height: 1.625;
+}
+
+.markdown hr {
+  border: none;
+  border-top: 1px solid #d1d5db;
+  margin: 1.5em 0;
+}
+
+.markdown img {
+  max-width: 100%;
+  border-radius: 0.5em;
+  margin: 1em 0;
+}
+
+.markdown table {
   width: 100%;
   border-collapse: collapse;
-  margin-bottom: 20px;
+  margin: 1em 0;
-}
+  font-size: 0.875em; /* relative to base 12pt */
-table,
-th,
-td {
-  border: 1px solid #ccc;
-}
-th,
-td {
-  padding: 0.25em 0.5em;
-  text-align: left;
-}
-th {
-  background-color: #f2f2f2;
 }
 
-article {
+.markdown th,
-  margin-bottom: 20px;
+.markdown td {
+  border: 1px solid #d1d5db;
+  padding: 0.5em 0.25em;
 }
 
-.issue-title {
+.markdown th {
-  display: flex;
+  background-color: #f3f4f6;
-  justify-content: space-between;
+  font-weight: 600;
-  align-items: end;
-
-  margin-top: 2em;
-  margin-bottom: 0.5em;
-
-  h3,
-  p {
-    margin: 0;
-  }
 }
+
+/* Nested lists */
+.markdown ul ul {
+  list-style-type: circle;
+  padding-left: 1.5em;
+  margin-top: 0.25em;
+}
+
+.markdown ol ol {
+  list-style-type: lower-alpha;
+  padding-left: 1.5em;
+  margin-top: 0.25em;
+}
+</style>
+

pkg/invoice/report/assets/template.html

@@ -5,93 +5,138 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Rechnung vom {{ .Date | date }}</title>
     <!-- <link href="css/style.css" rel="stylesheet" /> -->
+    <script>
+      {{ .Tailwind }}
+    </script>
+    <style>
+      @page {
+        size: A4;
+        padding: 2cm;
+      }
+      @page:first {
+        padding: 0;
+      }
+      @media print {
+        .page,
+        .page-break {
+          break-after: page;
+        }
+      }
+    </style>
     <style>
       {{ .Style }}
     </style>
-    <style>
-
-      {{.Invoice.CSS}}
-    </style>
   </head>
-  <body>
+  <body class="font-sans text-gray-800 text-[12pt]">
-    <header class="first-page" style="margin-top: 2cm">
+    <!-- Header -->
+    <header class="mx-[2cm] flex justify-between mb-10 mt-8">
       <div class="company">
-        <h2>{{ .Company.Name }}</h2>
+        <h2 class="text-2xl font-semibold">{{ .Company.Name }}</h2>
-        <p>
+        <p class="mt-2">
-          {{ .Company.Address.Street}} {{.Company.Address.Number}} <br />
+          {{ .Company.Address.Street }} {{ .Company.Address.Number }} <br />
           {{ .Company.Address.ZIPCode }} {{ .Company.Address.Place }} <br />
           {{ .Company.Contact }}
         </p>
-
-        <p></p>
       </div>
-      <div class="invoice-info">
+      <div class="invoice-info text-right">
         <p>
-          <strong>Rechnung:</strong> {{ .Invoice.Reference }} <br />
+          <span class="font-semibold">Rechnung:</span> {{ .Invoice.Reference }}
-          <strong>Datum:</strong> {{ .Date | date }} <br />
+          <br />
+          <span class="font-semibold">Datum:</span> {{ .Date | date }} <br />
         </p>
       </div>
     </header>
-    <section class="client first-page">
+
-      <h2>Rechnung an:</h2>
+    <!-- Client Info -->
+    <section class="client mx-[2cm] mb-12">
+      <h2 class="text-xl font-semibold mb-2">Rechnung an:</h2>
       <p>
         {{ .Client.Name }} <br />
-        {{ .Client.Address.Street}} {{.Client.Address.Number}} <br />
+        {{ .Client.Address.Street }} {{ .Client.Address.Number }} <br />
         {{ .Client.Address.ZIPCode }} {{ .Client.Address.Place }} <br />
         {{ .Client.Contact }}
       </p>
     </section>
 
-    <section class="page p1 first-page">
+    <!-- Invoice Table -->
-      <article>
+    <section class="page mb-12">
-        <table>
+      <article class="mx-[2cm] overflow-x-auto">
-          <thead>
+        <table class="w-full border border-gray-300 border-collapse mb-5">
+          <thead class="bg-gray-200">
             <tr>
-              <th style="min-width: 3.5em">FID</th>
+              <th
-              <th>Name</th>
+                class="border border-gray-300 px-2 py-0.5 min-w-[3.5em] text-left"
-              <th>Aufwand</th>
+              >
-              <th style="min-width: 5.5em">Preis</th>
+                FID
+              </th>
+              <th class="border border-gray-300 px-2 py-0.5 text-left">Name</th>
+              <th class="border border-gray-300 px-2 py-0.5 text-left">
+                Aufwand
+              </th>
+              <th
+                class="border border-gray-300 px-2 py-0.5 min-w-[5.5em] text-left"
+              >
+                Preis
+              </th>
             </tr>
           </thead>
           <tbody>
             {{ range .Issues }}
             <tr>
-              <td style="font-family: monospace">{{ .Shorthand }}</td>
+              <td class="border border-gray-300 px-2 py-0.5 font-mono">
-              <td>{{ .Title }}</td>
+                {{ .Shorthand }}
-              <td>{{ .Duration | duration }}</td>
+              </td>
-              <td>{{ .Duration | price }} CHF</td>
+              <td class="border border-gray-300 px-2 py-0.5">{{ .Title }}</td>
+              <td class="border border-gray-300 px-2 py-0.5">
+                {{ .Duration | duration }}
+              </td>
+              <td class="border border-gray-300 px-2 py-0.5">
+                {{ .Duration | price }} CHF
+              </td>
             </tr>
             {{ end }}
           </tbody>
           <tfoot>
             <tr>
-              <th colspan="2" style="text-align: right">Summe:</th>
+              <th
-
+                colspan="2"
-              <td>{{ .Total | duration }}</td>
+                class="border border-gray-300 px-2 py-0.5 text-right"
-              <td>{{ .Total | price}}</td>
+              >
+                Summe:
+              </th>
+              <td class="border border-gray-300 px-2 py-0.5">
+                {{ .Total | duration }}
+              </td>
+              <td class="border border-gray-300 px-2 py-0.5">
+                {{ .Total | price }}
+              </td>
             </tr>
           </tfoot>
         </table>
       </article>
+
       {{ .Invoice.HTML }}
     </section>
-    <section>
-      <h2 style="margin-top: 0">Details zu den Features</h2>
 
+    <!-- Issue Details -->
+    <section>
+      <h2 class="font-semibold mb-4 text-2xl">Details zu den Features</h2>
       {{ range .Issues }}
-      <article>
+      <article class="mb-6">
-        <div class="issue-title">
+        <div class="flex justify-between items-end mb-2">
-          <h3>
+          <h3 class="font-semibold text-xl pt-5">
-            <a href="{{ .HTMLURL }}" style="font-family: monospace"
+            <a
+              href="{{ .HTMLURL }}"
+              class="font-mono text-blue-600 hover:underline"
               >{{ .Shorthand }}</a
             >: {{ .Title }}
           </h3>
-          <p>
+          <p class="text-sm text-gray-600">
-            {{ if .Closed }} Fertiggestellt: {{ .Closed | time }} {{else}} not
+            {{ if .Closed }} Fertiggestellt: {{ .Closed | time }} {{ else }} not
             closed {{ end }}
           </p>
         </div>
-        {{ .CleanBody | md | oh 3 }}
+        <div class="text-sm markdown">{{ .CleanBody | md | oh 3 }}</div>
       </article>
       {{ end }}
     </section>

pkg/invoice/report/qrbill/assets/style.css

@@ -1,111 +0,0 @@
-.c6ee15365-8f47-4dab-8bee-2a56a7916c57 {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  display: grid;
-  grid-template-columns: 240px 1px 1fr;
-  grid-template-rows: 1px 1fr;
-
-  .separator-h {
-    grid-row: 1;
-    grid-column: 1 / span 3;
-
-    border-top: 1px solid black;
-    svg {
-      transform: rotate(-90deg);
-      margin-top: -52px;
-    }
-  }
-
-  .separator-v {
-    grid-row: 2;
-    grid-column: 2;
-
-    border-right: 1px solid black;
-    svg {
-      margin-left: -32px;
-    }
-  }
-
-  .receiver {
-    grid-row: 2;
-    grid-column: 1;
-
-    font-size: 12pt;
-    padding: 1em;
-
-    h2 {
-      margin: 0;
-      margin-bottom: 0.5em;
-    }
-    h4 {
-      margin-bottom: 0.1em;
-    }
-  }
-
-  .payer {
-    grid-row: 2;
-    grid-column: 3;
-    display: grid;
-    grid-template-columns: 250px 1fr;
-    grid-template-rows: 2em 1fr;
-    padding: 1em;
-    gap: 1em;
-
-    width: 100%;
-
-    h2 {
-      grid-row: 1;
-      grid-column: 1 / 2;
-      margin: 0;
-    }
-
-    h4 {
-      margin-bottom: 0.1em;
-    }
-
-    .qr-code {
-      grid-row: 2;
-      grid-column: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-
-      .qr-section-img {
-        position: relative;
-        width: 100%;
-        img {
-          width: 100%;
-        }
-        svg {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          z-index: 1;
-          width: 40px;
-        }
-      }
-
-      .qr-section-info {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
-        justify-items: center;
-
-        p,
-        h4 {
-          margin: 0;
-        }
-      }
-    }
-
-    .payment-details {
-      grid-row: 2;
-      grid-column: 2;
-      font-size: 0.9rem;
-      line-height: 1.4;
-    }
-  }
-}

pkg/invoice/report/qrbill/assets/template.html

@@ -1,70 +1,96 @@
-<article class="c6ee15365-8f47-4dab-8bee-2a56a7916c57">
+<article
-  <div class="separator-h">{{ .Scissors }}</div>
+  class="absolute bottom-0 left-0 w-full grid [grid-template-columns:240px_1px_1fr] [grid-template-rows:1px_1fr]"
-  <div class="receiver">
+>
-    <div class="payment-details">
+  <!-- Horizontal Separator -->
-      <div>
+  <div
-        <h2>Empfangsschein</h2>
+    class="separator-h row-start-1 col-span-3 border-t border-black relative"
-        <h4 style="margin-top: 0">Konto / Zahlbar an</h4>
+  >
-        <p>
+    <div class="absolute left-10 top-[-52px] rotate-[-90deg]">
-          {{ .ReceiverIBAN }} <br />
+      {{ .Scissors }}
-          {{ .ReceiverName }} <br />
-          {{ .ReceiverStreet}} {{.ReceiverNumber}} <br />
-          {{ .ReceiverZIPCode }} {{ .ReceiverPlace }}
-        </p>
     </div>
-      <div>
-        <h4>Referenz</h4>
-        <p>{{ .Reference }}</p>
-      </div>
-      <div>
-        <h4>Zahlbar durch</h4>
-        <p>
-          {{ .PayeeName }} <br />
-          {{ .PayeeStreet}} {{.PayeeNumber}} <br />
-          {{ .PayeeZIPCode }} {{ .PayeePlace }}
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="separator-v">{{ .Scissors }}</div>
-  <div class="payer">
-    <h2>Zahlteil</h2>
-    <div class="qr-code">
-      <!-- Replace with your QR code image or generated SVG -->
-      <div class="qr-section-img">
-        <image src="{{ .GetQR }}"></image>
-        {{ .Cross }}
   </div>
 
-      <div class="qr-section-info">
+  <!-- Receiver Section -->
-        <h4>Währung</h4>
+  <div class="receiver row-start-2 col-start-1 text-[12pt] p-4">
-        <h4>Betrag</h4>
+    <h2 class="m-0 mb-2 text-2xl font-bold">Empfangsschein</h2>
-        <p>CHF</p>
+    <div class="payment-details text-[0.9rem] leading-[1.4]">
-        <p>{{ .Amount }}</p>
+      <h4 class="mt-0 mb-[0.1em] font-bold">Konto / Zahlbar an</h4>
-      </div>
-    </div>
-    <div class="payment-details">
-      <div>
-        <h4 style="margin-top: 0">Konto / Zahlbar an</h4>
       <p>
         {{ .ReceiverIBAN }} <br />
         {{ .ReceiverName }} <br />
-          {{ .ReceiverStreet}} {{.ReceiverNumber}} <br />
+        {{ .ReceiverStreet }} {{ .ReceiverNumber }} <br />
         {{ .ReceiverZIPCode }} {{ .ReceiverPlace }}
       </p>
-      </div>
+
-      <div>
+      <h4 class="mt-2 mb-[0.1em] font-bold">Referenz</h4>
-        <h4>Referenz</h4>
       <p>{{ .Reference }}</p>
-      </div>
+
-      <div>
+      <h4 class="mt-2 mb-[0.1em] font-bold">Zahlbar durch</h4>
-        <h4>Zahlbar durch</h4>
       <p>
         {{ .PayeeName }} <br />
-          {{ .PayeeStreet}} {{.PayeeNumber}} <br />
+        {{ .PayeeStreet }} {{ .PayeeNumber }} <br />
         {{ .PayeeZIPCode }} {{ .PayeePlace }}
       </p>
     </div>
   </div>
+
+  <!-- Vertical Separator -->
+  <div
+    class="separator-v row-start-2 col-start-2 border-r border-black relative"
+  >
+    <div class="-ml-8">{{ .Scissors }}</div>
+  </div>
+
+  <!-- Payer Section -->
+  <div
+    class="payer row-start-2 col-start-3 grid [grid-template-columns:250px_1fr] [grid-template-rows:2em_1fr] p-4 gap-4 w-full"
+  >
+    <h2 class="row-start-1 col-span-1 m-0 text-2xl font-bold">Zahlteil</h2>
+
+    <!-- QR Code Section -->
+    <div class="qr-code row-start-2 col-start-1 flex flex-col justify-between">
+      <div class="qr-section-img relative w-full">
+        <img src="{{ .GetQR }}" class="w-full" />
+        <div
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1] scale-36"
+        >
+          <!-- cross gets replaced with svg-->
+          {{ .Cross }}
+        </div>
+      </div>
+
+      <div
+        class="qr-section-info grid grid-cols-2 grid-rows-2 justify-items-center"
+      >
+        <h4 class="m-0 font-bold">Währung</h4>
+        <h4 class="m-0 font-bold">Betrag</h4>
+        <p class="m-0">CHF</p>
+        <p class="m-0">{{ .Amount }}</p>
+      </div>
+    </div>
+
+    <!-- Payment Details -->
+    <div
+      class="payment-details row-start-2 col-start-2 text-[0.9rem] leading-[1.4]"
+    >
+      <h4 class="mt-0 mb-[0.1em] font-bold">Konto / Zahlbar an</h4>
+      <p>
+        {{ .ReceiverIBAN }} <br />
+        {{ .ReceiverName }} <br />
+        {{ .ReceiverStreet }} {{ .ReceiverNumber }} <br />
+        {{ .ReceiverZIPCode }} {{ .ReceiverPlace }}
+      </p>
+
+      <h4 class="mt-2 mb-[0.1em] font-bold">Referenz</h4>
+
+      <p>{{ .Reference }}</p>
+
+      <h4 class="mt-2 mb-[0.1em] font-bold">Zahlbar durch</h4>
+      <p>
+        {{ .PayeeName }} <br />
+        {{ .PayeeStreet }} {{ .PayeeNumber }} <br />
+        {{ .PayeeZIPCode }} {{ .PayeePlace }}
+      </p>
+    </div>
   </div>
 </article>

pkg/invoice/report/qrbill/html.go

@@ -16,19 +16,12 @@ var scissors template.HTML
 //go:embed assets/template.html
 var htmlTemplate string
 
-//go:embed assets/style.css
-var style template.CSS
-
 type tmpler struct {
 	Invoice
 	Cross    template.HTML
 	Scissors template.HTML
 }
 
-func (i Invoice) CSS() template.CSS {
-	return style
-}
-
 func (i Invoice) HTML() (html template.HTML, err error) {
 	tmpl := template.Must(template.New("invoice").Parse(htmlTemplate))
 

pkg/invoice/report/template.go

@@ -15,8 +15,12 @@ var htmlTemplate string
 //go:embed assets/style.css
 var style template.CSS
 
+//go:embed assets/tailwind.js
+var tailwind template.JS
+
 type tmpler struct {
 	Report
+	Tailwind template.JS
 	Style    template.CSS
 }
 
@@ -33,7 +37,7 @@ func (r Report) ToHTML() (html string, err error) {
 
 	buf := new(bytes.Buffer)
 
-	err = tmpl.Execute(buf, tmpler{r, style})
+	err = tmpl.Execute(buf, tmpler{r, tailwind, style})
 	if err != nil {
 		return html, err
 	}