feat(index): add obsidian callouts

astro.config.ts

@@ -14,6 +14,7 @@ import remarkEmoji from 'remark-emoji'
 import remarkMath from 'remark-math'
 import remarkSectionize from 'remark-sectionize'
 import remarkToc from 'remark-toc'
+import remarkCallout from "@r4ai/remark-callout";
 
 import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections'
 import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers'
@@ -105,6 +106,6 @@ export default defineConfig({
         },
       ],
     ],
-    remarkPlugins: [remarkToc, remarkMath, remarkEmoji, remarkSectionize],
+    remarkPlugins: [remarkToc, remarkMath, remarkEmoji, remarkSectionize, remarkCallout,],
   },
 })

bun.lock

@@ -15,6 +15,7 @@
         "@fontsource-variable/geist-mono": "^5.2.5",
         "@fontsource/geist-mono": "^5.2.5",
         "@iconify-json/lucide": "^1.2.32",
+        "@r4ai/remark-callout": "^0.6.2",
         "@radix-ui/react-avatar": "^1.1.3",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-icons": "^1.3.2",
@@ -256,6 +257,8 @@
 
     "@oslojs/encoding": ["@oslojs/encoding@1.1.0", "", {}, "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ=="],
 
+    "@r4ai/remark-callout": ["@r4ai/remark-callout@0.6.2", "", { "dependencies": { "defu": "^6.1.4", "unist-util-visit": "^5.0.0" } }, "sha512-yRj0dzEqdGYquJqTcr68CtAAh47AamWGMbZwiXBTeH6tf2MAh3Rc8C3xYhsRHKX91j9h5JZPTV2YLv+zL08AHQ=="],
+
     "@radix-ui/number": ["@radix-ui/number@1.1.0", "", {}, "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="],
 
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.1", "", {}, "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="],

package.json

@@ -24,6 +24,7 @@
     "@fontsource-variable/geist-mono": "^5.2.5",
     "@fontsource/geist-mono": "^5.2.5",
     "@iconify-json/lucide": "^1.2.32",
+    "@r4ai/remark-callout": "^0.6.2",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-icons": "^1.3.2",

src/components/Head.astro

@@ -1,6 +1,7 @@
 ---
 import '@fontsource-variable/geist'
 import '@fontsource-variable/geist-mono'
+import '../styles/callout.css'
 import '../styles/global.css'
 import '../styles/typography.css'
 

src/content/artix-install-guide/index.md

@@ -32,7 +32,7 @@ Use [Rufus](https://rufus.ie/en)
 2. Find the corresponding block device for the flash drive in `/dev` folder. Usually it is `/dev/sdb1`.
 3. Write the image to the flash drive (assuming your flash drive is `/dev/sdb1`).
 
-> [!Warning]
+> [!warning]
 > This command will wipe the `/dev/sdb1` partition
 
 
@@ -44,7 +44,7 @@ sudo dd bs=4M if=~/Downloads/artix-base-openrc-*-x86_64.iso of=/dev/sdb1 conv=fs
 
 ## Boot the live environment
 
-> [!Info]
+> [!info]
 > Artix Linux installation images do not support Secure Boot. You will need to disable Secure Boot in your BIOS to boot the installation medium.
 
 1. Power off your PC.
@@ -80,7 +80,7 @@ scan wifi
 services
 ```
 
-> [!Tip]
+> [!tip]
 > Network names can be tab-completed.
 
 > [!example]
@@ -116,7 +116,7 @@ pacman -Sy gdisk
 gdisk /dev/nvme0n1
 ```
 
-> [!Note]
+> [!note]
 > `nvme0n1` will be used as the target install drive throughout this guide, adapt it to your drive name.
 
 2. Delete any existing partitions. Repeat until none are left.
@@ -153,15 +153,15 @@ Do you want to proceed? (Y/N): y
 lsblk
 ```
 
-> [!Note]
+> [!note]
->It should look something like this:
+> It should look something like this
-
+>
-```shell title="lsblk"
+> ```shell title="lsblk"
-NAME        MAJ:MIN RM   SIZE RO TYPE
+> NAME        MAJ:MIN RM   SIZE RO TYPE
-nvme0n1     259:0    0 465,8G  0 disk
+> nvme0n1     259:0    0 465,8G  0 disk
-├─nvme0n1p1 259:1    0   512M  0 part
+> ├─nvme0n1p1 259:1    0   512M  0 part
-└─nvme0n1p2 259:2    0 465,3G  0 part
+> └─nvme0n1p2 259:2    0 465,3G  0 part
-```
+> ```
 
 ---
 
@@ -169,7 +169,7 @@ nvme0n1     259:0    0 465,8G  0 disk
 
 1. Encrypt your root partition
 
-> [!Tip]
+> [!tip]
 >Make sure to enter a secure passphrase and to write it down
 
 ```shell
@@ -215,16 +215,16 @@ mount -m /dev/nvme0n1p1 /mnt/boot
 lsblk
 ```
 
-> [!Note]
+> [!note]
-> It should look something like this:
+> It should look something like this
-
+>
-```shell title="lsblk"
+> ```shell title="lsblk"
-NAME        MAJ:MIN RM   SIZE RO TYPE  MOUNTPOINTS
+> NAME        MAJ:MIN RM   SIZE RO TYPE  MOUNTPOINTS
-nvme0n1     259:0    0 465,8G  0 disk  
+> nvme0n1     259:0    0 465,8G  0 disk  
-├─nvme0n1p1 259:1    0   512M  0 part  /mnt/boot
+> ├─nvme0n1p1 259:1    0   512M  0 part  /mnt/boot
-└─nvme0n1p2 259:2    0 465,3G  0 part  
+> └─nvme0n1p2 259:2    0 465,3G  0 part  
-  └─root    254:0    0 465,2G  0 crypt /mnt
+>   └─root    254:0    0 465,2G  0 crypt /mnt
-```
+> ```
 
 ---
 
@@ -236,7 +236,7 @@ Install the base system, kernel, init system and other essential packages.
 basestrap /mnt base linux linux-firmware openrc elogind-openrc cryptsetup cryptsetup-openrc efibootmgr doas nano
 ```
 
-> [!Note]
+> [!note]
 > Install AMD or Intel microcode, depending on your system's CPU
 
 ### AMD CPU
@@ -289,7 +289,7 @@ wifi.backend=iwd
 
 ### MAC randomization
 
-> [!Info]
+> [!info]
 >MAC randomization can be used for increased privacy by not disclosing your real MAC address to the WiFi network. 
 
 ```ini
@@ -306,7 +306,7 @@ wifi.cloned-mac-address=random
 
 ### Set the locale
 
-> [!Note]
+> [!tip]
 >Feel free to change `en_DK.UTF-8` to your preferred locale such as `en_US.UTF-8` or `en_GB.UTF-8`
 
 1. Uncomment `en_DK.UTF-8`
@@ -331,7 +331,7 @@ locale-gen
 
 ## Set the time zone
 
-> [!Example]
+> [!example]
 >`ln -sf /usr/share/zoneinfo/Asia/Dubai /etc/localtime`
 
 ```shell
@@ -350,7 +350,7 @@ hwclock --systohc
 
 ## Hostname
 
-- Set your preffered hostname, in this case I will be using `artix`
+Set your preffered hostname, in this case I will be using `artix`
 ```shell
 echo 'artix' > /etc/hostname
 ```
@@ -400,7 +400,7 @@ passwd
 
 2. Create a user and set his password.
 
-> [!Tip]
+> [!tip]
 >Change `artix` to your desired username
 
 ```sh
@@ -431,7 +431,7 @@ chmod -c 0400 /etc/doas.conf
 ## Boot loader
 ### Check for UEFI support
 
-> [!Tip]
+> [!tip]
 >If you see a bunch of files listed, use EFISTUB.
 >If you do not see a bunch of files listed, your system does not support UEFI and you should use GRUB.
 
@@ -448,7 +448,7 @@ blkid -s UUID -o value /dev/nvme0n1p2
 
 2. Create a boot entry
 
-> [!Tip]
+> [!tip]
 >Replace xxxx with the UUID that you just obtained
 >Replace `intel-ucode.img` with `amd-ucode.img` if you have an AMD CPU
 
@@ -471,19 +471,19 @@ blkid -s UUID -o value /dev/nvme0n1p2
 
 3. Edit the GRUB config file
 
-> [!Note]
+> [!note]
->It should look something like this with xxxx being the UUID that you just obtained
+> It should look something like this with xxxx being the UUID that you just obtained
-
+> 
-```ini
+> ```ini
-GRUB_CMDLINE_LINUX="cryptdevice=UUID=550e8400-e29b-41d4-a716-446655440000:root root=/dev/mapper/root"
+> GRUB_CMDLINE_LINUX="cryptdevice=UUID=550e8400-e29b-41d4-a716-446655440000:root root=/dev/mapper/root"
-GRUB_ENABLE_CRYPTODISK=y
+> GRUB_ENABLE_CRYPTODISK=y
-```
+> ```
 
 ```diff
 <!-- /etc/default/grub -->
 + GRUB_CMDLINE_LINUX_DEFAULT="cryptdevice=UUID=xxxx:root root=/dev/mapper/root" ...
-- #GRUB_ENABLE_CRYPTODISK=y
 + GRUB_ENABLE_CRYPTODISK=y
+- #GRUB_ENABLE_CRYPTODISK=y
 ```
 
 6. Generate the config file
@@ -497,7 +497,7 @@ grub-mkconfig -o /boot/grub/grub.cfg
 
 1. You can now reboot and enter into your new installation
 
-> [!Note]
+> [!note]
 > Unplug your flash drive after the screen turns black
 
 ```sh
@@ -525,7 +525,7 @@ doas sh -c "curl https://archlinux.org/mirrorlist/all -o /etc/pacman.d/mirrorlis
 
 2. Activate Arch mirrors
 
-> [!Note]
+> [!note]
 > This file requires root permissions to edit
 
 ```diff
@@ -543,7 +543,7 @@ doas sh -c "curl https://archlinux.org/mirrorlist/all -o /etc/pacman.d/mirrorlis
 
 3. Edit the pacman config file
 
-> [!Note]
+> [!note]
 > This file requires root permissions to edit
 
 ```ini

src/styles/callout.css

@@ -0,0 +1,386 @@
+@import 'tailwindcss';
+
+[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";
+}