docs: add site alert

apps/website/src/components/Alert.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+export interface AlertProps {
+  type?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+  closeable?: boolean;
+  children: React.ReactNode;
+}
+
+export function Alert({ type = 'primary', closeable, children }: AlertProps) {
+  const [visible, setVisible] = useState(true);
+  if (!visible) {
+    return <div className="alert" role="alert" />;
+  }
+  return (
+    <div className={`alert alert--${type}`} role="alert">
+      {closeable && (
+        <button
+          aria-label="Close"
+          className="clean-btn close"
+          type="button"
+          onClick={() => setVisible(false)}
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      )}
+      {children}
+    </div>
+  );
+}

apps/website/src/pages/index.tsx

@@ -6,12 +6,16 @@ import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
 import styles from './index.module.css';
+import { Alert } from '../components/alert';
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero', styles.heroBanner)}>
       <div className="container">
+        <div className="margin-bottom--lg">
+          <Alert type="info">🏗 站点正在建设中，即将发布，敬请期待！</Alert>
+        </div>
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>