[Feat]Add new sections HomePageLanguageCard and HomePageCode (#177)

"Add new sections HomePageLanguageCard and HomePageCode with
Corresponding links . Added some basic configurations"


https://github.com/user-attachments/assets/2e93e064-2698-4c5d-a111-ae019f9d5a5a

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
 };

docusaurus.config.ts

@@ -77,6 +77,7 @@ const config: Config = {
   plugins: [
     require.resolve('docusaurus-lunr-search')
   ],
+
   themeConfig: {
     metadata: [
       {'http-equiv': 'Content-Security-Policy', content: "frame-src 'self' https://ghbtns.com"},

package.json

@@ -20,17 +20,22 @@
     "@docusaurus/plugin-content-docs": "^3.5.1",
     "@docusaurus/preset-classic": "3.0.1",
     "@mdx-js/react": "^3.0.0",
+    "antd": "^5.20.3",
     "aos": "^2.3.4",
     "clsx": "^2.0.0",
     "docusaurus-lunr-search": "^3.3.1",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.1",
     "@docusaurus/tsconfig": "3.0.1",
     "@docusaurus/types": "3.0.1",
+    "css-loader": "^7.1.2",
+    "esbuild-loader": "^4.2.2",
+    "style-loader": "^4.0.0",
     "typescript": "~5.2.2"
   },
   "browserslist": {

src/components/HomePageLanguageCard/index.tsx

@@ -0,0 +1,79 @@
+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/components/HomepageCode/index.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+export const HomepageCodeDisplay = () => {
+  const codeString = `import java.util.List;
+import java.util.Arrays;
+import org.apache.fury.*;
+
+public class Example {
+  public static void main(String[] args) {
+    SomeClass object = new SomeClass();
+    // Note that Fury instances should be reused between
+    // multiple serializations of different objects.
+    Fury fury = Fury.builder().withLanguage(Language.JAVA)
+      // Allow to deserialize objects unknown types,
+      // more flexible but less secure.
+      // .withSecureMode(false)
+      .build();
+    // Registering types can reduce class name serialization
+    // overhead but not mandatory.
+    // If secure mode enabled
+    //all custom types must be registered.
+    fury.register(SomeClass.class);
+    byte[] bytes = fury.serialize(object);
+    System.out.println(fury.deserialize(bytes));
+  }
+}
+  `;
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          margin: "12%",
+          borderRadius: "10px",
+        }}
+      >
+        <div
+          style={{
+            width: "50%",
+            justifyContent: "flex-start",
+            margin: "50px",
+            height: "auto",
+          }}
+        >
+          <img src="/programming.svg" alt="programming-coding" />
+        </div>
+        <div
+          style={{
+            padding: "12px",
+            justifyContent: "flex-end",
+            backgroundColor: "#2d2d2d",
+            borderRadius: "5px",
+            width: "50%", 
+            height: "auto", 
+          }}
+        >
+          <SyntaxHighlighter
+            language="java"
+            style={dracula}
+            showLineNumbers
+            customStyle={{ fontSize: "12px" }}
+          >
+            {codeString}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </>
+  );
+};

src/pages/index.tsx

@@ -9,6 +9,8 @@ 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 { HomepageCodeDisplay } from "../components/HomepageCode";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -95,11 +97,21 @@ export default function Home(): JSX.Element {
       >
         <HomepageHeader />
         <main>
-          <div data-aos="fade-up" data-aos-delay="600">
+          <div data-aos="fade-up" data-aos-delay="10">
             <HomepageFeatures />
           </div>
         </main>
+        <main>
+          <div data-aos="fade-up" data-aos-delay="10">
+            <HomePageLanguageCard />
+          </div>
+        </main>
+        <main>
+          <div data-aos="fade-up" data-aos-delay="10">
+            <HomepageCodeDisplay />
+          </div>
+        </main>
       </Layout>
     </>
-  );
+  );  
 }