My blog
update markdown callouts to be our own with css
+94
-94
+2
-20
_config.ts
+2
-20
_config.ts
···
38
38
39
39
// Custom Plugins
40
40
import validateHTML from "./plugins/validateHTML.ts";
41
-
42
-
// Open in Editor
43
41
import openInEditor from "./plugins/openInEditor.ts";
44
42
45
43
// Disabled Plugins:
···
65
63
dir: Deno.cwd() + "/src/",
66
64
stillRenderNoMatched: false,
67
65
}));
68
-
site.hooks.addMarkdownItPlugin(mdItObsidianCallouts, {
69
-
icons: {
70
-
abstract: '<i class="bi bi-clipboard2-data"></i>',
71
-
bug: '<i class="bi bi-bug"></i>',
72
-
danger: '<i class="bi bi-lightning"></i>',
73
-
example: '<i class="bi bi-list-ul"></i>',
74
-
failure: '<i class="bi bi-x-lg"></i>',
75
-
info: '<i class="bi bi-info-circle"></i>',
76
-
note: '<i class="bi bi-pencil"></i>',
77
-
question: '<i class="bi bi-question-circle"></i>',
78
-
quote: '<i class="bi bi-quote"></i>',
79
-
success: '<i class="bi bi-check2"></i>',
80
-
tip: '<i class="bi bi-fire"></i>',
81
-
todo: '<i class="bi bi-check-circle"></i>',
82
-
warning: '<i class="bi bi-exclamation-triangle"></i>',
83
-
},
84
-
});
66
+
site.hooks.addMarkdownItPlugin(mdItObsidianCallouts, {});
85
67
86
68
// Copy Static Files
87
69
site.add(".css");
···
243
225
);
244
226
245
227
// Open in Editor in Dev mode
246
-
site.data("production", Deno.env.get("PRODUCTION"));
228
+
site.data("production", Deno.env.get("PRODUCTION") == "true");
247
229
if (Deno.env.get("PRODUCTION") == "false") {
248
230
site.use(openInEditor());
249
231
site.add("static/scripts/open-in-editor.js");
+2
-3
deno.json
+2
-3
deno.json
···
2
2
"imports": {
3
3
"@img/sharp-wasm32": "npm:@img/sharp-wasm32@0.33.5",
4
4
"@nolebase/markdown-it-bi-directional-links": "npm:@nolebase/markdown-it-bi-directional-links@^2.15.0",
5
-
"csstree-validator": "npm:csstree-validator@^4.0.1",
6
5
"lume/": "https://cdn.jsdelivr.net/gh/lumeland/lume@3ca4e1ff0077bc5239d853e9efdc60889546ce30/",
7
-
"markdown-it-obsidian-callouts": "npm:markdown-it-obsidian-callouts@^0.3.1",
8
-
"html-validate": "npm:html-validate@9.4.0"
6
+
"markdown-it-obsidian-callouts": "https://deno.land/x/markdown_it_obsidian_callouts_lite@0.4.0/src/index.ts",
7
+
"html-validate": "npm:html-validate@9.4.1"
9
8
},
10
9
"tasks": {
11
10
"lume": "echo \"import 'lume/cli.ts'\" | deno run --env-file=.env.dev -A -",
+8
-56
deno.lock
+8
-56
deno.lock
···
35
35
"npm:@nolebase/markdown-it-bi-directional-links@^2.15.0": "2.15.0_markdown-it@14.1.0",
36
36
"npm:@tailwindcss/oxide@4.0.3": "4.0.3",
37
37
"npm:@tailwindcss/oxide@4.0.6": "4.0.6",
38
-
"npm:csstree-validator@^4.0.1": "4.0.1",
39
38
"npm:date-fns@4.1.0": "4.1.0",
40
39
"npm:dprint@*": "0.49.0",
41
40
"npm:estree-walker@3.0.3": "3.0.3",
42
-
"npm:html-validate@9.4.0": "9.4.0_ajv@8.17.1",
41
+
"npm:html-validate@9.4.1": "9.4.1_ajv@8.17.1",
43
42
"npm:ico-endec@0.1.6": "0.1.6",
44
43
"npm:lightningcss-wasm@1.29.1": "1.29.1",
45
44
"npm:markdown-it-attrs@4.3.1": "4.3.1_markdown-it@14.1.0",
46
45
"npm:markdown-it-deflist@3.0.0": "3.0.0",
47
-
"npm:markdown-it-obsidian-callouts@~0.3.1": "0.3.1_markdown-it@14.1.0",
48
46
"npm:markdown-it@14.1.0": "14.1.0",
49
47
"npm:meriyah@6.0.5": "6.0.5",
50
48
"npm:remove-markdown@0.6.0": "0.6.0",
···
410
408
"require-from-string"
411
409
]
412
410
},
413
-
"ansi-colors@4.1.3": {
414
-
"integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw=="
415
-
},
416
411
"ansi-regex@5.0.1": {
417
412
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
418
413
},
···
441
436
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
442
437
"dependencies": [
443
438
"balanced-match"
444
-
]
445
-
},
446
-
"clap@3.1.1": {
447
-
"integrity": "sha512-vp42956Ax06WwaaheYEqEOgXZ3VKJxgccZ0gJL0HpyiupkIS9RVJFo5eDU1BPeQAOqz+cclndZg4DCqG1sJReQ==",
448
-
"dependencies": [
449
-
"ansi-colors"
450
439
]
451
440
},
452
441
"color-convert@2.0.1": {
···
510
499
"source-map-js"
511
500
]
512
501
},
513
-
"css-tree@3.1.0": {
514
-
"integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
515
-
"dependencies": [
516
-
"mdn-data@2.12.2",
517
-
"source-map-js"
518
-
]
519
-
},
520
502
"css-what@6.1.0": {
521
503
"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
522
504
},
···
524
506
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
525
507
"dependencies": [
526
508
"css-tree@2.2.1"
527
-
]
528
-
},
529
-
"csstree-validator@4.0.1": {
530
-
"integrity": "sha512-ywwDonvo6BuhXkrNSCAW4JLxsNd8HzpOtVVv22W5BNtZNeviZORSOLb7CLskeaKnL9jjvi24kL7UNh5m52ygpw==",
531
-
"dependencies": [
532
-
"clap",
533
-
"css-tree@3.1.0",
534
-
"enhanced-resolve"
535
509
]
536
510
},
537
511
"date-fns@4.1.0": {
···
594
568
"emoji-regex@9.2.2": {
595
569
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
596
570
},
597
-
"enhanced-resolve@5.18.1": {
598
-
"integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
599
-
"dependencies": [
600
-
"graceful-fs",
601
-
"tapable"
602
-
]
603
-
},
604
571
"entities@4.5.0": {
605
572
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
606
573
},
···
622
589
"picomatch"
623
590
]
624
591
},
625
-
"foreground-child@3.3.0": {
626
-
"integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
592
+
"foreground-child@3.3.1": {
593
+
"integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
627
594
"dependencies": [
628
595
"cross-spawn",
629
596
"signal-exit"
···
640
607
"path-scurry"
641
608
]
642
609
},
643
-
"graceful-fs@4.2.11": {
644
-
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
645
-
},
646
-
"html-validate@9.4.0_ajv@8.17.1": {
647
-
"integrity": "sha512-Io8vjeAf2JJJTHJDGvozVB6Vv/IZRkNRruSENg9lmLzE1gUcr77sIdtE2rzwLkBsCESDv5+nAAtk2TCer78jxA==",
610
+
"html-validate@9.4.1_ajv@8.17.1": {
611
+
"integrity": "sha512-eyb/0RdmQFFajSvL1Ak+yxtRY6hBJ5fx3yt9XAQFH6S7+7PWsnEeWsDhKaOo5fdTtljgXNiyvcicB7OS599m3g==",
648
612
"dependencies": [
649
613
"@html-validate/stylish",
650
614
"@sidvind/better-ajv-errors",
···
708
672
"markdown-it-deflist@3.0.0": {
709
673
"integrity": "sha512-OxPmQ/keJZwbubjiQWOvKLHwpV2wZ5I3Smc81OjhwbfJsjdRrvD5aLTQxmZzzePeO0kbGzAo3Krk4QLgA8PWLg=="
710
674
},
711
-
"markdown-it-obsidian-callouts@0.3.1_markdown-it@14.1.0": {
712
-
"integrity": "sha512-MCvbHofaDxUD9hwrQg9+62Yq5Ev1K2glr5ogUxvFWm7WGG3SKqC90/ozWZ/ofqUvD5iw2KLElSWLHvL1crUeqA==",
713
-
"dependencies": [
714
-
"markdown-it"
715
-
]
716
-
},
717
675
"markdown-it@14.1.0": {
718
676
"integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
719
677
"dependencies": [
···
730
688
},
731
689
"mdn-data@2.0.30": {
732
690
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
733
-
},
734
-
"mdn-data@2.12.2": {
735
-
"integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA=="
736
691
},
737
692
"mdurl@2.0.0": {
738
693
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
···
898
853
},
899
854
"tailwindcss@4.0.6": {
900
855
"integrity": "sha512-mysewHYJKaXgNOW6pp5xon/emCsfAMnO8WMaGKZZ35fomnR/T5gYnRg2/yRTTrtXiEl1tiVkeRt0eMO6HxEZqw=="
901
-
},
902
-
"tapable@2.2.1": {
903
-
"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
904
856
},
905
857
"tinyglobby@0.2.12_picomatch@4.0.2": {
906
858
"integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
···
1185
1137
"https://deno.land/x/lume_markdown_plugins@v0.8.0/utils.ts": "6e6c3c394709eff39080562732c2dafe404f225253aaded937133ea694c4b735",
1186
1138
"https://deno.land/x/lz4@v0.1.2/mod.ts": "4decfc1a3569d03fd1813bd39128b71c8f082850fe98ecfdde20025772916582",
1187
1139
"https://deno.land/x/lz4@v0.1.2/wasm.js": "b9c65605327ba273f0c76a6dc596ec534d4cda0f0225d7a94ebc606782319e46",
1140
+
"https://deno.land/x/markdown_it_obsidian_callouts_lite@0.4.0/src/index.ts": "f388a00e36a020d3e8ebad1fe60911e6fa8b001db8747a60efd11571377a22fa",
1141
+
"https://deno.land/x/markdown_it_obsidian_callouts_lite@0.4.0/src/inspect.ts": "8a9e14136661eb45ef97bb09c2385f7c42df1e82cb1bd2cc287f673379a263c2",
1188
1142
"https://deno.land/x/minify_html@0.15.0/mod.js": "0974387d0bee4646a9cb959c641c170442b0d2a6bddcb9857758636afd8676d5",
1189
1143
"https://deno.land/x/vento@v1.12.15/deps.ts": "155958dfada8d8cb3c8a001413c759928647b23e0e9db25195614549b58d085f",
1190
1144
"https://deno.land/x/vento@v1.12.15/mod.ts": "cfaac455f70af8e59aa0c03ef39b641635094225255f0fbaa76f4771e683f2ca",
···
1217
1171
"dependencies": [
1218
1172
"npm:@img/sharp-wasm32@0.33.5",
1219
1173
"npm:@nolebase/markdown-it-bi-directional-links@^2.15.0",
1220
-
"npm:csstree-validator@^4.0.1",
1221
-
"npm:html-validate@9.4.0",
1222
-
"npm:markdown-it-obsidian-callouts@~0.3.1"
1174
+
"npm:html-validate@9.4.1"
1223
1175
]
1224
1176
}
1225
1177
}
+1
-1
src/_components/head.vto
+1
-1
src/_components/head.vto
+10
src/blog/example-blog-post.md
+10
src/blog/example-blog-post.md
···
6
6
---
7
7
8
8
## meow meow! {#meow-meow}
9
+
<!-- deno-fmt-ignore-start -->
10
+
> [!info]- Closed default
11
+
> You shouldn't see this
12
+
13
+
> [!warning]+ Open default
14
+
> You should see this
15
+
16
+
> [!question] No folding
17
+
> You shouldn't be able to close this
18
+
<!-- deno-fmt-ignore-end -->
+1
-1
src/blog/hello-world.md
+1
-1
src/blog/hello-world.md
···
26
26
neato!), and hopefully inspires you to create your own Lume-based blog.
27
27
28
28
<!-- deno-fmt-ignore-start -->
29
-
> [!note] Disclaimer!
29
+
> [!note]- Disclaimer!
30
30
> I'm by no means a wizard with this stuff, my code is pretty messy.
31
31
> However, I am happy with it, and that's what matters for me.
32
32
<!-- deno-fmt-ignore-end -->
+70
-12
src/static/styles.css
+70
-12
src/static/styles.css
···
1
1
@import "tailwindcss";
2
2
3
-
.latte {
3
+
/*
4
+
Remove latte classes
5
+
They're not being used right now, so no reason to ship them
6
+
*/
7
+
/* .latte {
4
8
--ctp-rosewater: rgb(220 138 120);
5
9
--ctp-flamingo: rgb(221 120 120);
6
10
--ctp-pink: rgb(234 118 203);
···
28
32
--ctp-mantle: rgb(230 233 239);
29
33
--ctp-crust: rgb(220 224 232);
30
34
--callout-blend-mode: darken;
31
-
}
35
+
} */
32
36
.mocha {
33
37
--ctp-rosewater: rgb(245 224 220);
34
38
--ctp-flamingo: rgb(242 205 205);
···
60
64
}
61
65
62
66
@theme {
67
+
/* Remove initial variables we don't need */
63
68
--color-*: initial;
69
+
--blur-*: initial;
70
+
--perspective-*: initial;
71
+
--drop-shadow-*: initial;
72
+
--shadow-*: initial;
73
+
--inset-shadow-*: initial;
74
+
--ease-*: initial;
75
+
--animate-*: initial;
64
76
--font-sans: "Inter", "ui-sans-serif", "system-ui", "sans-serif";
65
77
--font-serif: "IBM Plex Serif", "ui-serif", "serif";
66
-
67
-
--text-inherit: inherit;
68
-
--p-callout: 12px 12px 12px 24px;
69
78
70
79
/* Flag Colors */
71
80
--color-trans-blue: #5bcffa;
···
113
122
}
114
123
[data-editor-file]:hover {
115
124
@apply transition-all outline-blue outline-2 outline-offset-4
116
-
dark:bg-blue/10 bg-blue/10 pl-1;
125
+
bg-blue/10 pl-1;
117
126
}
118
127
}
119
128
···
145
154
@apply text-mauve!;
146
155
}
147
156
157
+
@utility no-fold {
158
+
pointer-events: none;
159
+
}
160
+
148
161
@utility callout {
149
162
@apply outline-1 rounded-sm py-2 pl-2 pr-4 outline-solid overflow-hidden;
150
163
outline-color: --alpha(var(--callout-color) / 50%);
···
153
166
background-color: --alpha(var(--callout-color) / 15%);
154
167
155
168
.callout-title {
156
-
@apply text-lg mb-1 flex gap-2 items-start font-semibold text-inherit;
169
+
@apply text-lg mb-2 flex gap-2 items-start font-semibold w-full;
157
170
color: rgb(var(--callout-color));
158
171
159
-
.callout-title-icon {
172
+
&::before {
160
173
@apply flex items-center text-xl leading-7 mr-1;
161
174
flex: 0 0 auto;
175
+
font-family: "bootstrap-icons";
176
+
content: var(--callout-icon);
162
177
}
163
178
164
-
.callout-fold {
165
-
@apply justify-self-end ml-auto;
179
+
.no-fold &::after {
180
+
content: "" !important;
181
+
}
182
+
183
+
&::after {
184
+
margin-left: auto;
166
185
font-family: "bootstrap-icons";
167
186
background-color: rgb(var(--callout-color));
187
+
content: "\F285";
188
+
}
189
+
190
+
[open] &::after {
191
+
margin-left: auto;
192
+
font-family: "bootstrap-icons";
193
+
background-color: rgb(var(--callout-color));
194
+
content: "\F282";
168
195
}
169
196
}
170
197
···
175
202
@apply relative top-2 mr-2;
176
203
}
177
204
}
178
-
&[data-callout="todo"],
179
-
&[data-callout="info"],
180
205
&[data-callout="note"] {
181
206
--callout-color: var(--ctp-blue);
207
+
--callout-icon: "\F4CB";
208
+
}
209
+
210
+
&[data-callout="todo"] {
211
+
--callout-color: var(--ctp-blue);
212
+
--callout-icon: "\F26B";
213
+
}
214
+
215
+
&[data-callout="info"] {
216
+
--callout-color: var(--ctp-blue);
217
+
--callout-icon: "\F431";
182
218
}
183
219
184
220
&[data-callout="success"],
185
221
&[data-callout="check"],
186
222
&[data-callout="done"] {
187
223
--callout-color: var(--ctp-green);
224
+
--callout-icon: "\F272";
188
225
}
189
226
190
227
&[data-callout="warning"],
191
228
&[data-callout="caution"],
192
229
&[data-callout="attention"] {
193
230
--callout-color: var(--ctp-yellow);
231
+
--callout-icon: "\F33B";
232
+
}
233
+
234
+
&[data-callout="question"] {
235
+
--callout-color: var(--ctp-yellow);
236
+
--callout-icon: "\F505";
194
237
}
195
238
196
239
&[data-callout="danger"],
197
240
&[data-callout="error"] {
198
241
--callout-color: var(--ctp-red);
242
+
--callout-icon: "\F46F";
243
+
}
244
+
245
+
&[data-callout="failure"] {
246
+
--callout-color: var(--ctp-red);
247
+
--callout-icon: "\F659";
248
+
}
249
+
250
+
&[data-callout="bug"] {
251
+
--callout-color: var(--ctp-red);
252
+
--callout-icon: "\F1DC";
199
253
}
200
254
201
255
&[data-callout="tip"],
202
256
&[data-callout="hint"] {
203
257
--callout-color: var(--ctp-teal);
258
+
--callout-icon: "\F7F6";
204
259
}
205
260
206
261
&[data-callout="example"] {
207
262
--callout-color: var(--ctp-mauve);
263
+
--callout-icon: "\F478";
208
264
}
209
265
210
266
&[data-callout="abstract"],
211
267
&[data-callout="summary"],
212
268
&[data-callout="tldr"] {
213
269
--callout-color: var(--ctp-sky);
270
+
--callout-icon: "\F727";
214
271
}
215
272
216
273
&[data-callout="quote"],
217
274
&[data-callout="cite"] {
218
275
--callout-color: var(--ctp-overlay0);
276
+
--callout-icon: "\F6B0";
219
277
}
220
278
}
221
279