docs: Improve

minekube · Dec 1, 2023 · f632bf7 · f632bf7
1 parent f062d4c
commit f632bf7
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 61 deletions.
diff --git a/.web/docs/.vitepress/config.ts b/.web/docs/.vitepress/config.ts
@@ -10,6 +10,7 @@ const ogDescription = 'Next Generation Minecraft Proxy'
 export default defineConfig({
     title: `Gate Proxy${additionalTitle}`,
     description: ogDescription,
+    appearance: 'dark',
 
     head: [
         ['link', {rel: 'icon', type: 'image/png', href: '/favicon.png'}],
@@ -50,10 +51,13 @@ export default defineConfig({
             {icon: 'github', link: `${gitHubLink}/gate`}
         ],
 
-        algolia: {
-            appId: 'CUJMPRQVZJ',
-            apiKey: 'f3a1d3d48a15f78e39d6401b86318ed7',
-            indexName: 'gate-minekube',
+        search: {
+            provider: 'algolia',
+            options: {
+                appId: 'CUJMPRQVZJ',
+                apiKey: 'f3a1d3d48a15f78e39d6401b86318ed7',
+                indexName: 'gate-minekube',
+            }
         },
 
         // carbonAds: {

diff --git a/.web/docs/.vitepress/theme/styles/vars.css b/.web/docs/.vitepress/theme/styles/vars.css
@@ -1,31 +1,89 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
 /**
  * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
-:root {
-  --vp-c-brand: #646cff;
-  --vp-c-brand-light: #747bff;
-  --vp-c-brand-lighter: #9499ff;
-  --vp-c-brand-lightest: #bcc0ff;
-  --vp-c-brand-dark: #535bf2;
-  --vp-c-brand-darker: #454ce1;
-  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+ :root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
 }
 
 /**
  * Component: Button
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-border: transparent;
   --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand);
-  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
   --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
-  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
   --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
 }
 
 /**
@@ -45,7 +103,7 @@
     #bd34fe 50%,
     #47caff 50%
   );
-  --vp-home-hero-image-filter: blur(40px);
+  --vp-home-hero-image-filter: blur(44px);
 }
 
 @media (min-width: 640px) {
@@ -56,7 +114,7 @@
 
 @media (min-width: 960px) {
   :root {
-    --vp-home-hero-image-filter: blur(72px);
+    --vp-home-hero-image-filter: blur(68px);
   }
 }
 
@@ -65,52 +123,16 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-custom-block-tip-border: var(--vp-c-brand);
-  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
-  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
-}
-
-.dark {
-  --vp-custom-block-tip-border: var(--vp-c-brand);
-  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
-  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
 }
 
 /**
  * Component: Algolia
  * -------------------------------------------------------------------------- */
 
 .DocSearch {
-  --docsearch-primary-color: var(--vp-c-brand) !important;
-}
-
-/**
- * VitePress: Custom fix
- * -------------------------------------------------------------------------- */
-
-/*
-  Use lighter colors for links in dark mode for a11y.
-  Also specify some classes twice to have higher specificity
-  over scoped class data attribute.
-*/
-.dark .vp-doc a,
-.dark .vp-doc a > code,
-.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
-.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
-.dark .link.link:hover,
-.dark .link.link.active,
-.dark .edit-link-button.edit-link-button,
-.dark .pager-link .title {
-  color: var(--vp-c-brand-lighter);
-}
-
-.dark .vp-doc a:hover,
-.dark .vp-doc a > code:hover {
-  color: var(--vp-c-brand-lightest);
-  opacity: 1;
-}
-
-/* Transition by color instead of opacity */
-.dark .vp-doc .custom-block a {
-  transition: color 0.25s;
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
diff --git a/.web/docs/index.md b/.web/docs/index.md
@@ -28,21 +28,33 @@ features:
   - icon: 📦
     title: Fewer moving parts
     details: Run Gate's tiny executable practically anywhere or in a container - No Java runtime needed!
+    link: /guide/install/
+    linkText: Install
   - icon: 💻
     title: Developer Friendly
     details: Gate is written in Go, a modern programming language that is easy to learn and
              has a great ecosystem of tools and libraries.
+    link: /developers/
+    linkText: Developers
   - icon: 🖧
     title: Supports Connect out of the box
     details: Get your public or local host proxy network in front of players with organic traffic.
+    link: /guide/connect
+    linkText: Enable Connect
   - icon: ✨️
     title: Multi-Version Support
     details: Gate supports Minecraft server versions 1.8 to latest and is constantly updated to support
              new versions.
+    link: /guide/compatibility
+    linkText: Compatibility
   - icon: 🪄
     title: Lite Mode
     details: Gate Lite is an ultra-thin lightweight Minecraft reverse proxy for host based connection routing.
+    link: /guide/lite
+    linkText: Lite Mode
   - icon: ⚡️
     title: High Performance
     details: Gate is designed to be fast and efficient. A proxy that can handle thousands of players with ease. 
+    link: /guide/why
+    linkText: Why Gate?
 ---