revamp: update fonts and improved home page navigation

Author: vihar

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "dev",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["dev"],
+      "port": 5173
+    }
+  ]
+}

docs/.vitepress/config.mts

@@ -93,6 +93,21 @@ export default withMermaid(
     head: [
       ["link", { rel: "icon", href: "/logo/favicon-32x32.png" }],
 
+<<<<<<< Updated upstream
+=======
+      // Font preload for critical rendering
+      [
+        "link",
+        {
+          rel: "preload",
+          href: "/fonts/Inter/Inter-roman.var.woff2",
+          as: "font",
+          type: "font/woff2",
+          crossorigin: "",
+        },
+      ],
+
+>>>>>>> Stashed changes
       // Google Analytics with Consent Mode v2
       ["script", { async: "", src: "https://www.googletagmanager.com/gtag/js?id=G-JF828SKW90" }],
       [
@@ -190,8 +205,8 @@ export default withMermaid(
         { text: "Self-hosting", link: "/self-hosting/overview" },
         { text: "API Reference", link: "/api-reference/introduction" },
         { text: "Build and extend", link: "/dev-tools/build-plane-app/overview" },
-        { text: "Plane Docs", link: "https://docs.plane.so" },
-        { text: "Sign in", link: "https://app.plane.so/sign-in" },
+        { text: "Plane Docs", link: "https://docs.plane.so", noIcon: true },
+        { text: "Sign in", link: "https://app.plane.so/sign-in", noIcon: true },
       ],
 
       sidebar: {
@@ -758,13 +773,6 @@ export default withMermaid(
         ],
       },
 
-      socialLinks: [
-        { icon: "github", link: "https://github.com/makeplane/plane" },
-        { icon: "discord", link: "https://discord.com/invite/A92xrEGCge" },
-        { icon: "twitter", link: "https://twitter.com/planepowers" },
-        { icon: "linkedin", link: "https://www.linkedin.com/company/planepowers/" },
-      ],
-
       search: searchConfig,
 
       editLink: {

docs/.vitepress/theme/components/Card.vue

@@ -33,6 +33,7 @@ const customSvgIcons = {
 `,
   coolify: `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" xml:space="preserve" viewBox="0 0 512 512"><path d="M63.7-161.7h-90.9v272.8h90.9zm0 363.7h363.7v-90.9H63.7zm0-363.7h363.7v-90.9H63.7z" style="fill:#006399;fill-opacity:.302" transform="translate(84.664 310.016)"/><path d="M48.2-177.1h-90.9V95.6h90.9zm0 363.6h363.7V95.6H48.2zm0-363.6h363.7V-268H48.2z" style="fill:#006399;fill-opacity:.502" transform="translate(71.406 296.758)"/><path d="M32.8-192.6h-90.9V80.2h90.9zm0 363.7h363.7V80.2H32.8zm0-363.7h363.7v-90.9H32.8z" style="fill:#006399" transform="translate(58.147 283.5)"/></svg>`,
 
+  github: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" fill="currentColor"/></svg>`,
   // Add more icons as needed
 };
 

docs/.vitepress/theme/components/TabNav.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { useRoute } from "vitepress";
+import { computed } from "vue";
+
+const route = useRoute();
+
+const sections = [
+  { text: "Self-hosting", link: "/self-hosting/overview", match: "/self-hosting/" },
+  { text: "API Reference", link: "/api-reference/introduction", match: "/api-reference/" },
+  { text: "Build & Extend", link: "/dev-tools/build-plane-app/overview", match: "/dev-tools/" },
+];
+
+const activeSection = computed(() => {
+  const path = route.path;
+  for (const section of sections) {
+    if (path.startsWith(section.match)) return section.match;
+  }
+  return "";
+});
+</script>
+
+<template>
+  <div class="tab-nav">
+    <div class="tab-nav-wrapper">
+      <div class="tab-nav-container">
+        <div class="tab-nav-content">
+          <div class="tab-nav-inner">
+            <a
+              v-for="section in sections"
+              :key="section.match"
+              :href="section.link"
+              class="tab-nav-link"
+              :class="{ active: activeSection === section.match }"
+            >
+              {{ section.text }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/index.ts

@@ -12,6 +12,7 @@ import ResponsePanel from "./components/ResponsePanel.vue";
 import Card from "./components/Card.vue";
 import CardGroup from "./components/CardGroup.vue";
 import CookieConsent from "./components/CookieConsent.vue";
+import TabNav from "./components/TabNav.vue";
 
 /**
  * Adds 'api-page' class to hide the aside on API reference pages
@@ -110,6 +111,7 @@ export default {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
+      "layout-top": () => h(TabNav),
       "layout-bottom": () => h(CookieConsent),
     });
   },