Instance user management and image zoom

Author: danciaclara

docs/.vitepress/config.mts

@@ -138,7 +138,7 @@ export default withMermaid(
             "Self-host Plane, integrate with our API, configure webhooks, and extend your project management platform.",
         },
       ],
-      ["meta", { property: "og:image", content: "https://media.docs.plane.so/logo/og-docs.webp" }],
+      ["meta", { property: "og:image", content: "https://media.docs.plane.so/logo/og-docs.webp#hero" }],
       ["meta", { property: "og:url", content: "https://developers.plane.so" }],
 
       // Twitter Card meta tags
@@ -152,7 +152,7 @@ export default withMermaid(
             "Self-host Plane, integrate with our API, configure webhooks, and extend your project management platform.",
         },
       ],
-      ["meta", { name: "twitter:image", content: "https://media.docs.plane.so/logo/og-docs.webp" }],
+      ["meta", { name: "twitter:image", content: "https://media.docs.plane.so/logo/og-docs.webp#hero" }],
     ],
 
     transformPageData(pageData) {
@@ -319,6 +319,7 @@ export default withMermaid(
               { text: "View Logs", link: "/self-hosting/manage/view-logs" },
               { text: "Migrate Plane", link: "/self-hosting/manage/migrate-plane" },
               { text: "Prime CLI", link: "/self-hosting/manage/prime-cli" },
+              { text: "Manage users", link: "/self-hosting/manage/manage-instance-users" },
             ],
           },
           {

docs/.vitepress/theme/index.ts

@@ -1,7 +1,9 @@
 import DefaultTheme from "vitepress/theme";
 import type { Theme } from "vitepress";
-import { onMounted, nextTick, h } from "vue";
+import { onMounted, watch, nextTick, h } from "vue";
+import { useRoute } from "vitepress";
 import { enhanceAppWithTabs } from "vitepress-plugin-tabs/client";
+import mediumZoom from "medium-zoom";
 
 import "./style.css";
 import "vitepress-plugin-tabs/client";
@@ -126,27 +128,48 @@ export default {
       router.onAfterRouteChanged = () => {
         nextTick(() => {
           updateLayout();
-          handleTabHash();
-          setupTabHashUpdates();
         });
       };
+    }
+  },
+  setup() {
+    if (typeof window === "undefined") return;
+
+    const route = useRoute();
+    let zoom: ReturnType<typeof mediumZoom> | null = null;
+
+    const initZoom = () => {
+      zoom?.detach();
+      zoom = mediumZoom(".vp-doc :not(a) > img:not(.VPImage)", {
+        background: "rgba(0, 0, 0, 0.8)",
+      });
+    };
+
+    onMounted(() => {
+      initZoom();
+
+      // Delay tab hash handling to ensure tabs are rendered
+      setTimeout(() => {
+        handleTabHash();
+        setupTabHashUpdates();
+      }, 100);
 
       // Listen for hash changes
       window.addEventListener("hashchange", () => {
         nextTick(handleTabHash);
       });
-    }
-  },
-  setup() {
-    if (typeof window !== "undefined") {
-      onMounted(() => {
-        updateLayout();
-        // Delay tab hash handling to ensure tabs are rendered
-        setTimeout(() => {
+    });
+
+    // Watch for route changes
+    watch(
+      () => route.path,
+      () => {
+        nextTick(() => {
+          initZoom();
           handleTabHash();
           setupTabHashUpdates();
-        }, 100);
-      });
-    }
+        });
+      },
+    );
   },
 } satisfies Theme;

docs/.vitepress/theme/style.css

@@ -663,3 +663,198 @@ a.VPLink.VPNavBarMenuLink[href*="sign-in"]:hover {
   background: #0078b8 !important;
   box-shadow: 0 2px 8px rgba(0, 99, 153, 0.35) !important;
 }
+
+
+/* ================================================
+   HERO IMAGE STYLES
+   ================================================ */
+
+.vp-doc p:has(> img[src$="#hero"]),
+article p:has(> img[src$="#hero"]) {
+  max-width: 841px;
+  padding: 36px 56px 0px 56px;
+  background: #f1f3f3;
+  border-radius: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.vp-doc img[src$="#hero"],
+article img[src$="#hero"] {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 0;
+  border-radius: 8px 8px 0px 0px;
+  border-width: 1px 1px 0px 1px;
+  border-style: solid;
+  border-color: #eaebeb;
+  object-fit: cover;
+  box-shadow:
+    0px 2px 4px -1px rgba(41, 47, 61, 0.04),
+    0px 4px 6px -1px rgba(41, 47, 61, 0.05);
+}
+
+.vp-doc p:has(> img[src$="#hero-tl"]),
+article p:has(> img[src$="#hero-tl"]) {
+  max-width: 841px;
+  padding: 36px 0px 0px 56px;
+  background: #f1f3f3;
+  border-radius: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.vp-doc img[src$="#hero-tl"],
+article img[src$="#hero-tl"] {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 0;
+  border-radius: 8px 0px 0px 0px;
+  border-width: 1px 0px 0px 1px;
+  border-style: solid;
+  border-color: #eaebeb;
+  object-fit: cover;
+  box-shadow:
+    0px 2px 4px -1px rgba(41, 47, 61, 0.04),
+    0px 4px 6px -1px rgba(41, 47, 61, 0.05);
+}
+
+.vp-doc p:has(> img[src$="#hero-tr"]),
+article p:has(> img[src$="#hero-tr"]) {
+  max-width: 841px;
+  padding: 36px 56px 0px 0px;
+  background: #f1f3f3;
+  border-radius: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.vp-doc img[src$="#hero-tr"],
+article img[src$="#hero-tr"] {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 0;
+  border-radius: 0px 8px 0px 0px;
+  border-width: 1px 1px 0px 0px;
+  border-style: solid;
+  border-color: #eaebeb;
+  object-fit: cover;
+  box-shadow:
+    0px 2px 4px -1px rgba(41, 47, 61, 0.04),
+    0px 4px 6px -1px rgba(41, 47, 61, 0.05);
+}
+
+.vp-doc p:has(> img[src$="#hero-bl"]),
+article p:has(> img[src$="#hero-bl"]) {
+  max-width: 841px;
+  padding: 0px 0px 36px 56px;
+  background: #f1f3f3;
+  border-radius: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.vp-doc img[src$="#hero-bl"],
+article img[src$="#hero-bl"] {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 0;
+  border-radius: 0px 0px 0px 8px;
+  border-width: 0px 0px 1px 1px;
+  border-style: solid;
+  border-color: #eaebeb;
+  object-fit: cover;
+  box-shadow:
+    0px 2px 4px -1px rgba(41, 47, 61, 0.04),
+    0px 4px 6px -1px rgba(41, 47, 61, 0.05);
+}
+
+.vp-doc p:has(> img[src$="#hero-br"]),
+article p:has(> img[src$="#hero-br"]) {
+  max-width: 841px;
+  padding: 0px 56px 36px 0px;
+  background: #f1f3f3;
+  border-radius: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.vp-doc img[src$="#hero-br"],
+article img[src$="#hero-br"] {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 0;
+  border-radius: 0px 0px 8px 0px;
+  border-width: 0px 1px 1px 0px;
+  border-style: solid;
+  border-color: #eaebeb;
+  object-fit: cover;
+  box-shadow:
+    0px 2px 4px -1px rgba(41, 47, 61, 0.04),
+    0px 4px 6px -1px rgba(41, 47, 61, 0.05);
+}
+
+/* ================================================
+   MOBILE IMAGE LAYOUT
+   ================================================ */
+
+.mobile-img-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.mobile-img-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 25rem;
+  min-width: 15rem;
+  text-align: center;
+  margin: 10px;
+}
+
+/* ================================================
+   HOMEPAGE FEATURE ICONS - DARK MODE
+   ================================================ */
+
+/* Feature card icons use currentColor in SVG, but since they're
+   loaded as <img> tags, currentColor defaults to black. This filter
+   inverts them for visibility in dark mode. */
+.dark .VPFeature .VPImage {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+.dark .VPFeatures .VPFeature .icon img {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+/* ================================================
+   MEDIUM ZOOM - IMAGE LIGHTBOX
+   ================================================ */
+
+.vp-doc img {
+  cursor: zoom-in;
+}
+
+.medium-zoom-overlay {
+  z-index: 9999 !important;
+  background: rgba(0, 0, 0, 0.8) !important;
+}
+
+.medium-zoom-image {
+  z-index: 10000 !important;
+}
+
+.medium-zoom-image--opened {
+  z-index: 10000 !important;
+  cursor: zoom-out;
+}