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/04 10:35:40 UTC
[apisix-website] branch master updated: feat: improve SEO by links and keywords (#1130)
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 a7168070434 feat: improve SEO by links and keywords (#1130)
a7168070434 is described below
commit a716807043491557759e46c0e9086b8a902c470b
Author: 琚致远 <ju...@apache.org>
AuthorDate: Sat Jun 4 18:35:36 2022 +0800
feat: improve SEO by links and keywords (#1130)
---
website/docusaurus.config.js | 21 +++++++++++++------
website/src/components/sections/Architecture.tsx | 8 ++++----
website/src/components/sections/Benefits.tsx | 20 +++++++++---------
website/src/components/sections/Features.tsx | 24 +++++++++++-----------
website/src/components/sections/HeroSection.tsx | 17 ++++++++-------
.../src/components/sections/OpensourcePromo.tsx | 4 ++--
website/src/css/customTheme.css | 14 ++++++-------
website/src/pages/help.tsx | 4 ++--
website/src/pages/index.tsx | 19 +++++++++++++++++
website/src/pages/plugins.tsx | 2 +-
10 files changed, 80 insertions(+), 53 deletions(-)
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index f4dc6c750c0..54a394e7f3e 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -19,7 +19,7 @@ module.exports = {
favicon: 'img/favicon.png',
customFields: {
tagline2:
- 'Apache APISIX software provides rich traffic management features such as load balancing, dynamic upstream, canary release, circuit breaking, authentication, observability, and more.',
+ 'Apache APISIX provides rich traffic management features such as load balancing, dynamic upstream, canary release, circuit breaking, authentication, observability, and more.',
showcases: require('./static/data/showcases.json'),
events: require('./static/data/events.json'),
eventPosterCard: require('./static/data/event-poster-card.json'),
@@ -359,16 +359,19 @@ module.exports = {
title: 'Community',
items: [
{
- label: 'GitHub Issue Tracker',
+ label: 'GitHub',
to: 'https://github.com/apache/apisix/issues',
},
{
label: 'Slack',
- to: 'https://apisix.apache.org/docs/general/join',
+ to: '/docs/general/join',
},
{
label: 'Twitter',
to: 'https://twitter.com/ApacheAPISIX',
+ }, {
+ label: 'YouTube',
+ to: 'https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g',
},
],
},
@@ -377,7 +380,13 @@ module.exports = {
items: [
{
label: 'Blog',
- to: 'https://apisix.apache.org/blog/',
+ to: '/blog/',
+ }, {
+ label: 'Showcase',
+ to: '/showcase',
+ }, {
+ label: 'Plugin Hub',
+ to: '/plugins',
},
],
},
@@ -396,7 +405,7 @@ module.exports = {
backgroundColor: '#e8433e',
textColor: 'white',
content:
- '\u{1F914} Have queries regarding apache APISIX, Join slack channel to discuss them <a target="_blank" rel="noopener noreferrer" href="https://apisix.apache.org/docs/general/join">join #apisix channel</a>! ⭐️',
+ '\u{1F914} Have queries regarding API Gateway? Join Slack channel to discuss <a target="_blank" rel="noopener noreferrer" href="/docs/general/join">join #apisix channel</a>! ⭐️',
},
prism: {
theme: require('prism-react-renderer/themes/github'),
@@ -419,7 +428,7 @@ module.exports = {
{
name: 'description',
content:
- 'Apache APISIX is a dynamic, real-time, high-performance Cloud-Native API gateway, based on the Nginx library and etcd.',
+ 'Open Source and Cloud-Native API gateway, based on the Nginx library and etcd.',
},
{
name: 'robots',
diff --git a/website/src/components/sections/Architecture.tsx b/website/src/components/sections/Architecture.tsx
index a7d56c16286..42ff25673e6 100644
--- a/website/src/components/sections/Architecture.tsx
+++ b/website/src/components/sections/Architecture.tsx
@@ -84,9 +84,9 @@ const Architecture: FC<ArchitectureProps> = (props) => {
<div className="arch-subtitle">
<p>
<Translate id="architecture.component.title.subtitle">
- Apache APISIX lets you build Cloud-Native Microservices API gateways,
+ Apache APISIX provides open source API Gateway to help you manage microservices,
delivering the ultimate performance, security,
- open source and scalable platform for all your APIs and microservices.
+ and scalable platform for all your APIs and microservices.
</Translate>
</p>
</div>
@@ -98,8 +98,8 @@ const Architecture: FC<ArchitectureProps> = (props) => {
<p style={{ width: screenWidth >= 768 ? '50%' : '90%' }}>
<Translate id="architecture.component.card.caption">
Apache APISIX is based on NGINX and etcd.
- Compared with traditional API gateways,
- APISIX has dynamic routing and hot-loading plugins
+ Compared with traditional API Gateways,
+ APISIX has features like dynamic routing and hot-loading plugins, etc.
</Translate>
</p>
</div>
diff --git a/website/src/components/sections/Benefits.tsx b/website/src/components/sections/Benefits.tsx
index a2e3d5a0525..a9ca9a43ea4 100644
--- a/website/src/components/sections/Benefits.tsx
+++ b/website/src/components/sections/Benefits.tsx
@@ -332,9 +332,9 @@ const Benefits: FC<BenefitsProps> = (props) => {
<h3 className="feat-head-desc">
<Translate id="benefits.component.performance.title">Performance</Translate>
</h3>
- <h1 className="feat-head add-left-margin">
+ <h2 className="feat-head add-left-margin">
<Translate id="benefits.component.performance.subtitle">Ultimate performance</Translate>
- </h1>
+ </h2>
<p className="feat-desc add-left-margin">
<Translate id="benefits.component.performance.message">
Apache APISIX uses radixtree-route-matching and etcd under the hood to
@@ -359,11 +359,11 @@ const Benefits: FC<BenefitsProps> = (props) => {
Security
</Translate>
</h3>
- <h1 className="feat-head add-left-margin">
+ <h2 className="feat-head add-left-margin">
<Translate id="benefits.component.security.subtitle">
Shield against the malicious
</Translate>
- </h1>
+ </h2>
<p className="feat-desc add-left-margin">
<Translate id="benefits.component.security.message">
Apache APISIX provides multiple security plugins
@@ -388,11 +388,11 @@ const Benefits: FC<BenefitsProps> = (props) => {
Scalability and availability
</Translate>
</h3>
- <h1 className="feat-head add-left-margin">
+ <h2 className="feat-head add-left-margin">
<Translate id="benefits.component.scalability.subtitle">
Scales with your users
</Translate>
- </h1>
+ </h2>
<p className="feat-desc add-left-margin">
<Translate id="benefits.component.scalability.message">
Apache APISIX provides the ability to write your own custom plugins,
@@ -416,11 +416,11 @@ const Benefits: FC<BenefitsProps> = (props) => {
Fully dynamic
</Translate>
</h3>
- <h1 className="feat-head add-left-margin">
+ <h2 className="feat-head add-left-margin">
<Translate id="benefits.component.fullyDynamic.subtitle">
Save dev-time, design what matters
</Translate>
- </h1>
+ </h2>
<p className="feat-desc add-left-margin">
<Translate id="benefits.component.fullyDynamic.message">
Apache APISIX provides Hot updates and Hot plugins,
@@ -439,11 +439,11 @@ const Benefits: FC<BenefitsProps> = (props) => {
Multi-platform and protocol
</Translate>
</h3>
- <h1 className="feat-head add-left-margin">
+ <h2 className="feat-head add-left-margin">
<Translate id="benefits.component.multiPlatform.subtitle">
Create once, run anywhere
</Translate>
- </h1>
+ </h2>
<p className="feat-desc add-left-margin">
<Translate id="benefits.component.multiPlatform.message">
Platform agnostic, no vendor lock-in,
diff --git a/website/src/components/sections/Features.tsx b/website/src/components/sections/Features.tsx
index 1f8409eba8d..e66bb24a48c 100644
--- a/website/src/components/sections/Features.tsx
+++ b/website/src/components/sections/Features.tsx
@@ -155,17 +155,17 @@ const Features: FC = () => {
return (
<>
<div ref={featPin} className="feat-top" style={{ padding: '50px 0' }}>
- <h3 className="feat-head-desc"><Translate id="features.component.why.title">Why APISIX ?</Translate></h3>
- <h1 className="feat-head add-left-margin">
+ <h3 className="feat-head-desc"><Translate id="features.component.why.title">Why APISIX?</Translate></h3>
+ <h2 className="feat-head add-left-margin">
<Translate id="features.component.why.subtitle">
- Reduce time fighting bugs, focus on designing world-class systems
+ Reduce time fighting bugs, focus on designing world-class systems with API Gateway
</Translate>
- </h1>
+ </h2>
<p className="feat-desc add-left-margin">
<Translate id="features.component.why.message">
- 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
+ Apache APISIX is the first open-source API Gateway
+ that includes a built-in low-code Dashboard,
+ which offers a powerful and flexible UI for developers to use.
</Translate>
</p>
</div>
@@ -176,7 +176,7 @@ const Features: FC = () => {
<div className="text-div" style={{ height: '100vh' }}>
<h2 className="i-text add-left-margin-feat">
<Translate id="features.component.easyDashboard.title">
- Easy-to-use dashboard
+ Easy-to-use Dashboard
</Translate>
</h2>
<p className="i-text-desc add-left-margin-feat">
@@ -200,7 +200,7 @@ const Features: FC = () => {
<div ref={userfDiv} style={{ position: 'relative' }}>
<div className="text-div" style={{ height: '100vh' }}>
<h2 className="i-text add-left-margin-feat">
- <Translate id="features.component.userFlexible.title">User flexible</Translate>
+ <Translate id="features.component.userFlexible.title">User Flexible</Translate>
</h2>
<p className="i-text-desc add-left-margin-feat">
<Translate id="features.component.userFlexible.message">
@@ -215,7 +215,7 @@ const Features: FC = () => {
<div ref={pluginDiv} style={{ position: 'relative' }}>
<div className="text-div" style={{ height: '100vh' }}>
<h2 className="i-text add-left-margin-feat">
- <Translate id="features.component.pluginised.title">Pluginised workflow</Translate>
+ <Translate id="features.component.pluginised.title">Pluginised Workflow</Translate>
</h2>
<p className="i-text-desc add-left-margin-feat">
<Translate id="features.component.pluginised.message">
@@ -309,7 +309,7 @@ const Features: FC = () => {
style={{ height: 'fit-content', padding: '20px 0' }}
>
<h2 className="add-left-margin" style={{ width: 'fit-content' }}>
- <Translate id="features.component.userFlexible.title">User flexible</Translate>
+ <Translate id="features.component.userFlexible.title">User Flexible</Translate>
</h2>
<img className="i-image-col" src={Snippet} alt="" />
<p className="i-text-desc-col add-left-margin">
@@ -327,7 +327,7 @@ const Features: FC = () => {
style={{ height: 'fit-content', padding: '20px 0' }}
>
<h2 className="add-left-margin" style={{ width: 'fit-content' }}>
- <Translate id="features.component.pluginised.title">Pluginised workflow</Translate>
+ <Translate id="features.component.pluginised.title">Pluginised Workflow</Translate>
</h2>
<img className="i-image-col" src={Plugin} alt="" />
<p className="i-text-desc-col add-left-margin">
diff --git a/website/src/components/sections/HeroSection.tsx b/website/src/components/sections/HeroSection.tsx
index fe70da75a15..46e1387efab 100644
--- a/website/src/components/sections/HeroSection.tsx
+++ b/website/src/components/sections/HeroSection.tsx
@@ -41,18 +41,17 @@ const HeroSection: FC = () => {
return (
<div className="hero-sec-wrap" style={{ width: '100%' }}>
<div className="hero-text">
- <h2 ref={titleRef} className="hero-title hide-title">
- <span><Translate id="hero.component.title.fragment1">Effortless and smooth</Translate></span>
+ <h1 ref={titleRef} className="hero-title hide-title">
+ <span><Translate id="hero.component.title.fragment1">Full Lifecycle API Management</Translate></span>
{' '}
- <span style={{ color: '#E8433E' }}>
- <Translate id="hero.component.title.fragment2">API Traffic</Translate>
+ <br />
+ <span style={{ color: '#E8433E', fontSize: 32 }}>
+ <Translate id="hero.component.title.fragment2">API Gateway, Ingress Controller, etc.</Translate>
</span>
- {' '}
- <Translate id="hero.component.title.fragment3">management.</Translate>
+ </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>
- <h3 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, and more...</Translate>
- </h3>
<div ref={ctaRef} className="hero-ctas hide-ctas">
<Link
to={useBaseUrl('downloads')}
diff --git a/website/src/components/sections/OpensourcePromo.tsx b/website/src/components/sections/OpensourcePromo.tsx
index ab1c30a0212..28a19c4d70e 100644
--- a/website/src/components/sections/OpensourcePromo.tsx
+++ b/website/src/components/sections/OpensourcePromo.tsx
@@ -35,7 +35,7 @@ const OpensourcePromo: FC = () => (
{' '}
<a style={{ color: '#e8433e' }} href="https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g">
<Translate id="openSourcePromo.component.link.Youtube">
- Youtube channel
+ YouTube channel
</Translate>
</a>
{' '}
@@ -46,7 +46,7 @@ const OpensourcePromo: FC = () => (
</div>
</div>
<div className="docs-promo-video">
- <video preload="none" src="https://static.apiseven.com/apisix-website/videos/apisix.mp4" loading="lazy" autoPlay poster="" muted loop width="70%" height="auto" controls />
+ <video preload="none" src="https://static.apiseven.com/apisix-website/videos/apisix.mp4" poster="" loop width="70%" height="auto" controls />
</div>
</div>
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index bdd399250d0..837bec56b6f 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -57,7 +57,7 @@ html[data-theme="dark"] {
font-family: MaisonNeue-Medium;
src:
local("MaisonNeue-Medium"),
- url("https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/src/fonts/MaisonNeue-Medium.otf") format("opentype");
+ url("https://raw.githubusercontent.com/apache/apisix-website/master/website/src/fonts/MaisonNeue-Medium.otf") format("opentype");
font-display: swap;
}
@@ -65,7 +65,7 @@ html[data-theme="dark"] {
font-family: MaisonNeue-Bold;
src:
local("MaisonNeue-Bold"),
- url("https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/src/fonts/MaisonNeue-Bold.otf") format("opentype");
+ url("https://raw.githubusercontent.com/apache/apisix-website/master/website/src/fonts/MaisonNeue-Bold.otf") format("opentype");
font-display: swap;
}
@@ -73,7 +73,7 @@ html[data-theme="dark"] {
font-family: MaisonNeue-Light;
src:
local("MaisonNeue-Light"),
- url("https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/src/fonts/MaisonNeue-Light.otf") format("opentype");
+ url("https://raw.githubusercontent.com/apache/apisix-website/master/website/src/fonts/MaisonNeue-Light.otf") format("opentype");
font-display: swap;
}
@@ -81,7 +81,7 @@ html[data-theme="dark"] {
font-family: MaisonNeue-Demi;
src:
local("MaisonNeue-Demi"),
- url("https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/src/fonts/MaisonNeue-Demi.otf") format("opentype");
+ url("https://raw.githubusercontent.com/apache/apisix-website/master/website/src/fonts/MaisonNeue-Demi.otf") format("opentype");
font-display: swap;
}
@@ -89,7 +89,7 @@ html[data-theme="dark"] {
font-family: MaisonNeue-ExtraBold;
src:
local("MaisonNeue-ExtraBold"),
- url("https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/src/fonts/MaisonNeue-ExtraBold.otf")
+ url("https://raw.githubusercontent.com/apache/apisix-website/master/website/src/fonts/MaisonNeue-ExtraBold.otf")
format("opentype");
font-display: swap;
}
@@ -1355,11 +1355,11 @@ a:hover {
width: 100vw;
height: 50vh;
}
-
+
.hero-infograph {
overflow: hidden;
}
-
+
.hldesign-graphic {
width: 100%;
}
diff --git a/website/src/pages/help.tsx b/website/src/pages/help.tsx
index a02a77a8c18..746460db96d 100644
--- a/website/src/pages/help.tsx
+++ b/website/src/pages/help.tsx
@@ -48,7 +48,7 @@ const Help: FC = () => (
<p><Translate id="help.website.docs.tips">Learn more using the documentation on this site.</Translate></p>
<div className="buttons">
<a
- href="https://apisix.apache.org/docs/"
+ href="/docs/"
target="_blank"
rel="noreferrer"
>
@@ -71,7 +71,7 @@ const Help: FC = () => (
<ChevronRight />
</a>
<a
- href="https://apisix.apache.org/docs/general/join"
+ href="/docs/general/join"
target="_blank"
rel="noreferrer"
>
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index e4054a948ec..9299b1ce2d0 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react';
import React, { useState, useEffect, useLayoutEffect } from 'react';
import useThemeContext from '@theme/hooks/useThemeContext';
import Layout from '@theme/Layout';
+import Head from '@docusaurus/Head';
import useWindowType from '@theme/hooks/useWindowSize';
import HeroSection from '../components/sections/HeroSection';
@@ -61,6 +62,24 @@ const Index: FC = () => {
return (
<Layout>
+ <Head>
+ <meta
+ name="twitter:title"
+ content="Apache APISIX® - Cloud-Native API Gateway"
+ />
+ <meta
+ name="twitter:description"
+ content="Apache APISIX is a dynamic, real-time, high-performance Cloud-Native API gateway, based on the Nginx library and etcd."
+ />
+ <meta
+ name="twitter:site"
+ content="@apacheapisix"
+ />
+ <meta
+ name="og:description"
+ content="Apache APISIX is a dynamic, real-time, high-performance Cloud-Native API gateway, based on the Nginx library and etcd."
+ />
+ </Head>
<HeroSection />
<Architecture screenWidth={screenWidth} />
<Features />
diff --git a/website/src/pages/plugins.tsx b/website/src/pages/plugins.tsx
index 1d86ad8e3a1..04f735e4437 100644
--- a/website/src/pages/plugins.tsx
+++ b/website/src/pages/plugins.tsx
@@ -214,7 +214,7 @@ const Plugins: FC = () => {
}
return (
<div key={plugin.name}>
- <PluginCard href={plugin.beta ? `https://apisix.apache.org/docs/apisix/next/plugins/${pluginUrl}` : `https://apisix.apache.org/docs/apisix/plugins/${pluginUrl}`} target="_blank">
+ <PluginCard href={plugin.beta ? `/docs/apisix/next/plugins/${pluginUrl}` : `/docs/apisix/plugins/${pluginUrl}`} target="_blank">
<PluginIcon>
{plugin.useDefaultIcon
? <img className="plugin-logo shadow default" src="/img/plugin/default-icon.png" alt={plugin.name} />