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 2021/02/09 09:37:22 UTC
[apisix-website] branch master updated: refactor: update index page
design (#173)
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 11b7488 refactor: update index page design (#173)
11b7488 is described below
commit 11b7488bae407f49d46964640bd601a20a14af4f
Author: qier222 <qi...@gmail.com>
AuthorDate: Tue Feb 9 17:37:16 2021 +0800
refactor: update index page design (#173)
Co-authored-by: 琚致远 <ju...@apache.org>
---
website/docusaurus.config.js | 271 ++++++++++++++++---------------
website/package.json | 10 +-
website/src/assets/icons/github-logo.svg | 1 +
website/src/css/customTheme.css | 186 +++++++++++++++++----
website/src/pages/help.js | 22 +--
website/src/pages/index.js | 60 ++++---
website/src/pages/users.js | 87 +++++-----
website/webpack.config.js | 4 +
8 files changed, 396 insertions(+), 245 deletions(-)
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 6ba5799..4433989 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -1,187 +1,192 @@
-module.exports={
- "title": "Apache APISIX™",
- "tagline": "Apache APISIX is a dynamic, real-time, high-performance Cloud-Native API gateway, based on the Nginx library and etcd.",
- "url": "https://apisix.apache.org/",
- "baseUrl": "/",
- "organizationName": "Apache",
- "projectName": "apisix-website",
- "scripts": [
- "https://buttons.github.io/buttons.js"
- ],
- "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.",
- "users": [
+module.exports = {
+ title: "Apache APISIX™",
+ tagline:
+ "Apache APISIX is a dynamic, real-time, high-performance Cloud-Native API gateway, based on the Nginx library and etcd.",
+ url: "https://apisix.apache.org/",
+ baseUrl: "/",
+ organizationName: "Apache",
+ projectName: "apisix-website",
+ scripts: ["https://buttons.github.io/buttons.js"],
+ 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.",
+ users: [
{
- "caption": "360",
- "image": "https://static.apiseven.com/2020/05/WechatIMG618.png",
- "infoLink": "https://www.360.com",
- "pinned": true
+ caption: "360",
+ image: "https://static.apiseven.com/2020/05/WechatIMG618.png",
+ infoLink: "https://www.360.com",
+ pinned: true,
},
{
- "caption": "HelloTalk",
- "image": "https://static.apiseven.com/2020/05/HelloTalk.png",
- "infoLink": "https://www.hellotalk.com/?lang=en",
- "pinned": true
+ caption: "HelloTalk",
+ image: "https://static.apiseven.com/2020/05/HelloTalk.png",
+ infoLink: "https://www.hellotalk.com/?lang=en",
+ pinned: true,
},
{
- "caption": "网易",
- "image": "https://static.apiseven.com/2020/05/1588907762-WechatIMG2916.png",
- "infoLink": "https://www.163.com",
- "pinned": true
+ caption: "网易",
+ image:
+ "https://static.apiseven.com/2020/05/1588907762-WechatIMG2916.png",
+ infoLink: "https://www.163.com",
+ pinned: true,
},
{
- "caption": "腾讯云",
- "image": "https://static.apiseven.com/2020/05/%E8%85%BE%E8%AE%AF%E4%BA%91-1536x546.jpg",
- "infoLink": "https://qcloud.com",
- "pinned": true
+ caption: "腾讯云",
+ image:
+ "https://static.apiseven.com/2020/05/%E8%85%BE%E8%AE%AF%E4%BA%91-1536x546.jpg",
+ infoLink: "https://qcloud.com",
+ pinned: true,
},
{
- "caption": "中国航信",
- "image": "https://static.apiseven.com/2020/05/%E4%B8%AD%E5%9B%BD%E8%88%AA%E4%BF%A1.png",
- "infoLink": "http://www.infosky.com.cn/publish/main/index.html",
- "pinned": true
- }
+ caption: "中国航信",
+ image:
+ "https://static.apiseven.com/2020/05/%E4%B8%AD%E5%9B%BD%E8%88%AA%E4%BF%A1.png",
+ infoLink: "http://www.infosky.com.cn/publish/main/index.html",
+ pinned: true,
+ },
],
- "repoUrl": "https://github.com/apache/apisix",
- "docsUrl": ""
+ repoUrl: "https://github.com/apache/apisix",
+ docsUrl: "",
},
- "onBrokenLinks": "log",
- "onBrokenMarkdownLinks": "log",
- "presets": [
+ onBrokenLinks: "log",
+ onBrokenMarkdownLinks: "log",
+ presets: [
[
"@docusaurus/preset-classic",
{
- "docs": {
- "showLastUpdateAuthor": true,
- "showLastUpdateTime": true,
- "path": "docs",
- "routeBasePath":'/',
- "editUrl": "https://github.com/apache/apisix-website/edit/master/website",
- "sidebarPath": "../website/sidebars.json"
+ docs: {
+ showLastUpdateAuthor: true,
+ showLastUpdateTime: true,
+ path: "docs",
+ routeBasePath: "/",
+ editUrl:
+ "https://github.com/apache/apisix-website/edit/master/website",
+ sidebarPath: "../website/sidebars.json",
},
- "blog": {
- "path": "blog"
+ blog: {
+ path: "blog",
},
- "theme": {
- "customCss": "../src/css/customTheme.css"
- }
- }
- ]
+ theme: {
+ customCss: "../src/css/customTheme.css",
+ },
+ },
+ ],
],
- "plugins": [],
- "themeConfig": {
- "navbar": {
- "title": "Apache APISIX™",
- "style": 'primary',
- "logo": {
- "src": "img/logo.png"
+ plugins: [],
+ themeConfig: {
+ navbar: {
+ // title: "Apache APISIX™",
+ logo: {
+ src: "img/logo.png",
},
- "items": [
+ items: [
{
- "to": "/docs",
- "label": "Docs",
- "position": "left"
+ to: "/docs",
+ label: "Docs",
+ position: "left",
},
{
- "to": "/blog",
- "label": "Blog",
- "position": "left"
+ to: "/blog",
+ label: "Blog",
+ position: "left",
},
{
- "to": "/downloads",
- "label": "Downloads",
- "position": "left"
+ to: "/downloads",
+ label: "Downloads",
+ position: "left",
},
{
- "to": "/team",
- "label": "Team",
- "position": "left"
+ to: "/team",
+ label: "Team",
+ position: "left",
},
{
- "to": "/help",
- "label": "Help",
- "position": "left"
- }
- ]
+ to: "/help",
+ label: "Help",
+ position: "left",
+ },
+ ],
},
-
- "footer": {
- "style": 'dark',
- "links": [
+
+ footer: {
+ links: [
{
- "title": "ASF",
- "items": [
+ title: "ASF",
+ items: [
{
- "label": "Foundation",
- "to": "https://www.apache.org/"
+ label: "Foundation",
+ to: "https://www.apache.org/",
},
{
- "label": "License",
- "to": "https://www.apache.org/licenses/"
+ label: "License",
+ to: "https://www.apache.org/licenses/",
},
{
- "label": "Events",
- "to": "https://www.apache.org/events/"
+ label: "Events",
+ to: "https://www.apache.org/events/",
},
{
- "label": "Security",
- "to": "https://www.apache.org/security/"
+ label: "Security",
+ to: "https://www.apache.org/security/",
},
{
- "label": "Sponsorship",
- "to": "https://www.apache.org/foundation/sponsorship.html"
+ label: "Sponsorship",
+ to: "https://www.apache.org/foundation/sponsorship.html",
},
{
- "label": "Thanks",
- "to": "https://www.apache.org/foundation/thanks.html"
- }
- ]
+ label: "Thanks",
+ to: "https://www.apache.org/foundation/thanks.html",
+ },
+ ],
},
{
- "title": "Community",
- "items": [
+ title: "Community",
+ items: [
{
- "label": "GitHub Issue Tracker",
- "to": "https://github.com/apache/apisix/issues"
+ label: "GitHub Issue Tracker",
+ to: "https://github.com/apache/apisix/issues",
},
{
- "label": "Slack",
- "to": "https://apisix.slack.com/"
+ label: "Slack",
+ to: "https://apisix.slack.com/",
},
{
- "label": "Twitter",
- "to": "https://twitter.com/ApacheAPISIX"
- }
- ]
+ label: "Twitter",
+ to: "https://twitter.com/ApacheAPISIX",
+ },
+ ],
},
{
- "title": "More",
- "items": [
+ title: "More",
+ items: [
{
- "label": "User Showcase",
- "to": "https://apisix.apache.org/users/"
+ label: "User Showcase",
+ to: "https://apisix.apache.org/users/",
},
{
- "label": "Blog",
- "to": "https://apisix.apache.org/blog/"
- }
- ]
- }
- ],
- "logo": {
- "alt": "Apache Software Foundation",
- "src": "img/asf_logo_wide_small.png",
- "href": "https://www.apache.org/",
+ label: "Blog",
+ to: "https://apisix.apache.org/blog/",
+ },
+ ],
},
-
- "copyright": "Copyright © 2019-2021 The Apache Software Foundation. Apache APISIX, APISIX™, Apache, the Apache feather logo, and the Apache APISIX project logo are either registered trademarks or trademarks of the Apache Software Foundation.",
-
+ ],
+ logo: {
+ alt: "Apache Software Foundation",
+ src: "img/asf_logo_wide_small.png",
+ href: "https://www.apache.org/",
+ },
+
+ copyright:
+ "Copyright © 2019-2021 The Apache Software Foundation. Apache APISIX, APISIX™, Apache, the Apache feather logo, and the Apache APISIX project logo are either registered trademarks or trademarks of the Apache Software Foundation.",
+ },
+ algolia: {
+ apiKey: "79e72fedcf3719ba85c552f710ade8a3",
+ appId: "ZHVP417Y1Y",
+ indexName: "apache-apisix-website",
},
- "algolia": {
- "apiKey": "79e72fedcf3719ba85c552f710ade8a3",
- "appId": "ZHVP417Y1Y",
- "indexName": "apache-apisix-website"
- }
- }
-}
+ },
+ stylesheets: [
+ "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap",
+ ],
+};
diff --git a/website/package.json b/website/package.json
index 0bf1b5c..401229a 100644
--- a/website/package.json
+++ b/website/package.json
@@ -11,7 +11,9 @@
"deploy": "docusaurus deploy",
"docusaurus": "docusaurus"
},
- "devDependencies": {},
+ "devDependencies": {
+ "@svgr/webpack": "^5.5.0"
+ },
"dependencies": {
"@docusaurus/core": "2.0.0-alpha.70",
"@docusaurus/preset-classic": "2.0.0-alpha.70",
@@ -20,7 +22,11 @@
"react-dom": "^16.10.2"
},
"browserslist": {
- "production": [">0.5%", "not dead", "not op_mini all"],
+ "production": [
+ ">0.5%",
+ "not dead",
+ "not op_mini all"
+ ],
"development": [
"last 1 chrome version",
"last 1 firefox version",
diff --git a/website/src/assets/icons/github-logo.svg b/website/src/assets/icons/github-logo.svg
new file mode 100644
index 0000000..d0f0519
--- /dev/null
+++ b/website/src/assets/icons/github-logo.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2- [...]
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index 6b3fa92..72dbe8c 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -1,5 +1,5 @@
:root {
- --ifm-color-primary-lightest: rgb(228, 222, 222);;
+ --ifm-color-primary-lightest: rgb(228, 222, 222);
--ifm-color-primary-lighter: #d0312d;
--ifm-color-primary-light: #f8f8fa;
--ifm-color-primary: #b52b27;
@@ -7,27 +7,17 @@
--ifm-color-primary-dark: #a5a0a0;
--ifm-color-primary-darker: #9a2521;
--ifm-color-shadow--lw: #7f1e1b;
+
+ --color-primary: #df2d2d;
}
-.navbar a {
- color: var(--ifm-color-primary-lightest);
-}
-.footer.logo {
- width: 370;
- height: 64;
-}
-.footer {
- color: var(--ifm-color-primary-dark);
-}
-.button {
- margin-left: 10px;
+
+body {
+ font-family: "Inter", sans-serif;
}
+
div.inner {
color: var(--ifm-color-primary);
}
-.Learnhow {
- background: var(--ifm-color-primary-light);
- width: 100%;
-}
.image {
padding: 75px 10px 75px 75px;
height: 200;
@@ -36,24 +26,160 @@ div.inner {
.more-users {
padding-top: 75px;
}
-.logo {
- padding: 10px 30px 10px 30px;
+.product-showcase-section {
+ color: var(--ifm-color-primary);
+}
+
+.post-header {
+ padding-top: 50px;
+}
+.header {
+ padding-top: 50px;
+}
+
+/* home splash */
+.home-splash {
+ margin-top: 8px;
+}
+
+.home-splash .title {
+ font-size: 2.4rem;
+ color: black;
+ opacity: 0.92;
+}
+
+.home-splash .title.brand {
+ font-size: 2.9rem;
+ color: #df2d2d;
+}
+
+.home-splash .subtitle {
+ color: #000000;
+ opacity: 0.58;
+ font-size: 1.2rem;
+}
+
+.home-splash .button-wrapper {
+ margin-top: 28px;
+}
+
+/* showcase */
+.product-showcase-section {
+ color: var(--color-primary);
+}
+.showcase {
+ padding-bottom: 8rem;
+}
+
+.showcase .logos {
+ margin-top: 48px;
+}
+.showcase .logo {
+ margin: 0 12px;
+ padding: 8px 18px;
height: 50px;
+ border-radius: 8px;
+ background: white;
}
-.productShowcaseSection {
- color: var(--ifm-color-primary);
+
+/* learn how */
+.learn-how {
+ background: var(--ifm-color-primary-light);
+ width: 100%;
+ border-radius: 16px;
+}
+.learn-how .container {
+ margin-top: 36px;
+}
+.learn-how .hero__title {
+ font-weight: 700;
+ color: black;
+ opacity: 0.84;
+ font-size: 2.2rem;
+ margin-bottom: 10px;
+}
+
+/* button */
+.button {
+ margin: 0 10px;
+ padding: 8px 18px;
+ font-size: 18px;
+ font-weight: 600;
+ border-radius: 10px;
+ border: none;
+ background: #fee2e2;
+ color: #ef4444;
+ transition: all 0.3s;
+}
+.button:hover {
+ background: #fecaca;
+ color: #ef4444;
+}
+.button.github {
+ background: #111827;
+ color: white;
+ display: inline-flex;
+ align-items: center;
+}
+.button.github .github-logo {
+ height: 24px;
+ margin: 0 8px 1px 0px;
+}
+.button.github:hover {
+ background: #000;
+}
+.button-wrapper {
+ margin: 0 -10px;
+}
+.button.secondary {
+ background: #f3f4f6;
+ color: #6b7280;
+}
+.button.secondary:hover {
+ background: #e5e7eb;
+}
+a {
+ color: inherit;
+ cursor: pointer;
+}
+a:hover {
+ color: var(--color-primary);
}
-/*
-.footer .logo {
- width: 75px;
- height: 75px;
+/* footer */
+.footer__links .footer__title {
+ font-weight: 700;
+ font-size: 1.1rem;
+}
+.footer__links .footer__item a {
+ opacity: 0.86;
+}
+.footer__links a:hover {
+ opacity: 1;
+ text-decoration: none;
}
-*/
-.postHeader {
- padding-top: 50px;
+.footer__bottom {
+ margin-top: 36px;
}
-.Header {
- padding-top: 50px;
+.footer__bottom a[href^="https://www.apache.org/"]
+{
+ opacity: 1;
+}
+.footer__bottom a[href^="https://www.apache.org/"]:hover
+{
+ transform: scale(0.5);
+}
+.footer__bottom a[href^="https://www.apache.org/"] img
+{
+ margin-top: 0;
+ background: white;
+ padding: 8px 20px 6px 19px;
+ border-radius: 24px;
+}
+.footer__copyright {
+ font-size: 12px;
+ max-width: 680px;
+ margin: 0 auto;
+ opacity: 0.88;
}
diff --git a/website/src/pages/help.js b/website/src/pages/help.js
index 55bf733..ccb3633 100644
--- a/website/src/pages/help.js
+++ b/website/src/pages/help.js
@@ -1,16 +1,16 @@
-const React = require('react');
-import Layout from '@theme/Layout';
+const React = require("react");
+import Layout from "@theme/Layout";
function Help(props) {
- const { config: siteConfig, language = '' } = props;
+ const { config: siteConfig, language = "" } = props;
const { baseUrl, docsUrl } = siteConfig;
- const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
- const langPart = `${language ? `${language}/` : ''}`;
+ const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`;
+ const langPart = `${language ? `${language}/` : ""}`;
const docUrl = (doc) => `${baseUrl}${docsPart}${langPart}${doc}`;
return (
<div className="container">
<div className="row">
- <div className="postHeader">
+ <div className="post-header">
<h1>Need help?</h1>
</div>
</div>
@@ -19,24 +19,24 @@ function Help(props) {
</div>
<div className="row">
<div class="col col--4">
- <div className="Header">
+ <div className="header">
<h3>Browse Docs</h3>
</div>
<p>
- Learn more using the{' '}
+ Learn more using the{" "}
<a href="https://github.com/apache/apisix/tree/master/doc">
- documentation on this site.
+ documentation on this site.
</a>
</p>
</div>
<div class="col col--4">
- <div className="Header">
+ <div className="header">
<h3>Join the community</h3>
</div>
<p>Ask questions about the documentation and project</p>
</div>
<div class="col col--4">
- <div className="Header">
+ <div className="header">
<h3>Stay up to date</h3>
</div>
<p>Find out what's new with this project</p>
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 65c0b77..10893ce 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1,32 +1,38 @@
-const React = require('react');
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import Layout from '@theme/Layout';
-
+const React = require("react");
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Layout from "@theme/Layout";
+import GitHubLogo from "../assets/icons/github-logo.svg";
const Index = (props) => {
const { siteConfig } = useDocusaurusContext();
const HomeSplash = () => (
- <div className="hero text--center">
+ <div className="hero home-splash">
<div className="container">
<div className="inner">
<div className="padding-vert--md">
- <h1 className="hero__title">{siteConfig.title}</h1>
- <p className="hero__subtitle">{siteConfig.tagline}</p>
- <p className="hero__subtitle">{siteConfig.customFields.tagline2}</p>
+ <h1 className="title brand">Apache APISIX™</h1>
+ <h1 className="title">A Dynamic Cloud-Native API Gateway</h1>
+ <div className="subtitle">
+ 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.
+ </div>
</div>
- <div className="pluginWrapper buttonWrapper">
+ <div className="pluginWrapper button-wrapper">
<Link
to="https://github.com/apache/apisix"
- className="button button--outline button--primary"
+ className="button button--outline button--primary github"
>
+ <GitHubLogo className="github-logo" />
View on GitHub
</Link>
<Link
- to={useBaseUrl('/docs/downloads')}
- className="button button--outline button--primary"
+ to={useBaseUrl("downloads")}
+ className="button button--outline button--primary secondary"
>
Downloads
</Link>
@@ -37,7 +43,7 @@ const Index = (props) => {
);
const LearnHow = () => (
<div className="hero">
- <div className="Learnhow">
+ <div className="learn-how">
<div className="container">
<div className="row">
<div className="col col--7">
@@ -87,21 +93,23 @@ const Index = (props) => {
));
return (
- <div className="hero text--center">
+ <div className="hero text--center showcase">
<div className="container">
- <div className="productShowcaseSection">
+ <div className="product-showcase-section">
<h1>Who is Using This?</h1>
</div>
- <p>This project is used by all these folks</p>
- <div className="logos">{showcase}</div>
- <div className="more-users">
- <Link
- to= './Users'
- className="button button--primary button--outline "
+ <p>
+ This project is used by all these folks
+ <br />
+ Are you using this project?{" "}
+ <a
+ href="https://github.com/apache/apisix/blob/master/doc/powered-by.md"
+ target="_blank"
>
- <small>More {siteConfig.title} Users</small>
- </Link>
- </div>
+ <u>Add your company</u>
+ </a>
+ </p>
+ <div className="logos">{showcase}</div>
</div>
</div>
);
diff --git a/website/src/pages/users.js b/website/src/pages/users.js
index c8256db..3f22463 100644
--- a/website/src/pages/users.js
+++ b/website/src/pages/users.js
@@ -1,51 +1,52 @@
-const React = require('react');
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
+const React = require("react");
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
function Users() {
- const { siteConfig } = useDocusaurusContext();
+ const { siteConfig } = useDocusaurusContext();
- if ((siteConfig.customFields.users || []).length === 0) {
- return null;
- }
+ if ((siteConfig.customFields.users || []).length === 0) {
+ return null;
+ }
- const showcase = siteConfig.customFields.users
- .filter((user) => user.pinned)
- .map((user) => (
- <a href={user.infoLink} key={user.infoLink}>
- <img
- className="logo"
- src={user.image}
- alt={user.caption}
- title={user.caption} />
- </a>
- ));
+ const showcase = siteConfig.customFields.users
+ .filter((user) => user.pinned)
+ .map((user) => (
+ <a href={user.infoLink} key={user.infoLink}>
+ <img
+ className="logo"
+ src={user.image}
+ alt={user.caption}
+ title={user.caption}
+ />
+ </a>
+ ));
- return (
- <Layout>
- <div className="hero text--center">
- <div className="container">
- <div className="productShowcaseSection">
- <h1>Who is Using This?</h1>
- </div>
- <p>This project is used by many folks</p>
- <div className="logos">{showcase}</div>
- {siteConfig.customFields.repoUrl && (
- <React.Fragment>
- <p>Are you using this project?</p>
- <Link
- to="https://github.com/apache/apisix/blob/master/doc/powered-by.md"
- className="button button--primary button--outline "
- >
- ADD YOUR COMPANY
- </Link>
- </React.Fragment>
- )}
- </div>
- </div>
- </Layout>
- );
+ return (
+ <Layout>
+ <div className="hero text--center">
+ <div className="container">
+ <div className="product-showcase-section">
+ <h1>Who is Using This?</h1>
+ </div>
+ <p>This project is used by many folks</p>
+ <div className="logos">{showcase}</div>
+ {siteConfig.customFields.repoUrl && (
+ <React.Fragment>
+ <p>Are you using this project?</p>
+ <Link
+ to="https://github.com/apache/apisix/blob/master/doc/powered-by.md"
+ className="button button--primary button--outline "
+ >
+ ADD YOUR COMPANY
+ </Link>
+ </React.Fragment>
+ )}
+ </div>
+ </div>
+ </Layout>
+ );
}
export default Users;
diff --git a/website/webpack.config.js b/website/webpack.config.js
new file mode 100644
index 0000000..df1eff8
--- /dev/null
+++ b/website/webpack.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+ test: /\.svg$/,
+ use: ["@svgr/webpack"],
+};