-
- A
-
-
- {featureWords[featureWordIndex]}
-
-
- Cloud-Native API
- Gateway
-
-
- Provides rich traffic management features such as load balancing,
- dynamic upstream, canary release, circuit breaking,
- authentication, observability, and more. Based on the Nginx
- library and etcd.
-
+
+ A wide variety of Companies and Organizations use APISIX for Research, Production and Commercial products
+
+ Add your company
+
+
+
+
+
+
+ {showcases.slice(0, middleIndex)}
+ {showcases.slice(0, middleIndex)}
+
+
-
-
-
- View on GitHub
-
-
- Downloads
-
+
+
+
+ {showcases.slice(middleIndex, showcases.length)}
+ {showcases.slice(middleIndex, showcases.length)}
+
+
@@ -79,140 +83,22 @@ const HomeSplash = () => {
);
};
-const LearnHow = () => (
-
-
-
-
-
-
- Description
-
-
-
- Cloud-native microservices API gateway, delivering the ultimate
- performance, security, open source and scalable platform for all
- your APIs and microservices. Apache APISIX is based on Nginx and
- etcd. Compared with traditional API gateways, APISIX has dynamic
- routing and plug-in hot loading, which is especially suitable
- for API management under micro-service system.
-
-
-
-
-
-
-
-
-
-
-);
-
-const EventsSection = () => {
- const { siteConfig } = useDocusaurusContext();
- const events = (siteConfig.customFields.events || [])
- .slice(0, 4)
- .map((event) => {
- const publishTime = event.fileName.slice(0, 10);
- const splittedFileName = event.fileName.split("-");
- const url = `/blog/${splittedFileName
- .slice(0, 3)
- .join("/")}/${splittedFileName.slice(3).join("-")}`;
- return (
-
-
-
{event.title}
-
{publishTime}
-
- Read
-
- );
- });
- return (
-
-
-
-
Events
-
-
-
{events}
-
-
- );
-};
-
-const ContributionSection = () => {
-
- return (
-
-
-
Make your first contribution to Apache APISIX®
-
-
-
Find a good first issue to get you started !
-
-
-
-
- );
-};
-
-const NewsletterSection = () => {
+const Index = (props) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
Stay up to date about all Apache APISIX® News
-
-
-
- );
-};
+ const [screenWidth, screenHeight] = useWindowSize();
-const Index = (props) => {
return (
-
+
+
+
);
};
diff --git a/website/src/pages/sections/architecture.jsx b/website/src/pages/sections/architecture.jsx
new file mode 100644
index 0000000000000..abcc2f9e24dee
--- /dev/null
+++ b/website/src/pages/sections/architecture.jsx
@@ -0,0 +1,87 @@
+import React, { useEffect } from "react";
+import gsap from "gsap";
+
+import "../../css/customTheme.css";
+import HLDesign from "../../assets/images/infographs/Architecture.svg";
+import Pattern from "../../assets/images/PatternGrouped.svg";
+
+const Architecture = (props) => {
+ const screenWidth = props.screenWidth;
+
+ useEffect(() => {
+ let strokePaths = []
+ for (let i=1; i<28; i++) {
+ strokePaths.push(".PatternGrouped_svg__p"+i);
+ }
+
+ let tlStroke = gsap.timeline({
+ paused: true,
+ defaults: {
+ ease: "power2.inOut",
+ yoyo: true,
+ repeat: -1,
+ },
+ });
+
+ tlStroke.fromTo(strokePaths, {
+ strokeDashoffset: 10000
+ }, {
+ strokeDashoffset: 0,
+ duration: 5,
+ stagger: 0.3,
+ ease: "power2.inOut",
+ stroke: "red",
+ });
+
+ let observer = new IntersectionObserver(onIntersection, {
+ root: null,
+ threshold: 0.4,
+ })
+
+ function onIntersection(entries, opts){
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ tlStroke.paused(false);
+ } else {
+ tlStroke.paused(true);
+ }
+ }
+ );
+ }
+
+ observer.observe( document.querySelector('.arch'));
+
+ return () => {
+ tlStroke.pause(0).kill(true);
+ observer.disconnect();
+ }
+ }, []);
+
+ return (
+ <>
+
+
+
+
Building for large-scale, high value systems
+
+
+
Apache APISIX lets you build Cloud-Native Microservices API gateways, delivering the ultimate performance, security, open source and scalable platform for all your APIs and microservices.
+
+
+
+
+
+
=768 ? "50%" : "90%"}}>Apache APISIX is based on Nginx and etcd. Compared with traditional API gateways, APISIX has dynamic routing and hot-loading plugins
+
+
+
+
+
+
+ );
+}
+
+export default Architecture;
diff --git a/website/src/pages/sections/benefits.jsx b/website/src/pages/sections/benefits.jsx
new file mode 100644
index 0000000000000..ad429e4bfd869
--- /dev/null
+++ b/website/src/pages/sections/benefits.jsx
@@ -0,0 +1,386 @@
+import React, { useRef, useEffect, useState } from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import gsap from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+import "../../css/customTheme.css";
+
+import Performance from "../../assets/images/infographs/performance.svg";
+import Security from "../../assets/images/infographs/security.svg";
+import Scale from "../../assets/images/infographs/scale.svg";
+import Dynamic from "../../assets/images/infographs/dynamic.svg";
+import Multiplatform from "../../assets/images/infographs/multiplatform.svg";
+
+const Benefits = (props) => {
+ const triggerDiv = useRef(null);
+ const performance = useRef(null);
+ const security = useRef(null);
+ const scale = useRef(null);
+ const dynamic = useRef(null);
+ const multiplatform = useRef(null);
+
+ gsap.registerPlugin(ScrollTrigger);
+
+ const screenWidth = props.screenWidth;
+
+ useEffect(() => {
+ let tweenTls = [];
+ let observers = [];
+
+ for (let i=0; i<5; i++) {
+ tweenTls.push(gsap.timeline({
+ paused: true,
+ yoyo: true,
+ yoyoEase: "power3.out",
+ repeat: -1,
+ defaults: {
+ yoyo: true,
+ ease: "power3.inOut",
+ yoyoEase: "power3.out"
+ },
+ }));
+ }
+
+ let circles = [];
+ let links = [];
+ const colors = ["#FE7F80", "white", "red"];
+ const pathColors = ["#FE7F80", "black"];
+
+ for (let i=1; i<28; i++) {
+ circles.push(".scale_svg__cir"+i);
+ links.push(".scale_svg__n"+i);
+ }
+
+ // Performance anim
+ tweenTls[0].fromTo(".performance_svg__network",{
+ strokeDashoffset: 1000,
+ stroke: "black"
+ },{
+ strokeDashoffset: 0,
+ duration: 1,
+ strokeWidth: 5,
+ stroke: "orange",
+ ease: "power2.in",
+ yoyoEase: "power2.out",
+ repeat: -1,
+ })
+ .fromTo(".performance_svg__lightning",{
+ fill: "orange",
+ }, {
+ fill: "red",
+ duration: 1,
+ repeat: -1,
+ },"-=1");
+
+ // Security anim
+ tweenTls[1].fromTo([".security_svg__malWarn-square", ".security_svg__malConn"],{
+ fill: "#FA5252",
+ },{
+ fill: "yellow",
+ duration: 0.5,
+ repeat: -1,
+ repeatDelay: 0.1,
+ })
+ for (let i = 1; i < 4; i++) {
+ tweenTls[1].fromTo(".security_svg__conn"+i, {
+ strokeWidth: 4,
+ strokeDasharray: 25,
+ strokeDashoffset: 200,
+ }, {
+ strokeDashoffset: 0,
+ duration: 2.5,
+ repeat: -1,
+ ease: "linear",
+ yoyoEase: "linear",
+ })
+ }
+
+ // Scaling anim
+ for (let i = 0; i < 27; i++) {
+ tweenTls[2].fromTo(circles[i],{
+ fill: gsap.utils.random(colors),
+ },{
+ fill: gsap.utils.random(colors),
+ duration: 0.3,
+ repeat: -1,
+ repeatDelay: 0.1,
+ })
+ tweenTls[2].fromTo(links[i],{
+ stroke: gsap.utils.random(pathColors),
+ },{
+ stroke: gsap.utils.random(pathColors),
+ duration: 0.3,
+ repeat: -1,
+ repeatDelay: 0.1,
+ })
+ }
+
+ // Dynamic anim
+ tweenTls[3].repeatDelay(1.5);
+ tweenTls[3].fromTo([".dynamic_svg__rcard"],{
+ x: -400,
+ opacity: 0,
+ },{
+ opacity: 1,
+ x: 0,
+ ease: "sin.inOut",
+ duration: 1.5,
+ })
+ .fromTo(".dynamic_svg__arrow", {
+ opacity: 0,
+ }, {
+ opacity: 1,
+ ease: "power3.out",
+ duration: 0.5,
+ })
+ .fromTo(".dynamic_svg__lightning", {
+ opacity: 0,
+ y: 10,
+ }, {
+ opacity: 1,
+ y: 0,
+ duration: 1,
+ ease: "power2.inOut",
+ });
+
+ // Multiplatform anim
+ for(let i = 1; i < 4; i++) {
+ tweenTls[4].fromTo(".multiplatform_svg__server-port"+i,{
+ fill: "#60E0F2",
+ },{
+ fill: "#ffdc21",
+ duration: 0.5,
+ });
+ }
+
+ let standloneObserver = new IntersectionObserver(onIntersection, {
+ root: null,
+ threshold: 0.4,
+ })
+
+ let rot = 0;
+ const tweenArrow = gsap.fromTo(".multiplatform_svg__arrows",
+ {
+ rotation: rot,
+ },{
+ rotation: -360+rot,
+ transformOrigin:"50% 50%",
+ ease: "power3.inOut",
+ duration: 3,
+ repeat: -1,
+ paused: true,
+ onComplete: () => {
+ rot -= 360;
+ }
+ });
+ const tweenFloat = gsap.fromTo(".multiplatform_svg__lightning",{
+ y: -2.5,
+ },{
+ y: 5,
+ duration: 1,
+ ease: "linear",
+ repeat: -1,
+ yoyo: true,
+ paused: true,
+ yoyoEase: "linear",
+ });
+
+ function onIntersection(entries, opts){
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ tweenArrow.paused(false);
+ tweenFloat.paused(false);
+ } else {
+ tweenArrow.paused(true);
+ tweenFloat.paused(true);
+ }
+ });
+ }
+
+ standloneObserver.observe(multiplatform.current);
+
+ const elems = [performance.current, security.current, scale.current, dynamic.current, multiplatform.current];
+ for (let i=0; i<5; i++) {
+ observers.push(new IntersectionObserver((entries, opts)=>{
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ tweenTls[i].paused(false);
+ } else {
+ tweenTls[i].paused(true);
+ }
+ }
+ );
+ }, {
+ root: null,
+ threshold: .2
+ }));
+ }
+
+ observers.forEach((it, index)=>{
+ it.observe(elems[index]);
+ });
+
+ return () => {
+ observers.forEach((it, index)=>{
+ it.disconnect();
+ });
+ tweenTls.forEach((it, index)=>{
+ it.pause(0).kill(true);
+ });
+ }
+ }, [])
+
+ useEffect(() => {
+ ScrollTrigger.saveStyles([
+ performance.current,
+ security.current,
+ scale.current,
+ dynamic.current,
+ multiplatform.current,
+ ]);
+
+ ScrollTrigger.matchMedia({
+ "(max-width: 1100px)": () => {
+ const tl = gsap.timeline({
+ defaults: {
+ ease: "linear"
+ },
+ scrollTrigger: {
+ id: 'benefits-scrolltrigger',
+ trigger: triggerDiv.current,
+ start: "top top",
+ pin: triggerDiv.current,
+ scrub: 1,
+ end: "+=500%"
+ }
+ });
+ tl.fromTo(performance.current,{
+ opacity: 1,
+ },{
+ opacity: 0,
+ })
+ .fromTo(security.current,{
+ opacity: 0,
+ },{
+ opacity: 1,
+ })
+ .to(security.current,{
+ opacity: 0,
+ })
+ .fromTo(scale.current,{
+ opacity: 0,
+ }, {
+ opacity: 1
+ })
+ .to(scale.current,{
+ opacity: 0,
+ })
+ .fromTo(dynamic.current,{
+ opacity: 0,
+ }, {
+ opacity: 1
+ })
+ .to(dynamic.current,{
+ opacity: 0,
+ })
+ .fromTo(multiplatform.current,{
+ opacity: 0,
+ }, {
+ opacity: 1,
+ });
+ },
+ "(min-width: 1101px)": () => {
+ const tl = gsap.timeline();
+ tl.to(performance.current,{
+ opacity: 1,
+ })
+ .to(security.current,{
+ opacity: 1,
+ })
+ .to(scale.current,{
+ opacity: 1,
+ })
+ .to(dynamic.current,{
+ opacity: 1,
+ })
+ .to(multiplatform.current,{
+ opacity: 1,
+ });
+ }
+ });
+ },[]);
+
+ return (
+ <>
+
+
+
768 ? "50%" : "100%"}}>
+
Performance
+
Ultimate performance
+
+ Apache APISIX uses radixtree-route-matching and etcd under the hood to provide you the ability to create high speed synchronized systems. From routing to built-in plugins, all these are designed and implemented to be uber performant with the minimum latency possible.
+
+
+
+
=768 ? "35%" : "40%"}}/>
+
+
+
+
+
+ =768 ? "75%" : "100%", position: "relative", left: screenWidth >=768 ? "3%" : "0"}}/>
+
+
768 ? "50%" : "100%"}}>
+
Security
+
Shield against the malicious
+
+ Apache APISIX provides multiple security plugins for identity authentication and interface verification, putting stability and security first. For more information, check
+
+
+
+
+
768 ? "50%" : "100%"}}>
+
Scalability and availability
+
Scales with your users
+
+ Apache APISIX provides the ability to write your own custom plugins, use custom Load Balancing Algorithms during the balancer phase for scaling and custom Routing algorithms for fine control on routing.
+
+
+
+ =768 ? "50%": "60%"}}/>
+
+
+
+
+
+ =768 ? "50%" : "70%"}}/>
+
+
768 ? "50%" : "100%"}}>
+
Fully dynamic
+
Save dev-time, design what matters
+
+ Apache APISIX provides Hot updates and Hot plugins, which continuosly update configurations without restarts, saving development time and stress. Health checks, circuit breakers and many more features keep the system balanced at all times.
+
+
+
+
+
+
768 ? "50%" : "100%"}}>
+
Multi-platform and protocol
+
Create once, run anywhere
+
+ Platform agnostic, no vendor lock-in, Apache APISIX can run from bare-metal to kubernetes. It supports HTTP to gRPC transcoding, websockets, gRPC, Dubbo, MQTT proxy and multiple platforms including ARM64, don’t worry about the lock-in of the infra technology.
+
+
+
+ =768 ? "50%" : "80%"}}/>
+
+
+
+
+ );
+}
+
+export default Benefits;
diff --git a/website/src/pages/sections/comparison.jsx b/website/src/pages/sections/comparison.jsx
new file mode 100644
index 0000000000000..11ef8e1945a95
--- /dev/null
+++ b/website/src/pages/sections/comparison.jsx
@@ -0,0 +1,79 @@
+import React from "react";
+
+import "../../css/customTheme.css";
+import Cross from "../../assets/icons/cross.svg";
+import Tick from "../../assets/icons/tick.svg";
+
+const Comparison = () => {
+ return (
+ <>
+
+
+
Among the best, and always improving
+
+
+
Apache APISIX is opensource and ever evolving. Here’s a general comparison of APISIX with other options in this API Gateway ecosystem.
+
+
+
+
+
+ Feature
+
+ APISIX
+
+
+ Other API Gateways
+
+
+
+
+
+ Single-core CPU, QPS (enable limit-count and prometheus plugins)
+ 18000
+ ~1700
+
+
+ Latency
+ 0.2 ms
+ 2 ms
+
+
+ Dubbo, MQTT, Tengine and REST API to gRPC transcoding
+
+
+ Configuration rollback
+
+
+ Custom Load Balancing and routing
+
+
+ Plug-in hot loading
+
+
+ Dashboard
+
+
+ Support any Nginx variable as routing condition
+
+
+
+
+
+
+ );
+}
+
+export default Comparison;
diff --git a/website/src/pages/sections/components/arrowAnim.jsx b/website/src/pages/sections/components/arrowAnim.jsx
index a008e77495b3c..df7a7bc1bbb09 100644
--- a/website/src/pages/sections/components/arrowAnim.jsx
+++ b/website/src/pages/sections/components/arrowAnim.jsx
@@ -2,54 +2,55 @@ import React, { useRef } from "react";
import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";
import gsap from "gsap"
+
import "../../../css/customTheme.css";
-function ArrowAnim() {
- const endpathRef1 = useRef(null);
- const endpathRef2 = useRef(null);
+const ArrowAnim = () => {
+ const endpathRef1 = useRef(null);
+ const endpathRef2 = useRef(null);
- function mouseOver() {
- 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
- });
- }
-
- function mouseOut() {
- 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
- });
- }
+ function mouseOver() {
+ 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
+ });
+ }
- return (
- <>
-
- Go to docs...
-
-
-
-
- );
+ function mouseOut() {
+ 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 (
+ <>
+
+ Go to docs...
+
+
+
+
+ );
+}
- export default ArrowAnim;
+export default ArrowAnim;
diff --git a/website/src/pages/sections/components/eventPosterCard.jsx b/website/src/pages/sections/components/eventPosterCard.jsx
index a34a422694107..f98f63af69d80 100644
--- a/website/src/pages/sections/components/eventPosterCard.jsx
+++ b/website/src/pages/sections/components/eventPosterCard.jsx
@@ -1,57 +1,58 @@
import React, { useState, useRef, useEffect } from "react";
import gsap from "gsap"
+
import "../../../css/customTheme.css";
const EventPosterCard = () => {
- const [display, setDisplay] = useState(true);
- const picRef = useRef(null);
+ const [display, setDisplay] = useState(true);
+ const picRef = useRef(null);
- useEffect(() => {
- gsap.fromTo(picRef.current, {
- x: 500,
- opacity: 0
- }, {
- x: 0,
- opacity: 1,
- delay: 3.0,
- });
- }, []);
+ useEffect(() => {
+ gsap.fromTo(picRef.current, {
+ x: 500,
+ opacity: 0
+ }, {
+ x: 0,
+ opacity: 1,
+ delay: 3.0,
+ });
+ }, []);
- useEffect(() => {
- if (!localStorage.getItem('SHOW_EVENT_ENTRY')) {
- setDisplay(true);
- };
- }, []);
-
- const onClose = () => {
- gsap.to(picRef.current, {
- x: 500,
- opacity: 0,
- onComplete: ()=>{
- setDisplay(false);
- }
- });
- if (typeof window !== 'undefined') {
- localStorage.setItem('SHOW_EVENT_ENTRY', 'true');
- }
+ useEffect(() => {
+ if (!localStorage.getItem('SHOW_EVENT_ENTRY')) {
+ setDisplay(true);
};
+ }, []);
- if (!display) {
- return null;
+ const onClose = () => {
+ gsap.to(picRef.current, {
+ x: 500,
+ opacity: 0,
+ onComplete: ()=>{
+ setDisplay(false);
+ }
+ });
+ if (typeof window !== 'undefined') {
+ localStorage.setItem('SHOW_EVENT_ENTRY', 'true');
}
+ };
- return (
-
-
-
-
-
-
-
-
- )
+ if (!display) {
+ return null;
}
- export default EventPosterCard;
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export default EventPosterCard;
diff --git a/website/src/pages/sections/components/heroCanvas.jsx b/website/src/pages/sections/components/heroCanvas.jsx
index 15e1fc69bbea0..6c47ae2bac154 100644
--- a/website/src/pages/sections/components/heroCanvas.jsx
+++ b/website/src/pages/sections/components/heroCanvas.jsx
@@ -1,227 +1,236 @@
import React, { useRef, useEffect } from "react";
import * as THREE from "three";
import gsap from "gsap"
+
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
+
import "../../../css/customTheme.css";
import vertex from '!!raw-loader!../../../shaders/vertex.vert';
import fragment from '!!raw-loader!../../../shaders/fragment.frag';
-function HeroCanvas() {
- const canvasRef = useRef(0);
- const overlayRef = useRef(0);
+const HeroCanvas = () => {
+ const canvasRef = useRef(0);
+ const overlayRef = useRef(0);
- let canvasHeight, canvasWidth, screenWidth, screenHeight, controls;
- let isLoaded = false, isRendering = false, animationFrame;
+ let canvasHeight, canvasWidth, screenWidth, screenHeight, controls;
+ let isLoaded = false, isRendering = false, animationFrame;
- useEffect(() => {
-
- screenWidth = window.innerWidth;
- screenHeight = window.innerHeight;
+ useEffect(() => {
+ screenWidth = window.innerWidth;
+ screenHeight = window.innerHeight;
- let mouse = {x: 0.5, y: 0.5};
- let fragMouse = {x: 0.5, y: 0.5};
+ let mouse = {x: 0.5, y: 0.5};
+ let fragMouse = {x: 0.5, y: 0.5};
- let camera, mesh, scene, renderer, material, geometry;
+ let camera, mesh, scene, renderer, material, geometry;
- window.addEventListener('resize', onWindowResize, false);
-
- if (screenWidth > 800) {
- canvasHeight = screenHeight;
- canvasWidth = screenWidth / 2;
- } else {
- canvasHeight = screenHeight / 2;
- canvasWidth = screenWidth;
- }
-
- canvasRef.current.width = canvasWidth;
- canvasRef.current.height = canvasHeight;
-
- canvasRef.current.addEventListener("mousemove", function (event) {
-
- let ctx = {
- x: (event.clientX),
- y: (event.clientY)
- };
-
- const canvasOffset = {
- left: canvasRef.current.getBoundingClientRect().x,
- top: canvasRef.current.getBoundingClientRect().y
- };
-
- ctx.x = ((ctx.x - canvasOffset.left) / canvasWidth);
- ctx.y = ((ctx.y - canvasOffset.top) / canvasHeight);
-
- gsap.to(mouse, 2, {
- x: ctx.x * (canvasWidth / canvasHeight) - (canvasWidth / canvasHeight) / 2,
- y: (1.0 - ctx.y) - 0.5,
- onUpdate: ()=>{
- material.uniforms.u_mouse.value.x = mouse.x;
- material.uniforms.u_mouse.value.y = mouse.y;
- }
- });
-
- gsap.to(fragMouse, 2, {
- x: ctx.x,
- y: (1.0 - ctx.y),
- onUpdate: ()=>{
- material.uniforms.u_fragMouse.value.x = fragMouse.x;
- material.uniforms.u_fragMouse.value.y = fragMouse.y;
- }
- });
- });
+ window.addEventListener('resize', onWindowResize, false);
- function getRandom(a, b) {
- return a + (b - a) * Math.random();
+ if (screenWidth > 1100) {
+ canvasHeight = screenHeight;
+ canvasWidth = screenWidth / 2;
+ } else {
+ canvasHeight = screenHeight / 2;
+ canvasWidth = screenWidth;
+ }
+
+ canvasRef.current.width = canvasWidth;
+ canvasRef.current.height = canvasHeight;
+
+ canvasRef.current.addEventListener("mousemove", function (event) {
+
+ let ctx = {
+ x: (event.clientX),
+ y: (event.clientY)
+ };
+
+ const canvasOffset = {
+ left: canvasRef.current.getBoundingClientRect().x,
+ top: canvasRef.current.getBoundingClientRect().y
+ };
+
+ ctx.x = ((ctx.x - canvasOffset.left) / canvasWidth);
+ ctx.y = ((ctx.y - canvasOffset.top) / canvasHeight);
+
+ gsap.to(mouse, 2, {
+ x: ctx.x * (canvasWidth / canvasHeight) - (canvasWidth / canvasHeight) / 2,
+ y: (1.0 - ctx.y) - 0.5,
+ onUpdate: ()=>{
+ material.uniforms.u_mouse.value.x = mouse.x;
+ material.uniforms.u_mouse.value.y = mouse.y;
}
+ });
- let canvasObserver = new IntersectionObserver(onCanvasIntersection, {
- root: null,
- threshold: 0.01,
- });
+ gsap.to(fragMouse, 2, {
+ x: ctx.x,
+ y: (1.0 - ctx.y),
+ onUpdate: ()=>{
+ material.uniforms.u_fragMouse.value.x = fragMouse.x;
+ material.uniforms.u_fragMouse.value.y = fragMouse.y;
+ }
+ });
+ });
+
+ function getRandom(a, b) {
+ return a + (b - a) * Math.random();
+ }
+
+ let canvasObserver = new IntersectionObserver(onCanvasIntersection, {
+ root: null,
+ threshold: 0.01,
+ });
- init(canvasWidth, canvasHeight);
+ init(canvasWidth, canvasHeight);
- function onCanvasIntersection(entries, opts){
- entries.forEach( entry => {
- if (entry.isIntersecting && isLoaded) {
- if (isLoaded && !isRendering) {
- animate();
- } else {
- console.log("Loading")
- }
- } else {
- if (animationFrame) {
- cancelAnimationFrame(animationFrame);
- isRendering = false;
- }
- }
+ function onCanvasIntersection(entries, opts){
+ entries.forEach( entry => {
+ if (entry.isIntersecting && isLoaded) {
+ if (isLoaded && !isRendering) {
+ animate();
+ } else {
+ console.log("Loading")
}
- );
- }
+ } else {
+ if (animationFrame) {
+ cancelAnimationFrame(animationFrame);
+ isRendering = false;
+ }
+ }
+ }
+ );
+ }
- canvasObserver.observe(canvasRef.current);
+ canvasObserver.observe(canvasRef.current);
- function init(width, height) {
- const ctx = canvasRef.current;
-
- renderer = new THREE.WebGLRenderer({canvas: ctx});
- renderer.autoClearColor = false;
+ function init(width, height) {
+ const ctx = canvasRef.current;
+
+ renderer = new THREE.WebGLRenderer({canvas: ctx});
+ renderer.autoClearColor = false;
- camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
- controls = new OrbitControls( camera, renderer.domElement );
-
- controls.enableZoom = false;
- controls.enablePan = false;
- controls.enabled = false;
+ camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
+ controls = new OrbitControls( camera, renderer.domElement );
+
+ controls.enableZoom = false;
+ controls.enablePan = false;
+ controls.enabled = false;
- geometry = new THREE.PlaneBufferGeometry(width / height, 1, 200, 200);
+ geometry = new THREE.PlaneBufferGeometry(width / height, 1, 250, 250);
- let count = geometry.attributes.position.count;
- let arrSize = new THREE.BufferAttribute(new Float32Array(count), 1);
+ let count = geometry.attributes.position.count;
+ let arrSize = new THREE.BufferAttribute(new Float32Array(count), 1);
- for (let i = 0; i < arrSize.count; i++) {
- arrSize.array[i] = getRandom(0, 1)
- }
- geometry.setAttribute("aSize", arrSize, 1);
+ for (let i = 0; i < arrSize.count; i++) {
+ arrSize.array[i] = getRandom(0, 1)
+ }
+ geometry.setAttribute("aSize", arrSize, 1);
- geometry.scale(2.0, 1.0, 1.0);
+ geometry.scale(2.0, 1.0, 1.0);
- scene = new THREE.Scene();
- renderer.setSize(canvasWidth, canvasHeight);
-
- let uniforms = {
- u_time: {
- type: "f",
- value: 1.0
- },
- u_resolution: {
- type: "v2",
- value: new THREE.Vector2()
- },
- u_mouse: {
- type: "v2",
- value: new THREE.Vector2(0.5, 0.5)
- },
- u_fragMouse: {
- type: "v2",
- value: new THREE.Vector2(0.5, 0.5)
- },
- };
+ scene = new THREE.Scene();
+ renderer.setSize(canvasWidth, canvasHeight);
- scene.background = new THREE.Color('red');
+ let uniforms = {
+ u_time: {
+ type: "f",
+ value: 1.0
+ },
+ u_resolution: {
+ type: "v2",
+ value: new THREE.Vector2()
+ },
+ u_mouse: {
+ type: "v2",
+ value: new THREE.Vector2(0.5, 0.5)
+ },
+ u_fragMouse: {
+ type: "v2",
+ value: new THREE.Vector2(0.5, 0.5)
+ },
+ };
- camera.position.z = 5;
- controls.update();
-
- material = new THREE.ShaderMaterial({
- uniforms: uniforms,
- vertexShader: vertex,
- fragmentShader: fragment,
- wireframe: true,
- side: THREE.DoubleSide
- });
-
- mesh = new THREE.Points(geometry, material);
-
- let backGeometry = new THREE.PlaneBufferGeometry(width / height, 1, 200, 200);
- let bgMaterial = new THREE.MeshBasicMaterial({color: 0x121212, wireframe: false});
- let background = new THREE.Mesh(backGeometry, bgMaterial);
-
- backGeometry.scale(50,50,1);
- background.position.set(10,10,-10);
- background.rotation.set(Math.PI/2,0,0);
-
- scene.add(mesh);
- scene.add(background);
-
- camera.position.set( 0.16430412417444037, -1.5202138879420155, 0.20892968987792318); // Tested and checked
- controls.update();
-
- renderer.setPixelRatio(window.devicePixelRatio);
- onWindowResize();
-
- isLoaded = true;
- }
+ scene.background = new THREE.Color('red');
- function onWindowResize(event) {
- screenHeight = window.innerHeight;
- screenWidth = window.innerWidth;
+ camera.position.z = 5;
+ controls.update();
+
+ material = new THREE.ShaderMaterial({
+ uniforms: uniforms,
+ vertexShader: vertex,
+ fragmentShader: fragment,
+ wireframe: true,
+ side: THREE.DoubleSide
+ });
+
+ mesh = new THREE.Points(geometry, material);
+
+ let backGeometry = new THREE.PlaneBufferGeometry(width / height, 1, 200, 200);
+ let bgMaterial = new THREE.MeshBasicMaterial({color: 0x121212, wireframe: false});
+ let background = new THREE.Mesh(backGeometry, bgMaterial);
+
+ backGeometry.scale(50,50,1);
+ background.position.set(10,10,-10);
+ background.rotation.set(Math.PI/2,0,0);
- renderer.setSize(canvasWidth, canvasHeight);
- material.uniforms.u_resolution.value.x = renderer.domElement.width;
- material.uniforms.u_resolution.value.y = renderer.domElement.height;
- }
+ scene.add(mesh);
+ scene.add(background);
+
+ camera.position.set( 0.16430412417444037, -1.5202138879420155, 0.20892968987792318); // Tested and checked
+ controls.update();
+
+ renderer.setPixelRatio(window.devicePixelRatio);
+ onWindowResize();
+
+ isLoaded = true;
+ }
- function animate() {
- animationFrame = requestAnimationFrame(animate);
- material.uniforms.u_time.value += 0.05;
- controls.update();
- renderer.render(scene, camera);
- isRendering = true;
- }
+ function onWindowResize(event) {
+ screenHeight = window.innerHeight;
+ screenWidth = window.innerWidth;
- return ()=>{
- renderer.dispose();
- canvasObserver.disconnect();
+ if (screenWidth > 1100) {
+ canvasHeight = screenHeight;
+ canvasWidth = screenWidth / 2;
+ } else {
+ canvasHeight = screenHeight / 2;
+ canvasWidth = screenWidth;
}
- }, []);
-
-
- useEffect(() => {
- gsap.to(overlayRef.current,{
- height: 0,
- delay: window.innerWidth >= 768 ? 0 : 0.3,
- duration: 2.1,
- ease: "Expo.easeInOut"
- });
- }, [])
+
+ renderer.setSize(canvasWidth, canvasHeight);
+ material.uniforms.u_resolution.value.x = renderer.domElement.width;
+ material.uniforms.u_resolution.value.y = renderer.domElement.height;
+ }
+
+ function animate() {
+ animationFrame = requestAnimationFrame(animate);
+ material.uniforms.u_time.value += 0.05;
+ controls.update();
+ renderer.render(scene, camera);
+ isRendering = true;
+ }
+
+ return ()=>{
+ scene.remove.apply(scene, scene.children);
+ canvasObserver.disconnect();
+ }
+ }, []);
- return (
-
- );
+
+ useEffect(() => {
+ gsap.to(overlayRef.current,{
+ height: 0,
+ delay: window.innerWidth >= 768 ? 0 : 0.3,
+ duration: 2.1,
+ ease: "Expo.easeInOut"
+ });
+ }, [])
+
+ return (
+
+ );
}
export default HeroCanvas;
diff --git a/website/src/pages/sections/components/ossCanvas.jsx b/website/src/pages/sections/components/ossCanvas.jsx
index 8d2aca6a6792b..237594460c7a0 100644
--- a/website/src/pages/sections/components/ossCanvas.jsx
+++ b/website/src/pages/sections/components/ossCanvas.jsx
@@ -1,129 +1,138 @@
import React, { useRef, useEffect, useState } from "react";
import * as THREE from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
+
import "../../../css/customTheme.css";
-function OssCanvas() {
- const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined' && window.innerWidth);
- const [screenHeight, setScreenHeight] = useState(typeof window !== 'undefined' && window.innerWidth);
+const OssCanvas = () => {
+ let screenWidth, screenHeight;
- const canvasRef = useRef(null);
+ const canvasRef = useRef(null);
- let canvasHeight, canvasWidth;
+ let canvasHeight, canvasWidth;
+
+ useEffect(() => {
+ let camera, scene, renderer, material, mesh;
- useEffect(() => {
-
- let camera, scene, renderer, material, mesh;
-
- window.addEventListener('resize', onWindowResize, false);
-
- let controls;
- let isLoaded = false, isRendering = false, animationFrame;
-
- if (screenWidth > 800) {
- canvasHeight = 500;
- canvasWidth = screenWidth/2;
- } else {
- canvasHeight = 500
- canvasWidth = screenWidth;
- }
+ screenWidth = window.innerWidth;
+ screenHeight = window.innerHeight;
+ window.addEventListener('resize', onWindowResize, false);
+
+ let controls;
+ let isLoaded = false, isRendering = false, animationFrame;
+
+ if (screenWidth > 1100) {
+ canvasHeight = 500;
+ canvasWidth = screenWidth/2;
+ } else {
+ canvasHeight = 500
+ canvasWidth = screenWidth;
+ }
+
+ function onWindowResize(event) {
+ screenHeight = window.innerHeight;
+ screenWidth = window.innerWidth;
+
+ if (screenWidth > 1100) {
+ canvasHeight = 500;
+ canvasWidth = screenWidth/2;
+ } else {
+ canvasHeight = 500
+ canvasWidth = screenWidth;
+ }
+
+ renderer.setSize(canvasWidth, canvasHeight);
+ }
+
+ let ossCanvasObserver = new IntersectionObserver(onOssCanvasIntersection, {
+ root: null,
+ threshold: 0.01,
+ });
- function onWindowResize(event) {
- setScreenHeight(window.innerHeight);
- setScreenWidth(window.innerWidth);
- renderer.setSize(canvasWidth, canvasHeight);
- }
+ function init(width, height) {
+ const ctx = canvasRef.current;
+ renderer = new THREE.WebGLRenderer({canvas: ctx});
+
+ camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
- let ossCanvasObserver = new IntersectionObserver(onOssCanvasIntersection, {
- root: null,
- threshold: 0.01,
- });
-
- function init(width, height) {
-
- const ctx = canvasRef.current;
- renderer = new THREE.WebGLRenderer({canvas: ctx});
-
- camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
-
- controls = new OrbitControls( camera, renderer.domElement );
- controls.enableZoom = false;
-
- const radius = window.innerWidth > 768 ? 5 : 4.5;
- const detail = 8;
-
- const geometry = new THREE.IcosahedronGeometry(radius, detail);
-
- camera.position.z = 2;
- camera.position.x = 3;
-
- controls.update();
-
- scene = new THREE.Scene();
- renderer.setSize(canvasWidth, canvasHeight);
-
- scene.background = new THREE.Color(0x000000);
-
- material = new THREE.MeshNormalMaterial({wireframe: false, flatShading: true});
-
- mesh = new THREE.Mesh(geometry, material);
-
- scene.add(mesh);
- mesh.position.set(3, 0, -9.5);
-
- controls.target.copy(mesh.position)
-
- controls.update();
- renderer.setPixelRatio(window.devicePixelRatio);
-
- onWindowResize();
-
- isLoaded = true;
- }
+ controls = new OrbitControls( camera, renderer.domElement );
+ controls.enableZoom = false;
+
+ const radius = window.innerWidth > 768 ? 5 : 4.5;
+ const detail = 8;
+
+ const geometry = new THREE.IcosahedronGeometry(radius, detail);
+
+ camera.position.z = 2;
+ camera.position.x = 3;
- function animate() {
- animationFrame = requestAnimationFrame(animate);
+ controls.update();
+
+ scene = new THREE.Scene();
+ renderer.setSize(canvasWidth, canvasHeight);
+
+ scene.background = new THREE.Color(0x000000);
- mesh.rotation.x += 0.005;
- mesh.rotation.y += 0.005;
+ material = new THREE.MeshNormalMaterial({wireframe: false, flatShading: true});
- controls.update();
-
- renderer.render(scene, camera);
- isRendering = true;
- }
+ mesh = new THREE.Mesh(geometry, material);
- init(canvasWidth, canvasHeight);
-
- function onOssCanvasIntersection(entries, opts){
- entries.forEach(entry => {
- if (entry.isIntersecting && isLoaded) {
- if (isLoaded && !isRendering) {
- animate();
- } else {
- console.log("Loading")
- }
- } else {
- if (animationFrame) {
- cancelAnimationFrame(animationFrame);
- isRendering = false;
- }
- }
- }
- );
- }
+ scene.add(mesh);
+ mesh.position.set(3, 0, -9.5);
+
+ controls.target.copy(mesh.position)
+
+ controls.update();
+ renderer.setPixelRatio(window.devicePixelRatio);
+
+ onWindowResize();
+
+ isLoaded = true;
+ }
- ossCanvasObserver.observe(canvasRef.current);
+ function animate() {
+ animationFrame = requestAnimationFrame(animate);
- return () => {
- renderer.dispose();
- ossCanvasObserver.disconnect();
- }
- }, []);
+ mesh.rotation.x += 0.005;
+ mesh.rotation.y += 0.005;
- return (
-
- );
+ controls.update();
+
+ renderer.render(scene, camera);
+ isRendering = true;
+ }
+
+ init(canvasWidth, canvasHeight);
+
+ function onOssCanvasIntersection(entries, opts){
+ entries.forEach(entry => {
+ if (entry.isIntersecting && isLoaded) {
+ if (isLoaded && !isRendering) {
+ animate();
+ } else {
+ console.log("Loading")
+ }
+ } else {
+ if (animationFrame) {
+ cancelAnimationFrame(animationFrame);
+ isRendering = false;
+ }
+ }
+ }
+ );
+ }
+
+ ossCanvasObserver.observe(canvasRef.current);
+
+ return () => {
+ scene.remove.apply(scene, scene.children);
+ ossCanvasObserver.disconnect();
+ }
+ }, []);
+
+ return (
+
+ );
}
export default OssCanvas;
diff --git a/website/src/pages/sections/endcta.jsx b/website/src/pages/sections/endcta.jsx
new file mode 100644
index 0000000000000..a856472786727
--- /dev/null
+++ b/website/src/pages/sections/endcta.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+import "../../css/customTheme.css";
+import ArrowAnim from "./components/arrowAnim";
+import Rocket from "../../assets/images/rocket.gif";
+
+const EndCTA = () => {
+ return (
+ <>
+
+
+
Try APISIX today
+
+
+
+
+ );
+}
+
+export default EndCTA;
diff --git a/website/src/pages/sections/features.jsx b/website/src/pages/sections/features.jsx
new file mode 100644
index 0000000000000..d2e9c4308f5b7
--- /dev/null
+++ b/website/src/pages/sections/features.jsx
@@ -0,0 +1,210 @@
+import React, { useState, useRef, useEffect } from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import gsap from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+import "../../css/customTheme.css";
+import Dashboard from "../../assets/images/apisix-dashboard.png";
+import Snippet from "../../assets/images/code-sample.png";
+import Plugin from "../../assets/images/pluginised.png";
+import ArrowAnim from "./components/arrowAnim";
+
+const Features = () => {
+ const dashboardDiv = useRef(null);
+ const userfDiv = useRef(null);
+ const pluginDiv = useRef(null);
+ const triggerDiv = useRef(null);
+ const triggerDivCol = useRef(null);
+ const pinDiv = useRef(null);
+ const img1 = useRef(null);
+ const img1col = useRef(null);
+ const img2 = useRef(null);
+ const img2col = useRef(null);
+ const img3 = useRef(null);
+ const img3col = useRef(null);
+ const featPin = useRef(null);
+
+ gsap.registerPlugin(ScrollTrigger);
+
+ const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined' && window.innerWidth);
+ const [screenHeight, setScreenHeight] = useState(typeof window !== 'undefined' && window.innerWidth);
+
+ useEffect(()=>{
+ setScreenHeight(window.innerHeight);
+ setScreenWidth(window.innerWidth);
+ window.addEventListener('resize', resizeEvent, false);
+
+ function resizeEvent(event) {
+ setScreenHeight(window.innerHeight);
+ setScreenWidth(window.innerWidth);
+ }
+
+ return () => {
+ window.removeEventListener('resize', resizeEvent);
+ }
+ }, [])
+
+ useEffect(() => {
+ const value = window.innerHeight*2;
+
+ let tl;
+ let observers = [];
+
+ if(screenWidth > 1100) {
+ tl = gsap.timeline({
+ defaults: {
+ ease: "linear"
+ },
+ scrollTrigger: {
+ id: "feat",
+ trigger: triggerDiv.current,
+ start: "top top",
+ pin: pinDiv.current,
+ scrub: 1.5,
+ end: value+"px"
+ }
+ });
+
+ tl.to(img1.current,{
+ opacity: 0,
+ })
+ .to(img2.current,{
+ opacity: 1,
+ })
+ .to(img2.current,{
+ opacity: 0,
+ })
+ .to(img3.current,{
+ opacity: 1,
+ });
+ } else {
+ // Mobile
+
+ const elems = [img1col.current, img2col.current, img3col.current]
+ for (let i=1; i<4; i++) {
+ observers.push(new IntersectionObserver((entries, opts)=>{
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ observers[i-1].disconnect();
+ gsap.fromTo(elems[i-1],{
+ opacity: 0,
+ y: 90,
+ }, {
+ opacity: 1,
+ y: 0,
+ duration: 0.5,
+ ease: "power3.out",
+ yoyo: true,
+ yoyoEase: "power3.inOut",
+ });
+ }
+ }
+ );
+ }, {
+ root: null,
+ threshold: .2
+ }));
+ }
+
+ observers.forEach((it, index)=>{
+ it.observe(elems[index]);
+ });
+ }
+ });
+
+ return (
+ <>
+
+
Why APISIX ?
+
Reduce time fighting bugs, focus on designing world-class systems
+
+ Apache APISIX is the first Open source API gateway, with a built-in low-code Dashboard offering a powerful and flexible interface for developers to use
+
+
+
+ {/* Desktop */}
+
+
+
+
Easy-to-use dashboard
+
+ The Apache APISIX Dashboard is designed to make it as easy as possible for users to operate Apache APISIX through a frontend interface. It’s opensource and ever evolving, feel free to contribute.
+
+
+
+
+
+
+
+
User flexible
+
+ The Apache APISIX dashboard is flexible to User demand, providing option to create custom modules through code matching your requirements, alongside the existing no-code toolchain.
+
+
+
+
+
+
+
Pluginised workflow
+
+ No need to reinvent the wheel again and again. Use inbuilt plugins to create high performance systems in tight deadlines. For something custom, there is option of building custom plugins.
+
+
+
+
+
+
+
+
+ {/* Mobile */}
+
+
+
Easy-to-use dashboard
+
+
+ The Apache APISIX Dashboard is designed to make it as easy as possible for users to operate Apache APISIX through a frontend interface. It’s opensource and ever evolving, feel free to contribute.
+
+
+
+
+
+
+
User flexible
+
+
+ The Apache APISIX dashboard is flexible to User demand, providing option to create custom modules through code matching your requirements, alongside the existing no-code toolchain.
+
+
+
+
+
Pluginised workflow
+
+
+ No need to reinvent the wheel again and again. Use inbuilt plugins to create high performance systems in tight deadlines. For something custom, there is option of building custom plugins.
+
+
+
+
+ );
+}
+
+export default Features;
diff --git a/website/src/pages/sections/heroSection.jsx b/website/src/pages/sections/heroSection.jsx
new file mode 100644
index 0000000000000..ae4b96d83f1a5
--- /dev/null
+++ b/website/src/pages/sections/heroSection.jsx
@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import gsap from "gsap"
+
+import "../../css/customTheme.css";
+import HeroCanvas from "./components/heroCanvas"
+import ArrowAnim from "./components/arrowAnim";
+
+const HeroSection = (props) => {
+ const titleRef = useRef(0)
+ const subtitleRef = useRef(0)
+ const ctaRef = useRef(0)
+ const canRef = useRef(0)
+
+ useEffect(() => {
+ let tl = gsap.timeline({
+ defaults: {
+ delay: window.innerWidth >= 768 ? 1.5 : 0.01,
+ duration: 0.5,
+ 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(true);
+ }
+ }, [])
+
+ return (
+ <>
+
+
+
Effortless and smooth API Traffic management.
+
Apache APISIX provides rich traffic management features like Load Balancing, Dynamic Upstream, Canary Release, Circuit Breaking, Authentication, Observability, and more...
+
+
+
+
+
+
+ );
+}
+
+export default HeroSection;
+
\ No newline at end of file
diff --git a/website/src/pages/sections/newsSection.jsx b/website/src/pages/sections/newsSection.jsx
new file mode 100644
index 0000000000000..0ef8c5bfb6648
--- /dev/null
+++ b/website/src/pages/sections/newsSection.jsx
@@ -0,0 +1,47 @@
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+import "../../css/customTheme.css";
+import ChevronRight from "../../assets/icons/chevron-right.svg";
+
+const NewsSection = () => {
+ const { siteConfig } = useDocusaurusContext();
+ const events = (siteConfig.customFields.events || [])
+ .slice(0, 4)
+ .map((event) => {
+ const publishTime = event.fileName.slice(0, 10);
+ const splittedFileName = event.fileName.split("-");
+ const url = `/events/${splittedFileName
+ .slice(0, 3)
+ .join("/")}/${splittedFileName.slice(3).join("-")}`;
+ return (
+
+ );
+ });
+
+ return (
+ <>
+
+
+
Stay updated about APISIX
+
Some Recent events
+
{events}
+
+
+
+
+ );
+}
+
+export default NewsSection;
diff --git a/website/src/pages/sections/opensourcePromo.jsx b/website/src/pages/sections/opensourcePromo.jsx
new file mode 100644
index 0000000000000..1e81fe447901a
--- /dev/null
+++ b/website/src/pages/sections/opensourcePromo.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+import OssCanvas from "./components/ossCanvas"
+
+import "../../css/customTheme.css";
+import GitHub from "../../assets/icons/github-logo.svg";
+import YtPromo from "../../assets/videos/apisix.mp4";
+
+const OpensourcePromo = (props) => {
+ return (
+ <>
+
+
+
+
Learn from developers
+
+
Want to learn Apache APISIX usage, but don’t know where to start. Check out our
+
Like visual information, check out our Youtube channel for detailed tutorials. Subscribe for more.
+
+
+
+
+
+
+
+
+
Be a part of building APISIX
+
+
Apache APISIX is opensource and ever-growing. Contributors are always welcome. Reach out to us on GitHub
+
+
+
+
+
+
+
+
+ );
+}
+
+export default OpensourcePromo;
diff --git a/website/src/pages/showcase/styles.scss b/website/src/pages/showcase/styles.scss
index c61b24ffcc5a6..dd66811bc2683 100644
--- a/website/src/pages/showcase/styles.scss
+++ b/website/src/pages/showcase/styles.scss
@@ -1,41 +1,41 @@
.showcase {
- .header {
- padding-top: 0;
+ .header {
+ padding-top: 0;
- .title {
- color: var(--color-primary);
- font-size: 50px;
- font-weight: bold;
- }
-
- .tips {
- font-size: 18px;
- }
+ .title {
+ color: var(--color-primary);
+ font-size: 50px;
+ font-weight: bold;
}
- .content {
- width: 100%;
- padding: 50px 200px;
- display: flex;
- flex-wrap: wrap;
+ .tips {
+ font-size: 18px;
}
+ }
- .user-card {
- padding: 30px 10px;
+ .content {
+ width: 100%;
+ padding: 50px 200px;
+ display: flex;
+ flex-wrap: wrap;
+ }
- .logo {
- max-width: 100px;
- max-height: 40px;
- }
- }
+ .user-card {
+ padding: 30px 10px;
- .row {
- margin: 0;
+ .logo {
+ max-width: 100px;
+ max-height: 40px;
}
+ }
- @media (max-width: 1200px) {
- .content {
- padding: 50px 50px;
- }
+ .row {
+ margin: 0;
+ }
+
+ @media (max-width: 1200px) {
+ .content {
+ padding: 50px 50px;
}
+ }
}
diff --git a/website/src/theme/DocPage/index.tsx b/website/src/theme/DocPage/index.tsx
index ea7082355656c..f5eacadce2433 100644
--- a/website/src/theme/DocPage/index.tsx
+++ b/website/src/theme/DocPage/index.tsx
@@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
-import React, {ReactNode, useState, useCallback} from 'react';
+import React, {ReactNode, useState, useCallback, useEffect} from 'react';
import {MDXProvider} from '@mdx-js/react';
import renderRoutes from '@docusaurus/renderRoutes';
@@ -46,6 +46,41 @@ function DocPageContent({
const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
const [hiddenSidebar, setHiddenSidebar] = useState(false);
+
+ useEffect(() => {
+ document.querySelector(".react-toggle").style.display = "block";
+ const currentPage = currentDocRoute.path.split("/")[2] || "";
+ switch (currentPage) {
+ case "general":
+ document.querySelectorAll(".navbar__link")[0].innerText = "General";
+ break;
+ case "apisix":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX®";
+ break;
+ case "dashboard":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Dashboard";
+ break;
+ case "ingress-controller":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Ingress Controller";
+ break;
+ case "helm-chart":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Helm Chart";
+ break;
+ case "docker":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Docker";
+ break;
+ case "java-plugin-runner":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Java Plugin Runner";
+ break;
+ case "go-plugin-runner":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Go Plugin Runner";
+ break;
+ }
+ return () => {
+ document.querySelector(".react-toggle").style.display = "none";
+ }
+ }, []);
+
const toggleSidebar = useCallback(() => {
if (hiddenSidebar) {
setHiddenSidebar(false);
diff --git a/website/src/theme/DocSidebar/styles.module.css b/website/src/theme/DocSidebar/styles.module.css
index 190eeb36a6168..a4988258985de 100644
--- a/website/src/theme/DocSidebar/styles.module.css
+++ b/website/src/theme/DocSidebar/styles.module.css
@@ -59,6 +59,8 @@
.collapseSidebarButton {
display: block !important;
+ width: 100%;
+ margin: 0;
background-color: var(--ifm-button-background-color);
height: 40px;
position: sticky;
+ 
- 
-
-