diff --git a/package.json b/package.json
index 3354660e..dfa14f86 100644
--- a/package.json
+++ b/package.json
@@ -136,6 +136,7 @@
"remark-emoji": "4.0.0",
"remark-frontmatter": "4.0.1",
"remark-gfm": "3.0.1",
+ "remark-github-alerts": "^0.0.2",
"remark-math": "5.1.1",
"remark-parse": "10.0.2",
"remark-rehype": "10.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24a3961a..97d754c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -181,7 +181,7 @@ dependencies:
version: 0.16.9
langchain:
specifier: 0.0.196
- version: 0.0.196(cheerio@1.0.0-rc.12)(ioredis@5.3.2)(jsdom@23.0.0)(ws@7.5.9)
+ version: 0.0.196(cheerio@1.0.0-rc.12)(ioredis@5.3.2)(jsdom@23.0.0)(ws@8.13.0)
lottie-react:
specifier: 2.4.0
version: 2.4.0(react-dom@18.2.0)(react@18.2.0)
@@ -323,6 +323,9 @@ dependencies:
remark-gfm:
specifier: 3.0.1
version: 3.0.1
+ remark-github-alerts:
+ specifier: ^0.0.2
+ version: 0.0.2(@types/mdast@4.0.3)(unified@10.1.2)
remark-math:
specifier: 5.1.1
version: 5.1.1
@@ -3446,12 +3449,6 @@ packages:
dependencies:
undici-types: 5.26.5
- /@types/node@20.9.4:
- resolution: {integrity: sha512-wmyg8HUhcn6ACjsn8oKYjkN/zUzQeNtMy44weTJSM6p4MMzEOuKbA3OjJ267uPCOW7Xex9dyrNTful8XTQYoDA==}
- dependencies:
- undici-types: 5.26.5
- dev: true
-
/@types/pangu@4.0.2:
resolution: {integrity: sha512-rVwVCkOFTWpmBjZuxTiVhLE8cwIKff3jWEKjs+DDg6bMkQwjp9Bp03pNanHQTtTzP53SDHJutb/kfGFHNhOJaQ==}
dev: true
@@ -7958,7 +7955,7 @@ packages:
resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
engines: {node: '>= 10.13.0'}
dependencies:
- '@types/node': 20.9.4
+ '@types/node': 20.10.0
merge-stream: 2.0.0
supports-color: 8.1.1
dev: true
@@ -8207,7 +8204,7 @@ packages:
uuid: 9.0.1
dev: false
- /langchain@0.0.196(cheerio@1.0.0-rc.12)(ioredis@5.3.2)(jsdom@23.0.0)(ws@7.5.9):
+ /langchain@0.0.196(cheerio@1.0.0-rc.12)(ioredis@5.3.2)(jsdom@23.0.0)(ws@8.13.0):
resolution: {integrity: sha512-kt17GGTDFWHNv3jJOIXymsQxfa+h9UQ6hrHbhur+V2pV6RBKO5E+RRCvnCqBzbnOPtrlkENF6Wl3Ezmsfo21dg==}
engines: {node: '>=18'}
peerDependencies:
@@ -8525,7 +8522,7 @@ packages:
openapi-types: 12.1.3
p-retry: 4.6.2
uuid: 9.0.1
- ws: 7.5.9
+ ws: 8.13.0
yaml: 2.3.4
zod: 3.22.4
zod-to-json-schema: 3.20.3(zod@3.22.4)
@@ -10892,6 +10889,17 @@ packages:
- supports-color
dev: false
+ /remark-github-alerts@0.0.2(@types/mdast@4.0.3)(unified@10.1.2):
+ resolution: {integrity: sha512-Sg12BXLjOSeyG4Td6nY514DFyccx3GU5Rq9ITfm0BlfM9JHPRwDYhkFzwNQwugXaykyjqhSw11lDBws1FXz5Ow==}
+ peerDependencies:
+ '@types/mdast': ^4.0.3
+ unified: ^11.0.4
+ dependencies:
+ '@types/mdast': 4.0.3
+ unified: 10.1.2
+ unist-util-visit: 5.0.0
+ dev: false
+
/remark-math@5.1.1:
resolution: {integrity: sha512-cE5T2R/xLVtfFI4cCePtiRn+e6jKMtFDR3P8V3qpv8wpKjwvHoBA4eJzvX+nVrnlNy0911bdGmuspCSwetfYHw==}
dependencies:
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 10c48bf4..c77fa1a8 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -24,6 +24,9 @@ import Providers, { mantineDefaultColorScheme, mantineTheme } from "./providers"
import "@crossbell/connect-kit/colors.css"
import "@mantine/core/styles.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 "~/css/main.css"
export const metadata: Metadata = {
@@ -125,7 +128,7 @@ export default async function RootLayout({
const messages = await getMessages()
return (
-
+
diff --git a/src/markdown/index.ts b/src/markdown/index.ts
index 94c76ab3..9d652412 100644
--- a/src/markdown/index.ts
+++ b/src/markdown/index.ts
@@ -24,6 +24,7 @@ import remarkDirectiveRehype from "remark-directive-rehype"
import emoji from "remark-emoji"
import remarkFrontmatter from "remark-frontmatter"
import remarkGfm from "remark-gfm"
+import remarkGithubAlerts from "remark-github-alerts"
import remarkMath from "remark-math"
import remarkParse from "remark-parse"
import remarkRehype from "remark-rehype"
@@ -104,6 +105,8 @@ export const renderPageContent = (
try {
let pipeline = unified()
.use(remarkParse)
+ // make sure this is before remarkBreaks
+ .use(remarkGithubAlerts)
.use(remarkBreaks)
.use(remarkFrontmatter, ["yaml"])
.use(() => (tree: Root) => {