Skip to content

Commit 65554f2

Browse files
devmegablasterdevmegablaster
committed
feat: callout support
1 parent 4b86fb6 commit 65554f2

File tree

7 files changed

+333
-13
lines changed

7 files changed

+333
-13
lines changed

‎go.mod‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ require (
1313

1414
require (
1515
github.com/BurntSushi/toml v1.2.1 // indirect
16+
github.com/VojtaStruhar/goldmark-obsidian-callout v0.1.0 // indirect
1617
github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
1718
github.com/charmbracelet/x/ansi v0.4.2 // indirect
1819
github.com/fsnotify/fsnotify v1.7.0 // indirect

‎go.sum‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
github.com/BurntSushi/toml v1.2.1 h1:9F2/+DoOYIOksmaJFPw1tGFy1eDnIJXg+UHjuD8lTak=
22
github.com/BurntSushi/toml v1.2.1/go.mod h1:CxXYINrC8qIiEnFrOxCa7Jy5BFHlXnUU2pbicEuybxQ=
3+
github.com/VojtaStruhar/goldmark-obsidian-callout v0.1.0 h1:fguM5WyRDRUtkmfdq98UavJBRnVsELbN7TP1hhN28i4=
4+
github.com/VojtaStruhar/goldmark-obsidian-callout v0.1.0/go.mod h1:v3poAnBt/MzAkB9NqQy8Fa8CI4/fHQI8zgFKNY1kgOY=
35
github.com/a-h/templ v0.2.793 h1:Io+/ocnfGWYO4VHdR0zBbf39PQlnzVCVVD+wEEs6/qY=
46
github.com/a-h/templ v0.2.793/go.mod h1:lq48JXoUvuQrU0VThrK31yFwdRjTCnIE5bcPCM9IP1w=
57
github.com/aymanbagabas/go-osc52/v2 v2.0.1 h1:HwpRHbFMcZLEVr42D4p7XBqjyuxQH5SMiErDT4WkJ2k=

‎pkg/renderer/renderer.go‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import (
66
"fmt"
77
"os"
88

9+
"github.com/VojtaStruhar/goldmark-obsidian-callout"
910
"github.com/a-h/templ"
1011
"github.com/devmegablaster/jatt/internal/config"
1112
"github.com/devmegablaster/jatt/pkg/reader"
@@ -80,6 +81,7 @@ func (r *Renderer) ContentToHtml(content []byte) []byte {
8081
goldmark.WithExtensions(
8182
extension.GFM,
8283
figure.Figure,
84+
callout.ObsidianCallout,
8385
),
8486
)
8587

‎styles/output.css‎

Lines changed: 138 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,38 +117,55 @@ ol {
117117
margin: 0px;
118118
list-style-position: outside;
119119
list-style-type: decimal;
120-
padding-left: 1rem;
120+
padding-left: 0.5rem;
121121
}
122122

123123
ol li {
124124
margin: 0px;
125125
list-style-position: outside;
126126
list-style-type: decimal;
127-
padding-left: 1rem;
127+
padding-left: 0.25rem;
128128
}
129129

130130
ol li:not(:last-child) {
131131
margin-bottom: 0.5rem;
132132
}
133133

134+
ol p {
135+
margin: 0px;
136+
margin-bottom: 0.5rem;
137+
}
138+
134139
ul {
135140
margin: 0px;
136141
list-style-position: outside;
137142
list-style-type: disc;
138-
padding-left: 1rem;
143+
padding-left: 0.5rem;
139144
}
140145

141146
ul li {
142147
margin: 0px;
143148
list-style-position: outside;
144149
list-style-type: disc;
145-
padding-left: 1rem;
150+
padding-left: 0.25rem;
146151
}
147152

148153
ul li:not(:last-child) {
149154
margin-bottom: 0.5rem;
150155
}
151156

157+
ul p {
158+
margin: 0px;
159+
margin-bottom: 0.5rem;
160+
}
161+
162+
ol ol,
163+
ol ul,
164+
ul ol,
165+
ul ul {
166+
margin-top: 0.5rem;
167+
}
168+
152169
figure {
153170
margin-left: 0px;
154171
margin-right: 0px;
@@ -764,3 +781,120 @@ a:visted:is(.dark *) {
764781
color: rgb(255 255 255 / var(--tw-text-opacity));
765782
}
766783

784+
blockquote {
785+
margin: 0px;
786+
width: 100%;
787+
padding: 0px;
788+
}
789+
790+
.callout {
791+
margin-top: 1rem;
792+
margin-bottom: 1rem;
793+
display: flex;
794+
width: 100%;
795+
flex-direction: column;
796+
border-radius: 0.5rem;
797+
border-width: 1px;
798+
--tw-bg-opacity: 1;
799+
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
800+
padding: 1rem;
801+
--tw-text-opacity: 1;
802+
color: rgb(31 41 55 / var(--tw-text-opacity));
803+
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
804+
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
805+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
806+
}
807+
808+
.callout:is(.dark *) {
809+
--tw-border-opacity: 1;
810+
border-color: rgb(55 65 81 / var(--tw-border-opacity));
811+
--tw-bg-opacity: 1;
812+
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
813+
--tw-text-opacity: 1;
814+
color: rgb(243 244 246 / var(--tw-text-opacity));
815+
}
816+
817+
.callout > summary {
818+
margin-bottom: 0.5rem;
819+
display: flex;
820+
cursor: pointer;
821+
align-items: center;
822+
font-weight: 700;
823+
}
824+
825+
.callout > p {
826+
margin: 0px;
827+
padding: 0px;
828+
}
829+
830+
[data-callout="note"] {
831+
--tw-border-opacity: 1;
832+
border-color: rgb(59 130 246 / var(--tw-border-opacity));
833+
--tw-bg-opacity: 1;
834+
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
835+
--tw-text-opacity: 1;
836+
color: rgb(30 64 175 / var(--tw-text-opacity));
837+
}
838+
839+
[data-callout="note"]:is(.dark *) {
840+
--tw-border-opacity: 1;
841+
border-color: rgb(96 165 250 / var(--tw-border-opacity));
842+
--tw-bg-opacity: 1;
843+
background-color: rgb(30 58 138 / var(--tw-bg-opacity));
844+
--tw-text-opacity: 1;
845+
color: rgb(191 219 254 / var(--tw-text-opacity));
846+
}
847+
848+
[data-callout="warning"] {
849+
--tw-border-opacity: 1;
850+
border-color: rgb(234 179 8 / var(--tw-border-opacity));
851+
--tw-bg-opacity: 1;
852+
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
853+
--tw-text-opacity: 1;
854+
color: rgb(133 77 14 / var(--tw-text-opacity));
855+
}
856+
857+
[data-callout="warning"]:is(.dark *) {
858+
--tw-border-opacity: 1;
859+
border-color: rgb(250 204 21 / var(--tw-border-opacity));
860+
--tw-bg-opacity: 1;
861+
background-color: rgb(113 63 18 / var(--tw-bg-opacity));
862+
--tw-text-opacity: 1;
863+
color: rgb(254 240 138 / var(--tw-text-opacity));
864+
}
865+
866+
[data-callout="info"] {
867+
--tw-border-opacity: 1;
868+
border-color: rgb(6 182 212 / var(--tw-border-opacity));
869+
--tw-bg-opacity: 1;
870+
background-color: rgb(236 254 255 / var(--tw-bg-opacity));
871+
--tw-text-opacity: 1;
872+
color: rgb(21 94 117 / var(--tw-text-opacity));
873+
}
874+
875+
[data-callout="info"]:is(.dark *) {
876+
--tw-border-opacity: 1;
877+
border-color: rgb(34 211 238 / var(--tw-border-opacity));
878+
--tw-bg-opacity: 1;
879+
background-color: rgb(22 78 99 / var(--tw-bg-opacity));
880+
--tw-text-opacity: 1;
881+
color: rgb(165 243 252 / var(--tw-text-opacity));
882+
}
883+
884+
[data-callout="success"] {
885+
--tw-border-opacity: 1;
886+
border-color: rgb(34 197 94 / var(--tw-border-opacity));
887+
--tw-bg-opacity: 1;
888+
background-color: rgb(240 253 244 / var(--tw-bg-opacity));
889+
--tw-text-opacity: 1;
890+
color: rgb(22 101 52 / var(--tw-text-opacity));
891+
}
892+
893+
[data-callout="success"]:is(.dark *) {
894+
--tw-border-opacity: 1;
895+
border-color: rgb(74 222 128 / var(--tw-border-opacity));
896+
--tw-bg-opacity: 1;
897+
background-color: rgb(20 83 45 / var(--tw-bg-opacity));
898+
--tw-text-opacity: 1;
899+
color: rgb(187 247 208 / var(--tw-text-opacity));
900+
}

‎styles/styles.css‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,29 +35,44 @@ svg {
3535
}
3636

3737
ol {
38-
@apply list-decimal list-outside pl-4 m-0;
38+
@apply list-decimal list-outside pl-2 m-0;
3939
}
4040

4141
ol li {
42-
@apply list-decimal list-outside pl-4 m-0;
42+
@apply list-decimal list-outside pl-1 m-0;
4343
}
4444

4545
ol li:not(:last-child) {
4646
@apply mb-2;
4747
}
4848

49+
ol p {
50+
@apply m-0 mb-2;
51+
}
52+
4953
ul {
50-
@apply list-disc list-outside pl-4 m-0;
54+
@apply list-disc list-outside pl-2 m-0;
5155
}
5256

5357
ul li {
54-
@apply list-disc list-outside pl-4 m-0;
58+
@apply list-disc list-outside pl-1 m-0;
5559
}
5660

5761
ul li:not(:last-child) {
5862
@apply mb-2;
5963
}
6064

65+
ul p {
66+
@apply m-0 mb-2;
67+
}
68+
69+
ol ol,
70+
ol ul,
71+
ul ol,
72+
ul ul {
73+
@apply mt-2;
74+
}
75+
6176
figure {
6277
@apply flex flex-col items-center justify-center w-full mt-8 mb-4 mx-0;
6378
}
@@ -234,3 +249,34 @@ a:visted {
234249
@apply text-white;
235250
}
236251

252+
blockquote {
253+
@apply p-0 w-full m-0
254+
}
255+
256+
.callout {
257+
@apply w-full border rounded-lg p-4 my-4 shadow-sm text-gray-800 bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 flex flex-col;
258+
}
259+
260+
.callout > summary {
261+
@apply cursor-pointer font-bold mb-2 flex items-center;
262+
}
263+
264+
.callout > p {
265+
@apply m-0 p-0;
266+
}
267+
268+
[data-callout="note"] {
269+
@apply border-blue-500 bg-blue-50 text-blue-800 dark:bg-blue-900 dark:border-blue-400 dark:text-blue-200;
270+
}
271+
272+
[data-callout="warning"] {
273+
@apply border-yellow-500 bg-yellow-50 text-yellow-800 dark:bg-yellow-900 dark:border-yellow-400 dark:text-yellow-200;
274+
}
275+
276+
[data-callout="info"] {
277+
@apply border-cyan-500 bg-cyan-50 text-cyan-800 dark:bg-cyan-900 dark:border-cyan-400 dark:text-cyan-200;
278+
}
279+
280+
[data-callout="success"] {
281+
@apply border-green-500 bg-green-50 text-green-800 dark:bg-green-900 dark:border-green-400 dark:text-green-200;
282+
}

0 commit comments

Comments
 (0)