My blog
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

update markdown callouts to be our own with css

dish 2c6a9257 96f300e3

+94 -94
+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 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
··· 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
src/_components/footer.vto
··· 35 35 >version {{ commit |> substring(0, 8) }}</a> 36 36 </div> 37 37 </footer> 38 - <div style="display:none" class="latte"></div>
+1 -1
src/_components/head.vto
··· 23 23 {{# Page Metadata #}} 24 24 <link rel="canonical" href="{{ url |> url(true) }}" /> 25 25 <title>{{ title }}</title> 26 - {{ if production == "false" }} 26 + {{ if !production }} 27 27 <script defer="defer" src="/static/scripts/open-in-editor.js"></script> 28 28 {{ /if }}
+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
··· 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
··· 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