This is an automated email from the ASF dual-hosted git repository.
wangweipeng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/fury-site.git
The following commit(s) were added to refs/heads/main by this push:
new cd340071 Feat: Optimize code structure, enhance performance, and
implement Tailwind-based media queries (#213)
cd340071 is described below
commit cd3400716e7a0f9da22a312f7d04a8821e4eac9b
Author: LofiSu <[email protected]>
AuthorDate: Wed Apr 2 11:03:35 2025 +0800
Feat: Optimize code structure, enhance performance, and implement
Tailwind-based media queries (#213)
- Optimize code structure for better maintainability by restructuring
components and modules, which makes the codebase more modular and easier
to understand and extend.
- Enhance performance through techniques such as memoization and lazy
loading, reducing unnecessary rendering and improving the overall
application speed.
- Implement Tailwind - based media queries to achieve a responsive
design, replacing complex CSS media query rules with simple and
consistent utility classes.
- Delete antd Card component, streamlining the dependency tree and
eliminating redundant code, which further improves the project's
maintainability and reduces potential compatibility issues.
---
package.json | 5 +-
postcss.config.js | 6 +
src/constants/index.ts | 44 ++++++
src/hooks/useAOS.tsx | 31 ++++
src/pages/home/components/HomePageLanguageCard.tsx | 162 +++++----------------
src/pages/home/components/HomepageCodeDisplay.tsx | 153 +++++--------------
src/pages/home/components/HomepageFeatures.tsx | 9 +-
src/pages/home/components/HomepageFoot.tsx | 13 +-
src/pages/home/components/HomepageHeader.tsx | 21 +--
src/pages/home/css/tailwind.css | 61 ++++++++
src/pages/home/index.tsx | 39 -----
src/pages/index.tsx | 67 ++++++---
tailwind.config.js | 22 +++
13 files changed, 305 insertions(+), 328 deletions(-)
diff --git a/package.json b/package.json
index 372823a4..6b1c0a23 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
"@docusaurus/plugin-content-docs": "^3.5.1",
"@docusaurus/preset-classic": "3.0.1",
"@mdx-js/react": "^3.0.0",
- "antd": "^5.20.3",
+ "@tailwindcss/postcss7-compat": "^2.2.17",
"aos": "^2.3.4",
"clsx": "^2.0.0",
"docusaurus-lunr-search": "^3.3.1",
@@ -33,9 +33,12 @@
"@docusaurus/module-type-aliases": "3.0.1",
"@docusaurus/tsconfig": "3.0.1",
"@docusaurus/types": "3.0.1",
+ "autoprefixer": "^10.4.21",
"css-loader": "^7.1.2",
"esbuild-loader": "^4.2.2",
+ "postcss": "^8.5.3",
"style-loader": "^4.0.0",
+ "tailwindcss": "^4.0.17",
"typescript": "~5.2.2"
},
"browserslist": {
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..1e20583d
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ "@tailwindcss/postcss7-compat": {},
+ autoprefixer: {},
+ },
+};
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 00000000..6244fd66
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1,44 @@
+export const COPY_SUCCESS_MSG = "Copied!";
+export const COPY_FAIL_MSG = "Failed to copy!";
+export const COPY_TIMEOUT = 2000;
+
+export const CODE_STRING = `import java.util.List;
+import java.util.Arrays;
+import org.apache.fury.*;
+
+public class Example {
+ // Note that Fury instances should be reused between
+ // multiple serializations of different objects.
+ static ThreadSafeFury fury = Fury.builder().withLanguage(Language.JAVA)
+ // Allow to deserialize objects unknown types,
+ // more flexible but less secure.
+ // .requireClassRegistration(false)
+ .buildThreadSafeFury();
+
+ static {
+ // 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);
+ }
+
+ public static void main(String[] args) {
+ SomeClass object = new SomeClass();
+ byte[] bytes = fury.serialize(object);
+ System.out.println(fury.deserialize(bytes));
+ }
+`;
+
+export const imageUrls = [
+ { key: "java", src: "/home/java.svg", label: "Java" },
+ { key: "python", src: "/home/python.svg", label: "Python" },
+ { key: "golang", src: "/home/golang.svg", label: "Golang" },
+ {
+ key: "javascript",
+ src: "/home/JavaScript.svg",
+ label: "JavaScript",
+ },
+ { key: "rust", src: "/home/Rust.svg", label: "Rust" },
+ { key: "more", src: "/home/more.svg", label: "More" },
+];
diff --git a/src/hooks/useAOS.tsx b/src/hooks/useAOS.tsx
new file mode 100644
index 00000000..c202c06f
--- /dev/null
+++ b/src/hooks/useAOS.tsx
@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import AOS from "aos";
+
+// 提取 AOS 初始化配置常量
+const AOS_CONFIG = {
+ offset: 100,
+ duration: 700,
+ easing: "ease-out-quad",
+ once: true,
+};
+
+const useAOS = () => {
+ useEffect(() => {
+ try {
+ // 初始化 AOS
+ AOS.init(AOS_CONFIG);
+ // 监听页面加载完成事件，刷新 AOS
+ const loadHandler = () => AOS.refresh();
+ window.addEventListener("load", loadHandler);
+
+ // 组件卸载时移除事件监听器，避免内存泄漏
+ return () => {
+ window.removeEventListener("load", loadHandler);
+ };
+ } catch (error) {
+ console.error("AOS 初始化出错:", error);
+ }
+ }, []);
+};
+
+export default useAOS;
diff --git a/src/pages/home/components/HomePageLanguageCard.tsx
b/src/pages/home/components/HomePageLanguageCard.tsx
index ae77cf10..19db3464 100644
--- a/src/pages/home/components/HomePageLanguageCard.tsx
+++ b/src/pages/home/components/HomePageLanguageCard.tsx
@@ -1,150 +1,58 @@
import React, { useEffect, useState } from "react";
-import { Card } from "antd";
import useBaseUrl from "@docusaurus/useBaseUrl";
+import "../css/tailwind.css";
+import { imageUrls } from "../../../constants";
export default function HomePageLanguageCard() {
const [locale, setLocale] = useState("en-US");
+ const [processedImageUrls, setProcessedImageUrls] = useState([]);
+
+ //用useBaseUrl处理一遍图像，防止本地资源不部署
+ const processedImages = imageUrls.map((item) => ({
+ ...item,
+ src: useBaseUrl(item.src),
+ }));
useEffect(() => {
if (typeof navigator !== "undefined") {
setLocale(navigator.language || "en-US");
}
+ setProcessedImageUrls(processedImages);
}, []);
- const getLanguageUrl = (language: string) => {
+ const getLanguageUrl = (language) => {
const baseUrl = locale.startsWith("zh-CN")
? "https://fury.apache.org/zh-CN/docs/start/usage/#";
: "https://fury.apache.org/docs/start/usage/#";;
return `${baseUrl}${language}`;
};
- const imageUrls = {
- java: useBaseUrl("/home/java.svg"),
- python: useBaseUrl("/home/python.svg"),
- golang: useBaseUrl("/home/golang.svg"),
- javascript: useBaseUrl("/home/JavaScript.svg"),
- rust: useBaseUrl("/home/Rust.svg"),
- more: useBaseUrl("/home/more.svg"),
- };
-
return (
- <div>
- <style>{mediaQueryStyles}</style>
- <div style={{ textAlign: "center" }}>
- <h2>Quick Start!</h2>
- <p>Choose a language to get started.</p>
+ <div className="text-center">
+ <h2 className="text-2xl font-bold mb-5">Quick Start!</h2>
+ <p className="text-lg mb-5">Choose a language to get started.</p>
+ <div className="w-3/5 mx-auto rounded-md">
+ <div className="grid md:grid-cols-2 sm:grid-cols-1 min-w-0
border-gray-400 rounded-md">
+ {processedImageUrls.map(({ key, src, label }) => (
+ <div
+ key={key}
+ className="flex items-center justify-center h-24 text-lg
font-bold border border-gray-400 rounded-md cursor-pointer transition-transform
duration-300 transform hover:scale-105 active:scale-100 hover:bg-gray-100
hover:border-gray-200"
+ onClick={() =>
+ (window.location.href = getLanguageUrl(
+ key === "java"
+ ? "java-serialization"
+ : key === "more"
+ ? "crosslanguage-serialization"
+ : key
+ ))
+ }
+ >
+ <img src={src} className="w-10 h-10 mr-2" alt={`${label} logo`}
/>
+ <span>{label}</span>
+ </div>
+ ))}
+ </div>
</div>
- <Card
- style={{
- width: "60%",
- margin: "0 auto",
- borderRadius: "10px",
- boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
- }}
- >
- <Card.Grid
- className="grid-item"
- style={gridStyle}
- onClick={() => {
- window.location.href = getLanguageUrl("java-serialization");
- }}
- >
- <img src={imageUrls.java} style={imageStyle} alt="Java logo" />
- <span>Java</span>
- </Card.Grid>
- <Card.Grid
- className="grid-item"
- style={gridStyle}
- onClick={() => {
- window.location.href = getLanguageUrl("python");
- }}
- >
- <img src={imageUrls.python} style={imageStyle} alt="Python logo" />
- <span>Python</span>
- </Card.Grid>
- <Card.Grid
- className="grid-item"
- style={gridStyle}
- onClick={() => {
- window.location.href = getLanguageUrl("golang");
- }}
- >
- <img src={imageUrls.golang} style={imageStyle} alt="Golang logo" />
- <span>Golang</span>
- </Card.Grid>
- <Card.Grid
- className="grid-item"
- style={gridStyle}
- onClick={() => {
- window.location.href = getLanguageUrl("javascript");
- }}
- >
- <img
- src={imageUrls.javascript}
- style={imageStyle}
- alt="JavaScript logo"
- />
- <span>JavaScript</span>
- </Card.Grid>
- <Card.Grid
- className="grid-item"
- style={gridStyle}
- onClick={() => {
- window.location.href = getLanguageUrl("rust");
- }}
- >
- <img src={imageUrls.rust} style={imageStyle} alt="Rust logo" />
- <span>Rust</span>
- </Card.Grid>
- <Card.Grid
- className="grid-item"
- style={gridStyle}
- onClick={() => {
- window.location.href = getLanguageUrl(
- "crosslanguage-serialization"
- );
- }}
- >
- <img src={imageUrls.more} style={imageStyle} alt="More languages" />
- <span>More</span>
- </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",
- cursor: "pointer",
-};
-
-//媒体查询
-const mediaQueryStyles = `
- @media (max-width: 768px) {
- .grid-item {
- width: 100% !important;
- }
- .grid-item img {
- width: 28px !important;
- height: 28px !important;
- }
- .grid-item span {
- display: none !important;
- }
- }
-`;
-
-const imageStyle: React.CSSProperties = {
- width: "38px",
- height: "38px",
- marginRight: "8px",
-};
diff --git a/src/pages/home/components/HomepageCodeDisplay.tsx
b/src/pages/home/components/HomepageCodeDisplay.tsx
index a8cbcba4..2d4908e7 100644
--- a/src/pages/home/components/HomepageCodeDisplay.tsx
+++ b/src/pages/home/components/HomepageCodeDisplay.tsx
@@ -2,128 +2,55 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
import React, { useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism";
+import {
+ CODE_STRING,
+ COPY_FAIL_MSG,
+ COPY_SUCCESS_MSG,
+ COPY_TIMEOUT,
+} from "../../../constants";
export default function HomepageCodeDisplay() {
const [copySuccess, setCopySuccess] = useState("");
- const codeString = `import java.util.List;
-import java.util.Arrays;
-import org.apache.fury.*;
-
-public class Example {
- // Note that Fury instances should be reused between
- // multiple serializations of different objects.
- static ThreadSafeFury fury = Fury.builder().withLanguage(Language.JAVA)
- // Allow to deserialize objects unknown types,
- // more flexible but less secure.
- // .requireClassRegistration(false)
- .buildThreadSafeFury();
-
- static {
- // 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);
- }
-
- public static void main(String[] args) {
- SomeClass object = new SomeClass();
- byte[] bytes = fury.serialize(object);
- System.out.println(fury.deserialize(bytes));
- }
-}
- `;
+ const programmingImageUrl = useBaseUrl("/home/programming.svg");
const copyToClipboard = () => {
- navigator.clipboard.writeText(codeString).then(
- () => {
- setCopySuccess("Copied!");
- setTimeout(() => setCopySuccess(""), 2000); // 清除复制成功的提示
- },
- (err) => {
- setCopySuccess("Failed to copy!");
- }
- );
+ navigator.clipboard
+ .writeText(CODE_STRING)
+ .then(() => {
+ setCopySuccess(COPY_SUCCESS_MSG);
+ setTimeout(() => setCopySuccess(""), COPY_TIMEOUT);
+ })
+ .catch((err) => {
+ console.error("复制代码时出错:", err);
+ setCopySuccess(COPY_FAIL_MSG);
+ });
};
- const programmingImageUrl = useBaseUrl("/home/programming.svg");
-
- //媒体查询
- const mediaQueryStyles = `
- @media (max-width: 768px) {
- .desktop-only {
- display: none !important;
- }
- .code-display {
- width: 100% !important;
- }
- .code-display pre {
- font-size: 8px !important;
- }
- }
- `;
return (
- <>
- <style>{mediaQueryStyles}</style>
- <div
- style={{
- display: "flex",
- margin: "10%",
- borderRadius: "10px",
- flexDirection: "row",
- }}
- >
- <div
- className="desktop-only"
- style={{
- width: "50%",
- justifyContent: "flex-start",
- margin: "50px",
- height: "auto",
- display: "block",
- }}
+ <div className="flex flex-col m-10 md:flex-row md:m-40 items-center
justify-center">
+ <div className="md:w-1/2 md:justify-start md:m-6 h-auto hidden md:block">
+ <img
+ src={programmingImageUrl}
+ alt="programming-coding"
+ className="w-full h-auto max-w-md max-h-md"
+ />
+ </div>
+ <div className="relative bg-gray-800 rounded-md md:w-1/2 w-full">
+ <button
+ onClick={copyToClipboard}
+ className="absolute top-2 right-2 bg-gray-600 text-white border-none
rounded-md px-1 py-0.5 text-xs"
>
- <img src={programmingImageUrl} alt="programming-coding" />
- </div>
- <div
- className="code-display"
- style={{
- position: "relative",
- padding: "12px",
- justifyContent: "flex-end",
- backgroundColor: "#2d2d2d",
- borderRadius: "5px",
- width: "50%",
- height: "0 auto",
- }}
+ {copySuccess ? copySuccess : "Copy"}
+ </button>
+ <SyntaxHighlighter
+ language="java"
+ style={dracula}
+ showLineNumbers
+ customStyle={{ fontSize: "12px" }}
>
- {/* 复制按钮 */}
- <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}
- showLineNumbers
- customStyle={{ fontSize: "12px" }}
- >
- {codeString}
- </SyntaxHighlighter>
- </div>
+ {CODE_STRING}
+ </SyntaxHighlighter>
</div>
- </>
+ </div>
);
-};
+}
diff --git a/src/pages/home/components/HomepageFeatures.tsx
b/src/pages/home/components/HomepageFeatures.tsx
index d7dc6ec4..ccb2f532 100644
--- a/src/pages/home/components/HomepageFeatures.tsx
+++ b/src/pages/home/components/HomepageFeatures.tsx
@@ -4,9 +4,9 @@ import Translate from "@docusaurus/Translate";
import React from "react";
type FeatureItem = {
- title: string | JSX.Element;
+ title: React.ReactNode;
Svg: React.ComponentType<React.ComponentProps<"svg">>;
- description: JSX.Element;
+ description: React.ReactNode;
};
const FeatureList: FeatureItem[] = [
@@ -98,7 +98,7 @@ function Feature({ title, Svg, description }: FeatureItem) {
);
}
-export default function HomepageFeatures(): JSX.Element {
+const HomepageFeatures: React.FC = () => {
return (
<section style={styles.features}>
<div className="container">
@@ -110,4 +110,5 @@ export default function HomepageFeatures(): JSX.Element {
</div>
</section>
);
-}
+};
+export default HomepageFeatures;
diff --git a/src/pages/home/components/HomepageFoot.tsx
b/src/pages/home/components/HomepageFoot.tsx
index d44ed5de..3659f234 100644
--- a/src/pages/home/components/HomepageFoot.tsx
+++ b/src/pages/home/components/HomepageFoot.tsx
@@ -1,19 +1,12 @@
import React from "react";
import useBaseUrl from "@docusaurus/useBaseUrl";
+import "../css/tailwind.css";
export default function HomepageFoot() {
const catImageUrl = useBaseUrl("/home/cat.svg");
return (
- <div
- style={{
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- width: "100%",
- height: "100px",
- }}
- >
- <img src={catImageUrl} style={{ width: "100px", height: "100px" }} />
+ <div className="flex justify-center items-center w-full h-24">
+ <img src={catImageUrl} className="w-24 h-24" />
</div>
);
}
diff --git a/src/pages/home/components/HomepageHeader.tsx
b/src/pages/home/components/HomepageHeader.tsx
index 1860a54a..d5f5dc03 100644
--- a/src/pages/home/components/HomepageHeader.tsx
+++ b/src/pages/home/components/HomepageHeader.tsx
@@ -1,25 +1,16 @@
-import { useEffect } from "react";
-import AOS from "aos";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Heading from "@theme/Heading";
import styles from "../css/index.module.css";
import clsx from "clsx";
import Link from "@docusaurus/Link";
import Translate from "@docusaurus/Translate";
+import useAOS from "../../../hooks/useAOS";
export default function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
- useEffect(() => {
- AOS.init({
- offset: 100,
- duration: 700,
- easing: "ease-out-quad",
- once: true,
- });
- window.addEventListener("load", AOS.refresh);
- }, []);
+ useAOS();
return (
<header
@@ -27,15 +18,18 @@ export default function HomepageHeader() {
data-aos="fade-up"
>
<div className="container">
+ {/* 页面标题 */}
<Heading as="h1" className="hero__title">
<Translate id="homepage.hero.title">{siteConfig.title}</Translate>
</Heading>
+ {/* 页面副标题 */}
<p className="hero__subtitle">
<Translate id="homepage.hero.subtitle">
{siteConfig.tagline}
</Translate>
</p>
<div className={styles.buttons}>
+ {/* GitHub 按钮 */}
<Link
className="button button--secondary button--lg"
to="https://github.com/apache/fury";
@@ -49,6 +43,7 @@ export default function HomepageHeader() {
GitHub
</Translate>
</Link>
+ {/* 开始使用按钮 */}
<Link
className="button button--secondary button--lg"
to="/docs/start/install"
@@ -66,4 +61,4 @@ export default function HomepageHeader() {
</div>
</header>
);
-}
\ No newline at end of file
+}
diff --git a/src/pages/home/css/tailwind.css b/src/pages/home/css/tailwind.css
new file mode 100644
index 00000000..acd89c4e
--- /dev/null
+++ b/src/pages/home/css/tailwind.css
@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+.border {
+ border-width: 1px;
+ border-style: solid;
+}
+
+.border-gray-400 {
+ border-color: rgba(156, 163, 175, 0.3);
+}
+
+/* custom-preflight.css */
+/* 设置全局的盒模型 */
+html {
+ box-sizing: border-box;
+ -webkit-text-size-adjust: 100%;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+}
+
+/* 重置 body 样式 */
+body {
+ margin: 0;
+ font-family: 'Inter', sans-serif;
+ font-size: 1rem;
+ line-height: 1.5;
+}
+
+/* 重置列表样式 */
+ol,
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+/* 重置链接样式 */
+a {
+ color: inherit;
+ text-decoration: inherit;
+}
+
+/* 重置按钮样式 */
+button {
+ background-color: transparent;
+ background-image: none;
+ font-family: inherit;
+ font-size: 100%;
+ font-weight: inherit;
+ line-height: inherit;
+ color: inherit;
+ margin: 0;
+ padding: 0;
+}
\ No newline at end of file
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
deleted file mode 100644
index 0aac8a44..00000000
--- a/src/pages/home/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { useEffect } from "react";
-import HomepageFeatures from
"@site/src/pages/home/components/HomepageFeatures";
-import AOS from "aos";
-import "aos/dist/aos.css";
-import HomePageLanguageCard from "./components/HomePageLanguageCard";
-import HomepageCodeDisplay from "./components/HomepageCodeDisplay";
-import HomepageFoot from "./components/HomepageFoot";
-import HomepageHeader from "./components/HomepageHeader";
-
-
-export default function Home() {
- useEffect(() => {
- AOS.init({
- offset: 100,
- duration: 700,
- easing: "ease-out-quad",
- once: true,
- });
- window.addEventListener("load", AOS.refresh);
- }, []);
-
- return (
- <>
- <HomepageHeader />
- <div data-aos="fade-up" data-aos-delay="10">
- <HomepageFeatures />
- </div>
- <div data-aos="fade-up" data-aos-delay="10">
- <HomePageLanguageCard />
- </div>
- <div data-aos="fade-up" data-aos-delay="10">
- <HomepageCodeDisplay />
- </div>
- <div data-aos="fade-up" data-aos-delay="10">
- <HomepageFoot />
- </div>
- </>
- );
-};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f28cbed8..9af67f88 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,39 +2,64 @@ import React, { useEffect } from "react";
import Layout from "@theme/Layout";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import useIsBrowser from "@docusaurus/useIsBrowser";
-import Home from "./home";
import { translate } from "@docusaurus/Translate";
+import HomepageHeader from "./home/components/HomepageHeader";
+import HomepageFeatures from "./home/components/HomepageFeatures";
+import HomePageLanguageCard from "./home/components/HomePageLanguageCard";
+import HomepageCodeDisplay from "./home/components/HomepageCodeDisplay";
+import HomepageFoot from "./home/components/HomepageFoot";
+import useAOS from "../hooks/useAOS";
-export default function () {
+export default function App() {
const isBrowser = useIsBrowser();
const { siteConfig } = useDocusaurusContext();
+ const pathname = isBrowser && window.location.pathname;
- const pathname = isBrowser && location.pathname;
-
- useEffect(() => {
+ const handleNavClass = () => {
if (isBrowser) {
- const nav = document.getElementsByTagName("nav")[0];
- const classList = nav && nav.classList;
- if (!classList) return;
- if (pathname === "/" || pathname === "/zh-CN/") {
- classList.add("index-nav");
- } else {
- classList.remove("index-nav");
+ try {
+ const nav = document.getElementsByTagName("nav")[0];
+ if (!nav) return;
+ const classList = nav.classList;
+ if (pathname === "/" || pathname === "/zh-CN/") {
+ classList.add("index-nav");
+ } else {
+ classList.remove("index-nav");
+ }
+ } catch (error) {
+ console.error("处理导航栏类名时出错:", error);
}
}
+ };
+
+ useEffect(() => {
+ handleNavClass();
}, [isBrowser, pathname]);
+ useAOS();
+
+ const metaDescription = translate({
+ id: "homepage.metaDescription",
+ message: siteConfig.tagline,
+ description: "The meta description of the homepage",
+ });
+
return (
- <Layout
- title={`${siteConfig.title}`}
- description={translate({
- id: "homepage.metaDescription",
- message: siteConfig.tagline,
- description: "The meta description of the homepage",
- })}
- >
+ <Layout title={`${siteConfig.title}`} description={metaDescription}>
<main>
- <Home />
+ <HomepageHeader />
+ <div data-aos="fade-up" data-aos-delay="10">
+ <HomepageFeatures />
+ </div>
+ <div data-aos="fade-up" data-aos-delay="10">
+ <HomePageLanguageCard />
+ </div>
+ <div data-aos="fade-up" data-aos-delay="10">
+ <HomepageCodeDisplay />
+ </div>
+ <div data-aos="fade-up" data-aos-delay="10">
+ <HomepageFoot />
+ </div>
</main>
</Layout>
);
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..9879268b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./src/**/*.{js,jsx,ts,tsx}",
+ "./node_modules/@docusaurus/theme-classic/**/*.{js,jsx,ts,tsx}",
+ "./node_modules/@docusaurus/theme-search-algolia/**/*.{js,jsx,ts,tsx}",
+ ],
+ theme: {
+ screens: {
+ xs: "480px",
+ sm: "640px",
+ md: "768px",
+ lg: "1024px",
+ xl: "1280px",
+ "2xl": "1536px",
+ },
+ },
+ corePlugins: {
+ preflight: false,
+ },
+ plugins: [],
+};
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
