docs: update the architecture diagram

website/src/css/customTheme.css

@@ -3,14 +3,49 @@
   --ifm-color-primary-lighter: #d0312d;
   --ifm-color-primary-light: #f8f8fa;
   --ifm-color-primary: #e8433e;
-  --ifm-color-dark: #000000;
+  --ifm-color-dark: #000;
   --ifm-color-primary-dark: #a5a0a0;
   --ifm-color-primary-darker: #9a2521;
   --ifm-color-shadow--lw: #7f1e1b;
-
+  --color-title: #101827;
+  --color-github-button: #101827;
+  --color-github-button-hover: #000;
   --color-primary: #e8433e;
+  --color-subtitle: #000;
   --color-secondary: #4b5563;
   --color-secondary-bg: #f3f4f6;
+  --color-secondary-text: #444952;
+  --color-border: #eee;
+  --color-downloads-subtitle: #374051;
+  --color-downloads-leftsidelinks: #4b5563;
+  --color-downloads-leftsidelink-hover: #111827;
+  --color-downloads-rightside-versioninfo: #6b7280;
+  --color-downloads-rightside-versioninfo-span: #374151;
+  --color-team-repocard: #374151;
+  --color-team-repocard-hover: #111827;
+  --color-docs-subtitle: #374151;
+  --color-docs-versioninfo: #4b5563;
+  --color-help-subtitle: #6b7280;
+}
+
+html[data-theme='dark'] {
+  --color-secondary-bg: #121212;
+  --ifm-color-dark: #b0b0b0;
+  --color-title: #f0f0f0;
+  --color-subtitle: #f0f0f0;
+  --color-github-button: #121212;
+  --color-secondary-text: #b0b0b0;
+  --color-border: #b0b0b0;
+  --color-downloads-subtitle: #f0f0f0;
+  --color-downloads-leftsidelinks: #909397;
+  --color-downloads-leftsidelink-hover: #f0f0f0;
+  --color-downloads-rightside-versioninfo: #f0f0f0;
+  --color-downloads-rightside-versioninfo-span: #909397;
+  --color-team-repocard: #f0f0f0;
+  --color-team-repocard-hover: #909397;
+  --color-docs-subtitle: #f0f0f0;
+  --color-docs-versioninfo: #b0b0b0;
+  --color-help-subtitle: #f0f0f0;
 }
 
 body {
@@ -83,7 +118,7 @@ header h2 {
 .home-splash .title {
   font-size: 5rem;
   font-weight: 800;
-  color: #101827;
+  color: var(--color-title);
 }
 @media only screen and (min-device-width: 376px) and (max-device-width: 736px) {
   .home-splash .title {
@@ -106,14 +141,14 @@ header h2 {
 }
 
 .home-splash .subtitle {
-  color: #000000;
+  color: var(--color-subtitle);
   opacity: 0.58;
   font-size: 1.2rem;
   width: 65%;
 }
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
   .home-splash .subtitle {
-    color: #000000;
+    color: var(--ifm-color-dark);
     opacity: 0.58;
     font-size: 1.2rem;
     width: 100%;
@@ -213,7 +248,7 @@ header h2 {
   flex-direction: column;
   justify-content: space-between;
   text-align: left;
-  border: 1px solid #eee;
+  border: 1px solid var(--color-border);
   margin: 8px;
   padding: 8px 18px;
   border-radius: 6px;
@@ -231,7 +266,7 @@ header h2 {
 }
 .events-section .event-item .event-title {
   font-weight: 500;
-  color: #000;
+  color: var(--color-subtitle);
   opacity: 0.88;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -240,14 +275,14 @@ header h2 {
   transition: all 0.3s;
 }
 .events-section .event-item .event-publish-time {
-  color: #000;
+  color: var(--color-subtitle);
   opacity: 0.58;
   font-size: 12px;
 }
 .events-section .event-item .event-read-button {
   margin-top: 16px;
   font-weight: 500;
-  color: #000;
+  color: var(--color-subtitle);
   opacity: 0.58;
   font-size: 12px;
   transition: all 0.3s;
@@ -284,11 +319,14 @@ header h2 {
 }
 .learn-how .hero__title {
   font-weight: 700;
-  color: black;
+  color: var(--color-subtitle);
   opacity: 0.84;
   font-size: 2.2rem;
   margin-bottom: 10px;
 }
+.learn-how .hero__subtitle{
+  color: var(--color-secondary-text);
+}
 
 /* button */
 .button {
@@ -307,7 +345,7 @@ header h2 {
   color: #ef4444;
 }
 .button.github {
-  background: #101827;
+  background: var(--color-github-button);
   color: white;
   display: inline-flex;
   align-items: center;
@@ -321,7 +359,7 @@ header h2 {
   margin: 0 12px 1px 0px;
 }
 .button.github:hover {
-  background: #000;
+  background: var(--color-github-button-hover);
 }
 .button-wrapper {
   margin: 0 -10px;
@@ -546,14 +584,14 @@ a:hover {
   padding: 5px 30px;
   border-style: solid;
   border-radius: 9px;
-  background: #111827;
+  background: var(--color-github-button);
   color: white;
   margin: 4px;
   text-decoration: none;
   transition: all 0.3s;
 }
 .news-button:hover {
-  background: black;
+  background: var(--color-github-button-hover);
   color: white;
   text-decoration: none;
 }
@@ -566,3 +604,43 @@ a:hover {
   color: var(--color-primary);
   text-align: center;
 }
+
+.downloads-subtitle {
+  color: var(--color-downloads-subtitle);
+}
+
+.downloads-leftsidelinks {
+  color: var(--color-downloads-leftsidelinks);
+}
+
+.downloads-leftsidelink:hover {
+  color: var(--color-downloads-leftsidelink-hover);
+}
+
+.downloads-versioninfo {
+  color: var(--color-downloads-rightside-versioninfo);
+}
+
+.downloads-versioninfo-span {
+  color: var(--color-downloads-rightside-versioninfo-span)
+}
+
+.team-repocard {
+  color: var(--color-team-repocard)
+}
+
+.team-repocard:hover {
+  color: var(--color-team-repocard-hover);
+}
+
+.docs-subtitle {
+  color: var(--color-docs-subtitle);
+}
+
+.docs-versioninfo {
+  color: var(--color-docs-versioninfo);
+}
+
+.help-page .card p {
+  color: var(--color-help-subtitle);
+}

website/src/pages/docs.js

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import "../css/customTheme.css";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
@@ -70,7 +71,6 @@ const Title = styled.div`
   }
 `;
 const Description = styled.div`
-  color: #374151;
   font-size: 1rem;
   margin-top: 0px;
   @media (max-width: 600px) {
@@ -94,7 +94,6 @@ const VersionInfo = styled.div`
   display: inline-flex;
   font-size: 1rem;
   margin-top: 1rem;
-  color: #4b5563;
   span {
     font-weight: 500;
   }
@@ -126,8 +125,8 @@ const ProjectCard = (props) => {
         <ShapeBeforeTitle color={color}>{shapeComponent}</ShapeBeforeTitle>
         {name}
       </Title>
-      <Description>{description}</Description>
-      <VersionInfo>
+      <Description className="docs-subtitle">{description}</Description>
+      <VersionInfo className="docs-versioninfo">
         Latest version&nbsp;<span>{version}</span>&nbsp;released at&nbsp;
         <span>{releaseDate}</span>
       </VersionInfo>

website/src/pages/downloads/ProjectCard.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import styled from "styled-components";
 import useOutsideClick from "../../hooks/useOutsideClick";
-
+import "../../css/customTheme.css";
 import IconInfo from "../../assets/icons/info.svg";
 import IconStar from "../../assets/icons/star.svg";
 import IconDocumentText from "../../assets/icons/document-text.svg";
@@ -68,23 +68,26 @@ const ProjectCard = (props) => {
           <ShapeBeforeTitle color={color}>{shapeComponent}</ShapeBeforeTitle>
           {name}
         </Title>
-        <Description>{description}</Description>
-        <LeftSideLinks>
+        <Description className="downloads-subtitle">{description}</Description>
+        <LeftSideLinks className="downloads-leftsidelinks">
           <LeftSideLink
+            className="downloads-leftsidelink"
             href={`https://github.com/${githubRepo}`}
             target="_blank"
             title="Stars"
           >
             <IconStar /> {repoStats.stars}
           </LeftSideLink>
           <LeftSideLink
+            className="downloads-leftsidelink"
             href={`https://github.com/${githubRepo}/issues`}
             target="_blank"
             title="Issues"
           >
             <IconInfo /> {repoStats.issues}
           </LeftSideLink>
           <LeftSideLink
+            className="downloads-leftsidelink"
             href={`https://github.com/${githubRepo}/blob/master/CHANGELOG.md`}
             target="_blank"
           >
@@ -93,10 +96,10 @@ const ProjectCard = (props) => {
         </LeftSideLinks>
       </LeftSide>
       <RightSide>
-        <VersionInfo>
-          Latest Version · <span>{version}</span>
+        <VersionInfo className="downloads-versioninfo">
+          Latest Version · <span className="downloads-versioninfo-span">{version}</span>
           <br />
-          Release Date · <span>{releaseDate}</span>
+          Release Date · <span className="downloads-versioninfo-span">{releaseDate}</span>
         </VersionInfo>
         <div>
           <Button
@@ -185,7 +188,6 @@ const Title = styled.a`
   }
 `;
 const Description = styled.div`
-  color: #374151;
   font-size: 1.2rem;
   margin-top: 0px;
   @media (max-width: 600px) {
@@ -208,7 +210,7 @@ const ShapeBeforeTitle = styled.span`
 const LeftSideLinks = styled.div`
   display: inline-flex;
   font-size: 1rem;
-  color: #4b5563;
+
   margin-top: 24px;
   & svg {
     height: 1rem;
@@ -224,7 +226,6 @@ const LeftSideLink = styled.a`
   transition: all 0.3s;
   color: inherit;
   &:hover {
-    color: #111827;
     text-decoration: none;
   }
 `;
@@ -294,11 +295,9 @@ const DropdownItem = styled.a`
   }
 `;
 const VersionInfo = styled.div`
-  color: #6b7280;
   text-align: right;
   font-size: 0.9rem;
   span {
-    color: #374151;
     font-weight: 500;
   }
   @media (max-width: 600px) {

website/src/pages/help.js

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import "../css/customTheme.css"
 import Layout from "@theme/Layout";
 import ChevronRight from "../assets/icons/chevron-right.svg";
 

website/src/pages/index.js

@@ -102,7 +102,7 @@ const LearnHow = () => (
           <div className="col">
             <img
               className="image"
-              src="https://github.com/apache/apisix/blob/master/docs/assets/images/apisix.png?raw=true"
+              src="https://user-images.githubusercontent.com/40708551/114739080-323cc300-9d66-11eb-839a-f1f7331b9e8b.png"
               align="right"
               alt="apisix-description"
             />

website/src/pages/team.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import GitHubLogo from "../assets/icons/github-logo.svg";
-
+import "../css/customTheme.css";
 import IconCode from "../assets/icons/code.svg";
 import IconStar from "../assets/icons/star.svg";
 import IconDatabase from "../assets/icons/database.svg";
@@ -99,14 +99,11 @@ const RepoCard = styled.a`
   padding: 1rem;
   margin: 8px;
   cursor: pointer;
-  color: #374151;
   transition: all 0.3s;
 
   &:hover {
     opacity: 0.98;
-    color: inherit;
     text-decoration: none;
-    color: #111827;
   }
 
   svg {
@@ -273,6 +270,7 @@ function Team(props) {
   const repoComponents = siteConfig.customFields.allRepos.map((repo) => {
     return (
       <RepoCard
+        className="team-repocard"
         href={`https://github.com/${repo}/graphs/contributors`}
         target="_blank"
         key={repo}