feat: add GitHub-style alerts

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",

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

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],
           },
         })
       },

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'