@veluai/velu 0.2.32 → 0.2.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veluai/velu",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "type": "module",
   "bin": "./dist/cli.js",
   "publishConfig": {

package/src/runtime/App.jsx

@@ -71,6 +71,13 @@ const IS_DEV_PREVIEW = import.meta.env.DEV;
 // root-relative and need this prefix to resolve under a subpath.
 const BASE_PATH = (import.meta.env.BASE_URL || '/').replace(/\/$/, '');
 
+function docsAuthActionUrl(action) {
+  const url = new URL(window.location.href);
+  url.searchParams.set('__velu_auth', action);
+  url.hash = '';
+  return url.toString();
+}
+
 // Flatten a sidebar section's items (which may nest into sub-groups) into the
 // flat endpoint list <ApiSidebar> wants. API tabs are flat in practice; this
 // only guards the rare case of a normal nested group living beside generated
@@ -782,7 +789,10 @@ function DocsPage() {
   // (dev preview, or a site that hasn't enabled the assistant).
   const assistant = React.useMemo(() => {
     if (IS_DEV_PREVIEW) return null;
-    const apiBase = site.assistant?.apiBase;
+    const configuredBase = site.assistant?.apiBase;
+    const apiBase = configuredBase === '__VELU_SAME_ORIGIN__'
+      ? `${window.location.origin}${BASE_PATH}`
+      : configuredBase;
     if (!apiBase) return null;
     return createDocsAssistant({ apiBase, host: site.assistant?.host });
   }, []);
@@ -806,7 +816,10 @@ function DocsPage() {
   // the widget stays purely visual.
   const pageFeedback = React.useMemo(() => {
     if (IS_DEV_PREVIEW) return null;
-    const apiBase = site.assistant?.apiBase;
+    const configuredBase = site.assistant?.apiBase;
+    const apiBase = configuredBase === '__VELU_SAME_ORIGIN__'
+      ? `${window.location.origin}${BASE_PATH}`
+      : configuredBase;
     if (!apiBase) return null;
     return createPageFeedback({ apiBase, host: site.assistant?.host });
   }, []);
@@ -1095,6 +1108,27 @@ function DocsPage() {
   // Header top-right actions, built from velu.json's `navbar`: secondary
   // `links` (plain text links) then the `primary` CTA (a filled button, or an
   // outlined GitHub button). Empty when unconfigured — no placeholder buttons.
+  const [privateAccess, setPrivateAccess] = React.useState(false);
+  React.useEffect(() => {
+    if (IS_DEV_PREVIEW) return undefined;
+    let alive = true;
+    fetch(docsAuthActionUrl('session'), { credentials: 'same-origin' })
+      .then((response) => response.ok ? response.json() : null)
+      .then((value) => { if (alive) setPrivateAccess(value?.private && value?.authenticated); })
+      .catch(() => {});
+    return () => { alive = false; };
+  }, []);
+
+  const logoutPrivateAccess = React.useCallback(async () => {
+    const response = await fetch(docsAuthActionUrl('logout'), {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: { 'content-type': 'application/json' },
+      body: '{}',
+    });
+    if (response.ok) window.location.reload();
+  }, []);
+
   const navActions = [];
   for (const l of site.navbar?.links ?? []) {
     navActions.push({
@@ -1115,6 +1149,13 @@ function DocsPage() {
       external: p.external,
     });
   }
+  if (privateAccess) {
+    navActions.push({
+      label: 'Log out',
+      onClick: logoutPrivateAccess,
+      kind: 'outlined',
+    });
+  }
 
   const footerRef = React.useRef(null);
   const [footerOverlap, setFooterOverlap] = React.useState(0);

package/src/runtime/PrivateLoginPage.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { PageHeader, ThemeToggle } from 'velu-ui';
+
+/**
+ * Static private-reader shell. This is rendered by the same Vite SSR bundle as
+ * normal documentation pages, so its header, logo, and theme control stay in
+ * lockstep with velu-ui. Authentication behavior is attached by the generated
+ * page's nonce-bearing script because the protected client bundle is not
+ * available before login.
+ */
+export default function PrivateLoginPage({ site }) {
+  const logo = site.logo
+    ? {
+        light: '?__velu_auth=logo-light',
+        dark: '?__velu_auth=logo-dark',
+        mono: site.logo.mono,
+      }
+    : undefined;
+
+  return (
+    <div className="velu-private-login">
+      <PageHeader
+        brand={{ label: site.name, logo }}
+        trailing={<ThemeToggle id="theme-toggle" />}
+      />
+      <main className="velu-private-login__main">
+        <form className="velu-private-login__form" id="form">
+          <h1>Private documentation</h1>
+          <p>Enter your password to access {site.name}.</p>
+          <label htmlFor="password">Password</label>
+          <input
+            id="password"
+            type="password"
+            autoComplete="current-password"
+            maxLength={256}
+            required
+            autoFocus
+          />
+          <div className="velu-private-login__error" id="error" role="alert" />
+          <button className="velu-private-login__continue" type="submit">
+            Continue
+          </button>
+        </form>
+      </main>
+    </div>
+  );
+}

package/src/runtime/server-entry.jsx

@@ -5,7 +5,9 @@ import { StaticRouter } from 'react-router-dom/server';
 // stylesheet in Vite's SSR module graph so dev-server.js can collect and
 // inline it into <head> (flicker-free SSR).
 import 'velu-ui/styles.css';
+import { site } from 'virtual:velu-site';
 import App from './App.jsx';
+import PrivateLoginPage from './PrivateLoginPage.jsx';
 
 // Subpath hosting: mirror the client's basename (from Vite's BASE_URL). The
 // prerender is driven by root-relative route paths ("/foo"), so the location
@@ -22,3 +24,7 @@ export async function render(url) {
     </StaticRouter>
   );
 }
+
+export function renderPrivateLoginPage() {
+  return renderToString(<PrivateLoginPage site={site} />);
+}