feat(site/blog): add github alert style

site/blog/app/(web)/page.tsx

@@ -15,21 +15,21 @@ export default function Home() {
   return (
     <div className="max-w-prose mx-auto">
       <div className="text-3xl mb-2">
-        <a className="i-ri:quill-pen-line text-brand" />
+        <span className="i-ri:quill-pen-line text-brand" />
       </div>
       <div className="text-gray-600 tracking-tight max-w-5xl">
-        专注于前端的全栈工程师，参与工作距今已经有十多年，有着丰富的2B系统开发及架构经验。早年从事UI设计工作，因此对用户体验及交互上具有一定的把控。目前主要以前端开发为主，对服务端技术如：nodejs、next、nest也具备一定的掌握。擅长以React为核心的各类技术栈进行软件开发，喜欢工程化方面领域，喜欢交互设计。
+        专注于前端的全栈工程师，参与工作距今已经有十多年，有着丰富的2B系统开发及架构经验。早年从事UI设计工作，因此对用户体验及交互上具有一定的把控。目前主要以前端开发为主，对服务端技术如：nodejs、next.js、nest也具备一定的掌握。擅长以React为核心的各类技术栈进行软件开发，喜欢工程化方面领域，喜欢交互设计。
       </div>
       <ul className="mt-4 text-gray-400 font-light">
         <li>
           🎉
           技术栈包括:react、nextjs、nodejs、typescript、electron、sass、unocss、tailwind
           css等。
         </li>
-        <li>🌱 目前正在学习前端自动化测试方面知识。</li>
+        <li>🌱 目前正在学习Rust、以及项目管理方面知识。</li>
         <li>
           💬 如何联系我：微信搜索
-          <a className="text-brand no-underline font-normal">AsQhan</a> 或邮箱：
+          <span className="text-brand no-underline font-normal">AsQhan</span> 或邮箱：
           <a
             className="text-brand no-underline font-normal"
             href="mailto:whenhan@foxmail.com"

site/blog/app/(web)/posts/[slug]/MDXContent.tsx

@@ -2,24 +2,39 @@ import { MDXRemote, MDXRemoteProps } from "next-mdx-remote/rsc";
 
 import remarkToc from "remark-toc";
 import remarkGfm from "remark-gfm";
+import remarkGithubAlerts from "remark-github-alerts";
+
+import rehypeRaw from "rehype-raw";
 
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import rehypeShikiji from "rehype-shikiji";
+import rehypeShiki from "@shikijs/rehype";
 
 // mdx components
 import Button from "@/posts-mdx/next-mdx/button";
 import CssGradientBtn from "@/posts-mdx/css-gradient/GradientBtn";
 
+import "remark-github-alerts/styles/github-base.css";
+import "remark-github-alerts/styles/github-colors-light.css"
+
+
+
 const options: MDXRemoteProps["options"] = {
   mdxOptions: {
-    remarkPlugins: [[remarkToc, { maxDepth: 4 }], remarkGfm],
+    remarkPlugins: [
+      [remarkToc, { maxDepth: 4 }],
+      remarkGfm,
+      // @ts-ignore
+      remarkGithubAlerts,
+    ],
     rehypePlugins: [
       rehypeSlug,
       rehypeAutolinkHeadings,
 
       // @ts-ignore
-      [rehypeShikiji, { theme: "nord" }],
+      [rehypeShiki, { theme: "nord" }],
+      // @ts-ignore
+      [rehypeRaw, { passThrough: ["mdxjsEsm", "mdxJsxFlowElement"] }],
     ],
   },
 };

site/blog/app/(web)/posts/[slug]/styles.scss

@@ -40,7 +40,7 @@
   }
 }
 
-.prose pre.shiki {
+.prose pre.shiki.nord {
   font-family: DM Mono, Input Mono, Fira Code, monospace;
   font-size: 0.92em;
   line-height: 1.4;

site/blog/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@shikijs/rehype": "^1.1.7",
     "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
     "gray-matter": "^4.0.3",
@@ -24,11 +25,12 @@
     "react-use": "^17.5.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
-    "rehype-shikiji": "^0.10.2",
+    "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.0",
     "remark": "^15.0.1",
     "remark-gfm": "^3.0.1",
+    "remark-github-alerts": "^0.0.4",
     "remark-rehype": "^11.1.0",
     "remark-toc": "^9.0.0"
   },

site/blog/posts/next-mdx-contentlayer.md

@@ -14,9 +14,11 @@ description: Next.js(v13+) 使用 contentlayer 创建 MDX 博客应用，Content
 
 [Contentlayer][1] 是一个内容 SDK，可验证您的内容并将其转换为类型安全的 JSON 数据，您可以轻松地import将其添加到应用程序的页面中。
 
+>[!IMPORTANT]
 > **⚠️ Contentlayer 目前处于测试阶段。在即将发布的 1.0 版本之前，可能仍会发生重大更改。**  
-> **⚠️ 同时由于某些原因该项目已长时间未维护，请慎重考虑后再使用**
-> 项目状态：https://github.com/contentlayerdev/contentlayer/issues/429
+
+> [!CAUTION]
+> **⚠️ 同时由于某些原因该项目已长时间未维护，请慎重考虑后再使用** **[详情](https://github.com/contentlayerdev/contentlayer/issues/429)**
 
 ![next-mdx-contentlayer](/images/posts/next-mdx-contentlayer.webp)
 
@@ -262,7 +264,8 @@ export default function Button({ text }: { text: string }) {
   );
 }
 ```
-> 注意：在[App Router](https://nextjs.org/docs/app/building-your-application/routing#the-app-router)中，需对客户端渲染组件添加`use client`;
+> [!NOTE]
+> 在[App Router](https://nextjs.org/docs/app/building-your-application/routing#the-app-router)中，需对客户端渲染组件添加`use client`;
 
 
 然后，在`app/posts/[slug]/page.tsx`文件中作如下调整

site/blog/posts/next-mdx.md

@@ -51,8 +51,11 @@ What import alias would you like configured? @/*
 pnpm add @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
 ```
 
-在您应用的根目录下(`/app`或`/src`目录的父级目录)，创建一个`mdx-components.tsx`文件：   
-> 注意：没有这个文件在`App Router`模式下将无法正常运行。如果使用`Pages Router`则可忽略这一步。
+在您应用的根目录下(`/app`或`/src`目录的父级目录)，创建一个`mdx-components.tsx`文件：  
+
+> [!NOTE]
+> 没有这个文件在`App Router`模式下将无法正常运行。如果使用`Pages Router`则可忽略这一步。
+
 ```ts
 import type { MDXComponents } from 'mdx/types'
 
@@ -287,7 +290,8 @@ export default function Button({ text }: { text: string }) {
   );
 }
 ```
-> 注意：在[App Router](https://nextjs.org/docs/app/building-your-application/routing#the-app-router)中，需对客户端渲染组件添加`use client`;
+> [!NOTE]
+> 在[App Router](https://nextjs.org/docs/app/building-your-application/routing#the-app-router)中，需对客户端渲染组件添加`use client`;
 
 在文章呈现页面`/app/posts/[slug]/page.tsx`中引入创建的组件
 ```diff
@@ -379,7 +383,8 @@ This is a list in markdown:
 在`@next/mdx`、`next-mdx-remote`中都可以通过`remark`插件`rehype`来转换 MDX 内容。例如，使用`remark-gfm`来实现 GitHub Flavored Markdown 来支持。
 
 #### @next/mdx
-> 注意：由于remark和rehype生态系统仅是 ESM，因此，需要将配置文件`next.config.js`改为`next.config.mjs`。插件配置如下：
+> [!NOTE]
+> 由于remark和rehype生态系统仅是 ESM，因此，需要将配置文件`next.config.js`改为`next.config.mjs`。插件配置如下：
 
 ```js
 // next.config.mjs
@@ -431,8 +436,8 @@ export default function MDXContent(props: Pick<MDXRemoteProps, "source">) {
 ```
 
 ### 代码高亮
-在作为技术开发为主的博客中，常常会用到代码示例，这里推荐使用`Anthony Fu`的`rehype-shikiji`插件，按[插件配置](#mdx插件配置)配置即可。其它优秀的代码高亮插件如下：
-- [rehype-shikiji](https://github.com/antfu/shikiji/tree/main/packages/rehype-shikiji)
+在作为技术开发为主的博客中，常常会用到代码示例，这里推荐使用`Anthony Fu`的`@shikijs/rehype`插件，按[插件配置](#mdx插件配置)配置即可。其它优秀的代码高亮插件如下：
+- [@shikijs/rehype](https://github.com/shikijs/shiki/tree/main/packages/rehype)
 - [rehype-highlight](https://github.com/rehypejs/rehype-highlight)
 - [rehype-pretty-code](https://github.com/atomiks/rehype-pretty-code)