From 1ee3cd0ef56fdc9326ce41514b1f899dabf3f5d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20UB?=
 <22903142+adrian-ub@users.noreply.github.com>
Date: Sat, 5 Oct 2024 10:40:15 -0500
Subject: [PATCH] feat: add GitHub-style alerts

---
 package.json                                  |  3 +-
 .../pages/posts/markdown-style-guide.md       | 38 +++++++++++++++++++
 pnpm-lock.yaml                                | 15 ++++++++
 src/index.ts                                  |  3 ++
 src/layouts/BaseLayout.astro                  |  5 +++
 5 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1996ccb..1321dc2 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,8 @@
   "dependencies": {
     "dayjs": "^1.11.13",
     "fast-glob": "^3.3.2",
-    "nprogress": "^0.2.0"
+    "nprogress": "^0.2.0",
+    "remark-github-alerts": "0.1.0-beta.3"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.3.2",
diff --git a/playground/src/content/pages/posts/markdown-style-guide.md b/playground/src/content/pages/posts/markdown-style-guide.md
index 9d1dc8c..6620b7a 100644
--- a/playground/src/content/pages/posts/markdown-style-guide.md
+++ b/playground/src/content/pages/posts/markdown-style-guide.md
@@ -29,6 +29,44 @@ Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptio
 
 Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
 
+## Alerts
+
+### Syntax
+
+```markdown
+> [!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.
+```
+
+### Output
+
+> [!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.
+
 ## Images
 
 ### Syntax
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e922a55..08a5169 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       nprogress:
         specifier: ^0.2.0
         version: 0.2.0
+      remark-github-alerts:
+        specifier: 0.1.0-beta.3
+        version: 0.1.0-beta.3(@types/mdast@4.0.4)(unified@11.0.5)
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^3.3.2
@@ -3470,6 +3473,12 @@ packages:
   remark-gfm@4.0.0:
     resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==}
 
+  remark-github-alerts@0.1.0-beta.3:
+    resolution: {integrity: sha512-Sc74yr9DKX+fEIey462EUTtrrbzQ11EDfMawVTxRkqMxl4OMZUhLAuPFmbFYVvZMheYpmLEKqaf2fGlcbpQs1w==}
+    peerDependencies:
+      '@types/mdast': ^4.0.0
+      unified: ^11.0.0
+
   remark-mdx@3.0.1:
     resolution: {integrity: sha512-3Pz3yPQ5Rht2pM5R+0J2MrGoBSrzf+tJG94N+t/ilfdh8YLyyKYtidAYwTveB20BoHAcwIopOUqhcmh2F7hGYA==}
 
@@ -8360,6 +8369,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  remark-github-alerts@0.1.0-beta.3(@types/mdast@4.0.4)(unified@11.0.5):
+    dependencies:
+      '@types/mdast': 4.0.4
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+
   remark-mdx@3.0.1:
     dependencies:
       mdast-util-mdx: 3.0.0
diff --git a/src/index.ts b/src/index.ts
index 50dda8a..a4a23f7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,7 @@
 import type { AstroIntegration } from 'astro'
 
+import remarkGithubAlerts from 'remark-github-alerts'
+
 export default function AntfuMeIntegration(): AstroIntegration {
   return {
     name: 'astro-vitesse',
@@ -20,6 +22,7 @@ export default function AntfuMeIntegration(): AstroIntegration {
               defaultColor: false,
               wrap: true,
             },
+            remarkPlugins: [remarkGithubAlerts],
           },
         })
       },
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index b4123a9..bac0199 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -6,7 +6,12 @@ import BaseHead from '../components/BaseHead.astro'
 import Footer from '../components/Footer.astro'
 
 import NavBar from '../components/NavBar.astro'
+
 import '@unocss/reset/tailwind.css'
+import 'remark-github-alerts/styles/github-colors-light.css'
+import 'remark-github-alerts/styles/github-colors-dark-class.css'
+import 'remark-github-alerts/styles/github-base.css'
+
 import '../styles/main.css'
 import '../styles/prose.css'
 import '../styles/markdown.css'