feat(blog): add new blog article

Author: qlAD

apps/gkBlog/src/components/mdx/Draft.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+function Draft({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className="p-4 border-l-4 font-sans text-sm leading-relaxed rounded-md mb-4 mt-4 
+                 bg-blue-50 text-blue-800 border-blue-500 
+                 dark:bg-gray-800 dark:text-blue-300 dark:border-blue-400"
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Draft;

apps/gkBlog/src/components/mdx/VideoEmbed.tsx

@@ -0,0 +1,92 @@
+import { IframeHTMLAttributes } from "react";
+
+type VideoType = "bilibili" | "youtube";
+
+interface VideoEmbedProps {
+  type: VideoType;
+  id: string;
+}
+
+// 响应式容器的基础样式
+const containerStyle: React.CSSProperties = {
+  position: "relative",
+  paddingBottom: "56.25%", // 16:9 宽高比
+  height: 0,
+  overflow: "hidden",
+  borderRadius: "8px",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+};
+
+// iframe 基础样式
+const iframeStyle: React.CSSProperties = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  border: "none",
+};
+
+// 获取平台相关配置
+const getPlatformConfig = (
+  type: VideoType,
+  id: string
+): {
+  url: string;
+  title: string;
+  props: IframeHTMLAttributes<HTMLIFrameElement>;
+} | null => {
+  const commonProps = {
+    allowFullScreen: true,
+    loading: "lazy" as const,
+  };
+
+  switch (type) {
+    case "bilibili":
+      return {
+        url: `https://player.bilibili.com/player.html?isOutside=true&bvid=${id}`,
+        title: "Bilibili 视频播放器",
+        props: {
+          ...commonProps,
+          scrolling: "no",
+          frameBorder: 0,
+        },
+      };
+
+    case "youtube":
+      return {
+        url: `https://www.youtube.com/embed/${id}?rel=0`,
+        title: "YouTube 视频播放器",
+        props: {
+          ...commonProps,
+          width: 560,
+          height: 315,
+          allow:
+            "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          referrerPolicy: "strict-origin-when-cross-origin",
+        },
+      };
+
+    default:
+      return null;
+  }
+};
+
+function VideoEmbed({ type, id }: VideoEmbedProps) {
+  const platformConfig = getPlatformConfig(type, id);
+
+  if (!platformConfig) return null;
+
+  return (
+    <div style={containerStyle}>
+      <iframe
+        src={platformConfig.url}
+        title={platformConfig.title}
+        style={iframeStyle}
+        {...platformConfig.props}
+      />
+    </div>
+  );
+}
+
+export default VideoEmbed;