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/11 01:18:25 UTC
[apisix-website] 01/01: feat: remove canvas & add schema
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch feat-schema-and-canvas
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
commit 67b17eb4fb3c8ef2bbe8fae570b4168194310c3a
Author: juzhiyuan <ju...@apache.org>
AuthorDate: Sat Jun 11 09:18:12 2022 +0800
feat: remove canvas & add schema
---
website/config/ssrTemplate.js | 14 ++
website/package.json | 1 -
website/src/components/HeroCanvas.tsx | 250 ---------------------
website/src/components/OssCanvas.tsx | 142 ------------
website/src/components/sections/HeroSection.tsx | 5 -
.../src/components/sections/OpensourcePromo.tsx | 6 +-
website/src/css/customTheme.css | 77 ++-----
yarn.lock | 5 -
8 files changed, 29 insertions(+), 471 deletions(-)
diff --git a/website/config/ssrTemplate.js b/website/config/ssrTemplate.js
index 07f6e3b7774..a1966a1020d 100644
--- a/website/config/ssrTemplate.js
+++ b/website/config/ssrTemplate.js
@@ -19,6 +19,20 @@ module.exports = {
<% it.scripts.forEach((script) => { %>
<link rel="preload" href="<%= it.baseUrl %><%= script %>" as="script">
<% }); %>
+
+ <script type='application/ld+json'>
+ {
+ "@context": "https://schema.org/",
+ "@type": "WebSite",
+ "name": "Apache APISIX® -- Cloud-Native API Gateway",
+ "url": "https://apisix.apache.org/",
+ "potentialAction": {
+ "@type": "SearchAction",
+ "target": "https://apisix.apache.org/search?q=",
+ "query-input": ""
+ }
+ }</script>
+
<!-- Matomo from the ASF -->
<script>
var _paq = window._paq = window._paq || [];
diff --git a/website/package.json b/website/package.json
index 5d8b14d03ea..021440fd39f 100644
--- a/website/package.json
+++ b/website/package.json
@@ -40,7 +40,6 @@
"react-transition-group": "^4.4.1",
"sass": "^1.38.2",
"styled-components": "^5.3.3",
- "three": "^0.131.3",
"video.js": "^7.19.2"
},
"browserslist": {
diff --git a/website/src/components/HeroCanvas.tsx b/website/src/components/HeroCanvas.tsx
deleted file mode 100644
index f1b9b45389c..00000000000
--- a/website/src/components/HeroCanvas.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import type { FC } from 'react';
-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';
-// eslint-disable-next-line import/no-unresolved, import/no-webpack-loader-syntax, import/extensions
-import fragment from '!!raw-loader!../shaders/fragment.frag';
-// eslint-disable-next-line import/no-unresolved, import/no-webpack-loader-syntax, import/extensions
-import vertex from '!!raw-loader!../shaders/vertex.vert';
-
-const HeroCanvas: FC = () => {
- const canvasRef = useRef<HTMLCanvasElement>();
- const overlayRef = useRef<HTMLDivElement>();
-
- let canvasHeight: number;
- let canvasWidth: number;
- let screenWidth: number;
- let screenHeight: number;
- let controls: OrbitControls;
- let isLoaded = false;
- let isRendering = false;
- let animationFrame: number;
-
- useEffect(() => {
- screenWidth = window.innerWidth;
- screenHeight = window.innerHeight;
-
- const mouse = { x: 0.5, y: 0.5 };
- const fragMouse = { x: 0.5, y: 0.5 };
-
- let camera; let mesh; let scene; let renderer; let material; let
- geometry;
-
- window.addEventListener('resize', onWindowResize, false);
-
- 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', (event) => {
- const 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;
- },
- });
- });
-
- function getRandom(a, b) {
- return a + (b - a) * Math.random();
- }
-
- const canvasObserver = new IntersectionObserver(onCanvasIntersection, {
- root: null,
- threshold: 0.01,
- });
-
- init(canvasWidth, canvasHeight);
-
- function onCanvasIntersection(entries) {
- 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);
-
- function init(width: number, height: number) {
- 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;
-
- geometry = new THREE.PlaneBufferGeometry(width / height, 1, 250, 250);
-
- const { count } = geometry.attributes.position;
- const arrSize = new THREE.BufferAttribute(new Float32Array(count), 1);
-
- for (let i = 0; i < arrSize.count; i += 1) {
- arrSize.array[i] = getRandom(0, 1);
- }
- geometry.setAttribute('aSize', arrSize, 1);
-
- geometry.scale(2.0, 1.0, 1.0);
-
- scene = new THREE.Scene();
- renderer.setSize(canvasWidth, canvasHeight);
-
- const 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.background = new THREE.Color('red');
-
- camera.position.z = 5;
- controls.update();
-
- material = new THREE.ShaderMaterial({
- uniforms,
- vertexShader: vertex,
- fragmentShader: fragment,
- wireframe: true,
- side: THREE.DoubleSide,
- });
-
- mesh = new THREE.Points(geometry, material);
-
- const backGeometry = new THREE.PlaneBufferGeometry(width / height, 1, 200, 200);
- const bgMaterial = new THREE.MeshBasicMaterial({ color: 0x121212, wireframe: false });
- const 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);
-
- // Tested and checked
- camera.position.set(
- 0.16430412417444037,
- -1.5202138879420155,
- 0.20892968987792318,
- );
-
- controls.update();
-
- renderer.setPixelRatio(window.devicePixelRatio);
- onWindowResize();
-
- isLoaded = true;
- }
-
- function onWindowResize() {
- screenHeight = window.innerHeight;
- screenWidth = window.innerWidth;
-
- if (screenWidth > 1100) {
- canvasHeight = screenHeight;
- canvasWidth = screenWidth / 2;
- } else {
- canvasHeight = screenHeight / 2;
- canvasWidth = screenWidth;
- }
-
- 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 () => {
- // eslint-disable-next-line prefer-spread
- scene.remove.apply(scene, scene.children);
- canvasObserver.disconnect();
- };
- }, []);
-
- useEffect(() => {
- gsap.to(overlayRef.current, {
- height: 0,
- delay: window.innerWidth >= 768 ? 0 : 0.3,
- duration: 2.1,
- ease: 'Expo.easeInOut',
- });
- }, []);
-
- return (
- <div className="hero-infograph" style={{ position: 'relative' }}>
- <canvas ref={canvasRef} className="homeCanvas" />
- <div ref={overlayRef} className="homeCanvas-overlay" />
- </div>
- );
-};
-
-export default HeroCanvas;
diff --git a/website/src/components/OssCanvas.tsx b/website/src/components/OssCanvas.tsx
deleted file mode 100644
index e2d0bd015ef..00000000000
--- a/website/src/components/OssCanvas.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import type { FC } from 'react';
-import React, { useRef, useEffect } from 'react';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-
-import '../css/customTheme.css';
-
-const OssCanvas: FC = () => {
- let screenWidth: number;
- let canvasHeight: number;
- let canvasWidth: number;
-
- const canvasRef = useRef(null);
-
- useEffect(() => {
- let camera;
- let scene;
- let renderer;
- let material;
- let mesh;
-
- screenWidth = window.innerWidth;
- window.addEventListener('resize', onWindowResize, false);
-
- let controls;
- let isLoaded = false; let isRendering = false; let
- animationFrame;
-
- if (screenWidth > 1100) {
- canvasHeight = 500;
- canvasWidth = screenWidth / 2;
- } else {
- canvasHeight = 500;
- canvasWidth = screenWidth;
- }
-
- function onWindowResize() {
- screenWidth = window.innerWidth;
-
- if (screenWidth > 1100) {
- canvasHeight = 500;
- canvasWidth = screenWidth / 2;
- } else {
- canvasHeight = 500;
- canvasWidth = screenWidth;
- }
-
- renderer.setSize(canvasWidth, canvasHeight);
- }
-
- const 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;
- }
-
- function animate() {
- animationFrame = requestAnimationFrame(animate);
-
- mesh.rotation.x += 0.005;
- mesh.rotation.y += 0.005;
-
- controls.update();
-
- renderer.render(scene, camera);
- isRendering = true;
- }
-
- init(canvasWidth, canvasHeight);
-
- function onOssCanvasIntersection(entries) {
- 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 () => {
- // eslint-disable-next-line prefer-spread
- scene.remove.apply(scene, scene.children);
- ossCanvasObserver.disconnect();
- };
- }, []);
-
- return (
- <canvas ref={canvasRef} width={canvasWidth} height={canvasHeight} className="ossCanvas" />
- );
-};
-
-export default OssCanvas;
diff --git a/website/src/components/sections/HeroSection.tsx b/website/src/components/sections/HeroSection.tsx
index 46e1387efab..27adf2df3ad 100644
--- a/website/src/components/sections/HeroSection.tsx
+++ b/website/src/components/sections/HeroSection.tsx
@@ -6,14 +6,12 @@ import gsap from 'gsap';
import Translate from '@docusaurus/Translate';
import '../../css/customTheme.css';
-import HeroCanvas from '../HeroCanvas';
import ArrowAnim from '../ArrowAnim';
const HeroSection: FC = () => {
const titleRef = useRef<HTMLHeadingElement>();
const subtitleRef = useRef<HTMLHeadingElement>();
const ctaRef = useRef<HTMLHeadingElement>();
- const canRef = useRef<HTMLHeadingElement>();
useEffect(() => {
const tl = gsap.timeline({
@@ -62,9 +60,6 @@ const HeroSection: FC = () => {
<ArrowAnim />
</div>
</div>
- <div ref={canRef} className="add-margin">
- <HeroCanvas />
- </div>
</div>
);
};
diff --git a/website/src/components/sections/OpensourcePromo.tsx b/website/src/components/sections/OpensourcePromo.tsx
index cf88aa6e04d..7fb2df229a1 100644
--- a/website/src/components/sections/OpensourcePromo.tsx
+++ b/website/src/components/sections/OpensourcePromo.tsx
@@ -5,7 +5,6 @@ import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Translate from '@docusaurus/Translate';
-import OssCanvas from '../OssCanvas';
import '../../css/customTheme.css';
import GitHub from '../../assets/icons/github-logo.svg';
@@ -94,7 +93,7 @@ const OpensourcePromo: FC = () => (
<strong>
<Translate id="openSourcePromo.component.ossPromo.subtitle">
Apache APISIX is open source and ever-growing.
- Contributors are always welcome. Reach out to us on GitHub
+ Contributors are always welcome.
</Translate>
</strong>
</p>
@@ -108,9 +107,6 @@ const OpensourcePromo: FC = () => (
</div>
</div>
</div>
- <div className="oss-promo-infograph">
- <OssCanvas />
- </div>
</div>
</div>
);
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index 837bec56b6f..75304cd8bb2 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -338,21 +338,8 @@ a:hover {
.hero-sec-wrap {
display: flex;
background: #f4f4f4ad;
- height: 100vh;
-}
-
-.homeCanvas-overlay {
- position: absolute;
- width: 50vw;
- height: 100vh;
- background: #fff;
- top: -1px;
- right: 0;
-}
-
-.homeCanvas {
- width: 50vw;
- height: 100vh;
+ height: 70vh;
+ justify-content: center;
}
.hero-text {
@@ -360,8 +347,7 @@ a:hover {
display: flex;
flex-wrap: wrap;
align-content: center;
- width: 50%;
- padding: 0 0 0 6vw;
+ width: 65%;
}
.hero-title {
@@ -466,19 +452,21 @@ a:hover {
.arch-head,
.compare-head,
.testimonials-head,
-.docs-promo-head,
-.oss-promo-head {
+.docs-promo-head {
font-size: 2.4rem;
position: relative;
left: 16.8%;
width: 83.2%;
}
+.oss-promo-head {
+ font-size: 2.4rem;
+}
+
.arch-subtitle,
.compare-subtitle,
.testimonials-subtitle,
-.docs-promo-subtitle,
-.oss-promo-subtitle {
+.docs-promo-subtitle {
font-size: 1.13rem;
position: relative;
left: 16.8%;
@@ -929,24 +917,19 @@ a:hover {
}
.oss-promo-text {
- width: 50%;
+ width: 100%;
+ padding: 50px 0;
display: flex;
justify-content: center;
flex-direction: column;
background: #121010;
color: white;
-}
-
-.oss-promo-infograph {
- background: #0a0a0a;
- width: 50%;
- height: 100%;
- overflow: hidden;
+ text-align: center;
}
.oss-promo-cta {
background: #080808;
- display: flex;
+ display: inline-flex;
width: fit-content;
font-size: 0.95rem;
border-style: solid;
@@ -1320,15 +1303,6 @@ a:hover {
height: fit-content;
}
- .homeCanvas-overlay {
- position: absolute;
- width: 100vw;
- height: 50vh;
- background: #ebe6dc;
- top: -1px;
- right: 0;
- }
-
.hero-text {
height: 50%;
width: 100%;
@@ -1347,15 +1321,6 @@ a:hover {
padding-right: 20px;
}
- .add-margin {
- margin: 30px 0 0;
- }
-
- .homeCanvas {
- width: 100vw;
- height: 50vh;
- }
-
.hero-infograph {
overflow: hidden;
}
@@ -1484,15 +1449,6 @@ a:hover {
padding: 50px 0 0;
}
- .oss-promo-text {
- width: 100%;
- }
-
- .oss-promo-infograph {
- width: 100%;
- margin-top: 30px;
- }
-
.event-card {
margin: 0 20px 20px;
}
@@ -1563,8 +1519,7 @@ a:hover {
.arch-head,
.compare-head,
.testimonials-head,
- .docs-promo-head,
- .oss-promo-head {
+ .docs-promo-head {
left: 7%;
width: 93%;
}
@@ -1572,10 +1527,6 @@ a:hover {
.benefit .feat-desc {
font-size: 0.85rem;
}
-
- .oss-promo-infograph {
- overflow: hidden;
- }
}
@media (min-width: 1600px) and (max-width: 2080px) {
diff --git a/yarn.lock b/yarn.lock
index eebf1ab8885..0238984fce6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10054,11 +10054,6 @@ text-table@0.2.0, text-table@^0.2.0:
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
-three@^0.131.3:
- version "0.131.3"
- resolved "https://registry.yarnpkg.com/three/-/three-0.131.3.tgz#406fd210c603ca9154937ae3582996fbfd3cb716"
- integrity sha512-VkZAv8ZTJqiE/fyEmoWLxcNHImpVcjqW7RO0GzMu3tRpwO0KUvK9pjTmJzJcAbc51BOeB2G38zh80yjHTbP8gQ==
-
through@^2.3.8:
version "2.3.8"
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"