Refresh Connect Landing page and Docs (#39)

minekube · Jan 18, 2024 · e9571ee · e9571ee
1 parent 652dbc7
commit e9571ee
Show file tree

Hide file tree

Showing 31 changed files with 1,405 additions and 101 deletions.
diff --git a/.web/docs/.vitepress/config.ts b/.web/docs/.vitepress/config.ts
@@ -1,11 +1,6 @@
 import {defineConfig} from 'vitepress'
 
-import {
-    discordLink,
-    gitHubLink,
-    editLink,
-   projects
-} from '../shared'
+import {discordLink, editLink, gitHubLink, projects} from '../shared'
 import {additionalTitle, commitRef} from "../shared/cloudflare";
 
 const ogUrl = 'https://connect.minekube.com'
@@ -14,7 +9,7 @@ const ogTitle = 'Minekube Connect'
 const ogDescription = 'Next Generation Minecraft Networks'
 
 export default defineConfig({
-    title: `Connect${additionalTitle}`,
+    title: `Minekube Connect${additionalTitle}`,
     description: ogDescription,
     appearance: 'dark',
 
@@ -54,7 +49,15 @@ export default defineConfig({
 
         socialLinks: [
             {icon: 'discord', link: discordLink},
-            {icon: 'github', link: `${gitHubLink}/connect-java`}
+            {icon: 'github', link: `${gitHubLink}/connect-java`},
+            {icon: 'twitter', link: 'https://x.com/minekube'},
+            {
+                icon: {
+                    svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>'
+                },
+                link: 'https://app.minekube.com',
+                ariaLabel: 'Dashboard'
+            },
         ],
 
         search: {
@@ -79,10 +82,10 @@ export default defineConfig({
         nav: [
             {text: 'Guide', link: '/guide/'},
             {text: 'Quick Start', link: '/guide/quick-start'},
-            {text: 'Downloads', link: '/guide/downloads'},
+            {text: 'Connectors', link: '/guide/connectors/'},
             {text: 'API', link: '/guide/api/'},
-            {text: 'Join Our Team', link: '/team'},
-            projects,
+            {text: 'Join the Team', link: '/team'},
+            ...projects,
         ],
 
         sidebar: {
@@ -92,16 +95,20 @@ export default defineConfig({
                     items: [
                         {text: 'Introduction', link: '/guide/'},
                         {text: 'Quick Start', link: '/guide/quick-start'},
-                        {text: 'Why', link: '/guide/why'},
                     ]
                 },
+                {
+                    text: 'Connectors',
+                    items: [
+                        {text: 'Overview', link: '/guide/connectors/'},
+                        {text: 'Gate Proxy', link: '/guide/connectors/gate'},
+                        {text: 'Java Plugin', link: '/guide/connectors/plugin'},
+                    ]
+                },
+                {text: 'AuthSession API', link: '/guide/auth-api'},
                 {
                     text: 'Guide',
                     items: [
-                        {
-                            text: 'Downloads',
-                            link: '/guide/downloads'
-                        },
                         {
                             text: 'Joining Servers',
                             link: '/guide/joining'
@@ -110,10 +117,6 @@ export default defineConfig({
                             text: 'Public Localhost',
                             link: '/guide/localhost'
                         },
-                        {
-                            text: 'Advertising Servers',
-                            link: '/guide/advertising'
-                        },
                         {
                             text: 'Endpoint Domains',
                             link: '/guide/domains'
@@ -130,6 +133,10 @@ export default defineConfig({
                             text: 'DDoS & Bot Protection',
                             link: '/guide/protections'
                         },
+                        {
+                            text: 'Advertising Servers',
+                            link: '/guide/advertising'
+                        },
                     ]
                 },
                 {
@@ -172,6 +179,7 @@ export default defineConfig({
                             text: 'Development Roadmap',
                             link: '/guide/roadmap'
                         },
+                        {text: 'Why', link: '/guide/why'},
                     ]
                 },
                 // {

diff --git a/.web/docs/.vitepress/theme/components/Landing.vue b/.web/docs/.vitepress/theme/components/Landing.vue
@@ -0,0 +1,185 @@
+<script setup>
+
+</script>
+
+<template>
+
+
+  <div class="">
+
+    <div class="py-24 sm:py-32">
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:text-center">
+          <h2 class="text-base font-semibold leading-7 text-[--vp-c-brand-2]">Connect securely · Deploy faster</h2>
+          <p class="mt-2 text-3xl font-bold tracking-tight text-[--vp-c-text-1] sm:text-4xl">We change the way
+            developers build Minecraft networks</p>
+          <p class="mt-6 text-lg leading-8 text-[--vp-c-text-2]">
+            Minekube Connect is a cloud-native Minecraft TCP edge network, built on top of our open source Gate project.
+            It's the Cloudflare for Minecraft.
+          </p>
+        </div>
+        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
+          <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
+            <div class="relative pl-16">
+              <dt class="text-base font-semibold leading-7 text-[--vp-c-text-1]">
+                <div
+                    class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-[--vp-c-brand-2]">
+                  <svg class="h-6 w-6 text-white lucide lucide-radio" fill="none" stroke="currentColor" stroke-linecap="round"
+                       stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
+                       xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/>
+                    <path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/>
+                    <circle cx="12" cy="12" r="2"/>
+                    <path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/>
+                    <path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/>
+                  </svg>
+                </div>
+                Minekube Connect
+              </dt>
+              <dd class="mt-2 text-base leading-7 text-[--vp-c-text-2]">Self-host your Connector, we manage the
+                Superproxy infrastructure.
+              </dd>
+            </div>
+            <div class="relative pl-16">
+              <dt class="text-base font-semibold leading-7 text-[--vp-c-text-1]">
+                <div
+                    class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-[--vp-c-brand-2]">
+                  <svg class="lucide lucide-gamepad-2 h-6 w-6 text-white" fill="none" stroke="currentColor"
+                       stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+                    <line x1="6" x2="10" y1="11" y2="11"/>
+                    <line x1="8" x2="8" y1="9" y2="13"/>
+                    <line x1="15" x2="15.01" y1="12" y2="12"/>
+                    <line x1="18" x2="18.01" y1="10" y2="10"/>
+                    <path
+                        d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/>
+                  </svg>
+                </div>
+                Minekube Games
+              </dt>
+              <dd class="mt-2 text-base leading-7 text-[--vp-c-text-2]">You create the game experience, we bring the
+                players and infrastructure. Matchmaking and scale on demand. (Coming Soon)
+              </dd>
+            </div>
+            <div class="relative pl-16">
+              <dt class="text-base font-semibold leading-7 text-[--vp-c-text-1]">
+                <div
+                    class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-[--vp-c-brand-2]">
+                  <svg class="h-6 w-6 text-white lucide lucide-area-chart" fill="none" stroke="currentColor" stroke-linecap="round"
+                       stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
+                       xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3 3v18h18"/>
+                    <path d="M7 12v5h12V8l-5 5-4-4Z"/>
+                  </svg>
+                </div>
+                Minekube Analytics
+              </dt>
+              <dd class="mt-2 text-base leading-7 text-[--vp-c-text-2]">
+                Get rich metrics and find insights about your players like, so you can anticipate what players want to
+                play next. (Coming Soon)
+              </dd>
+            </div>
+            <div class="relative pl-16">
+              <dt class="text-base font-semibold leading-7 text-[--vp-c-text-1]">
+                <div
+                    class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-[--vp-c-brand-2]">
+                  <svg class="h-6 w-6 text-white lucide lucide-blocks" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                       stroke-width="2" viewBox="0 0 24 24">
+                    <rect height="7" rx="1" width="7" x="14" y="3"/>
+                    <path
+                        d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3"/>
+                  </svg>
+                </div>
+                Minekube Developer Platform
+              </dt>
+              <dd class="mt-2 text-base leading-7 text-[--vp-c-text-2]">
+                Coming Soon: Search Browser, Reviews & Votes, Marketplace, Ads
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="overflow-hidden py-24 sm:py-32">
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div
+            class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+          <div class="lg:pr-8 lg:pt-4">
+            <div class="lg:max-w-lg">
+              <h2 class="text-base font-semibold leading-7 text-[--vp-c-brand-2]">Capable Connectivity</h2>
+              <p class="mt-2 text-3xl font-bold tracking-tight text-[--vp-c-text-1] sm:text-4xl">The Cloudflare for
+                Minecraft</p>
+              <p class="mt-6 text-lg leading-8 text-[--vp-c-text-2]">
+                Minekube Connect serves Minecraft TCP, where Cloudflare doesn't.
+                Connect advances and deploys our well-known open source Gate proxy, globally.
+              </p>
+              <dl class="mt-10 max-w-xl space-y-8 text-base leading-7 text-[--vp-c-text-2] lg:max-w-none">
+                <div class="relative pl-9">
+                  <dt class="inline font-semibold text-[--vp-c-text-1]">
+                    <svg aria-hidden="true" class="absolute left-1 top-1 h-5 w-5 text-[--vp-c-brand-2]"
+                         fill="currentColor" viewBox="0 0 20 20">
+                      <path clip-rule="evenodd"
+                            d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046 3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z"
+                            fill-rule="evenodd"/>
+                    </svg>
+                    Ingress Tunnels
+                  </dt>
+                  <dd class="inline">A DDoS-protected Minecraft native Superproxy at any edge near your players.
+                  </dd>
+                </div>
+                <div class="relative pl-9">
+                  <dt class="inline font-semibold text-[--vp-c-text-1]">
+                    <svg class="absolute left-1 top-1 h-5 w-5 text-[--vp-c-brand-2] lucide lucide-globe" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                         stroke-width="2"
+                         viewBox="0 0 24 24">
+                      <circle cx="12" cy="12" r="10"/>
+                      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/>
+                      <path d="M2 12h20"/>
+                    </svg>
+                    Anycast domains
+                  </dt>
+                  <dd class="inline">Public IP address routing to your nearest Minecraft endpoints, protected by Connect
+                    edge.
+                  </dd>
+                </div>
+                <div class="relative pl-9">
+                  <dt class="inline font-semibold text-[--vp-c-text-1]">
+                    <svg class="absolute left-1 top-1 h-5 w-5 text-[--vp-c-brand-2] lucide lucide-package-check" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                         stroke-width="2"
+                         viewBox="0 0 24 24">
+                      <path d="m16 16 2 2 4-4"/>
+                      <path
+                          d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14"/>
+                      <path d="m7.5 4.27 9 5.15"/>
+                      <polyline points="3.29 7 12 12 20.71 7"/>
+                      <line x1="12" x2="12" y1="22" y2="12"/>
+                    </svg>
+                    <!--                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-1 top-1 h-5 w-5 text-[&#45;&#45;vp-c-brand-2] lucide lucide-terminal"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>-->
+                    Fast setup
+                  </dt>
+                  <dd class="inline">Build any network architecture you want.
+                    One binary / container / plugin, and a few lines of configuration.
+
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </div>
+          <img alt="Product screenshot"
+               class="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem] md:-ml-4 lg:-ml-0"
+               height="1442"
+               src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png" width="2432">
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+
+
+</template>
+
+<style scoped>
+
+</style>
diff --git a/.web/docs/.vitepress/theme/components/Layout.vue b/.web/docs/.vitepress/theme/components/Layout.vue
@@ -3,6 +3,7 @@ import DefaultTheme from 'vitepress/theme'
 import {useRouter} from 'vitepress';
 import {watch} from 'vue';
 import MeetTeam from "./MeetTeam.vue";
+import Landing from "./Landing.vue";
 
 const {Layout} = DefaultTheme
 
@@ -20,6 +21,7 @@ if (typeof window !== 'undefined' && window.posthog) {
 <template>
   <Layout>
     <template #home-features-after>
+      <Landing/>
       <MeetTeam/>
     </template>
   </Layout>

diff --git a/.web/docs/.vitepress/theme/components/MeetTeam.vue b/.web/docs/.vitepress/theme/components/MeetTeam.vue
@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import {
-  VPTeamPage,
-  VPTeamPageTitle,
-  VPTeamPageSection,
-  VPTeamMembers,
-  DefaultTheme
-} from 'vitepress/theme';
-import {discordLink, gitHubLink} from "../../../shared";
+import {DefaultTheme, VPTeamMembers, VPTeamPage, VPTeamPageTitle} from 'vitepress/theme';
+import {discordLink} 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">
@@ -24,7 +18,7 @@ const teamSvg = `
 const core = [
   {
     avatar: 'https://www.github.com/minekube.png',
-    name: 'Join Our Core Team!',
+    name: 'Join the Core Team!',
     title: "Checkout our Mission",
     org: 'Minekube Team',
     orgLink: 'team',
@@ -52,7 +46,7 @@ const core = [
 <template>
   <VPTeamPage>
     <VPTeamPageTitle>
-      <template #title>Meet the Team</template>
+      <template #title>Join the Mission</template>
       <template #lead>
         Minekube Open Source and Services thrive with guidance from an international team of contributors and a dedicated core team.
       </template>

diff --git a/.web/docs/.vitepress/theme/index.ts b/.web/docs/.vitepress/theme/index.ts
@@ -1,5 +1,6 @@
+import './tailwind.postcss'
 import DefaultTheme from 'vitepress/theme'
-import type { Theme } from 'vitepress'
+import type {Theme} from 'vitepress'
 import './styles/vars.css'
 import VPBadge from 'vitepress/dist/client/theme-default/components/VPBadge.vue'
 import MeetTeam from "./components/MeetTeam.vue";

diff --git a/.web/docs/.vitepress/theme/styles/vars.css b/.web/docs/.vitepress/theme/styles/vars.css
@@ -28,7 +28,7 @@
  *   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.
+ *   special meanings attached 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.

diff --git a/.web/docs/.vitepress/theme/tailwind.postcss b/.web/docs/.vitepress/theme/tailwind.postcss
@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
diff --git a/.web/docs/guide/advertising.md b/.web/docs/guide/advertising.md
@@ -1,4 +1,4 @@
-# Advertising Channels for Your Server
+# Advertising Channels for Your Server <VPBadge type='danger'>Not yet available</VPBadge>
 
 _Discovering and advertising your server is an important part of growing your community.
 The [Connect Network](/guide/#the-connect-network) provides ways to advertise your servers to players._

diff --git a/.web/docs/guide/api/authentication.md b/.web/docs/guide/api/authentication.md
@@ -18,7 +18,7 @@ All requests to the Connect API require the following headers:
 ## Endpoint Names
 
 Connect has the concept of globally unique **endpoint names** to identify your server even after restarts.
-The [Connect Plugin](/guide/#the-connect-plugin) uses a token file to authenticate that you
+The [Connectors](/guide/connectors/) use a token file to authenticate that you
 own an **endpoint name** in the [Connect Network](/guide/#the-connect-network).
 
 ::: code-group
@@ -28,7 +28,10 @@ own an **endpoint name** in the [Connect Network](/guide/#the-connect-network).
 :::
 
 The token and endpoint name have a direct relationship.
-If you lose your `token.json` file your endpoint name is lost, and you will have to use a new name.
+If you lose your `token.json` file and haven't imported your endpoint to the
+[Connect Dashboard](https://app.minekube.com), your endpoint
+name is lost, and you will have to use a new name. If you have imported your endpoint
+you can always reset your token in the dashboard.
 
 ## Super Endpoints