@cenk1cenk2/md-printer 2.7.0 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/oclif.manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,75 +1,4 @@
|
|
|
1
|
-
const colors = require('theme-colors').getColors
|
|
2
|
-
|
|
3
1
|
/** @type {import("tailwindcss").Config} */
|
|
4
2
|
module.exports = {
|
|
5
|
-
content: ['./template.html.j2']
|
|
6
|
-
theme: {
|
|
7
|
-
extend: {
|
|
8
|
-
fontFamily: {
|
|
9
|
-
sans: ['Montserrat'],
|
|
10
|
-
serif: ['Montserrat']
|
|
11
|
-
},
|
|
12
|
-
colors: {
|
|
13
|
-
primary: colors('#cd0043'),
|
|
14
|
-
gray: colors('#5c6370')
|
|
15
|
-
},
|
|
16
|
-
typography: (theme) => ({
|
|
17
|
-
css: {
|
|
18
|
-
a: {
|
|
19
|
-
color: theme('colors.primary.500'),
|
|
20
|
-
textDecoration: 'none'
|
|
21
|
-
},
|
|
22
|
-
h1: {
|
|
23
|
-
fontWeight: 700,
|
|
24
|
-
paddingTop: theme('padding.0.75'),
|
|
25
|
-
paddingBottom: theme('padding.0.75'),
|
|
26
|
-
marginBottom: 0,
|
|
27
|
-
marginTop: 0,
|
|
28
|
-
borderWidth: 0
|
|
29
|
-
},
|
|
30
|
-
h2: {
|
|
31
|
-
paddingTop: theme('padding.0.5'),
|
|
32
|
-
paddingBottom: theme('padding.0.5'),
|
|
33
|
-
marginBottom: 0,
|
|
34
|
-
marginTop: 0,
|
|
35
|
-
borderWidth: 0
|
|
36
|
-
},
|
|
37
|
-
h3: {
|
|
38
|
-
paddingTop: theme('padding.0.25'),
|
|
39
|
-
paddingBottom: theme('padding.0.25'),
|
|
40
|
-
marginBottom: 0,
|
|
41
|
-
marginTop: 0,
|
|
42
|
-
borderWidth: 0
|
|
43
|
-
},
|
|
44
|
-
blockquote: {
|
|
45
|
-
fontWeight: 400,
|
|
46
|
-
color: theme('colors.gray.600'),
|
|
47
|
-
fontStyle: 'normal',
|
|
48
|
-
quotes: '"\\201C""\\201D""\\2018""\\2019"'
|
|
49
|
-
},
|
|
50
|
-
'blockquote p:first-of-type::before': {
|
|
51
|
-
content: ''
|
|
52
|
-
},
|
|
53
|
-
'blockquote p:last-of-type::after': {
|
|
54
|
-
content: ''
|
|
55
|
-
},
|
|
56
|
-
'ul > li': {
|
|
57
|
-
paddingLeft: '1em',
|
|
58
|
-
textAlign: 'left'
|
|
59
|
-
},
|
|
60
|
-
'ol > li': {
|
|
61
|
-
paddingLeft: '1em',
|
|
62
|
-
textAlign: 'left'
|
|
63
|
-
},
|
|
64
|
-
'ol > li::before': {
|
|
65
|
-
top: 'calc(0.875em - 0.1em)'
|
|
66
|
-
},
|
|
67
|
-
'ul > li::before': {
|
|
68
|
-
top: 'calc(0.875em - 0.1em)'
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
})
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')]
|
|
3
|
+
content: ['./template.html.j2']
|
|
75
4
|
}
|
|
@@ -1,29 +1,105 @@
|
|
|
1
1
|
@import 'tailwindcss';
|
|
2
|
+
@plugin '@tailwindcss/typography';
|
|
2
3
|
|
|
3
4
|
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400) layer(utilities);
|
|
4
5
|
|
|
5
|
-
@
|
|
6
|
+
@theme {
|
|
7
|
+
--font-family-sans: Montserrat;
|
|
8
|
+
--font-family-serif: Montserrat;
|
|
9
|
+
--color-primary-500: #cd0043;
|
|
10
|
+
--color-gray-50: oklch(98.5% 0.002 247.839);
|
|
11
|
+
--color-gray-100: #abb2bf;
|
|
12
|
+
--color-gray-200: #979eab;
|
|
13
|
+
--color-gray-300: #7c8a9d;
|
|
14
|
+
--color-gray-400: #5c6370;
|
|
15
|
+
--color-gray-500: #4b5263;
|
|
16
|
+
--color-gray-600: #2c333d;
|
|
17
|
+
--color-gray-700: #22282f;
|
|
18
|
+
--color-gray-800: #1e2127;
|
|
19
|
+
--color-gray-900: #17191e;
|
|
20
|
+
--color-gray-950: oklch(13% 0.028 261.692);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
*,
|
|
24
|
+
::after,
|
|
25
|
+
::before,
|
|
26
|
+
::backdrop,
|
|
27
|
+
::file-selector-button {
|
|
28
|
+
border-color: var(--color-gray-200, currentcolor);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
address {
|
|
32
|
+
@apply text-sm;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Typography styles converted from config */
|
|
36
|
+
.prose a {
|
|
37
|
+
text-decoration: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.prose h1 {
|
|
41
|
+
font-weight: 700;
|
|
42
|
+
padding-top: 0.1875rem;
|
|
43
|
+
/* 0.75 * 0.25rem */
|
|
44
|
+
padding-bottom: 0.1875rem;
|
|
45
|
+
margin-bottom: 0;
|
|
46
|
+
margin-top: 0;
|
|
47
|
+
border-width: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.prose h2 {
|
|
51
|
+
padding-top: 0.125rem;
|
|
52
|
+
/* 0.5 * 0.25rem */
|
|
53
|
+
padding-bottom: 0.125rem;
|
|
54
|
+
margin-bottom: 0;
|
|
55
|
+
margin-top: 0;
|
|
56
|
+
border-width: 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.prose h3 {
|
|
60
|
+
padding-top: 0.0625rem;
|
|
61
|
+
/* 0.25 * 0.25rem */
|
|
62
|
+
padding-bottom: 0.0625rem;
|
|
63
|
+
margin-bottom: 0;
|
|
64
|
+
margin-top: 0;
|
|
65
|
+
border-width: 0;
|
|
66
|
+
}
|
|
6
67
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
looks the same as it did with Tailwind CSS v3.
|
|
68
|
+
p {
|
|
69
|
+
margin: 0.1em 0em;
|
|
70
|
+
}
|
|
11
71
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
::before,
|
|
19
|
-
::backdrop,
|
|
20
|
-
::file-selector-button {
|
|
21
|
-
border-color: var(--color-gray-200, currentcolor);
|
|
22
|
-
}
|
|
72
|
+
.prose blockquote {
|
|
73
|
+
font-weight: 400;
|
|
74
|
+
color: var(--color-gray-600);
|
|
75
|
+
font-style: normal;
|
|
76
|
+
quotes: '\201C' '\201D' '\2018' '\2019';
|
|
77
|
+
}
|
|
23
78
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
79
|
+
.prose blockquote p:first-of-type::before {
|
|
80
|
+
content: '';
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.prose blockquote p:last-of-type::after {
|
|
84
|
+
content: '';
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.prose ul > li {
|
|
88
|
+
padding-left: 1em;
|
|
89
|
+
text-align: left;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.prose ol > li {
|
|
93
|
+
padding-left: 1em;
|
|
94
|
+
text-align: left;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.prose ol > li::before {
|
|
98
|
+
top: calc(0.875em - 0.1em);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.prose ul > li::before {
|
|
102
|
+
top: calc(0.875em - 0.1em);
|
|
27
103
|
}
|
|
28
104
|
|
|
29
105
|
html {
|
|
@@ -42,3 +118,18 @@ html {
|
|
|
42
118
|
justify-content: center;
|
|
43
119
|
@apply p-4;
|
|
44
120
|
}
|
|
121
|
+
|
|
122
|
+
table th {
|
|
123
|
+
@apply bg-gray-700 text-white;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
table tr {
|
|
127
|
+
border-top: 0;
|
|
128
|
+
@apply even:bg-gray-50;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
table th,
|
|
132
|
+
table td,
|
|
133
|
+
table tr {
|
|
134
|
+
border: 0;
|
|
135
|
+
}
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
|
|
11
11
|
<body>
|
|
12
12
|
<img src="https://main.s3.kilic.dev/html/icon.png" alt="logo"
|
|
13
|
-
class="absolute h-
|
|
13
|
+
class="absolute h-36 top-0 left-1/2 transform -translate-x-1/2">
|
|
14
14
|
<div class="max-w-full leading-tight prose grid grid-rows">
|
|
15
15
|
<section id="header" class="grid grid-cols-12">
|
|
16
|
-
<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-
|
|
16
|
+
<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100">
|
|
17
17
|
<p class="text-vertical">FROM</p>
|
|
18
18
|
</div>
|
|
19
|
-
<div class="col-start-2 col-span-5 flex flex-col justify-baseline p-4">
|
|
19
|
+
<div class="col-start-2 col-span-5 flex flex-col justify-baseline p-4 mr-12">
|
|
20
20
|
<h1>Cenk Kılıç</h1>
|
|
21
21
|
<h3>{{ company.tax_number }}</h3>
|
|
22
22
|
<address>{{ company.address }}</address>
|
|
@@ -27,73 +27,84 @@
|
|
|
27
27
|
</div>
|
|
28
28
|
</div>
|
|
29
29
|
<div class="col-span-6 bg-gray-900 rounded-bl-4xl flex flex-col justify-center text-center">
|
|
30
|
-
<p class="p-4 font-bold text-white
|
|
30
|
+
<p class="p-4 font-bold text-white text-6xl">INVOICE</p>
|
|
31
31
|
</div>
|
|
32
32
|
</section>
|
|
33
33
|
<section id="client" class="grid grid-cols-12">
|
|
34
|
-
<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-
|
|
34
|
+
<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100">
|
|
35
35
|
<p class="text-vertical">TO</p>
|
|
36
36
|
</div>
|
|
37
|
-
<div class="col-span-
|
|
37
|
+
<div class="col-span-5 flex flex-col justify-baseline p-4">
|
|
38
38
|
<h2>{{ client.name }}</h2>
|
|
39
39
|
<h3>{{ client.tax_number }}</h3>
|
|
40
40
|
<address>{{ company.address }}</address>
|
|
41
41
|
</div>
|
|
42
|
-
<div
|
|
43
|
-
class="
|
|
44
|
-
|
|
45
|
-
<div class="p-2 flex flex-col bg-gray-700 rounded-xl">
|
|
46
|
-
<p class="font-bold">Invoice #</p>
|
|
47
|
-
<p class="font-semibold">{{ id }}</p>
|
|
48
|
-
</div>
|
|
49
|
-
<div class="p-2 flex flex-col bg-gray-700 rounded-xl">
|
|
42
|
+
<div class="col-span-6 flex justify-center text-xs text-center p-4">
|
|
43
|
+
<div class="grid grid-rows-2 gap-4 w-full px-12">
|
|
44
|
+
<div class="p-2 flex flex-row bg-gray-50 justify-between rounded-xl border border-gray-100!">
|
|
50
45
|
<p class="font-bold">Date</p>
|
|
51
46
|
<p class="font-semibold">{{ date }}</p>
|
|
52
47
|
</div>
|
|
48
|
+
<div class="p-2 flex flex-row bg-gray-50 justify-between rounded-xl border border-gray-100!">
|
|
49
|
+
<p class="font-bold">Invoice#</p>
|
|
50
|
+
<p class="font-semibold">{{ id }}</p>
|
|
51
|
+
</div>
|
|
53
52
|
</div>
|
|
54
53
|
</div>
|
|
55
54
|
</section>
|
|
56
55
|
<section id="items" class="grid grid-cols-12">
|
|
57
|
-
<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-
|
|
58
|
-
|
|
59
|
-
</div>
|
|
60
|
-
<div class="col-
|
|
61
|
-
<table class="w-full table-auto border-2 rounded-xl">
|
|
62
|
-
<thead class="border-b-2
|
|
56
|
+
<!-- <div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100"> -->
|
|
57
|
+
<!-- <p class="text-vertical">ITEMS</p> -->
|
|
58
|
+
<!-- </div> -->
|
|
59
|
+
<div class="col-span-12 px-16 py-4">
|
|
60
|
+
<table class="w-full table-auto border-y-2 shadow-md shadow-gray-300 border-gray-900! rounded-xl">
|
|
61
|
+
<thead class="border-b-2">
|
|
63
62
|
<tr>
|
|
64
|
-
<th scope="col" class="w-
|
|
63
|
+
<th scope="col" class="w-md text-center">
|
|
65
64
|
Description
|
|
66
65
|
</th>
|
|
67
|
-
<th scope="col" class="w-
|
|
68
|
-
|
|
66
|
+
<th scope="col" class="w-[10%] text-center">
|
|
67
|
+
Qty
|
|
69
68
|
</th>
|
|
70
|
-
<th scope="col" class="w-
|
|
69
|
+
<th scope="col" class="w-[10%] text-center">
|
|
71
70
|
Price
|
|
72
71
|
</th>
|
|
73
|
-
<th scope="col" class="w-
|
|
72
|
+
<th scope="col" class="w-[10%] text-center">
|
|
73
|
+
Subtotal
|
|
74
|
+
</th>
|
|
75
|
+
<th scope="col" class="w-[14%] text-center">
|
|
76
|
+
Tax
|
|
77
|
+
</th>
|
|
78
|
+
<th scope="col" class="w-[14%] font-semibold text-center">
|
|
74
79
|
Total
|
|
75
80
|
</th>
|
|
76
81
|
</tr>
|
|
77
82
|
</thead>
|
|
78
83
|
<tbody>
|
|
79
84
|
{% set calculated_subtotal = 0 %}
|
|
85
|
+
{% set calculated_tax = 0 %}
|
|
80
86
|
{% for item in items %}
|
|
81
87
|
<tr>
|
|
82
|
-
<td class="text-left">{{ item.description }}</td>
|
|
83
|
-
<td class="text-center">{{ item.quantity }} {{ item.
|
|
84
|
-
<td class="text-center">{{ item.price }}{{ currency }}</td>
|
|
85
|
-
|
|
88
|
+
<td class="text-left align-middle">{{ item.description }}</td>
|
|
89
|
+
<td class="text-center align-middle">{{ item.quantity }} {{ item.unit }}</td>
|
|
90
|
+
<td class="text-center align-middle">{{ item.price }}{{ currency }}</td>
|
|
91
|
+
{% set calculated_item_subtotal = item.quantity * item.price %}
|
|
92
|
+
<td class="text-center align-middle">{{ calculated_item_subtotal }}{{ currency }}</td>
|
|
93
|
+
{% set calculated_item_tax = calculated_item_subtotal * item.tax / 100 %}
|
|
94
|
+
{% set calculated_tax = calculated_tax + calculated_item_tax %}
|
|
95
|
+
<td class="text-center align-middle">{{ calculated_item_tax }}{{ currency }} <sup class="text-xs">({{
|
|
96
|
+
item.tax }}%)</sup> </td>
|
|
97
|
+
{% set calculated_item_total = calculated_item_subtotal + calculated_item_tax %}
|
|
98
|
+
<td class="font-semibold text-center align-middle">{{ calculated_item_total }}{{ currency }}</td>
|
|
86
99
|
</tr>
|
|
87
|
-
{% set calculated_subtotal = calculated_subtotal +
|
|
100
|
+
{% set calculated_subtotal = calculated_subtotal + calculated_item_subtotal %}
|
|
88
101
|
{% endfor %}
|
|
89
102
|
</tbody>
|
|
90
103
|
</table>
|
|
91
104
|
</div>
|
|
92
|
-
<div class="col-span-2 bg-gray-900 rounded-bl-4xl flex flex-row justify-center text-white">
|
|
93
|
-
</div>
|
|
94
105
|
</section>
|
|
95
106
|
<section id="payment" class="grid grid-cols-12">
|
|
96
|
-
<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-
|
|
107
|
+
<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100 bg-gray-900">
|
|
97
108
|
<p class="text-vertical">PAYMENT</p>
|
|
98
109
|
</div>
|
|
99
110
|
<div
|
|
@@ -102,14 +113,13 @@
|
|
|
102
113
|
<address>{{ payment.address }}</address>
|
|
103
114
|
<span>{{ payment.bic }}</span>
|
|
104
115
|
<span>{{ payment.routing }}</span>
|
|
105
|
-
<span>{{ payment.name }}</span>
|
|
106
|
-
<span>{{ payment.iban }}</span>
|
|
116
|
+
<span class="mt-4 font-semibold">{{ payment.name }}</span>
|
|
117
|
+
<span class="font-semibold">{{ payment.iban }}</span>
|
|
107
118
|
</div>
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
<
|
|
112
|
-
<div class="flex flex-row justify-between">
|
|
119
|
+
<div class="col-span-1"></div>
|
|
120
|
+
<div
|
|
121
|
+
class="col-span-5 flex flex-col justify-between border-2 rounded-xl border-primary-500! m-8 mr-16 p-4 shadow-md shadow-gray-400">
|
|
122
|
+
<div class="flex flex-row justify-between font-semibold">
|
|
113
123
|
<p>
|
|
114
124
|
Subtotal
|
|
115
125
|
</p>
|
|
@@ -117,18 +127,17 @@
|
|
|
117
127
|
{{ calculated_subtotal }}{{ currency }}
|
|
118
128
|
</p>
|
|
119
129
|
</div>
|
|
120
|
-
<div class="flex flex-row justify-between">
|
|
130
|
+
<div class="flex flex-row justify-between font-semibold">
|
|
121
131
|
<p>
|
|
122
|
-
Tax
|
|
132
|
+
Tax
|
|
123
133
|
</p>
|
|
124
134
|
<p>
|
|
125
|
-
{% set calculated_tax = calculated_subtotal * tax.rate / 100 %}
|
|
126
135
|
{{ calculated_tax }}{{currency}}
|
|
127
136
|
</p>
|
|
128
137
|
</div>
|
|
129
|
-
<div class="flex flex-row justify-between font-bold text-xl">
|
|
138
|
+
<div class="flex flex-row justify-between font-bold text-xl text-primary-500 pt-2 border-t-2">
|
|
130
139
|
<p>
|
|
131
|
-
|
|
140
|
+
TOTAL
|
|
132
141
|
</p>
|
|
133
142
|
<p>
|
|
134
143
|
{% set calculated_total = calculated_subtotal + calculated_tax %}
|
|
@@ -136,16 +145,17 @@
|
|
|
136
145
|
</p>
|
|
137
146
|
</div>
|
|
138
147
|
</div>
|
|
139
|
-
<div class="col-span-2"></div>
|
|
140
148
|
</section>
|
|
141
149
|
<section id="footer" class="grid grid-cols-12">
|
|
142
|
-
<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-
|
|
150
|
+
<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100">
|
|
143
151
|
<p class="text-vertical">NOTES</p>
|
|
144
152
|
</div>
|
|
145
153
|
<div class="col-span-5 flex flex-col p-4 text-sm">
|
|
146
154
|
<span>{{ content }}</span>
|
|
147
155
|
</div>
|
|
148
|
-
<div class="col-span-
|
|
156
|
+
<div class="col-span-1"></div>
|
|
157
|
+
<div
|
|
158
|
+
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">
|
|
149
159
|
<p>SIGNATURE</p>
|
|
150
160
|
</div>
|
|
151
161
|
</section>
|