specification optimization code structure

docs/start/usage.md

@@ -9,7 +9,7 @@ sidebar_position: 1
 ```java
 import java.util.List;
 import java.util.Arrays;
-import io.fury.*;
+import org.apache.fury.*;
 
 public class Example {
   public static void main(String[] args) {
@@ -36,7 +36,7 @@ public class Example {
 
 ```java
 import com.google.common.collect.ImmutableMap;
-import io.fury.*;
+import org.apache.fury.*;
 
 import java.util.Map;
 

src/components/HomepageCode/index.tsx → src/components/HomepageCode.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 export const HomepageCodeDisplay = () => {
+  const [copySuccess, setCopySuccess] = useState("");
   const codeString = `import java.util.List;
 import java.util.Arrays;
 import org.apache.fury.*;
@@ -28,6 +29,18 @@ public class Example {
 }
   `;
 
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(codeString).then(
+      () => {
+        setCopySuccess("Copied!");
+        setTimeout(() => setCopySuccess(""), 2000); // 清除复制成功的提示
+      },
+      (err) => {
+        setCopySuccess("Failed to copy!");
+      }
+    );
+  };
+
   return (
     <>
       <div
@@ -49,14 +62,32 @@ public class Example {
         </div>
         <div
           style={{
+            position: "relative", // 为绝对定位的按钮提供相对参考
             padding: "12px",
             justifyContent: "flex-end",
             backgroundColor: "#2d2d2d",
             borderRadius: "5px",
-            width: "50%", 
-            height: "auto", 
+            width: "50%",
+            height: "auto",
           }}
         >
+          {/* 复制按钮 */}
+          <button
+            onClick={copyToClipboard}
+            style={{
+              position: "absolute",
+              top: "10px",
+              right: "10px",
+              backgroundColor: "#444",
+              color: "#fff",
+              border: "none",
+              borderRadius: "5px",
+              padding: "5px 10px",
+              cursor: "pointer",
+            }}
+          >
+            {copySuccess ? copySuccess : "Copy"}
+          </button>
           <SyntaxHighlighter
             language="java"
             style={dracula}

src/components/HomepageFeatures/index.tsx → src/components/HomepageFeatures.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import Heading from "@theme/Heading";
-import styles from "./styles.module.css";
+import styles from "../css/styles.module.css";
 import Translate, { translate } from "@docusaurus/Translate";
 import React from "react";
 

src/components/HomepageFoot.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export default function HomepageFoot() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        height: "100px",
+      }}
+    >
+      <img src="..//cat.svg" style={{ width: "100px", height: "100px" }} />
+    </div>
+  );
+}

src/components/HomepageLanguageCard.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Card } from "antd";
+
+export const HomepageLanguageCard = () => (
+  <div>
+    <div style={{ textAlign: "center" }}>
+      <h2>Quick Start!</h2>
+      <p>Choose a language to get started .</p>
+    </div>
+    <Card
+      style={{
+        width: "60%",
+        margin: "0 auto",
+        borderRadius: "10px",
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+      }}
+    >
+      <Card.Grid
+        style={gridStyle}
+        onClick={() => {
+          window.location.href =
+            "https://fury.apache.org/docs/start/usage/#java-serialization";
+        }}
+      >
+        <img src="..//java.svg" style={imageStyle} />
+        Java
+      </Card.Grid>
+      <Card.Grid
+        style={gridStyle}
+        onClick={() => {
+          window.location.href =
+            "https://fury.apache.org/docs/start/usage/#python";
+        }}
+      >
+        <img src="..//python.svg" style={imageStyle} />
+        Python
+      </Card.Grid>
+      <Card.Grid
+        style={gridStyle}
+        onClick={() => {
+          window.location.href =
+            "https://fury.apache.org/docs/start/usage/#golang";
+        }}
+      >
+        <img src="..//golang.svg" style={imageStyle} />
+        Golang
+      </Card.Grid>
+      <Card.Grid
+        style={gridStyle}
+        onClick={() => {
+          window.location.href =
+            "https://fury.apache.org/docs/start/usage/#javascript";
+        }}
+      >
+        <img src="..//JavaScript.svg" style={imageStyle} />
+        JavaScript
+      </Card.Grid>
+      <Card.Grid
+        style={gridStyle}
+        onClick={() => {
+          window.location.href =
+            "https://fury.apache.org/docs/start/usage/#rust";
+        }}
+      >
+        <img src="..//Rust.svg" style={imageStyle} />
+        Rust
+      </Card.Grid>
+      <Card.Grid
+        style={gridStyle}
+        onClick={() => {
+          window.location.href =
+            "https://fury.apache.org/docs/start/usage/#crosslanguage-serialization";
+        }}
+      >
+        <img src="..//more.svg" style={imageStyle} />
+        More
+      </Card.Grid>
+    </Card>
+  </div>
+);
+
+const gridStyle: React.CSSProperties = {
+  width: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100px",
+  textAlign: "center",
+  border: "1px solid #f0f0f0",
+  borderRadius: "10px",
+  fontWeight: "bold",
+  fontSize: "18px",
+};
+const imageStyle: React.CSSProperties = {
+  width: "38px",
+  height: "38px",
+  marginRight: "8px",
+};

src/pages/index.tsx

@@ -9,8 +9,9 @@ import styles from "./index.module.css";
 import Translate, { translate } from "@docusaurus/Translate";
 import AOS from "aos";
 import "aos/dist/aos.css";
-import { HomePageLanguageCard } from "../components/HomePageLanguageCard";
+import { HomepageLanguageCard } from "../components/HomePageLanguageCard";
 import { HomepageCodeDisplay } from "../components/HomepageCode";
+import HomepageFoot from "../components/HomePageFoot";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -103,15 +104,20 @@ export default function Home(): JSX.Element {
         </main>
         <main>
           <div data-aos="fade-up" data-aos-delay="10">
-            <HomePageLanguageCard />
+            <HomepageLanguageCard />
           </div>
         </main>
         <main>
           <div data-aos="fade-up" data-aos-delay="10">
             <HomepageCodeDisplay />
           </div>
         </main>
+        <main>
+          <div data-aos="fade-up" data-aos-delay="10">
+            <HomepageFoot />
+          </div>
+        </main>
       </Layout>
     </>
-  );  
+  );
 }