Introducing The Minekube Blog (#49)

.web/docs/.vitepress/config.ts

@@ -2,8 +2,9 @@ import {defineConfig} from 'vitepress'
 
 import {discordLink, editLink, gitHubLink, projects} from '../shared'
 import {additionalTitle, commitRef} from "../shared/cloudflare";
+import {genFeed} from "./theme/components/posts/genFeed";
 
-const ogUrl = 'https://connect.minekube.com'
+export const ogUrl = 'https://connect.minekube.com'
 const ogImage = `${ogUrl}/og-image.png`
 const ogTitle = 'Minekube Connect'
 const ogDescription = 'The Ingress Tunnel for Minecraft Servers'
@@ -46,6 +47,8 @@ export default defineConfig({
         reactivityTransform: true
     },
 
+    buildEnd: genFeed,
+
     themeConfig: {
         logo: '/minekube-logo.png',
 
@@ -85,10 +88,9 @@ export default defineConfig({
 
         nav: [
             {text: 'Quick Start', link: '/guide/quick-start'},
-            {text: 'Connectors', link: '/guide/connectors/'},
-            {text: 'Downloads', link: '/guide/connectors/plugin#downloading-the-connect-plugin'},
-            {text: 'Pricing', link: '/plans'},
-            {text: 'Changelog', link: '/guide/changelog'},
+            {text: 'Connectors', link: '/guide/connectors/', activeMatch: '^/guide/connectors/'},
+            {text: 'Blog', link: '/blog/', activeMatch: '^/blog/'},
+            {text: 'Plans', link: '/plans'},
             ...projects,
         ],
 

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

@@ -15,7 +15,7 @@ const teamSvg = `
 </svg>
 `
 
-const core = [
+const core: DefaultTheme.TeamMember[] = [
   {
     avatar: 'https://www.github.com/minekube.png',
     name: 'Join the Core Team!',
@@ -39,7 +39,7 @@ const core = [
       {icon: 'github', link: 'https://github.com/robinbraemer'},
     ],
   },
-] satisfies DefaultTheme.TeamMember[]
+]
 
 </script>
 

.web/docs/.vitepress/theme/components/positions/JoinUs.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto flex max-w-2xl flex-col items-end justify-between gap-16 lg:mx-0 lg:max-w-none lg:flex-row">
+        <div class="w-full lg:max-w-lg lg:flex-auto">
+          <h2 class="text-3xl font-bold tracking-tight text-[--vp-c-text-1] sm:text-4xl">We’re always looking for awesome people to join us</h2>
+          <p class="mt-6 text-xl leading-8 text-[--vp-c-text-2]">We are interested in passionate builders that are excited for innovating the Minecraft space through Minekube's Vision.</p>
+          <img src="https://storage.googleapis.com/pai-images/e2f08836cd574c47a19adcbb7b8949de.jpeg" alt="" class="mt-16 aspect-[6/5] w-full rounded-2xl bg-gray-50 object-cover lg:aspect-auto lg:h-[34.5rem]" />
+        </div>
+        <div class="w-full lg:max-w-xl lg:flex-auto">
+          <h3 class="sr-only">Job openings</h3>
+          <ul class="-my-8 divide-y divide-gray-100">
+            <li v-for="(opening, index) in jobOpenings.slice(0, 3)" :key="index" class="py-8">
+              <PositionItem :opening="opening"/>
+            </li>
+          </ul>
+          <div class="mt-8 flex border-t border-gray-100 pt-8">
+            <a :href="discordLink" class="text-sm font-semibold leading-6 text-[--vp-c-brand-2] hover:text-[--vp-c-brand-1]">Talk to us <span aria-hidden="true">&rarr;</span></a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <ThreeColumns :openings="jobOpenings.slice(3)"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {discordLink} from "../../../../shared";
+import ThreeColumns from "./ThreeColumns.vue";
+import PositionItem from "./PositionItem.vue";
+import {Position} from "./types";
+
+const jobOpenings = [
+  {
+    role: "Full-Stack Engineer",
+    description: "Develop and maintain high-quality software. Collaborate with team to design and launch features.",
+    salary: "Senior",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Infrastructure Engineer",
+    description: "Design, build and maintain infrastructure. Ensure scalability, security, reliability of systems.",
+    salary: "Senior",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Backend Engineer",
+    description: "Design and implement scalable backend systems and APIs. Collaborate with team to design and launch features.",
+    salary: "Level 2",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Frontend Engineer",
+    description: "Develop and maintain user-friendly web applications. Collaborate with team to design and launch features.",
+    salary: "Level 2",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Engineering Manager",
+    description: "Lead and manage engineering team, set goals and priorities. Collaborate with cross-functional teams on technical and product strategies.",
+    salary: "Senior",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Marketing Manager",
+    description: "Lead and execute marketing strategies across channels to increase brand awareness and drive customer acquisition. Collaborate with cross-functional teams on campaigns.",
+    salary: "Level 1",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Customer Success Manager",
+    description: "Build and maintain customer relationships, ensuring value from platform. Collaborate with cross-functional teams to address customer needs and drive success.",
+    salary: "Senior",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Developer Relations Engineer",
+    description: "Engage with and support developer community, providing technical guidance and resources. Collaborate on improving developer experience and adoption.",
+    salary: "Level 2",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Platform Product Engineer",
+    description: "Design and implement platform features and integrations for customer applications. Collaborate with team to design and launch new features.",
+    salary: "Level 2",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Go Developer",
+    description: "Develop and maintain high-quality, high-performance software in Go. Collaborate with team to design and launch features.",
+    salary: "Level 2",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Site Reliability Engineer",
+    description: "Ensure reliability and performance of platform and services. Design and implement monitoring, alerting, and incident response systems.",
+    salary: "Senior",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Support Engineer",
+    description: "Provide technical support and guidance to customers, troubleshoot and resolve issues. Collaborate with cross-functional teams to drive success.",
+    salary: "Intern",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Technical Writer",
+    description: "Create and maintain technical documentation, guides, and tutorials. Collaborate with cross-functional teams to ensure accuracy and completeness.",
+    salary: "Level 1",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Community Moderator",
+    description: "Manage and moderate online communities, ensuring positive and respectful environment. Collaborate on community engagement and growth.",
+    salary: "Intern",
+    location: "Remote (anywhere)",
+  },
+  {
+    role: "Content Creator",
+    description: "Create and publish engaging content across channels to increase brand awareness and drive engagement. Collaborate on content strategies.",
+    salary: "Level 1",
+    location: "Remote (anywhere)",
+  },
+];
+</script>

.web/docs/.vitepress/theme/components/positions/PositionItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import {discordLink} from "../../../../shared/index";
+import {Position} from "./types";
+
+const props = defineProps({
+  opening: Object as () => Position,
+})
+</script>
+
+<template>
+  <dl class="relative flex flex-wrap gap-x-3">
+    <dt class="sr-only">Role</dt>
+    <dd class="w-full flex-none text-lg font-semibold tracking-tight text-[--vp-c-text-1]">
+      <a :href="opening.href || discordLink" class="text-[--vp-c-brand-2] hover:text-[--vp-c-brand-1]">
+        {{ opening.role }}
+        <span class="absolute inset-0" aria-hidden="true"/>
+      </a>
+    </dd>
+    <dt class="sr-only">Description</dt>
+    <dd class="mt-2 w-full flex-none text-base leading-7 text-[--vp-c-text-2]">{{ opening.description }}</dd>
+    <dt class="sr-only" v-if="opening.salary">Salary</dt>
+    <dd class="mt-4 text-base font-semibold leading-7 text-[--vp-c-text-1]" v-if="opening.salary">{{
+        opening.salary
+      }}
+    </dd>
+    <dt class="sr-only">Location</dt>
+    <dd class="mt-4 flex items-center gap-x-3 text-base leading-7 text-[--vp-c-text-3]">
+      <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 flex-none fill-gray-300" aria-hidden="true" v-if="opening.salary">
+        <circle cx="1" cy="1" r="1"/>
+      </svg>
+      {{ opening.location }}
+    </dd>
+  </dl>
+</template>

.web/docs/.vitepress/theme/components/positions/ThreeColumns.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
+      <h2 class="text-2xl font-bold leading-10 tracking-tight text-[--vp-c-text-1]">Do you see a position you like?</h2>
+      <p class="mt-6 max-w-2xl text-base leading-7 text-[--vp-c-text-1]">
+        If you are interested in any of the positions below,
+        <a :href="discordLink" class="font-semibold text-[--vp-c-brand-2] hover:text-[--vp-c-brand-2]">send us a message on Discord</a>
+        with your short bio and what you would like to build for the Minkube community.
+      </p>
+      <div class="mt-20">
+        <dl class="space-y-16 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-16 sm:space-y-0 lg:grid-cols-3 lg:gap-x-10">
+          <div  v-for="(opening, index) in openings" :key="index">
+            <PositionItem :opening="opening"/>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import {Position} from "./types.js";
+import PositionItem from "./PositionItem.vue";
+import {discordLink} from "../../../../shared";
+
+const props = defineProps({
+  openings: Array as () => Position[] // not working
+})
+</script>

.web/docs/.vitepress/theme/components/positions/types.ts

@@ -0,0 +1,7 @@
+export type Position = {
+    role: string;
+    description: string;
+    salary?: string;
+    location: string;
+    href?: string;
+}

.web/docs/.vitepress/theme/components/posts/Article.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import Date from './Date.vue'
+import Author from './Author.vue'
+import { computed } from 'vue'
+import {Content, useData, useRoute} from 'vitepress'
+import { data as posts } from './posts.data.js'
+
+const { frontmatter: data } = useData()
+
+const route = useRoute()
+
+function findCurrentIndex() {
+  return posts.findIndex((p) => p.url === route.path)
+}
+
+// use the customData date which contains pre-resolved date info
+const date = computed(() => posts[findCurrentIndex()].date)
+const nextPost = computed(() => posts[findCurrentIndex() - 1])
+const prevPost = computed(() => posts[findCurrentIndex() + 1])
+</script>
+
+<template>
+  <article class="xl:divide-y xl:divide-gray-200 dark:xl:divide-slate-200/5">
+    <header class="pt-6 xl:pb-10 space-y-1 text-center">
+      <Date :date="date" />
+      <h1
+        class="text-3xl leading-9 font-extrabold text-gray-900 dark:text-white tracking-tight sm:text-4xl sm:leading-10 md:text-5xl md:leading-14"
+      >
+        {{ data.title }}
+      </h1>
+    </header>
+
+    <div
+      class="divide-y xl:divide-y-0 divide-gray-200 dark:divide-slate-200/5 xl:grid xl:grid-cols-4 xl:gap-x-10 pb-16 xl:pb-20"
+      style="grid-template-rows: auto 1fr"
+    >
+      <Author />
+      <div
+        class="divide-y divide-gray-200 dark:divide-slate-200/5 xl:pb-0 xl:col-span-3 xl:row-span-2"
+      >
+        <div class="vp-doc prose dark:prose-invert max-w-none pt-10 pb-8">
+          <p class="text-xl font-bold pb-3">
+            We're Minekube.com, and we protect Minecraft servers with tunnels, exposing them on our super proxy around the world.
+            We have the infrastructure and experience to enhance your server with extra security, so why not take advantage of it?
+          </p>
+          <Content/>
+        </div>
+      </div>
+
+      <footer
+        class="text-sm font-medium leading-5 divide-y divide-gray-200 dark:divide-slate-200/5 xl:col-start-1 xl:row-start-2"
+      >
+        <div v-if="nextPost" class="py-8">
+          <h2
+            class="text-xs tracking-wide uppercase text-gray-500 dark:text-white"
+          >
+            Next Article
+          </h2>
+          <div class="link">
+            <a :href="nextPost.url">{{ nextPost.title }}</a>
+          </div>
+        </div>
+        <div v-if="prevPost" class="py-8">
+          <h2
+            class="text-xs tracking-wide uppercase text-gray-500 dark:text-white"
+          >
+            Previous Article
+          </h2>
+          <div class="link">
+            <a :href="prevPost.url">{{ prevPost.title }}</a>
+          </div>
+        </div>
+        <div class="pt-8">
+          <a class="link" href="/blog/">← Back to the blog</a>
+        </div>
+      </footer>
+    </div>
+  </article>
+</template>

.web/docs/.vitepress/theme/components/posts/Author.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import {useData} from 'vitepress'
+import {Post} from "./posts.data";
+
+const {frontmatter}: { frontmatter: Post } = useData()
+</script>
+
+<template>
+  <dl class="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200 dark:xl:border-slate-200/5">
+    <dt class="sr-only">Authors</dt>
+    <dd>
+      <ul
+          class="flex justify-center xl:block space-x-8 sm:space-x-12 xl:space-x-0 xl:space-y-8"
+      >
+        <li class="flex items-center space-x-2">
+          <img
+              v-if="frontmatter.author.imageUrl"
+              :src="frontmatter.author.imageUrl"
+              alt="author image"
+              class="w-10 h-10 rounded-full"
+          />
+          <dl class="text-sm font-medium leading-5 whitespace-nowrap">
+            <dt class="sr-only">Name</dt>
+            <dd class="text-[--vp-c-text-1]">
+              <a
+                  v-if="frontmatter.author.href"
+                  :href="frontmatter.author.href"
+                  target="_blank"
+                  rel="noopnener noreferrer"
+                  :class="{ 'underline': frontmatter.author.href }"
+              >
+                {{ frontmatter.author.name }}
+              </a>
+              <span v-else>{{ frontmatter.author.name }}</span>
+            </dd>
+          </dl>
+        </li>
+      </ul>
+    </dd>
+  </dl>
+</template>

.web/docs/.vitepress/theme/components/posts/Date.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { Post } from './posts.data.js'
+
+const props = defineProps<{ date: Post['date'] }>()
+
+function getDateTime() {
+  return new Date(props.date.time).toISOString()
+}
+</script>
+
+<template>
+  <dl>
+    <dt class="sr-only">Published on</dt>
+    <dd class="text-base leading-6 font-medium text-gray-500 dark:text-gray-300">
+      <time :datetime="getDateTime()">{{ date.string }}</time>
+    </dd>
+  </dl>
+</template>