@nixxie-cms/core 1.0.0 → 1.0.1

package/src/admin-ui/components/PageContainer.tsx

@@ -1,310 +1,311 @@
-import NextHead from 'next/head'
-import { type HTMLAttributes, type ReactNode, useEffect, useState } from 'react'
-
-import { css } from '@keystar/ui/style'
-
-import { Logo } from './Logo'
-import { Navigation } from './Navigation'
-import { CommandPalette } from './CommandPalette'
-
-const SIDEBAR_WIDTH = 256
-const TOPBAR_HEIGHT = 52
-
-export function PageWrapper(props: HTMLAttributes<HTMLElement>) {
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        height: '100vh',
-        overflow: 'hidden',
-        backgroundColor: '#fafafa',
-        fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-      })}
-      {...props}
-    />
-  )
-}
-
-// ---- Mobile overlay ----
-function Backdrop({ isVisible, onClick }: { isVisible: boolean; onClick: () => void }) {
-  return (
-    <div
-      onClick={onClick}
-      aria-hidden={!isVisible}
-      className={css({
-        position: 'fixed',
-        inset: 0,
-        backgroundColor: 'rgba(10,10,10,0.35)',
-        zIndex: 40,
-        transition: 'opacity 200ms',
-        opacity: isVisible ? 1 : 0,
-        pointerEvents: isVisible ? 'auto' : 'none',
-        backdropFilter: 'blur(2px)',
-        '@media (min-width: 768px)': { display: 'none' },
-      })}
-    />
-  )
-}
-
-// ---- Sidebar — pure white, precise ----
-function Sidebar({
-  isOpen,
-  onClose,
-  onCmdK,
-}: {
-  isOpen: boolean
-  onClose: () => void
-  onCmdK: () => void
-}) {
-  return (
-    <>
-      <Backdrop isVisible={isOpen} onClick={onClose} />
-      <aside
-        className={css({
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          bottom: 0,
-          width: SIDEBAR_WIDTH,
-          zIndex: 50,
-          display: 'flex',
-          flexDirection: 'column',
-          backgroundColor: '#ffffff',
-          borderRight: '1px solid #ebebeb',
-          transform: isOpen ? 'translateX(0)' : `translateX(-${SIDEBAR_WIDTH}px)`,
-          transition: 'transform 220ms cubic-bezier(0.4,0,0.2,1)',
-
-          '@media (min-width: 768px)': {
-            position: 'relative',
-            transform: 'translateX(0)',
-            flexShrink: 0,
-          },
-        })}
-      >
-        {/* Logo bar */}
-        <div
-          className={css({
-            display: 'flex',
-            alignItems: 'center',
-            height: TOPBAR_HEIGHT,
-            paddingInline: '16px',
-            borderBottom: '1px solid #f2f2f2',
-            flexShrink: 0,
-          })}
-        >
-          <Logo />
-        </div>
-
-        {/* Nav scrollable area */}
-        <div
-          className={css({
-            flex: 1,
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            WebkitOverflowScrolling: 'touch',
-            '&::-webkit-scrollbar': { width: 3 },
-            '&::-webkit-scrollbar-thumb': { background: '#ebebeb', borderRadius: 3 },
-          })}
-        >
-          <Navigation onNavItemClick={onClose} onCmdK={onCmdK} />
-        </div>
-      </aside>
-    </>
-  )
-}
-
-// ---- Top bar ----
-function TopBar({
-  header,
-  onMenuClick,
-  isSidebarOpen,
-}: {
-  header: ReactNode
-  onMenuClick: () => void
-  isSidebarOpen: boolean
-}) {
-  return (
-    <header
-      className={css({
-        display: 'flex',
-        alignItems: 'center',
-        height: TOPBAR_HEIGHT,
-        paddingInline: '24px',
-        gap: '14px',
-        backgroundColor: '#ffffff',
-        borderBottom: '1px solid #ebebeb',
-        flexShrink: 0,
-        zIndex: 30,
-      })}
-    >
-      {/* Mobile menu button */}
-      <button
-        onClick={onMenuClick}
-        aria-label={isSidebarOpen ? 'Close menu' : 'Open menu'}
-        aria-expanded={isSidebarOpen}
-        className={css({
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: 32,
-          height: 32,
-          borderRadius: 6,
-          border: '1px solid #ebebeb',
-          background: 'transparent',
-          cursor: 'pointer',
-          flexShrink: 0,
-          color: '#a3a3a3',
-          transition: 'color 130ms, background 130ms',
-          '&:hover': { background: '#f5f5f5', color: '#0a0a0a' },
-          '@media (min-width: 768px)': { display: 'none' },
-        })}
-      >
-        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
-          {isSidebarOpen ? (
-            <path
-              d="M3 3L12 12M12 3L3 12"
-              stroke="currentColor"
-              strokeWidth="1.4"
-              strokeLinecap="round"
-            />
-          ) : (
-            <>
-              <line
-                x1="2"
-                y1="4.5"
-                x2="13"
-                y2="4.5"
-                stroke="currentColor"
-                strokeWidth="1.4"
-                strokeLinecap="round"
-              />
-              <line
-                x1="2"
-                y1="7.5"
-                x2="13"
-                y2="7.5"
-                stroke="currentColor"
-                strokeWidth="1.4"
-                strokeLinecap="round"
-              />
-              <line
-                x1="2"
-                y1="10.5"
-                x2="13"
-                y2="10.5"
-                stroke="currentColor"
-                strokeWidth="1.4"
-                strokeLinecap="round"
-              />
-            </>
-          )}
-        </svg>
-      </button>
-
-      {/* Header content (breadcrumbs / title / actions) */}
-      <div
-        className={css({
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          flex: 1,
-          minWidth: 0,
-          gap: '12px',
-        })}
-      >
-        {header}
-      </div>
-    </header>
-  )
-}
-
-// ---- Main content area ----
-function MainContent(props: HTMLAttributes<HTMLElement>) {
-  return (
-    <main
-      className={css({
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-        minWidth: 0,
-        minHeight: 0,
-      })}
-      {...props}
-    />
-  )
-}
-
-function ContentScroller(props: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      data-nixxie-content=""
-      className={css({
-        flex: 1,
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        WebkitOverflowScrolling: 'touch',
-        '&::-webkit-scrollbar': { width: 5 },
-        '&::-webkit-scrollbar-thumb': { background: '#e8e8e8', borderRadius: 4 },
-        '&::-webkit-scrollbar-thumb:hover': { background: '#d4d4d4' },
-      })}
-      {...props}
-    />
-  )
-}
-
-// ---- Public API ----
-type PageContainerProps = {
-  children: ReactNode
-  header: ReactNode
-  title?: string
-}
-
-export function PageContainer({ children, header, title }: PageContainerProps) {
-  const [isSidebarOpen, setSidebarOpen] = useState(false)
-  const [cmdOpen, setCmdOpen] = useState(false)
-
-  useEffect(() => {
-    function onResize() {
-      if (window.innerWidth >= 768) setSidebarOpen(false)
-    }
-    window.addEventListener('resize', onResize)
-    return () => window.removeEventListener('resize', onResize)
-  }, [])
-
-  useEffect(() => {
-    function onKeyDown(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault()
-        setCmdOpen(v => !v)
-      }
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [])
-
-  return (
-    <PageWrapper>
-      <NextHead>
-        <title key="title">{title ? `Nixxie – ${title}` : 'Nixxie'}</title>
-      </NextHead>
-
-      <Sidebar
-        isOpen={isSidebarOpen}
-        onClose={() => setSidebarOpen(false)}
-        onCmdK={() => setCmdOpen(v => !v)}
-      />
-
-      <MainContent>
-        <TopBar
-          header={header}
-          onMenuClick={() => setSidebarOpen(v => !v)}
-          isSidebarOpen={isSidebarOpen}
-        />
-        <ContentScroller>{children}</ContentScroller>
-      </MainContent>
-
-      <CommandPalette isOpen={cmdOpen} onClose={() => setCmdOpen(false)} />
-    </PageWrapper>
-  )
-}
+import NextHead from 'next/head'
+import { type HTMLAttributes, type ReactNode, useEffect, useState } from 'react'
+
+import { css } from '@keystar/ui/style'
+
+import { Logo } from './Logo'
+import { Navigation } from './Navigation'
+import { CommandPalette } from './CommandPalette'
+
+const SIDEBAR_WIDTH = 256
+const TOPBAR_HEIGHT = 52
+
+export function PageWrapper(props: HTMLAttributes<HTMLElement>) {
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        height: '100vh',
+        overflow: 'hidden',
+        backgroundColor: '#fafafa',
+        fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      })}
+      {...props}
+    />
+  )
+}
+
+// ---- Mobile overlay ----
+function Backdrop({ isVisible, onClick }: { isVisible: boolean; onClick: () => void }) {
+  return (
+    <div
+      onClick={onClick}
+      aria-hidden={!isVisible}
+      className={css({
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(10,10,10,0.35)',
+        zIndex: 40,
+        transition: 'opacity 200ms',
+        opacity: isVisible ? 1 : 0,
+        pointerEvents: isVisible ? 'auto' : 'none',
+        backdropFilter: 'blur(2px)',
+        '@media (min-width: 768px)': { display: 'none' },
+      })}
+    />
+  )
+}
+
+// ---- Sidebar — pure white, precise ----
+function Sidebar({
+  isOpen,
+  onClose,
+  onCmdK,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onCmdK: () => void
+}) {
+  return (
+    <>
+      <Backdrop isVisible={isOpen} onClick={onClose} />
+      <aside
+        className={css({
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: SIDEBAR_WIDTH,
+          zIndex: 50,
+          display: 'flex',
+          flexDirection: 'column',
+          backgroundColor: '#ffffff',
+          borderRight: '1px solid #ebebeb',
+          transform: isOpen ? 'translateX(0)' : `translateX(-${SIDEBAR_WIDTH}px)`,
+          transition: 'transform 220ms cubic-bezier(0.4,0,0.2,1)',
+
+          '@media (min-width: 768px)': {
+            position: 'relative',
+            transform: 'translateX(0)',
+            flexShrink: 0,
+          },
+        })}
+      >
+        {/* Logo bar */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            height: TOPBAR_HEIGHT,
+            paddingInline: '16px',
+            borderBottom: '1px solid #f2f2f2',
+            flexShrink: 0,
+          })}
+        >
+          <Logo />
+        </div>
+
+        {/* Nav scrollable area */}
+        <div
+          className={css({
+            flex: 1,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            WebkitOverflowScrolling: 'touch',
+            '&::-webkit-scrollbar': { width: 3 },
+            '&::-webkit-scrollbar-thumb': { background: '#ebebeb', borderRadius: 3 },
+          })}
+        >
+          <Navigation onNavItemClick={onClose} onCmdK={onCmdK} />
+        </div>
+      </aside>
+    </>
+  )
+}
+
+// ---- Top bar ----
+function TopBar({
+  header,
+  onMenuClick,
+  isSidebarOpen,
+}: {
+  header: ReactNode
+  onMenuClick: () => void
+  isSidebarOpen: boolean
+}) {
+  return (
+    <header
+      className={css({
+        display: 'flex',
+        alignItems: 'center',
+        height: TOPBAR_HEIGHT,
+        paddingInline: '24px',
+        gap: '14px',
+        backgroundColor: '#ffffff',
+        borderBottom: '1px solid #ebebeb',
+        flexShrink: 0,
+        zIndex: 30,
+      })}
+    >
+      {/* Mobile menu button */}
+      <button
+        onClick={onMenuClick}
+        aria-label={isSidebarOpen ? 'Close menu' : 'Open menu'}
+        aria-expanded={isSidebarOpen}
+        className={css({
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 32,
+          height: 32,
+          borderRadius: 6,
+          border: '1px solid #ebebeb',
+          background: 'transparent',
+          cursor: 'pointer',
+          flexShrink: 0,
+          color: '#a3a3a3',
+          transition: 'color 130ms, background 130ms',
+          '&:hover': { background: '#f5f5f5', color: '#0a0a0a' },
+          '@media (min-width: 768px)': { display: 'none' },
+        })}
+      >
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+          {isSidebarOpen ? (
+            <path
+              d="M3 3L12 12M12 3L3 12"
+              stroke="currentColor"
+              strokeWidth="1.4"
+              strokeLinecap="round"
+            />
+          ) : (
+            <>
+              <line
+                x1="2"
+                y1="4.5"
+                x2="13"
+                y2="4.5"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+              />
+              <line
+                x1="2"
+                y1="7.5"
+                x2="13"
+                y2="7.5"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+              />
+              <line
+                x1="2"
+                y1="10.5"
+                x2="13"
+                y2="10.5"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+              />
+            </>
+          )}
+        </svg>
+      </button>
+
+      {/* Header content (breadcrumbs / title / actions) */}
+      <div
+        className={css({
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flex: 1,
+          minWidth: 0,
+          gap: '12px',
+        })}
+      >
+        {header}
+      </div>
+    </header>
+  )
+}
+
+// ---- Main content area ----
+function MainContent(props: HTMLAttributes<HTMLElement>) {
+  return (
+    <main
+      className={css({
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        minWidth: 0,
+        minHeight: 0,
+      })}
+      {...props}
+    />
+  )
+}
+
+function ContentScroller(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-nixxie-content=""
+      className={css({
+        flex: 1,
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        WebkitOverflowScrolling: 'touch',
+        '&::-webkit-scrollbar': { width: 5 },
+        '&::-webkit-scrollbar-thumb': { background: '#e8e8e8', borderRadius: 4 },
+        '&::-webkit-scrollbar-thumb:hover': { background: '#d4d4d4' },
+      })}
+      {...props}
+    />
+  )
+}
+
+// ---- Public API ----
+type PageContainerProps = {
+  children: ReactNode
+  header: ReactNode
+  title?: string
+}
+
+export function PageContainer({ children, header, title }: PageContainerProps) {
+  const [isSidebarOpen, setSidebarOpen] = useState(false)
+  const [cmdOpen, setCmdOpen] = useState(false)
+
+  useEffect(() => {
+    function onResize() {
+      if (window.innerWidth >= 768) setSidebarOpen(false)
+    }
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      // Match both 'k' and 'K' (Shift/Caps Lock can change e.key's case).
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault()
+        setCmdOpen(v => !v)
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  return (
+    <PageWrapper>
+      <NextHead>
+        <title key="title">{title ? `Nixxie – ${title}` : 'Nixxie'}</title>
+      </NextHead>
+
+      <Sidebar
+        isOpen={isSidebarOpen}
+        onClose={() => setSidebarOpen(false)}
+        onCmdK={() => setCmdOpen(v => !v)}
+      />
+
+      <MainContent>
+        <TopBar
+          header={header}
+          onMenuClick={() => setSidebarOpen(v => !v)}
+          isSidebarOpen={isSidebarOpen}
+        />
+        <ContentScroller>{children}</ContentScroller>
+      </MainContent>
+
+      <CommandPalette isOpen={cmdOpen} onClose={() => setCmdOpen(false)} />
+    </PageWrapper>
+  )
+}

package/src/admin-ui/components/WelcomeDialog.tsx

@@ -79,7 +79,7 @@ export function WelcomeDialog() {
         <VStack gap="xlarge">
           <Text elementType="p">
             Thanks for installing Nixxie, checkout the{' '}
-            <TextLink href="https://nixxiecms.com">documentation</TextLink> for help getting
+            <TextLink href="https://nixxieinternational.com">documentation</TextLink> for help getting
             started. To stay connected{' '}
             <TextLink href="https://twitter.com/nixxiecms" target="_blank">
               follow us on twitter