From 4df2f55656f4998e12a97c34bf61432f5979e7cb Mon Sep 17 00:00:00 2001 From: LofiSu Date: Fri, 9 Aug 2024 08:25:16 +0800 Subject: [PATCH 1/2] Add animation effects to website for enhanced user experience --- package.json | 1 + src/components/FeaturesList.js | 71 +++++++++++++++----------- src/components/WhatIs.js | 74 ++++++++++++++------------- src/pages/index.js | 92 +++++++++++++++++++--------------- 4 files changed, 132 insertions(+), 106 deletions(-) diff --git a/package.json b/package.json index 2149c6256a..536dbe705b 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@docusaurus/theme-search-algolia": "^3.4.0", "@mdx-js/react": "3.0.1", "@svgr/webpack": "^8.1.0", + "aos": "^2.3.4", "clsx": "^2.1.1", "docusaurus-plugin-image-zoom": "^2.0.0", "docusaurus-plugin-sass": "^0.2.5", diff --git a/src/components/FeaturesList.js b/src/components/FeaturesList.js index 863614324b..f1c6172c46 100644 --- a/src/components/FeaturesList.js +++ b/src/components/FeaturesList.js @@ -1,34 +1,45 @@ -import React from 'react'; -import HomePageFeatures from '../data/HomePageFeatures'; +import React from "react"; +import HomePageFeatures from "../data/HomePageFeatures"; const FeatureBlock = () => { - return ( -
-
-
-
- { - HomePageFeatures.map(({imgUrl, title, description, reverse}, index) => ( -
-
-
- {imgUrl && {title}} -
-
-
-
-

{title}

-
{description}
-
-
-
- )) - } + return ( +
+
+
+
+ {HomePageFeatures.map( + ({ imgUrl, title, description, reverse }, index) => ( +
+
+
+ {imgUrl && ( + {title} + )}
-
-
-
- ) -} +
+
+
+

{title}

+
{description}
+
+
+
+ ) + )} +
+ + + + ); +}; -export default FeatureBlock \ No newline at end of file +export default FeatureBlock; diff --git a/src/components/WhatIs.js b/src/components/WhatIs.js index 01d40f2521..10feac748d 100644 --- a/src/components/WhatIs.js +++ b/src/components/WhatIs.js @@ -1,42 +1,46 @@ -import Translate, { translate } from '@docusaurus/Translate'; -import useBaseUrl from '@docusaurus/useBaseUrl'; +import Translate from "@docusaurus/Translate"; +import useBaseUrl from "@docusaurus/useBaseUrl"; import React from "react"; const WhatIs = () => ( -
-
-
-
-

What is OpenYurt?

-

- - - OpenYurt is the intelligent edge computing platform which aims to extend the Cloud Native ecosystem to edge computing and IoT scenarios. By making non-intrusive enhancements, it empowers customer to manage large scale edge computing workloads in different architecture (e.g., ARM and X86) in a native Kubernetes manner. - -
-
- - OpenYurt has been widely used in typical edge computing scenarios such as the IoT, distributed cloud , logistics, transportation, manufacturing, retail, CDN etc. - - {/*
*/} - {/*
*/} - {/**/} - {/* OpenYurt committed to becoming the reference architecture in edge computing infrastructure.*/} - {/**/} - -

-
-
- what is OpenYurt -
-
+
+
+
+
+

+ What is OpenYurt? +

+

+ + + OpenYurt is the intelligent edge computing platform which aims + to extend the Cloud Native ecosystem to edge computing and IoT + scenarios. By making non-intrusive enhancements, it empowers + customer to manage large scale edge computing workloads in + different architecture (e.g., ARM and X86) in a native + Kubernetes manner. + +
+
+ + OpenYurt has been widely used in typical edge computing + scenarios such as the IoT, distributed cloud, logistics, + transportation, manufacturing, retail, CDN etc. + + +

+
+ what is OpenYurt +
+
+
); -export default WhatIs \ No newline at end of file +export default WhatIs; diff --git a/src/pages/index.js b/src/pages/index.js index 2ed5cbe9ca..7f381a93ab 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,49 +1,59 @@ -import React from 'react'; -import Layout from '@theme/Layout'; -import Translate, { translate } from '@docusaurus/Translate'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import FeatureBlock from '../components/FeaturesList'; -import WhatIs from '../components/WhatIs'; -import Button from '../components/Button'; -import GhButton from '../components/GitHubButton' +import React, { useEffect } from "react"; +import Layout from "@theme/Layout"; +import Translate from "@docusaurus/Translate"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import FeatureBlock from "../components/FeaturesList"; +import WhatIs from "../components/WhatIs"; +import Button from "../components/Button"; +import GhButton from "../components/GitHubButton"; +import AOS from "aos"; +import "aos/dist/aos.css"; export default function Home() { - const context = useDocusaurusContext(); - const { siteConfig = {} } = context; + const context = useDocusaurusContext(); + const { siteConfig = {} } = context; - return ( - -
-
- {/*
*/} - {/* OpenYurt Logo*/} - {/*
*/} -

{siteConfig.title}

+ useEffect(() => { + AOS.init({ + duration: 1000, // 动画持续时间 + easing: "ease-in-out", // 动画的缓动函数 + once: true, // 是否只在第一次滚动时触发动画 + }); + }, []); - + return ( + +
+
+

{siteConfig.title}

+ +

{siteConfig.tagline}

+
+ + +
+
+
-

{siteConfig.tagline}

-
- - -
-
-
+ - + - - -
-
-

- OpenYurt is a Cloud Native Computing Foundation sandbox project -

-
-
-
- - ); +
+
+

+ OpenYurt is a{" "} + Cloud Native Computing Foundation{" "} + sandbox project +

+
+
+
+ + ); } From 95b327386e039e8439f1313b44052bc891feb730 Mon Sep 17 00:00:00 2001 From: LofiSu Date: Mon, 12 Aug 2024 18:41:26 +0800 Subject: [PATCH 2/2] fix --- yarn.lock | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index c011d5a204..a35ff96519 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2604,6 +2604,15 @@ anymatch@~3.1.2: normalize-path "^3.0.0" picomatch "^2.0.4" +aos@^2.3.4: + version "2.3.4" + resolved "https://registry.yarnpkg.com/aos/-/aos-2.3.4.tgz#eb1c29f5c1806a197cf6323080747547edd3db8e" + integrity sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw== + dependencies: + classlist-polyfill "^1.0.3" + lodash.debounce "^4.0.6" + lodash.throttle "^4.0.1" + arg@^5.0.0: version "5.0.2" resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c" @@ -3017,6 +3026,11 @@ ci-info@^3.2.0: resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4" integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ== +classlist-polyfill@^1.0.3: + version "1.2.0" + resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e" + integrity sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ== + clean-css@^5.2.2, clean-css@^5.3.2, clean-css@~5.3.2: version "5.3.3" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd" @@ -5243,7 +5257,7 @@ locate-path@^7.1.0: dependencies: p-locate "^6.0.0" -lodash.debounce@^4.0.8: +lodash.debounce@^4.0.6, lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== @@ -5253,6 +5267,11 @@ lodash.memoize@^4.1.2: resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag== +lodash.throttle@^4.0.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ== + lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"