docs: Upgrade vitepress

.web/docs/.vitepress/config.ts

@@ -3,11 +3,10 @@ import {defineConfig} from 'vitepress'
 import {
     discordLink,
     gitHubLink,
-    additionalTitle,
-    commitRef,
     editLink,
    projects
 } from '../shared'
+import {additionalTitle, commitRef} from "../shared/cloudflare";
 
 const ogUrl = 'https://connect.minekube.com'
 const ogImage = `${ogUrl}/og-image.png`
@@ -39,7 +38,7 @@ export default defineConfig({
             'script',
             {},
             `!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-            posthog.init('phc_h17apkvCV2aUlSQA4BB7WP7AmZHaU14AKnAe9f3ij5S',{api_host:'https://app.posthog.com'})`
+            posthog.init('phc_h17apkvCV2aUlSQA4BB7WP7AmZHaU14AKnAe9f3ij5S',{api_host:'https://ph.minekube.com'})`
         ]
     ],
 
@@ -81,6 +80,7 @@ export default defineConfig({
             {text: 'Quick Start', link: '/guide/quick-start'},
             {text: 'Downloads', link: '/guide/downloads'},
             {text: 'API', link: '/guide/api/'},
+            {text: 'Join Our Team', link: '/team'},
             projects,
         ],
 

.web/docs/.vitepress/theme/components/MeetTeam.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import {
+  VPTeamPage,
+  VPTeamPageTitle,
+  VPTeamPageSection,
+  VPTeamMembers,
+  DefaultTheme
+} from 'vitepress/theme';
+import {discordLink, gitHubLink} from "../../../shared";
+
+const teamSvg = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" version="1.1" id="Capa_1" width="800px" height="800px" viewBox="0 0 122.699 122.699" xml:space="preserve">
+<g>
+<circle cx="19.5" cy="12.2" r="12.1"/>
+<path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7   v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/>
+<circle cx="103.3" cy="12.2" r="12.1"/>
+<path d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24   h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/>
+<path d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3   c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/>
+<circle cx="61.4" cy="26" r="13.9"/>
+</g>
+</svg>
+`
+
+const core = [
+  {
+    avatar: 'https://www.github.com/minekube.png',
+    name: 'Join Our Core Team!',
+    title: "Checkout our Mission",
+    org: 'Minekube Team',
+    orgLink: 'team',
+    desc: `We're Hiring developers passionate about innovation. Shape cutting-edge products and services, contribute to thriving open source projects, and earn from it.`,
+    links: [
+      {icon: {svg: teamSvg}, link: 'team'},
+      {icon: 'discord', link: discordLink},
+    ]
+  },
+  {
+    avatar: 'https://www.github.com/robinbraemer.png',
+    name: 'Robin Brämer',
+    title: 'Creator',
+    org: 'Minekube',
+    orgLink: 'https://github.com/minekube',
+    desc: 'Independent open source developer, creator of Connect, Gate & Minekube Organization.',
+    links: [
+      {icon: 'github', link: 'https://github.com/robinbraemer'},
+    ],
+  },
+] satisfies DefaultTheme.TeamMember[]
+
+</script>
+
+<template>
+  <VPTeamPage>
+    <VPTeamPageTitle>
+      <template #title>Meet the Team</template>
+      <template #lead>
+        Minekube Open Source and Services thrive with guidance from an international team of contributors and a dedicated core team.
+      </template>
+    </VPTeamPageTitle>
+    <VPTeamMembers :members="core"/>
+  </VPTeamPage>
+</template>

.web/docs/.vitepress/theme/index.ts

@@ -1,11 +1,20 @@
-import Theme from 'vitepress/theme'
+import DefaultTheme from 'vitepress/theme'
+import type { Theme } from 'vitepress'
+import { h } from 'vue'
 import './styles/vars.css'
 import VPBadge from 'vitepress/dist/client/theme-default/components/VPBadge.vue'
+import MeetTeam from "./components/MeetTeam.vue";
 
 export default {
-  ...Theme,
+  extends: DefaultTheme,
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      'home-features-after': () => h(MeetTeam),
+    })
+  },
   enhanceApp({ app }) {
     // app.component('TextAndImage', SvgImage)
     app.component('VPBadge', VPBadge)
+    app.component('MeetTeam', MeetTeam)
   }
-}
+} satisfies Theme

.web/docs/.vitepress/theme/styles/vars.css

@@ -1,31 +1,95 @@
+/**
+ * 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: #F38020; /* orange */
-  --vp-c-brand-light: #F59A47; /* A lighter shade of orange */
-  --vp-c-brand-lighter: #F7B06E; /* An even lighter shade of orange */
-  --vp-c-brand-lightest: #F9C695; /* The lightest shade of orange */
-  --vp-c-brand-dark: #D26B1B; /* A darker shade of orange */
-  --vp-c-brand-darker: #B25816; /* The darkest shade of orange */
-  --vp-c-brand-dimm: rgba(243, 128, 32, 0.08); /* Dimmed orange */
+  --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: #D26B1B;
+  --vp-c-brand-2: #F38020;
+  --vp-c-brand-3: #F59A47;
+  --vp-c-brand-soft: rgba(243, 128, 32, 0.14);
+
+  --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);
+}
+
+.dark {
+  --vp-c-brand-1: #F59A47;
+  --vp-c-brand-2: #F38020;
+  --vp-c-brand-3: #D26B1B;
 }
 
 /**
  * Component: Button
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-button-brand-border: var(--vp-c-brand-light);
-  --vp-button-brand-text: var(--vp-c-text-dark-1);
-  --vp-button-brand-bg: var(--vp-c-brand);
-  --vp-button-brand-hover-border: var(--vp-c-brand-light);
-  --vp-button-brand-hover-text: var(--vp-c-text-dark-1);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
-  --vp-button-brand-active-border: var(--vp-c-brand-light);
-  --vp-button-brand-active-text: var(--vp-c-text-dark-1);
-  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --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-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
 }
 
 /**
@@ -38,16 +102,16 @@
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
-    var(--vp-c-brand) 30%,
+    var(--vp-c-brand-1) 30%,
     var(--my-purple)
   );
 
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
     var(--my-purple) 50%,
-    var(--vp-c-brand-light) 50%
+    #F59A47 50%
   );
-  --vp-home-hero-image-filter: blur(40px);
+  --vp-home-hero-image-filter: blur(44px);
 }
 
 @media (min-width: 640px) {
@@ -62,57 +126,10 @@
   }
 }
 
-/**
- * Component: Custom Block
- * -------------------------------------------------------------------------- */
-
-: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);
-}
-
 /**
  * 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;
+}

.web/docs/index.md

@@ -2,12 +2,13 @@
 layout: home
 
 title: Connect
-titleTemplate: Next Generation Frontend Tooling
+titleTemplate: Next Generation Minecraft Networks
 
 hero:
   name: Connect
-  text: Next Generation Minecraft Networks
-  tagline: Get your game servers in front of players instantly and link with the global Connect Network today!
+  text: The Minecraft Supercloud
+  tagline: 'Your global gateway to a DDoS-protected, developer-friendly cloud platform, free public domains for localhost and effortless server advertising on Connect Networks.'
+#  tagline: Get your game servers in front of players instantly and link with the global Connect Network today! Browse servers on minekube.net
   image:
     src: /minekube-logo.png
   actions:
@@ -25,22 +26,34 @@ hero:
       link: https://spigotmc.org/resources/connect.105486/
 
 features:
-  - icon: 🌐
-    title: Shared Minecraft Network
-    details: Securely connect to the open global Connect Network to advertise your game servers.
-  - icon: 💻
-    title: Public Local Host Server
-    details: Allow players to join your local host server through the Internet.
   - icon: ⚡️
     title: Advertise Your Server
     details: Get your server in front of players with organic traffic.
+    link: /guide/advertising
+    linkText: Advertising
+  - icon: 💻
+    title: Public Local Host Server
+    details: Allow friends to join your local host server through the Internet.
+    link: /guide/localhost
+    linkText: Run servers locally, play publicly
   - icon: ✨️
     title: Free Public Domain
     details: Every server using Connect gets a free domain.
+    link: /guide/domains
+    linkText: Domains
+  - icon: 🌐
+    title: Shared Minecraft Network
+    details: Securely connect to the open Connect Network to link and advertise your game servers.
+    link: /guide/#the-connect-network
+    linkText: The Connect Network
   - icon: 📦
     title: Simple Installation
     details: All you need is the Connect Plugin to link your game servers with the open Connect Network.
+    link: /guide/quick-start
+    linkText: Download the Plugin
   - icon: 🍀
     title: Equal Opportunity
-    details: Connect is a fair and equal opportunity platform that favours new and smaller servers too.
+    details: Connect is a fair and equal opportunity platform that favours new and smaller servers.
+    link: /guide/adoption-plan
+    linkText: Adoption Plan
 ---