feat: support edit this page & update styles

website/docusaurus.config.js

@@ -86,6 +86,15 @@ module.exports = {
           path: "docs/general",
           routeBasePath: "/docs/general",
           sidebarPath: require.resolve("./docs/general/sidebars.json"),
+          editUrl: function ({
+            locale,
+            version,
+            versionDocsDirPath,
+            docPath,
+            permalink,
+          }) {
+            return `https://github.com/apache/apisix-website/edit/master/website/docs/general/${docPath}`;
+          },
         },
         blog: {
           path: "blog",
@@ -112,6 +121,15 @@ module.exports = {
         path: "docs/apisix",
         routeBasePath: "/docs/apisix",
         sidebarPath: require.resolve("./docs/apisix/sidebars.json"),
+        editUrl: function ({
+          locale,
+          version,
+          versionDocsDirPath,
+          docPath,
+          permalink,
+        }) {
+          return `https://github.com/apache/apisix/edit/master/docs/${locale}/latest/${docPath}`;
+        },
       },
     ],
     [
@@ -121,6 +139,15 @@ module.exports = {
         path: "docs/apisix-dashboard",
         routeBasePath: "/docs/dashboard",
         sidebarPath: require.resolve("./docs/apisix-dashboard/sidebars.json"),
+        editUrl: function ({
+          locale,
+          version,
+          versionDocsDirPath,
+          docPath,
+          permalink,
+        }) {
+          return `https://github.com/apache/apisix-dashboard/edit/master/docs/${locale}/latest/${docPath}`;
+        },
       },
     ],
     [
@@ -132,6 +159,15 @@ module.exports = {
         sidebarPath: require.resolve(
           "./docs/apisix-ingress-controller/sidebars.json"
         ),
+        editUrl: function ({
+          locale,
+          version,
+          versionDocsDirPath,
+          docPath,
+          permalink,
+        }) {
+          return `https://github.com/apache/apisix-ingress-controller/edit/master/docs/${locale}/latest/${docPath}`;
+        },
       },
     ],
   ],
@@ -147,10 +183,6 @@ module.exports = {
           position: "right",
           to: "/docs",
           items: [
-            {
-              label: "General",
-              to: "/docs/general/security",
-            },
             {
               label: "APISIX™️",
               to: "/docs/apisix/architecture-design",
@@ -161,7 +193,11 @@ module.exports = {
             },
             {
               label: "APISIX™️ Ingress Controller",
-              to: "https://apisix.apache.org/docs/ingress-controller/design/",
+              to: "/docs/ingress-controller/design/",
+            },
+            {
+              label: "General",
+              to: "/docs/general/security",
             },
           ],
         },

website/src/css/customTheme.css

@@ -51,13 +51,19 @@ header h2 {
   color: var(--color-primary);
 }
 
+@media only screen and (max-width: 414px) {
+  .hide-on-mobile {
+    display: none;
+  }
+}
+
 /* navbar */
 .navbar__link:hover,
 .navbar__link--active {
   color: var(--color-primary);
 }
 
-.navbar__title{
+.navbar__title {
   font-size: 18px;
   height: 30px;
 }
@@ -75,23 +81,24 @@ header h2 {
 }
 
 .home-splash .title {
-  font-size: 4.0rem;
-  color: #df2d2d;
-  opacity: 0.92;
+  font-size: 5rem;
+  font-weight: 800;
+  color: #101827;
 }
-@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+@media only screen and (min-device-width: 375px) and (max-device-width: 736px) {
   .home-splash .title {
-    font-size: 2.9rem;
-    color: #df2d2d;
-    opacity: 0.92;
+    font-size: 3.52rem;
+  }
+}
+
+@media only screen and (min-device-width: 320px) and (max-width: 375px) {
+  .home-splash .title {
+    font-size: 3rem;
   }
 }
 
 .home-splash .title.slogan .feature-word {
-  background: var(--color-secondary-bg);
-  border-radius: 8px;
-  padding: 2px 10px;
-  overflow: hidden;
+  color: var(--ifm-color-primary);
 }
 
 .home-splash .title.slogan .feature-word span {
@@ -285,7 +292,7 @@ header h2 {
 /* button */
 .button {
   margin: 0 10px;
-  padding: 8px 18px;
+  padding: 12px 24px;
   font-size: 18px;
   font-weight: 600;
   border-radius: 10px;
@@ -299,15 +306,14 @@ header h2 {
   color: #ef4444;
 }
 .button.github {
-  background: #111827;
+  background: #101827;
   color: white;
   display: inline-flex;
   align-items: center;
-  margin-bottom: 15px;
-  padding: 12px;
   justify-content: center;
-  width: 224px;
-
+  border: 1px solid #101827;
+  padding: 11px 23px;
+  margin-bottom: 1rem;
 }
 .button.github .github-logo {
   height: 24px;
@@ -321,17 +327,26 @@ header h2 {
 }
 .button.secondary {
   background: #f3f4f6;
-  color: var(--color-secondary);
+  color: #1f2937;
   border: 1px solid #d1d5db;
-  box-sizing: border-box;
-  margin-bottom: 15px;
-  width: 224px;
-  padding: 12px;
-  justify-content: center;
+  padding: 11px 23px;
+  margin-bottom: 1rem;
 }
 .button.secondary:hover {
   background: #e5e7eb;
 }
+@media only screen and (max-width: 414px) {
+  .button {
+    margin: 0;
+  }
+  .button.secondary,
+  .button.github {
+    width: 100%;
+  }
+  .button-wrapper {
+    margin: 0;
+  }
+}
 a {
   color: inherit;
   cursor: pointer;

website/src/pages/index.js

@@ -44,17 +44,12 @@ const HomeSplash = () => {
                   timeout={2000}
                   classNames="feature-word-text"
                   appear={true}
-                  onEnter={(el) => {}}
-                  onEntering={(el) => {}}
-                  onEntered={(el) => {}}
-                  onExit={(el) => {}}
-                  onExiting={(el) => {}}
-                  onExited={(el) => {}}
                 >
                   <span>{featureWords[featureWordIndex]}</span>
                 </CSSTransition>
               </span>
-              &nbsp; Cloud-Native API Gateway
+              <span className="hide-on-mobile">&nbsp;</span>Cloud-Native API
+              Gateway
             </h1>
             <div className="subtitle">
               Provides rich traffic management features such as load balancing,
@@ -139,7 +134,7 @@ const Showcase = () => {
         <p>
           This project is used by all these folks
           <br />
-          Are you using this project?{" "}
+          Are you using this project?
           <a
             href="https://github.com/apache/apisix/blob/master/docs/en/latest/powered-by.md"
             target="_blank"