Skip to content

Instance user management and image zoom #240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
danciaclara wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Instance user management and image zoom #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a8aa690
Instance user management and image zoom
danciaclara Mar 10, 2026
e9d6be7
Updated image
danciaclara Mar 10, 2026
004d820
removed plan tag
danciaclara Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions docs/.vitepress/config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) {
Expand Down Expand Up @@ -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" },
],
},
{
Expand Down
51 changes: 37 additions & 14 deletions docs/.vitepress/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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;
195 changes: 195 additions & 0 deletions docs/.vitepress/theme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Binary file modified docs/public/images/instance-admin/god-mode-authentication.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/public/images/instance-admin/god-mode-email.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/public/images/instance-admin/god-mode-general.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/public/images/instance-admin/god-mode-workspaces.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/images/instance-admin/invite-instance-admin.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/images/instance-admin/user-actions.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/images/instance-admin/user-management.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/self-hosting/govern/advanced-search.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ The batching pattern also provides resilience. If OpenSearch is temporarily unav

### The complete flow

![OpenSeach flow](/images/open-search/opensearch-flow.webp)
![OpenSeach flow](/images/open-search/opensearch-flow.webp#hero)
Copy link

@coderabbitai coderabbitai bot Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Typo in image alt text: "OpenSeach" should be "OpenSearch".

📝 Proposed fix 
-![OpenSeach flow](/images/open-search/opensearch-flow.webp#hero)
+![OpenSearch flow](/images/open-search/opensearch-flow.webp#hero)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
![OpenSeach flow](/images/open-search/opensearch-flow.webp#hero)
![OpenSearch flow](/images/open-search/opensearch-flow.webp#hero)
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@docs/self-hosting/govern/advanced-search.md` at line 267, Replace the
misspelled alt text "OpenSeach" with "OpenSearch" in the image markdown
reference (the string `![OpenSeach
flow](/images/open-search/opensearch-flow.webp#hero)`), updating the alt text to
`![OpenSearch flow]...` so the image alt is correct wherever that markdown
appears.


When you search, queries bypass this synchronization process entirely. The Plane API sends your search query directly to OpenSearch, which returns results almost instantly. Your database isn't involved in search queries at all — this is the key to search performance.

Expand Down
Loading
Loading