@zpress/ui 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -19,8 +19,8 @@ declare interface CreateRspressConfigOptions {
  *
  * Global styles are loaded via the theme entry (theme/index.tsx)
  * CSS import — not through the plugin globalStyles property.
- * Custom UI components are registered here as globalUIComponents so
- * Rspress renders them on every page.
+ * Nav-level components (e.g. BranchTag) are injected via layout
+ * slot props in the custom Layout component, not globalUIComponents.
  */
 export declare function zpressPlugin(): RspressPlugin;
 

package/dist/index.mjs

@@ -2,12 +2,8 @@ import { execSync } from "node:child_process";
 import { existsSync, readFileSync } from "node:fs";
 import node_path from "node:path";
 function zpressPlugin() {
-    const componentsDir = node_path.resolve(import.meta.dirname, 'theme', 'components');
     return {
-        name: 'zpress',
-        globalUIComponents: [
-            node_path.resolve(componentsDir, 'nav', 'branch-tag.tsx')
-        ]
+        name: 'zpress'
     };
 }
 function loadGenerated(contentDir, name, fallback) {
@@ -37,6 +33,9 @@ function createRspressConfig(options) {
     return {
         root: paths.contentDir,
         outDir: paths.distDir,
+        route: {
+            cleanUrls: true
+        },
         llms: true,
         title: config.title ?? 'zpress',
         description: config.description ?? 'Documentation',

package/dist/theme/components/home/feature-card.css

@@ -10,7 +10,7 @@
   gap: var(--feature-grid-gap);
   max-width: 1152px;
   margin: 0 auto;
-  padding: 0 0 64px;
+  padding: 0 16px 64px;
 }
 
 /* ── Grid item + span system ────────────────────────────────── */

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import type React from 'react'
 
 import './branch-tag.css'
 import { Icon } from '../shared/icon.tsx'
@@ -17,32 +17,12 @@ function resolveBranch(): string {
 }
 
 /**
- * Git branch tag — pill-shaped badge positioned in the nav bar.
- * Hidden when on `main` (production). Uses the pixelarticons:git-branch icon.
+ * Git branch tag — pill-shaped badge rendered via the `beforeNavMenu`
+ * layout slot. Hidden when on `main` (production).
+ * Uses the pixelarticons:git-branch icon.
  */
 export function BranchTag(): React.ReactElement | null {
   const branch = resolveBranch()
-  const rootRef = useRef<HTMLAnchorElement>(null)
-
-  useEffect(() => {
-    if (!branch || branch === 'main' || !rootRef.current) {
-      return
-    }
-
-    const node = rootRef.current
-
-    // Relocate into the search container so it sits beside the search button.
-    // No Rspress API exists for injecting into the nav bar, so direct DOM
-    // manipulation is the only option for this placement.
-    const searchContainer = document.querySelector('.rspress-nav-search')
-    if (searchContainer) {
-      searchContainer.append(node)
-    }
-
-    return () => {
-      node.remove()
-    }
-  }, [branch])
 
   if (!branch || branch === 'main') {
     return null
@@ -51,7 +31,6 @@ export function BranchTag(): React.ReactElement | null {
   return (
     <a
       className="branch-tag"
-      ref={rootRef}
       href={`https://github.com/joggrdocs/zpress/tree/${branch}`}
       target="_blank"
       rel="noopener noreferrer"

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

@@ -0,0 +1,14 @@
+import { Layout as OriginalLayout } from '@rspress/core/theme-original'
+import type React from 'react'
+
+import { BranchTag } from './branch-tag'
+
+/**
+ * Custom Layout override for zpress.
+ * Wraps the original Rspress Layout and injects the BranchTag
+ * into the `beforeNavMenu` slot so it renders before the search
+ * bar in the navbar on all page types.
+ */
+export function Layout(): React.ReactElement {
+  return <OriginalLayout beforeNavMenu={<BranchTag />} />
+}

package/dist/theme/components/workspaces/card.css

@@ -7,7 +7,7 @@
 .workspace-section {
   max-width: 1152px;
   margin: 0 auto;
-  padding: 0 0 64px;
+  padding: 0 16px 64px;
 }
 
 .workspace-section h2 {

package/dist/theme/index.tsx

@@ -23,6 +23,9 @@ import './styles/overrides/section-card.css'
 // (theme-original avoids circular resolution when used inside a themeDir)
 export * from '@rspress/core/theme-original'
 
+// Layout override — inject zpress nav components via layout slots
+export { Layout } from './components/nav/layout'
+
 // zpress components
 export { FeatureCard, FeatureGrid } from './components/home/feature-card'
 export type { FeatureCardProps, FeatureItem, IconColor } from './components/home/feature-card'

package/dist/theme/styles/overrides/home-card.css

@@ -120,6 +120,7 @@
 .home-card-divider {
   max-width: 1152px;
   margin: 0 auto 48px;
+  padding: 0 16px;
   border: none;
   border-top: 1px solid var(--zp-c-divider);
 }

package/dist/theme/styles/overrides/home.css

@@ -15,7 +15,7 @@ html .rp-home-hero__image-img {
 }
 
 /* ── Rspress home hero container ────────────────────────── */
-html .rp-home-hero {
+html .rp-home-hero__container {
   gap: 16px !important;
 }
 
@@ -33,7 +33,15 @@ html .rp-home-hero__tagline {
   padding-bottom: 16px !important;
 }
 
+html .rp-home-hero__actions {
+  gap: 1.25rem !important;
+}
+
 @media (max-width: 1000px) {
+  html .rp-home-hero {
+    padding-bottom: 24px !important;
+  }
+
   html .rp-home-hero__image {
     width: 400px;
     margin-left: 0;
@@ -45,6 +53,42 @@ html .rp-home-hero__tagline {
   }
 }
 
+/* ── Mobile overrides ────────────────────────────────────── */
+@media (max-width: 768px) {
+  html .rp-home-hero__container {
+    gap: 8px !important;
+  }
+
+  html .rp-home-hero__image {
+    width: 100%;
+    max-width: 90vw !important;
+    margin-left: 0;
+    margin-top: 24px;
+  }
+
+  html .rp-home-hero__image-img {
+    width: 100%;
+    max-width: 90vw !important;
+  }
+
+  html .rp-home-hero__content {
+    padding: 0 8px;
+  }
+
+  html .rp-home-hero__name {
+    font-size: 1.125rem !important;
+  }
+
+  html .rp-home-hero__text {
+    font-size: 2rem !important;
+  }
+
+  html .rp-home-hero__tagline {
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+  }
+}
+
 /* ── Code blocks ─────────────────────────────────────────── */
 div[class*='language-'] {
   border-radius: var(--rp-radius) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zpress/ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Rspress plugin, theme components, and styles for zpress",
   "keywords": [
     "react",
@@ -43,18 +43,18 @@
   "dependencies": {
     "@iconify-json/catppuccin": "^1.2.17",
     "@iconify-json/devicon": "^1.2.59",
+    "@iconify-json/logos": "^1.2.10",
+    "@iconify-json/material-icon-theme": "^1.2.55",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/pixelarticons": "^1.2.4",
     "@iconify-json/simple-icons": "^1.2.73",
     "@iconify-json/skill-icons": "^1.2.4",
+    "@iconify-json/vscode-icons": "^1.2.45",
     "@iconify/react": "^6.0.2",
     "ts-pattern": "^5.9.0",
-    "@zpress/core": "0.2.1"
+    "@zpress/core": "0.3.0"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.2.10",
-    "@iconify-json/material-icon-theme": "^1.2.55",
-    "@iconify-json/vscode-icons": "^1.2.45",
     "@rslib/core": "^0.20.0",
     "@rspress/core": "^2.0.5",
     "@types/react": "^19.2.14",

package/src/theme/components/home/feature-card.css

@@ -10,7 +10,7 @@
   gap: var(--feature-grid-gap);
   max-width: 1152px;
   margin: 0 auto;
-  padding: 0 0 64px;
+  padding: 0 16px 64px;
 }
 
 /* ── Grid item + span system ────────────────────────────────── */

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import type React from 'react'
 
 import './branch-tag.css'
 import { Icon } from '../shared/icon.tsx'
@@ -17,32 +17,12 @@ function resolveBranch(): string {
 }
 
 /**
- * Git branch tag — pill-shaped badge positioned in the nav bar.
- * Hidden when on `main` (production). Uses the pixelarticons:git-branch icon.
+ * Git branch tag — pill-shaped badge rendered via the `beforeNavMenu`
+ * layout slot. Hidden when on `main` (production).
+ * Uses the pixelarticons:git-branch icon.
  */
 export function BranchTag(): React.ReactElement | null {
   const branch = resolveBranch()
-  const rootRef = useRef<HTMLAnchorElement>(null)
-
-  useEffect(() => {
-    if (!branch || branch === 'main' || !rootRef.current) {
-      return
-    }
-
-    const node = rootRef.current
-
-    // Relocate into the search container so it sits beside the search button.
-    // No Rspress API exists for injecting into the nav bar, so direct DOM
-    // manipulation is the only option for this placement.
-    const searchContainer = document.querySelector('.rspress-nav-search')
-    if (searchContainer) {
-      searchContainer.append(node)
-    }
-
-    return () => {
-      node.remove()
-    }
-  }, [branch])
 
   if (!branch || branch === 'main') {
     return null
@@ -51,7 +31,6 @@ export function BranchTag(): React.ReactElement | null {
   return (
     <a
       className="branch-tag"
-      ref={rootRef}
       href={`https://github.com/joggrdocs/zpress/tree/${branch}`}
       target="_blank"
       rel="noopener noreferrer"

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

@@ -0,0 +1,14 @@
+import { Layout as OriginalLayout } from '@rspress/core/theme-original'
+import type React from 'react'
+
+import { BranchTag } from './branch-tag'
+
+/**
+ * Custom Layout override for zpress.
+ * Wraps the original Rspress Layout and injects the BranchTag
+ * into the `beforeNavMenu` slot so it renders before the search
+ * bar in the navbar on all page types.
+ */
+export function Layout(): React.ReactElement {
+  return <OriginalLayout beforeNavMenu={<BranchTag />} />
+}

package/src/theme/components/workspaces/card.css

@@ -7,7 +7,7 @@
 .workspace-section {
   max-width: 1152px;
   margin: 0 auto;
-  padding: 0 0 64px;
+  padding: 0 16px 64px;
 }
 
 .workspace-section h2 {

package/src/theme/index.tsx

@@ -23,6 +23,9 @@ import './styles/overrides/section-card.css'
 // (theme-original avoids circular resolution when used inside a themeDir)
 export * from '@rspress/core/theme-original'
 
+// Layout override — inject zpress nav components via layout slots
+export { Layout } from './components/nav/layout'
+
 // zpress components
 export { FeatureCard, FeatureGrid } from './components/home/feature-card'
 export type { FeatureCardProps, FeatureItem, IconColor } from './components/home/feature-card'

package/src/theme/styles/overrides/home-card.css

@@ -120,6 +120,7 @@
 .home-card-divider {
   max-width: 1152px;
   margin: 0 auto 48px;
+  padding: 0 16px;
   border: none;
   border-top: 1px solid var(--zp-c-divider);
 }

package/src/theme/styles/overrides/home.css

@@ -15,7 +15,7 @@ html .rp-home-hero__image-img {
 }
 
 /* ── Rspress home hero container ────────────────────────── */
-html .rp-home-hero {
+html .rp-home-hero__container {
   gap: 16px !important;
 }
 
@@ -33,7 +33,15 @@ html .rp-home-hero__tagline {
   padding-bottom: 16px !important;
 }
 
+html .rp-home-hero__actions {
+  gap: 1.25rem !important;
+}
+
 @media (max-width: 1000px) {
+  html .rp-home-hero {
+    padding-bottom: 24px !important;
+  }
+
   html .rp-home-hero__image {
     width: 400px;
     margin-left: 0;
@@ -45,6 +53,42 @@ html .rp-home-hero__tagline {
   }
 }
 
+/* ── Mobile overrides ────────────────────────────────────── */
+@media (max-width: 768px) {
+  html .rp-home-hero__container {
+    gap: 8px !important;
+  }
+
+  html .rp-home-hero__image {
+    width: 100%;
+    max-width: 90vw !important;
+    margin-left: 0;
+    margin-top: 24px;
+  }
+
+  html .rp-home-hero__image-img {
+    width: 100%;
+    max-width: 90vw !important;
+  }
+
+  html .rp-home-hero__content {
+    padding: 0 8px;
+  }
+
+  html .rp-home-hero__name {
+    font-size: 1.125rem !important;
+  }
+
+  html .rp-home-hero__text {
+    font-size: 2rem !important;
+  }
+
+  html .rp-home-hero__tagline {
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+  }
+}
+
 /* ── Code blocks ─────────────────────────────────────────── */
 div[class*='language-'] {
   border-radius: var(--rp-radius) !important;