Add Faq to Fury website. (#147)

Add Faq to Fury website.

apache/fury#1793

docusaurus.config.ts

@@ -99,6 +99,11 @@ const config: Config = {
           to: 'download',
           label: 'Download',
         },
+        {
+          position: 'right',
+          to: 'https://github.com/apache/fury/issues/1793',
+          label: 'FAQ',
+        },
         {to: '/blog', label: 'Blog', position: 'right'},
         {
           type: 'dropdown',

i18n/en/docusaurus-theme-classic/navbar.json

@@ -27,6 +27,10 @@
     "message": "Download",
     "description": "Navbar item with label Download"
   },
+  "item.label.FAQ": {
+    "message": "FAQ",
+    "description": "Navbar item with label FAQ"
+  },
   "item.label.Blog": {
     "message": "Blog",
     "description": "Navbar item with label Blog"

i18n/zh-CN/docusaurus-theme-classic/navbar.json

@@ -27,6 +27,10 @@
     "message": "下载",
     "description": "Navbar item with label Download"
   },
+  "item.label.FAQ": {
+    "message": "FAQ",
+    "description": "Navbar item with label FAQ"
+  },
   "item.label.Blog": {
     "message": "博客",
     "description": "Navbar item with label Blog"

package.json

@@ -18,6 +18,7 @@
     "@docusaurus/core": "3.0.1",
     "@docusaurus/preset-classic": "3.0.1",
     "@mdx-js/react": "^3.0.0",
+    "aos": "^2.3.4",
     "clsx": "^2.0.0",
     "docusaurus-lunr-search": "^3.3.1",
     "prism-react-renderer": "^2.3.0",

src/pages/index.tsx

@@ -1,3 +1,4 @@
+import React, { useEffect } from "react";
 import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -6,12 +7,27 @@ import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Heading from "@theme/Heading";
 import styles from "./index.module.css";
 import Translate, { translate } from "@docusaurus/Translate";
-import React from "react";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
+
+  useEffect(() => {
+    AOS.init({
+      offset: 100,
+      duration: 700,
+      easing: "ease-out-quad",
+      once: true,
+    });
+    window.addEventListener("load", AOS.refresh);
+  }, []);
+
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+    <header
+      className={clsx("hero hero--primary", styles.heroBanner)}
+      data-aos="fade-up"
+    >
       <div className="container">
         <Heading as="h1" className="hero__title">
           <Translate id="homepage.hero.title">{siteConfig.title}</Translate>
@@ -25,6 +41,8 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="https://github.com/apache/fury"
+            data-aos="fade-up"
+            data-aos-delay="200"
           >
             <Translate
               id="homepage.githubButton"
@@ -36,6 +54,8 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="/docs/start/install"
+            data-aos="fade-up"
+            data-aos-delay="400"
           >
             <Translate
               id="homepage.getStartedButton"
@@ -52,6 +72,17 @@ function HomepageHeader() {
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
+
+  useEffect(() => {
+    AOS.init({
+      offset: 100,
+      duration: 700,
+      easing: "ease-out-quad",
+      once: true,
+    });
+    window.addEventListener("load", AOS.refresh);
+  }, []);
+
   return (
     <>
       <Layout
@@ -64,7 +95,9 @@ export default function Home(): JSX.Element {
       >
         <HomepageHeader />
         <main>
-          <HomepageFeatures />
+          <div data-aos="fade-up" data-aos-delay="600">
+            <HomepageFeatures />
+          </div>
         </main>
       </Layout>
     </>