You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2022/06/29 04:19:44 UTC
[apisix-website] branch master updated: fix: landing page render logic (#1168)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 8e7879d168a fix: landing page render logic (#1168)
8e7879d168a is described below
commit 8e7879d168a194799cda9bc35b7905d8e2518681
Author: Young <is...@outlook.com>
AuthorDate: Wed Jun 29 12:19:40 2022 +0800
fix: landing page render logic (#1168)
---
.gitignore | 1 +
website/config/repos-info.json | 1 -
website/src/components/ArrowAnim.tsx | 70 +++-----------
website/src/components/sections/HeroSection.tsx | 95 ++++++++-----------
website/src/css/customTheme.css | 118 ++++++++++++++++++------
5 files changed, 143 insertions(+), 142 deletions(-)
diff --git a/.gitignore b/.gitignore
index cc5f3fb9a65..98285ab01b7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,3 +58,4 @@ website/docs-apisix-python-plugin-runner_versions.json
website/i18n/zh/docusaurus-plugin-content-docs-docs-apisix/**
scripts/temp/**
+website/config/repos-info.json
diff --git a/website/config/repos-info.json b/website/config/repos-info.json
deleted file mode 100644
index 0a74c969edc..00000000000
--- a/website/config/repos-info.json
+++ /dev/null
@@ -1 +0,0 @@
-{"apache/apisix":{},"apache/apisix-dashboard":{},"apache/apisix-ingress-controller":{},"apache/apisix-helm-chart":{},"apache/apisix-docker":{},"apache/apisix-java-plugin-runner":{},"apache/apisix-go-plugin-runner":{},"apache/apisix-python-plugin-runner":{}}
\ No newline at end of file
diff --git a/website/src/components/ArrowAnim.tsx b/website/src/components/ArrowAnim.tsx
index 2b5c4adda2d..4fa392ddfb5 100644
--- a/website/src/components/ArrowAnim.tsx
+++ b/website/src/components/ArrowAnim.tsx
@@ -1,66 +1,26 @@
import type { FC } from 'react';
-import React, { useCallback, useRef } from 'react';
+import React from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
-import gsap from 'gsap';
import '../css/customTheme.css';
import Translate from '@docusaurus/Translate';
-const ArrowAnim: FC = () => {
- const endpathRef1 = useRef(null);
- const endpathRef2 = useRef(null);
-
- const mouseOver = useCallback(
- () => {
- gsap.to([endpathRef2.current], {
- strokeDashoffset: 970,
- duration: 0.4,
- });
- gsap.to([endpathRef1.current], {
- stroke: '#9b9b9b',
- duration: 0.4,
- });
- gsap.to([endpathRef2.current], {
- stroke: '#9b9b9b',
- duration: 0.4,
- });
- },
- [],
- );
-
- const mouseOut = useCallback(
- () => {
- gsap.to([endpathRef2.current], {
- strokeDashoffset: 1002,
- duration: 0.4,
- });
- gsap.to([endpathRef1.current], {
- stroke: 'black',
- duration: 0.4,
- });
- gsap.to([endpathRef2.current], {
- stroke: 'black',
- duration: 0.4,
- });
- },
- [],
- );
-
- return (
- <Link
- to={useBaseUrl('docs')}
- onMouseOver={mouseOver}
- onMouseLeave={mouseOut}
- className="btn-docs"
- >
+const ArrowAnim: FC = () => (
+ <Link
+ to={useBaseUrl('docs')}
+ className="btn-docs"
+ >
+ <div className="goto">
<Translate id="arrowAnim.component.link.btn">Go to docs...</Translate>
- <svg width="15" strokeWidth="3" height="25" viewBox="0 0 43 32" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path ref={endpathRef1} d="M27.5 1L42.5 16L27.5 31" stroke="black" strokeLinecap="round" strokeLinejoin="round" />
- <path ref={endpathRef2} className="arrow-btn" d="M42.5 16H0.5" stroke="black" strokeLinecap="round" strokeLinejoin="round" />
+ </div>
+ <div className="arrow">
+ <svg width="70%" height="50%" viewBox="0 0 256 256">
+ <polygon points="208,128 80,0 52.8,27.2 140.3,128 53,228.9 80,256" />
+ <rect x="-256" y="115" width="256" height="30" />
</svg>
- </Link>
- );
-};
+ </div>
+ </Link>
+);
export default ArrowAnim;
diff --git a/website/src/components/sections/HeroSection.tsx b/website/src/components/sections/HeroSection.tsx
index 9ef8edccba7..0583c256737 100644
--- a/website/src/components/sections/HeroSection.tsx
+++ b/website/src/components/sections/HeroSection.tsx
@@ -1,70 +1,51 @@
import type { FC } from 'react';
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
-import gsap from 'gsap';
import Translate from '@docusaurus/Translate';
import '../../css/customTheme.css';
-import HeroCanvas from '../HeroCanvas';
+import BrowserOnly from '@docusaurus/BrowserOnly';
import ArrowAnim from '../ArrowAnim';
-const HeroSection: FC = () => {
- const titleRef = useRef<HTMLHeadingElement>();
- const subtitleRef = useRef<HTMLHeadingElement>();
- const ctaRef = useRef<HTMLHeadingElement>();
- const canRef = useRef<HTMLHeadingElement>();
+const LazyLoadHeroCanvas = () => (
+ <BrowserOnly>
+ {() => {
+ // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+ const HeroCanvas = require('../HeroCanvas').default;
+ return <HeroCanvas />;
+ }}
+ </BrowserOnly>
+);
- useEffect(() => {
- const tl = gsap.timeline({
- defaults: {
- ease: 'Expo.easeInOut',
- },
- });
-
- tl.fromTo([titleRef.current, subtitleRef.current, ctaRef.current], {
- opacity: 0,
- y: 10,
- }, {
- opacity: 1,
- y: 0,
- stagger: 0.3,
- });
-
- return () => {
- tl.pause(0).kill();
- };
- }, []);
-
- return (
- <div className="hero-sec-wrap" style={{ width: '100%' }}>
- <div className="hero-text">
- <h1 ref={titleRef} className="hero-title hide-title">
- <span><Translate id="hero.component.title.fragment1">Full Lifecycle API Management</Translate></span>
- {' '}
- <br />
- <span style={{ color: '#E8433E', fontSize: 32 }}>
- <Translate id="hero.component.title.fragment2">API Gateway, Ingress Controller, etc.</Translate>
- </span>
- </h1>
- <h2 ref={subtitleRef} className="hero-subtitle hide-subtitle">
- <Translate id="hero.component.subtitle.content">Apache APISIX provides rich traffic management features like Load Balancing, Dynamic Upstream, Canary Release, Circuit Breaking, Authentication, Observability, etc.</Translate>
- </h2>
- <div ref={ctaRef} className="hero-ctas hide-ctas">
- <Link
- to={useBaseUrl('downloads')}
- className="btn btn-download"
- >
- <Translate id="hero.component.download.btn">Downloads</Translate>
- </Link>
- <ArrowAnim />
- </div>
- </div>
- <div ref={canRef} className="add-margin">
- <HeroCanvas />
+const HeroSection: FC = () => (
+ <div className="hero-sec-wrap" style={{ width: '100%' }}>
+ <div className="hero-text">
+ <h1 className="hero-title">
+ <span><Translate id="hero.component.title.fragment1">Full Lifecycle API Management</Translate></span>
+ {' '}
+ <br />
+ <span style={{ color: '#E8433E', fontSize: 32 }}>
+ <Translate id="hero.component.title.fragment2">API Gateway, Ingress Controller, etc.</Translate>
+ </span>
+ </h1>
+ <h2 className="hero-subtitle">
+ <Translate id="hero.component.subtitle.content">Apache APISIX provides rich traffic management features like Load Balancing, Dynamic Upstream, Canary Release, Circuit Breaking, Authentication, Observability, etc.</Translate>
+ </h2>
+ <div className="hero-ctas">
+ <Link
+ to={useBaseUrl('downloads')}
+ className="btn btn-download"
+ >
+ <Translate id="hero.component.download.btn">Downloads</Translate>
+ </Link>
+ <ArrowAnim />
</div>
</div>
- );
-};
+ <div className="add-margin">
+ <LazyLoadHeroCanvas />
+ </div>
+ </div>
+);
export default HeroSection;
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index 6a77773fc84..bd654f96fe7 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -57,7 +57,8 @@ html[data-theme="dark"] {
font-family: MaisonNeue-Medium;
src:
local("MaisonNeue-Medium"),
- url("https://static.apiseven.com/202202/MaisonNeue-Medium.otf") format("opentype");
+ url("https://static.apiseven.com/202202/MaisonNeue-Medium.otf")
+ format("opentype");
font-display: swap;
}
@@ -65,7 +66,8 @@ html[data-theme="dark"] {
font-family: MaisonNeue-Bold;
src:
local("MaisonNeue-Bold"),
- url("https://static.apiseven.com/202202/MaisonNeue-Bold.otf") format("opentype");
+ url("https://static.apiseven.com/202202/MaisonNeue-Bold.otf")
+ format("opentype");
font-display: swap;
}
@@ -73,7 +75,8 @@ html[data-theme="dark"] {
font-family: MaisonNeue-Light;
src:
local("MaisonNeue-Light"),
- url("https://static.apiseven.com/202202/MaisonNeue-Light.otf") format("opentype");
+ url("https://static.apiseven.com/202202/MaisonNeue-Light.otf")
+ format("opentype");
font-display: swap;
}
@@ -81,7 +84,8 @@ html[data-theme="dark"] {
font-family: MaisonNeue-Demi;
src:
local("MaisonNeue-Demi"),
- url("https://static.apiseven.com/202202/MaisonNeue-Demi.otf") format("opentype");
+ url("https://static.apiseven.com/202202/MaisonNeue-Demi.otf")
+ format("opentype");
font-display: swap;
}
@@ -329,10 +333,44 @@ a:hover {
}
/* Hero section */
-.hide-title,
-.hide-subtitle,
-.hide-ctas {
- opacity: 0;
+@keyframes fade-in-up {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 50%, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.hero-title,
+.hero-subtitle,
+.hero-ctas {
+ animation-name: fade-in-up;
+ animation-fill-mode: both;
+ animation-delay: 0s;
+ animation-duration: 1s;
+}
+
+.hero-subtitle {
+ z-index: 100;
+ font-size: 1.1rem;
+ font-family: MaisonNeue-Light, sans-serif;
+ position: relative;
+ color: #615d5d;
+ line-height: 30px;
+ letter-spacing: 0.2px;
+ margin: 25px 0;
+ padding-right: 20px;
+ animation-delay: 0.25s;
+}
+
+.hero-ctas {
+ display: flex;
+ align-items: center;
+ animation-delay: 0.5;
}
.hero-sec-wrap {
@@ -373,23 +411,6 @@ a:hover {
margin: 0;
}
-.hero-subtitle {
- z-index: 100;
- font-size: 1.1rem;
- font-family: MaisonNeue-Light, sans-serif;
- position: relative;
- color: #615d5d;
- line-height: 30px;
- letter-spacing: 0.2px;
- margin: 25px 0;
- padding-right: 20px;
-}
-
-.hero-ctas {
- display: flex;
- align-items: center;
-}
-
.btn {
background: #030c16;
border-style: solid;
@@ -412,11 +433,52 @@ a:hover {
.btn-docs {
display: flex;
+ flex-direction: row;
+ align-items: center;
}
.btn-docs:hover {
text-decoration: none;
- color: #9b9b9b;
+}
+
+.btn-docs .goto {
+ color: #000;
+}
+
+.btn-docs:hover .goto,
+.btn-docs:active .goto {
+ opacity: 0.8;
+}
+
+.btn-docs .arrow {
+ width: 30px;
+ height: 30px;
+ position: relative;
+}
+
+.btn-docs .arrow svg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.btn-docs .arrow polygon,
+.btn-docs .arrow rect {
+ transition: all 250ms;
+}
+
+.btn-docs .arrow rect {
+ opacity: 0;
+}
+
+.btn-docs:hover .arrow polygon {
+ transform: translateX(100px);
+}
+
+.btn-docs:hover .arrow rect {
+ transform: translateX(240px);
+ opacity: 1;
}
/* Architecture section */
@@ -854,9 +916,7 @@ a:hover {
.table {
background: #fff;
border-radius: 8px;
- box-shadow:
- 0 0 0 1px rgb(255 255 255 / 10%),
- 0 2px 4px 0 rgb(14 30 37 / 12%);
+ box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 2px 4px 0 rgb(14 30 37 / 12%);
color: rgb(14 30 37 / 87%);
font-size: 1.13rem;
margin: 1em auto;