feat: add support for mdbook-alerts plugin

README.md

@@ -66,13 +66,16 @@
    - [catppuccin-admonish.css](https://github.com/catppuccin/mdBook/releases/latest/download/catppuccin-admonish.css)
      (**Only required if you are using
      [mdbook-admonish](https://github.com/tommilligan/mdbook-admonish)**)
+   - [catppuccin-alerts.css](https://github.com/catppuccin/mdBook/releases/latest/download/catppuccin-alerts.css)
+     (**Only required if you are using
+     [mdbook-alerts](https://github.com/lambdalisue/rs-mdbook-alerts)**)
 
 4. Update `additional-css` key within the `book.toml` as shown below
 
    ```diff
    [output.html]
    -additional-css = []
-   +additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-admonish.css"]
+   +additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-admonish.css", "./theme/catppuccin-alerts.css"]
    ```
 
 5. Edit the `index.hbs` file to include the Catppuccin flavours:
@@ -133,8 +136,21 @@
 
   ```diff
   [output.html]
-  - additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-admonish.css"]
-  + additional-css = ["./theme/catppuccin.css"]
+  - additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-admonish.css", "./theme/catppuccin-alerts.css"]
+  + additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-alerts.css"]
+  ```
+
+- Q: **_"What's the `catppuccin-alerts.css` file?"_**\
+  A: It is a CSS file that is used to style the alerts that are generated
+  by [mdbook-alerts](https://github.com/lambdalisue/rs-mdbook-alerts).
+  **You can remove this file if you are not using this plugin.**
+
+  E.g.
+
+  ```diff
+  [output.html]
+  - additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-admonish.css", "./theme/catppuccin-alerts.css"]
+  + additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-admonish.css"]
   ```
 
 ## Acknowledgement

example/book.toml

@@ -9,13 +9,16 @@ title = "Catppuccin's mdBook"
 command = "mdbook-admonish"
 assets_version = "3.0.2"    # do not edit: managed by `mdbook-admonish install`
 
+[preprocessor.alerts]
+
 [output.html]
 default-theme = "mocha"
 preferred-dark-theme = "mocha"
 additional-css = [
   "./theme/catppuccin.css",
   "./theme/catppuccin-admonish.css",
   "./theme/mdbook-admonish.css",
+  "./theme/catppuccin-alerts.css",
 ]
 no-section-label = true
 git-repository-url = "https://github.com/catppuccin/mdBook"

example/src/SUMMARY.md

@@ -2,4 +2,5 @@
 
 - [Landing](./landing.md)
 - [Admonishments](./admonish.md)
+- [Alerts](./alerts.md)
 - [Super Secret](./secret.md)

example/src/alerts.md

@@ -0,0 +1,24 @@
+# Reference
+
+The following alerts are implemented by the
+[mdbook-alerts](https://github.com/lambdalisue/rs-mdbook-alerts) plugin and are
+automatically themed to match Catppuccin.
+
+## Alerts
+
+All supported alerts are listed below.
+
+> [!NOTE]  
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]  
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]  
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.

example/theme/catppuccin-alerts.css

@@ -0,0 +1 @@
+/Users/uncenter/Dev/Catppuccin/mdbook/dist/catppuccin-alerts.css

package.json

@@ -4,7 +4,7 @@
   "description": "Soothing pastel theme for mdBook",
   "private": true,
   "scripts": {
-    "build": "sass -I node_modules --no-charset --no-source-map src/catppuccin.scss:dist/catppuccin.css src/catppuccin-admonish.scss:dist/catppuccin-admonish.css"
+    "build": "sass -I node_modules --no-charset --no-source-map src/catppuccin.scss:dist/catppuccin.css src/catppuccin-admonish.scss:dist/catppuccin-admonish.css src/catppuccin-alerts.scss:dist/catppuccin-alerts.css"
   },
   "repository": {
     "type": "git",
@@ -22,4 +22,4 @@
     "sass": "^1.79.3"
   },
   "packageManager": "[email protected]"
-}
+}

src/catppuccin-alerts.scss

@@ -0,0 +1,21 @@
+@use "@catppuccin/palette/scss/catppuccin" as catppuccin;
+
+@each $flavour, $color in catppuccin.$palette {
+  .#{$flavour} {
+    .mdbook-alerts-note {
+      --mdbook-alerts-color: #{map-get($color, "blue")};
+    }
+    .mdbook-alerts-tip {
+      --mdbook-alerts-color: #{map-get($color, "green")};
+    }
+    .mdbook-alerts-important {
+      --mdbook-alerts-color: #{map-get($color, "mauve")};
+    }
+    .mdbook-alerts-warning {
+      --mdbook-alerts-color: #{map-get($color, "yellow")};
+    }
+    .mdbook-alerts-caution {
+      --mdbook-alerts-color: #{map-get($color, "red")};
+    }
+  }
+}