docs: include Helm charts and Docker to documents page (#342)

website/docusaurus.config.js

@@ -14,13 +14,72 @@ module.exports = {
     events: require("./static/data/events.json"),
     repoUrl: "https://github.com/apache/apisix",
     docsUrl: "",
+    docs: [
+      {
+        name: "APISIX™",
+        nameInParamCase: "apisix",
+        description: "A dynamic, real-time, high-performance API gateway.",
+        shape: "triangle",
+        color: "#e8433e",
+        githubRepo: "apache/apisix",
+        version: "2.5",
+        releaseDate: "2021-04-05",
+        firstDocPath: "/getting-started",
+      },
+      {
+        name: "APISIX™ Dashboard",
+        nameInParamCase: "dashboard",
+        description:
+          "Designed to make it as easy as possible for users to operate Apache APISIX through a frontend interface.",
+        shape: "square",
+        color: "#10B981",
+        githubRepo: "apache/apisix-dashboard",
+        version: "2.6",
+        releaseDate: "2021-04-22",
+        firstDocPath: "/USER_GUIDE",
+      },
+      {
+        name: "APISIX™ Ingress Controller",
+        nameInParamCase: "ingress-controller",
+        description: "An Apache APISIX control plane component.",
+        shape: "hexagon",
+        color: "#2563EB",
+        githubRepo: "apache/apisix-ingress-controller",
+        version: "0.5.0",
+        releaseDate: "2021-04-11",
+        firstDocPath: "/getting-started",
+      },
+      {
+        name: "APISIX™ Helm Charts",
+        nameInParamCase: "helm-chart",
+        description: "An Apache APISIX Helm Charts provide the installation of Apache APISIX components for kubernetes.",
+        shape: "pentagon",
+        color: "#C71585",
+        githubRepo: "apache/apisix-helm-chart",
+        version: "0.4.0",
+        releaseDate: "2021-03-12",
+        firstDocPath: "/apisix",
+      },
+      {
+        name: "APISIX™ Docker",
+        nameInParamCase: "docker",
+        description: "Docker tooling for Apache APISIX.",
+        shape: "diamond",
+        color: "#FFD700",
+        githubRepo: "apache/apisix-docker",
+        version: "1.0.0",
+        releaseDate: "2020-12-1",
+        firstDocPath: "/build",
+      }
+    ],
+
     downloads: [
       {
         name: "APISIX™",
         nameInParamCase: "apisix",
         description: "A dynamic, real-time, high-performance API gateway.",
         shape: "triangle",
-        color: "var(--ifm-color-primary)",
+        color: "#e8433e",
         githubRepo: "apache/apisix",
         version: "2.5",
         releaseDate: "2021-04-05",

website/src/pages/docs.js

@@ -7,6 +7,8 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import IconTriangle from "../assets/icons/triangle.svg";
 import IconSquare from "../assets/icons/square.svg";
 import IconHexagon from "../assets/icons/hexagon.svg";
+import IconPentagon from "../assets/icons/pentagon.svg";
+import IconDiamond from "../assets/icons/diamond.svg";
 
 const Page = styled.div`
   max-width: var(--ifm-container-width);
@@ -113,6 +115,10 @@ const ProjectCard = (props) => {
   const shapeComponent =
     shape === "triangle" ? (
       <IconTriangle />
+    ) : shape === "pentagon" ? (
+      <IconPentagon />
+    ) : shape === "diamond" ? (
+      <IconDiamond />
     ) : shape === "square" ? (
       <IconSquare />
     ) : (
@@ -136,10 +142,10 @@ const ProjectCard = (props) => {
 
 export default (props) => {
   const { siteConfig } = useDocusaurusContext();
-  if (!(siteConfig.customFields.downloads || []).length) {
+  if (!(siteConfig.customFields.docs || []).length) {
     return null;
   }
-  const projects = siteConfig.customFields.downloads.map((project) => {
+  const projects = siteConfig.customFields.docs.map((project) => {
     return <ProjectCard key={project.name} {...project} />;
   });