@zpress/ui 0.4.0 → 0.4.1

package/dist/theme/components/nav/layout.tsx

@@ -1,8 +1,53 @@
 import { Layout as OriginalLayout } from '@rspress/core/theme-original'
 import type React from 'react'
+import { useEffect, useState } from 'react'
 
 import { BranchTag } from './branch-tag'
 import { ThemeSwitcher } from './theme-switcher'
+import { VscodeTag } from './vscode-tag'
+
+const VSCODE_OVERRIDES = [
+  /* Hide left sidebar and its placeholder */
+  '.rp-doc-layout__sidebar { display: none !important; }',
+  '.rp-doc-layout__sidebar-placeholder { display: none !important; }',
+  /* Hide right TOC and its placeholder */
+  '.rp-doc-layout__outline { display: none !important; }',
+  '.rp-doc-layout__outline-placeholder { display: none !important; }',
+  /* Center content at 1200px max */
+  '.rp-doc-layout__doc { max-width: 1200px !important; margin: 0 auto !important; }',
+  /* Hide nav items, social links, hamburger */
+  '.rp-nav-menu__item { display: none !important; }',
+  '.rp-social-links { display: none !important; }',
+  '.rp-nav-hamburger { display: none !important; }',
+].join('\n')
+
+function useVscodeMode(): boolean {
+  const [active, setActive] = useState(false)
+
+  useEffect(() => {
+    const params = new URLSearchParams(globalThis.location.search)
+    const isVscode =
+      params.get('env') === 'vscode' || globalThis.sessionStorage.getItem('zpress-env') === 'vscode'
+
+    if (!isVscode) {
+      return
+    }
+
+    globalThis.sessionStorage.setItem('zpress-env', 'vscode')
+    setActive(true)
+    document.documentElement.dataset.zpressEnv = 'vscode'
+
+    const style = document.createElement('style')
+    style.textContent = VSCODE_OVERRIDES
+    document.head.append(style)
+    return () => {
+      style.remove()
+      delete document.documentElement.dataset.zpressEnv
+    }
+  }, [])
+
+  return active
+}
 
 /**
  * Custom Layout override for zpress.
@@ -10,5 +55,17 @@ import { ThemeSwitcher } from './theme-switcher'
  * into `beforeNavMenu` and ThemeSwitcher into `afterNavMenu`.
  */
 export function Layout(): React.ReactElement {
-  return <OriginalLayout beforeNavMenu={<BranchTag />} afterNavMenu={<ThemeSwitcher />} />
+  const vscode = useVscodeMode()
+  const navSlot = (() => {
+    if (vscode) {
+      return (
+        <>
+          <BranchTag />
+          <VscodeTag />
+        </>
+      )
+    }
+    return <BranchTag />
+  })()
+  return <OriginalLayout beforeNavMenu={navSlot} afterNavMenu={<ThemeSwitcher />} />
 }

package/dist/theme/components/nav/vscode-tag.css

@@ -0,0 +1,32 @@
+/**
+ * VS Code tag pill — mode indicator badge positioned in the nav bar.
+ */
+
+.vscode-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 6px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  background: var(--zp-c-bg-soft);
+  border: 1px solid var(--zp-c-brand-1, #a78bfa);
+  color: var(--zp-c-brand-1, #a78bfa);
+  font-family: var(--zp-font-family-mono);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.vscode-tag svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+  .vscode-tag-text {
+    display: none;
+  }
+}

package/dist/theme/components/nav/vscode-tag.tsx

@@ -0,0 +1,18 @@
+import type React from 'react'
+
+import './vscode-tag.css'
+import { Icon } from '../shared/icon.tsx'
+
+/**
+ * VS Code mode indicator — pill-shaped badge rendered next to the
+ * BranchTag when the page is loaded inside the VS Code webview
+ * (detected via `?env=vscode` query parameter).
+ */
+export function VscodeTag(): React.ReactElement {
+  return (
+    <span className="vscode-tag" title="VS Code preview mode" aria-label="VS Code preview mode">
+      <Icon icon="vscode-icons:file-type-vscode" width={14} height={14} />
+      <span className="vscode-tag-text">vscode</span>
+    </span>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zpress/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Rspress plugin, theme components, and styles for zpress",
   "keywords": [
     "react",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@iconify-json/catppuccin": "^1.2.17",
-    "@iconify-json/devicon": "^1.2.59",
+    "@iconify-json/devicon": "^1.2.60",
     "@iconify-json/logos": "^1.2.10",
     "@iconify-json/material-icon-theme": "^1.2.55",
     "@iconify-json/mdi": "^1.2.3",

package/src/theme/components/nav/layout.tsx

@@ -1,8 +1,53 @@
 import { Layout as OriginalLayout } from '@rspress/core/theme-original'
 import type React from 'react'
+import { useEffect, useState } from 'react'
 
 import { BranchTag } from './branch-tag'
 import { ThemeSwitcher } from './theme-switcher'
+import { VscodeTag } from './vscode-tag'
+
+const VSCODE_OVERRIDES = [
+  /* Hide left sidebar and its placeholder */
+  '.rp-doc-layout__sidebar { display: none !important; }',
+  '.rp-doc-layout__sidebar-placeholder { display: none !important; }',
+  /* Hide right TOC and its placeholder */
+  '.rp-doc-layout__outline { display: none !important; }',
+  '.rp-doc-layout__outline-placeholder { display: none !important; }',
+  /* Center content at 1200px max */
+  '.rp-doc-layout__doc { max-width: 1200px !important; margin: 0 auto !important; }',
+  /* Hide nav items, social links, hamburger */
+  '.rp-nav-menu__item { display: none !important; }',
+  '.rp-social-links { display: none !important; }',
+  '.rp-nav-hamburger { display: none !important; }',
+].join('\n')
+
+function useVscodeMode(): boolean {
+  const [active, setActive] = useState(false)
+
+  useEffect(() => {
+    const params = new URLSearchParams(globalThis.location.search)
+    const isVscode =
+      params.get('env') === 'vscode' || globalThis.sessionStorage.getItem('zpress-env') === 'vscode'
+
+    if (!isVscode) {
+      return
+    }
+
+    globalThis.sessionStorage.setItem('zpress-env', 'vscode')
+    setActive(true)
+    document.documentElement.dataset.zpressEnv = 'vscode'
+
+    const style = document.createElement('style')
+    style.textContent = VSCODE_OVERRIDES
+    document.head.append(style)
+    return () => {
+      style.remove()
+      delete document.documentElement.dataset.zpressEnv
+    }
+  }, [])
+
+  return active
+}
 
 /**
  * Custom Layout override for zpress.
@@ -10,5 +55,17 @@ import { ThemeSwitcher } from './theme-switcher'
  * into `beforeNavMenu` and ThemeSwitcher into `afterNavMenu`.
  */
 export function Layout(): React.ReactElement {
-  return <OriginalLayout beforeNavMenu={<BranchTag />} afterNavMenu={<ThemeSwitcher />} />
+  const vscode = useVscodeMode()
+  const navSlot = (() => {
+    if (vscode) {
+      return (
+        <>
+          <BranchTag />
+          <VscodeTag />
+        </>
+      )
+    }
+    return <BranchTag />
+  })()
+  return <OriginalLayout beforeNavMenu={navSlot} afterNavMenu={<ThemeSwitcher />} />
 }

package/src/theme/components/nav/vscode-tag.css

@@ -0,0 +1,32 @@
+/**
+ * VS Code tag pill — mode indicator badge positioned in the nav bar.
+ */
+
+.vscode-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 6px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  background: var(--zp-c-bg-soft);
+  border: 1px solid var(--zp-c-brand-1, #a78bfa);
+  color: var(--zp-c-brand-1, #a78bfa);
+  font-family: var(--zp-font-family-mono);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.vscode-tag svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+  .vscode-tag-text {
+    display: none;
+  }
+}

package/src/theme/components/nav/vscode-tag.tsx

@@ -0,0 +1,18 @@
+import type React from 'react'
+
+import './vscode-tag.css'
+import { Icon } from '../shared/icon.tsx'
+
+/**
+ * VS Code mode indicator — pill-shaped badge rendered next to the
+ * BranchTag when the page is loaded inside the VS Code webview
+ * (detected via `?env=vscode` query parameter).
+ */
+export function VscodeTag(): React.ReactElement {
+  return (
+    <span className="vscode-tag" title="VS Code preview mode" aria-label="VS Code preview mode">
+      <Icon icon="vscode-icons:file-type-vscode" width={14} height={14} />
+      <span className="vscode-tag-text">vscode</span>
+    </span>
+  )
+}