From 333b469dedf7238162aa963afa4d51b10e4a9969 Mon Sep 17 00:00:00 2001 From: Arian Ahmadinejad <35879206+arian81@users.noreply.github.com> Date: Tue, 11 Jun 2024 22:52:50 -0400 Subject: [PATCH] feat: add markdown callout support (#28) * feat: add markdown callout support * feat: add callout support --- package.json | 2 + pnpm-lock.yaml | 143 ++++++++++++- postcss.config.cjs | 1 + src/pages/_app.tsx | 1 + src/pages/blog/[slug].tsx | 3 +- src/styles/callout-style.css | 395 +++++++++++++++++++++++++++++++++++ 6 files changed, 537 insertions(+), 8 deletions(-) create mode 100644 src/styles/callout-style.css diff --git a/package.json b/package.json index 57ea805..644a64d 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@formkit/auto-animate": "^0.8.1", "@lottiefiles/react-lottie-player": "^3.5.3", "@portabletext/react": "^3.0.11", + "@r4ai/remark-callout": "^0.4.0", "@sanity/image-url": "^1.0.2", "@sanity/vision": "^3.25.0", "@tailwindcss/typography": "^0.5.10", @@ -50,6 +51,7 @@ "eslint": "^8.56.0", "eslint-config-next": "^14.0.4", "postcss": "^8.4.33", + "postcss-nesting": "^12.1.5", "prettier": "^3.1.1", "prettier-plugin-tailwindcss": "^0.5.11", "tailwindcss": "^3.4.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f92a5f4..b3c06c3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@portabletext/react': specifier: ^3.0.11 version: 3.0.11(react@18.2.0) + '@r4ai/remark-callout': + specifier: ^0.4.0 + version: 0.4.0 '@sanity/image-url': specifier: ^1.0.2 version: 1.0.2 @@ -126,6 +129,9 @@ importers: postcss: specifier: ^8.4.33 version: 8.4.33 + postcss-nesting: + specifier: ^12.1.5 + version: 12.1.5(postcss@8.4.33) prettier: specifier: ^3.1.1 version: 3.2.2 @@ -271,21 +277,38 @@ packages: '@codemirror/view': ^6.0.0 '@lezer/common': ^1.0.0 + '@codemirror/autocomplete@6.16.2': + resolution: {integrity: sha512-MjfDrHy0gHKlPWsvSsikhO1+BOh+eBHNgfH1OXs1+DAf30IonQldgMM3kxLDTG9ktE7kDLaA1j/l7KMPA4KNfw==} + peerDependencies: + '@codemirror/language': ^6.0.0 + '@codemirror/state': ^6.0.0 + '@codemirror/view': ^6.0.0 + '@lezer/common': ^1.0.0 + '@codemirror/commands@6.3.3': resolution: {integrity: sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==} + '@codemirror/commands@6.6.0': + resolution: {integrity: sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==} + '@codemirror/lang-javascript@6.2.1': resolution: {integrity: sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==} '@codemirror/language@6.10.0': resolution: {integrity: sha512-2vaNn9aPGCRFKWcHPFksctzJ8yS5p7YoaT+jHpc0UGKzNuAIx4qy6R5wiqbP+heEEdyaABA582mNqSHzSoYdmg==} + '@codemirror/language@6.10.2': + resolution: {integrity: sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==} + '@codemirror/lint@6.4.2': resolution: {integrity: sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==} '@codemirror/search@6.5.5': resolution: {integrity: sha512-PIEN3Ke1buPod2EHbJsoQwlbpkz30qGZKcnmH1eihq9+bPQx8gelauUwLYaY4vBOuBAuEhmpDLii4rj/uO0yMA==} + '@codemirror/search@6.5.6': + resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==} + '@codemirror/state@6.4.0': resolution: {integrity: sha512-hm8XshYj5Fo30Bb922QX9hXB/bxOAVH+qaqHBzw5TKa72vOeslyGwd4X8M0c1dJ9JqxlaMceOQ8RsL9tC7gU0A==} @@ -295,6 +318,21 @@ packages: '@codemirror/view@6.23.0': resolution: {integrity: sha512-/51px9N4uW8NpuWkyUX+iam5+PM6io2fm+QmRnzwqBy5v/pwGg9T0kILFtYeum8hjuvENtgsGNKluOfqIICmeQ==} + '@codemirror/view@6.28.0': + resolution: {integrity: sha512-fo7CelaUDKWIyemw4b+J57cWuRkOu4SWCCPfNDkPvfWkGjM9D5racHQXr4EQeYCD6zEBIBxGCeaKkQo+ysl0gA==} + + '@csstools/selector-resolve-nested@1.1.0': + resolution: {integrity: sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==} + engines: {node: ^14 || ^16 || >=18} + peerDependencies: + postcss-selector-parser: ^6.0.13 + + '@csstools/selector-specificity@3.1.1': + resolution: {integrity: sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==} + engines: {node: ^14 || ^16 || >=18} + peerDependencies: + postcss-selector-parser: ^6.0.13 + '@dnd-kit/accessibility@3.1.0': resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==} peerDependencies: @@ -698,6 +736,9 @@ packages: '@lezer/lr@1.3.14': resolution: {integrity: sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==} + '@lezer/lr@1.4.1': + resolution: {integrity: sha512-CHsKq8DMKBf9b3yXPDIU4DbH+ZJd/sJdYOW2llbW/HudP5u0VS6Bfq1hLYfgU7uAYGFIyGGQIsSOXGPEErZiJw==} + '@lottiefiles/react-lottie-player@3.5.3': resolution: {integrity: sha512-6pGbiTMjGnPddR1ur8M/TIDCiogZMc1aKIUbMEKXKAuNeYwZ2hvqwBJ+w5KRm88ccdcU88C2cGyLVsboFlSdVQ==} peerDependencies: @@ -793,6 +834,10 @@ packages: resolution: {integrity: sha512-eiq9/kMX2bYezS4/kLFk3xNnruCFjCDdw6aYEv5ECHVKkYROiuLd3/AsP5d7tWF3+kPPy6tB0Wq8aqDG/URHGA==} engines: {node: ^14.13.1 || >=16.0.0 || >=18.0.0} + '@r4ai/remark-callout@0.4.0': + resolution: {integrity: sha512-bJJCmKVyKwRYul0O+oI62gGCKqUcXL1wihmxMiFT3y98DL5fTpzd1jjlHshJHf+sdg3tHfRUlVmxC2U4OlF1kg==} + engines: {node: '>=16'} + '@rexxars/react-json-inspector@8.0.1': resolution: {integrity: sha512-XAsgQwqG8fbDGpWnsvOesRMgPfvwuU7Cx3/cUf/fNIRmGP8lj2YYIf5La/4ayvZLWlSw4tTb4BPCKdmK9D8RuQ==} peerDependencies: @@ -1711,6 +1756,9 @@ packages: resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==} engines: {node: '>= 0.4'} + defu@6.1.4: + resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==} + delayed-stream@1.0.0: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} @@ -3210,6 +3258,12 @@ packages: peerDependencies: postcss: ^8.2.14 + postcss-nesting@12.1.5: + resolution: {integrity: sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==} + engines: {node: ^14 || ^16 || >=18} + peerDependencies: + postcss: ^8.4 + postcss-selector-parser@6.0.10: resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} engines: {node: '>=4'} @@ -3218,6 +3272,10 @@ packages: resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==} engines: {node: '>=4'} + postcss-selector-parser@6.1.0: + resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==} + engines: {node: '>=4'} + postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -3764,6 +3822,9 @@ packages: style-mod@4.1.0: resolution: {integrity: sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==} + style-mod@4.1.2: + resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==} + style-to-object@1.0.6: resolution: {integrity: sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==} @@ -4407,6 +4468,13 @@ snapshots: '@codemirror/view': 6.23.0 '@lezer/common': 1.2.1 + '@codemirror/autocomplete@6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.0)(@codemirror/view@6.28.0)(@lezer/common@1.2.1)': + dependencies: + '@codemirror/language': 6.10.2 + '@codemirror/state': 6.4.0 + '@codemirror/view': 6.28.0 + '@lezer/common': 1.2.1 + '@codemirror/commands@6.3.3': dependencies: '@codemirror/language': 6.10.0 @@ -4414,6 +4482,13 @@ snapshots: '@codemirror/view': 6.23.0 '@lezer/common': 1.2.1 + '@codemirror/commands@6.6.0': + dependencies: + '@codemirror/language': 6.10.2 + '@codemirror/state': 6.4.0 + '@codemirror/view': 6.28.0 + '@lezer/common': 1.2.1 + '@codemirror/lang-javascript@6.2.1': dependencies: '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.1) @@ -4433,6 +4508,15 @@ snapshots: '@lezer/lr': 1.3.14 style-mod: 4.1.0 + '@codemirror/language@6.10.2': + dependencies: + '@codemirror/state': 6.4.0 + '@codemirror/view': 6.28.0 + '@lezer/common': 1.2.1 + '@lezer/highlight': 1.2.0 + '@lezer/lr': 1.4.1 + style-mod: 4.1.2 + '@codemirror/lint@6.4.2': dependencies: '@codemirror/state': 6.4.0 @@ -4445,13 +4529,19 @@ snapshots: '@codemirror/view': 6.23.0 crelt: 1.0.6 + '@codemirror/search@6.5.6': + dependencies: + '@codemirror/state': 6.4.0 + '@codemirror/view': 6.28.0 + crelt: 1.0.6 + '@codemirror/state@6.4.0': {} '@codemirror/theme-one-dark@6.1.2': dependencies: - '@codemirror/language': 6.10.0 + '@codemirror/language': 6.10.2 '@codemirror/state': 6.4.0 - '@codemirror/view': 6.23.0 + '@codemirror/view': 6.28.0 '@lezer/highlight': 1.2.0 '@codemirror/view@6.23.0': @@ -4460,6 +4550,20 @@ snapshots: style-mod: 4.1.0 w3c-keyname: 2.2.8 + '@codemirror/view@6.28.0': + dependencies: + '@codemirror/state': 6.4.0 + style-mod: 4.1.2 + w3c-keyname: 2.2.8 + + '@csstools/selector-resolve-nested@1.1.0(postcss-selector-parser@6.1.0)': + dependencies: + postcss-selector-parser: 6.1.0 + + '@csstools/selector-specificity@3.1.1(postcss-selector-parser@6.1.0)': + dependencies: + postcss-selector-parser: 6.1.0 + '@dnd-kit/accessibility@3.1.0(react@18.2.0)': dependencies: react: 18.2.0 @@ -4747,6 +4851,10 @@ snapshots: dependencies: '@lezer/common': 1.2.1 + '@lezer/lr@1.4.1': + dependencies: + '@lezer/common': 1.2.1 + '@lottiefiles/react-lottie-player@3.5.3(react@18.2.0)': dependencies: lottie-web: 5.12.2 @@ -4812,6 +4920,11 @@ snapshots: '@portabletext/types@2.0.8': {} + '@r4ai/remark-callout@0.4.0': + dependencies: + defu: 6.1.4 + unist-util-visit: 5.0.0 + '@rexxars/react-json-inspector@8.0.1(react@18.2.0)': dependencies: create-react-class: 15.7.0 @@ -5706,13 +5819,13 @@ snapshots: codemirror@6.0.1(@lezer/common@1.2.1): dependencies: - '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.1) - '@codemirror/commands': 6.3.3 - '@codemirror/language': 6.10.0 + '@codemirror/autocomplete': 6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.0)(@codemirror/view@6.28.0)(@lezer/common@1.2.1) + '@codemirror/commands': 6.6.0 + '@codemirror/language': 6.10.2 '@codemirror/lint': 6.4.2 - '@codemirror/search': 6.5.5 + '@codemirror/search': 6.5.6 '@codemirror/state': 6.4.0 - '@codemirror/view': 6.23.0 + '@codemirror/view': 6.28.0 transitivePeerDependencies: - '@lezer/common' @@ -5907,6 +6020,8 @@ snapshots: has-property-descriptors: 1.0.1 object-keys: 1.1.1 + defu@6.1.4: {} + delayed-stream@1.0.0: {} dequal@2.0.2: {} @@ -7850,6 +7965,13 @@ snapshots: postcss: 8.4.33 postcss-selector-parser: 6.0.15 + postcss-nesting@12.1.5(postcss@8.4.33): + dependencies: + '@csstools/selector-resolve-nested': 1.1.0(postcss-selector-parser@6.1.0) + '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.0) + postcss: 8.4.33 + postcss-selector-parser: 6.1.0 + postcss-selector-parser@6.0.10: dependencies: cssesc: 3.0.0 @@ -7860,6 +7982,11 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 + postcss-selector-parser@6.1.0: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + postcss-value-parser@4.2.0: {} postcss@8.4.31: @@ -8583,6 +8710,8 @@ snapshots: style-mod@4.1.0: {} + style-mod@4.1.2: {} + style-to-object@1.0.6: dependencies: inline-style-parser: 0.2.3 diff --git a/postcss.config.cjs b/postcss.config.cjs index e305dd9..209de4d 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,5 +1,6 @@ const config = { plugins: { + "tailwindcss/nesting": {}, tailwindcss: {}, autoprefixer: {}, }, diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 17075db..6b3775d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -15,6 +15,7 @@ import "easymde/dist/easymde.min.css"; // import "../styles/github-dark.css"; // import "../styles/isbl-editor-dark.css"; import "../styles/catppuccin-frape.css"; +import "../styles/callout-style.css"; const outfit = Outfit({ subsets: ["latin"] }); diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx index efda189..f8fa460 100644 --- a/src/pages/blog/[slug].tsx +++ b/src/pages/blog/[slug].tsx @@ -15,6 +15,7 @@ import remarkGfm from "remark-gfm"; import rehypeHighlight from "rehype-highlight"; import remarkMath from "remark-math"; import rehypeMathjax from "rehype-mathjax"; +import remarkCallout from "@r4ai/remark-callout"; const markdown = "``` js\nvar foo = function (bar) {\n return bar++;\n};\n\nconsole.log(foo(5));\n ```\n Just a link: www.nasa.gov."; @@ -39,7 +40,7 @@ const BlogPost: NextPageWithLayout< < */}
{post.body} diff --git a/src/styles/callout-style.css b/src/styles/callout-style.css new file mode 100644 index 0000000..8a8dd40 --- /dev/null +++ b/src/styles/callout-style.css @@ -0,0 +1,395 @@ +[data-callout] { + & { + @apply my-6 space-y-2 rounded-lg border border-blue-600/20 bg-blue-400/20 p-4 pb-5 dark:border-blue-800/20 dark:bg-blue-600/10; + } + + & > [data-callout-title] { + & { + @apply flex flex-row items-start gap-2 p-0 font-bold text-blue-500; + } + + &:not:only-child { + @apply mb-2; + } + + &:empty::after { + content: "Note"; + } + + &::before { + @apply mt-1 block h-5 w-5 bg-current content-[""]; + mask-repeat: no-repeat; + mask-size: cover; + + /* lucide-pencil */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTE3IDNhMi44NSAyLjgzIDAgMSAxIDQgNEw3LjUgMjAuNUwyIDIybDEuNS01LjVabS0yIDJsNCA0Ii8+PC9zdmc+"); + } + } + + & > [data-callout-body] { + & { + @apply space-y-2; + } + + & > * { + @apply m-0; + } + } +} + +details[data-callout] > summary[data-callout-title] { + & { + @apply cursor-pointer; + } + + &::after { + @apply w-full bg-right bg-no-repeat; + content: ""; + + /* lucide:chevron-right */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im05IDE4bDYtNmwtNi02Ii8+PC9zdmc+"); + background-size: 1.5rem; + } + + &:not(:empty)::after { + @apply my-auto ml-auto h-6 w-6; + } +} + +details[data-callout][open] > summary[data-callout-title]::after { + /* lucide:chevron-down */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im02IDlsNiA2bDYtNiIvPjwvc3ZnPg=="); +} + +[data-callout][data-callout-type="info"] { + & { + @apply border-blue-600/20 bg-blue-400/20 dark:border-blue-800/20 dark:bg-blue-600/10; + } + + & > [data-callout-title] { + & { + @apply text-blue-500; + } + + &:empty::after { + content: "Info"; + } + + &::before { + /* lucide:info */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00bTAtNGguMDEiLz48L2c+PC9zdmc+"); + } + } +} + +[data-callout][data-callout-type="todo"] { + & { + @apply border-blue-600/20 bg-blue-400/20 dark:border-blue-800/20 dark:bg-blue-600/10; + } + + & > [data-callout-title] { + & { + @apply text-blue-500; + } + + &:empty::after { + content: "ToDo"; + } + + &::before { + /* lucide:circle-check-big */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0yMiAxMS4wOFYxMmExMCAxMCAwIDEgMS01LjkzLTkuMTQiLz48cGF0aCBkPSJtOSAxMWwzIDNMMjIgNCIvPjwvZz48L3N2Zz4="); + } + } +} + +[data-callout][data-callout-type="abstract"], +[data-callout][data-callout-type="summary"], +[data-callout][data-callout-type="tldr"] { + & { + @apply border-cyan-600/20 bg-cyan-400/20 dark:border-cyan-800/20 dark:bg-cyan-600/10; + } + + & > [data-callout-title] { + & { + @apply text-cyan-500; + } + + &::before { + /* lucide:clipboard-list */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iNCIgeD0iOCIgeT0iMiIgcng9IjEiIHJ5PSIxIi8+PHBhdGggZD0iTTE2IDRoMmEyIDIgMCAwIDEgMiAydjE0YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0yVjZhMiAyIDAgMCAxIDItMmgybTQgN2g0bS00IDVoNG0tOC01aC4wMU04IDE2aC4wMSIvPjwvZz48L3N2Zz4="); + } + } +} + +[data-callout][data-callout-type="abstract"] + > [data-callout-title]:empty::after { + content: "Abstract"; +} + +[data-callout][data-callout-type="summary"] + > [data-callout-title]:empty::after { + content: "Summary"; +} + +[data-callout][data-callout-type="tldr"] > [data-callout-title]:empty::after { + content: "TL;DR"; +} + +[data-callout][data-callout-type="tip"], +[data-callout][data-callout-type="hint"], +[data-callout][data-callout-type="important"] { + & { + @apply border-cyan-600/20 bg-cyan-400/20 dark:border-cyan-800/20 dark:bg-cyan-600/10; + } + + & > [data-callout-title] { + & { + @apply text-cyan-500; + } + + &::before { + /* lucide:flame */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTguNSAxNC41QTIuNSAyLjUgMCAwIDAgMTEgMTJjMC0xLjM4LS41LTItMS0zYy0xLjA3Mi0yLjE0My0uMjI0LTQuMDU0IDItNmMuNSAyLjUgMiA0LjkgNCA2LjVjMiAxLjYgMyAzLjUgMyA1LjVhNyA3IDAgMSAxLTE0IDBjMC0xLjE1My40MzMtMi4yOTQgMS0zYTIuNSAyLjUgMCAwIDAgMi41IDIuNSIvPjwvc3ZnPg=="); + } + } +} + +[data-callout][data-callout-type="tip"] > [data-callout-title]:empty::after { + content: "Tip"; +} + +[data-callout][data-callout-type="hint"] > [data-callout-title]:empty::after { + content: "Hint"; +} + +[data-callout][data-callout-type="important"] + > [data-callout-title]:empty::after { + content: "Important"; +} + +[data-callout][data-callout-type="success"], +[data-callout][data-callout-type="check"], +[data-callout][data-callout-type="done"] { + & { + @apply border-green-600/20 bg-green-400/20 dark:border-green-800/20 dark:bg-green-600/10; + } + + & > [data-callout-title] { + & { + @apply text-green-500; + } + + &::before { + /* lucide:check */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTIwIDZMOSAxN2wtNS01Ii8+PC9zdmc+"); + } + } +} + +[data-callout][data-callout-type="success"] + > [data-callout-title]:empty::after { + content: "Success"; +} + +[data-callout][data-callout-type="check"] > [data-callout-title]:empty::after { + content: "Check"; +} + +[data-callout][data-callout-type="done"] > [data-callout-title]:empty::after { + content: "Done"; +} + +[data-callout][data-callout-type="question"], +[data-callout][data-callout-type="help"], +[data-callout][data-callout-type="faq"] { + & { + @apply border-orange-600/20 bg-orange-400/20 dark:border-orange-800/20 dark:bg-orange-600/10; + } + + & > [data-callout-title] { + & { + @apply text-orange-500; + } + + &::before { + /* lucide:circle-help */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cGF0aCBkPSJNOS4wOSA5YTMgMyAwIDAgMSA1LjgzIDFjMCAyLTMgMy0zIDNtLjA4IDRoLjAxIi8+PC9nPjwvc3ZnPg=="); + } + } +} + +[data-callout][data-callout-type="question"] + > [data-callout-title]:empty::after { + content: "Question"; +} + +[data-callout][data-callout-type="help"] > [data-callout-title]:empty::after { + content: "Help"; +} + +[data-callout][data-callout-type="faq"] > [data-callout-title]:empty::after { + content: "FAQ"; +} + +[data-callout][data-callout-type="warning"], +[data-callout][data-callout-type="caution"], +[data-callout][data-callout-type="attention"] { + & { + @apply border-orange-600/20 bg-orange-400/20 dark:border-orange-800/20 dark:bg-orange-600/10; + } + + & > [data-callout-title] { + & { + @apply text-orange-500; + } + + &::before { + /* lucide:triangle-alert */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIxLjczIDE4bC04LTE0YTIgMiAwIDAgMC0zLjQ4IDBsLTggMTRBMiAyIDAgMCAwIDQgMjFoMTZhMiAyIDAgMCAwIDEuNzMtM00xMiA5djRtMCA0aC4wMSIvPjwvc3ZnPg=="); + } + } +} + +[data-callout][data-callout-type="warning"] + > [data-callout-title]:empty::after { + content: "Warning"; +} + +[data-callout][data-callout-type="caution"] + > [data-callout-title]:empty::after { + content: "Caution"; +} + +[data-callout][data-callout-type="attention"] + > [data-callout-title]:empty::after { + content: "Attention"; +} + +[data-callout][data-callout-type="failure"], +[data-callout][data-callout-type="fail"], +[data-callout][data-callout-type="missing"] { + & { + @apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10; + } + + & > [data-callout-title] { + & { + @apply text-red-500; + } + + &::before { + /* lucide:check */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTIwIDZMOSAxN2wtNS01Ii8+PC9zdmc+"); + } + } +} + +[data-callout][data-callout-type="failure"] + > [data-callout-title]:empty::after { + content: "Failure"; +} + +[data-callout][data-callout-type="fail"] > [data-callout-title]:empty::after { + content: "Fail"; +} + +[data-callout][data-callout-type="missing"] + > [data-callout-title]:empty::after { + content: "Missing"; +} + +[data-callout][data-callout-type="danger"], +[data-callout][data-callout-type="error"] { + & { + @apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10; + } + + & > [data-callout-title] { + & { + @apply text-red-500; + } + + &::before { + /* lucide:zap */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXphcCI+PHBhdGggZD0iTTQgMTRhMSAxIDAgMCAxLS43OC0xLjYzbDkuOS0xMC4yYS41LjUgMCAwIDEgLjg2LjQ2bC0xLjkyIDYuMDJBMSAxIDAgMCAwIDEzIDEwaDdhMSAxIDAgMCAxIC43OCAxLjYzbC05LjkgMTAuMmEuNS41IDAgMCAxLS44Ni0uNDZsMS45Mi02LjAyQTEgMSAwIDAgMCAxMSAxNHoiLz48L3N2Zz4="); + } + } +} + +[data-callout][data-callout-type="danger"] > [data-callout-title]:empty::after { + content: "Danger"; +} + +[data-callout][data-callout-type="error"] > [data-callout-title]:empty::after { + content: "Error"; +} + +[data-callout][data-callout-type="bug"] { + & { + @apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10; + } + + & > [data-callout-title] { + & { + @apply text-red-500; + } + + &::before { + /* lucide:bug */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHBhdGggZD0ibTggMmwxLjg4IDEuODhtNC4yNCAwTDE2IDJNOSA3LjEzdi0xYTMuMDAzIDMuMDAzIDAgMSAxIDYgMHYxIi8+PHBhdGggZD0iTTEyIDIwYy0zLjMgMC02LTIuNy02LTZ2LTNhNCA0IDAgMCAxIDQtNGg0YTQgNCAwIDAgMSA0IDR2M2MwIDMuMy0yLjcgNi02IDZtMCAwdi05Ii8+PHBhdGggZD0iTTYuNTMgOUM0LjYgOC44IDMgNy4xIDMgNW0zIDhIMm0xIDhjMC0yLjEgMS43LTMuOSAzLjgtNE0yMC45NyA1YzAgMi4xLTEuNiAzLjgtMy41IDRNMjIgMTNoLTRtLS44IDRjMi4xLjEgMy44IDEuOSAzLjggNCIvPjwvZz48L3N2Zz4="); + } + } +} + +[data-callout][data-callout-type="bug"] > [data-callout-title]:empty::after { + content: "Bug"; +} + +[data-callout][data-callout-type="example"] { + & { + @apply border-purple-600/20 bg-purple-400/20 dark:border-purple-800/20 dark:bg-purple-600/10; + } + + & > [data-callout-title] { + & { + @apply text-purple-500; + } + + &::before { + /* lucide:list */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTggNmgxM004IDEyaDEzTTggMThoMTNNMyA2aC4wMU0zIDEyaC4wMU0zIDE4aC4wMSIvPjwvc3ZnPg=="); + } + } +} + +[data-callout][data-callout-type="example"] + > [data-callout-title]:empty::after { + content: "Example"; +} + +[data-callout][data-callout-type="quote"], +[data-callout][data-callout-type="cite"] { + & { + @apply border-zinc-600/20 bg-zinc-400/20 dark:border-zinc-800/20 dark:bg-zinc-600/15; + } + + & > [data-callout-title] { + & { + @apply text-zinc-500; + } + + &::before { + /* lucide:quote */ + mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTMgMjFjMyAwIDctMSA3LThWNWMwLTEuMjUtLjc1Ni0yLjAxNy0yLTJINGMtMS4yNSAwLTIgLjc1LTIgMS45NzJWMTFjMCAxLjI1Ljc1IDIgMiAyYzEgMCAxIDAgMSAxdjFjMCAxLTEgMi0yIDJzLTEgLjAwOC0xIDEuMDMxVjIwYzAgMSAwIDEgMSAxbTEyIDBjMyAwIDctMSA3LThWNWMwLTEuMjUtLjc1Ny0yLjAxNy0yLTJoLTRjLTEuMjUgMC0yIC43NS0yIDEuOTcyVjExYzAgMS4yNS43NSAyIDIgMmguNzVjMCAyLjI1LjI1IDQtMi43NSA0djNjMCAxIDAgMSAxIDEiLz48L3N2Zz4="); + } + } +} + +[data-callout][data-callout-type="quote"] > [data-callout-title]:empty::after { + content: "Quote"; +} + +[data-callout][data-callout-type="cite"] > [data-callout-title]:empty::after { + content: "Cite"; +}