@brillout/docpress 0.10.10 → 0.10.12

package/+config.ts

@@ -25,7 +25,7 @@ export default {
   },
 } satisfies Config
 
-type ReactComponent = () => JSX.Element
+type ReactComponent = () => React.JSX.Element
 declare global {
   namespace Vike {
     interface PageContext {

package/Layout.tsx

@@ -1,7 +1,7 @@
 export { Layout }
 export { MenuToggle }
 export { containerQueryMobileLayout }
-export { containerQueryMobileMenu }
+export { containerQueryMobileNav as containerQueryMobileMenu }
 export { navLeftWidthMin }
 export { navLeftWidthMax }
 export { unexpandNav }
@@ -27,10 +27,11 @@ import { getRepoHref } from './components'
 const blockMargin = 3
 const mainViewPadding = 20
 const mainViewWidthMax = 800
-const navLeftWidthMax = 370
-const navLeftWidthMin = 300
 const mainViewMax = (mainViewWidthMax + mainViewPadding * 2) as 840 // 840 = 800 + 20 * 2
-const containerQueryMobileMenu = 1000
+const navLeftWidthMin = 300
+const navLeftWidthMax = 370
+const containerQuerySmallNav = 550
+const containerQueryMobileNav = 1000
 const containerQueryMobileLayout = (mainViewMax + navLeftWidthMin) as 1143 // 1143 = 840 + 300
 const containerQueryExtraSpace = (mainViewMax + navLeftWidthMax + blockMargin) as 1213 // 1213 = 840 + 370 + 3
 
@@ -48,7 +49,7 @@ function Layout({ children }: { children: React.ReactNode }) {
   const pageContext = usePageContext()
   const { isLandingPage } = pageContext
 
-  let content: JSX.Element
+  let content: React.JSX.Element
   if (isLandingPage) {
     content = <LayoutLandingPage>{children}</LayoutLandingPage>
   } else {
@@ -346,10 +347,10 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
             justifyContent: 'center',
           }}
         >
-          <NavLogo className="mobile-grow-half" />
+          <NavLogo className="grow-half" />
           {!isNavLeft && <div className="desktop-grow" />}
-          <SearchLink className="mobile-grow-half" style={menuLinkStyle} />
-          <MenuToggleMain className="mobile-grow-full" style={menuLinkStyle} />
+          <SearchLink className="grow-half" style={menuLinkStyle} />
+          <MenuToggleMain className="grow-full" style={menuLinkStyle} />
           {navSecondaryContent}
         </div>
       </div>
@@ -359,21 +360,32 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 
   function getStyle() {
     let style = css`
-@container container-nav-head (max-width: 550px) {
-  .mobile-grow-full {
+@container container-nav-head (max-width: ${containerQuerySmallNav}px) {
+  .grow-full {
     flex-grow: 1;
   }
-  .mobile-grow-half {
+  .grow-half {
     flex-grow: 0.5;
   }
   .nav-head-content {
     --padding-side: 0px;
   }
   .nav-logo {
+    justify-content: flex-start;
     padding-left: 15px;
     margin-left: -10px;
   }
 }
+@container container-viewport (max-width: ${containerQuerySmallNav}px) {
+  .grow-half {
+    flex-grow: 1 !important;
+  }
+  .nav-logo {
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+  }
+}
 @container container-nav-head (min-width: 501px) {
   .nav-head-content {
     --padding-side: 24px;
@@ -382,12 +394,12 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
     padding: 0 var(--padding-side);
   }
 }
-@container container-nav-head (min-width: ${containerQueryMobileMenu + 100}px) {
+@container container-nav-head (min-width: ${containerQueryMobileNav + 100}px) {
   .nav-head-content {
     --padding-side: 35px;
   }
 }
-@media(max-width: ${containerQueryMobileMenu}px) {
+@media(max-width: ${containerQueryMobileNav}px) {
   .hide-on-shrink {
     display: none !important;
   }
@@ -395,7 +407,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 `
     if (navMaxWidth) {
       style += css`
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
+@media(min-width: ${containerQueryMobileNav + 1}px) {
   .desktop-grow {
     flex-grow: 1;
   }
@@ -404,7 +416,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
     }
     if (isLandingPage && !navMaxWidth)
       style += css`
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
+@media(min-width: ${containerQueryMobileNav + 1}px) {
   .nav-logo {
     display: none !important;
   }
@@ -477,9 +489,8 @@ function NavLogo({ className }: { className: string }) {
       style={{
         display: 'flex',
         alignItems: 'center',
-        color: 'inherit',
         height: '100%',
-        justifyContent: 'flex-start',
+        color: 'inherit',
       }}
       href="/"
     >
@@ -525,12 +536,12 @@ function MenuToggleMain(props: PropsDiv) {
         <MenuIcon /> Menu
       </span>
       <Style>{css`
-@media(max-width: ${containerQueryMobileMenu}px) {
+@media(max-width: ${containerQueryMobileNav}px) {
   .text-docs {
     display: none !important;
   }
 }
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
+@media(min-width: ${containerQueryMobileNav + 1}px) {
   .text-menu {
     display: none;
   }

package/NavItemComponent.tsx

@@ -63,7 +63,7 @@ function NavItemComponent({
     )
   }
 
-  let children: JSX.Element = titleInNavJsx
+  let children: React.JSX.Element = titleInNavJsx
   if (navItem.level === 1) {
     children = (
       <>

package/components/Link.tsx

@@ -28,7 +28,7 @@ function Link({
     `<Link href /> prop \`href==='${href}'\` but should start with '/' or '#'`,
   )
   assertUsage(!text || !children, 'Cannot use both `text` or `children`')
-  assertWarning(!text, 'prop `text` is deprecated')
+  // assertWarning(!text, 'prop `text` is deprecated')
   text = text ?? children
 
   if (isRepoLink(href)) {
@@ -55,10 +55,10 @@ function getLinkText({
 }: {
   noBreadcrumb: true | undefined
   linkData: LinkData
-  sectionTitle: JSX.Element | null
+  sectionTitle: React.JSX.Element | null
   isLinkOnSamePage: boolean
-}): JSX.Element {
-  const breadcrumbParts: JSX.Element[] = []
+}): React.JSX.Element {
+  const breadcrumbParts: React.JSX.Element[] = []
   if (linkData.linkBreadcrumb) {
     breadcrumbParts.push(...(linkData.linkBreadcrumb ?? []).slice().reverse().map(parseMarkdownMini))
   }
@@ -91,7 +91,7 @@ function getLinkTextData(href: string, pageContext: PageContextResolved, doNotIn
   const isLinkOnSamePage = linkData.url === pageContext.urlPathname
   if (!hrefPathname) assert(isLinkOnSamePage)
 
-  let sectionTitle: JSX.Element | null = null
+  let sectionTitle: React.JSX.Element | null = null
   if (hrefHash) {
     assert(!hrefHash.startsWith('#'))
     if (isLinkOnSamePage) {

package/components/Note.tsx

@@ -39,7 +39,7 @@ function Danger(props: Props) {
 function NoteWithoutIcon(props: Props) {
   return <NoteGeneric icon={null} {...props} />
 }
-type CustomIcon = JSX.Element | string
+type CustomIcon = React.JSX.Element | string
 function NoteWithCustomIcon(props: Props & { icon: CustomIcon }) {
   const { icon } = props
   if (!icon) throw new Error(`<NoteWithCustomIcon icon={/*...*/}> property 'icon' is \`${icon}\` which is forbidden`)

package/dist/+config.d.ts

@@ -29,7 +29,7 @@ declare const _default: {
     };
 };
 export default _default;
-type ReactComponent = () => JSX.Element;
+type ReactComponent = () => React.JSX.Element;
 declare global {
     namespace Vike {
         interface PageContext {

package/dist/components/Link.js

@@ -21,7 +21,7 @@ function Link(_a) {
     var pageContext = usePageContext();
     assertUsage(href.startsWith('/') || href.startsWith('#'), "<Link href /> prop `href==='".concat(href, "'` but should start with '/' or '#'"));
     assertUsage(!text || !children, 'Cannot use both `text` or `children`');
-    assertWarning(!text, 'prop `text` is deprecated');
+    // assertWarning(!text, 'prop `text` is deprecated')
     text = text !== null && text !== void 0 ? text : children;
     if (isRepoLink(href)) {
         return React.createElement(RepoLink, { path: href, text: text });

package/dist/components/Note.d.ts

@@ -17,7 +17,7 @@ declare function Construction(props: Props): React.JSX.Element;
 declare function Contribution(props: Props): React.JSX.Element;
 declare function Danger(props: Props): React.JSX.Element;
 declare function NoteWithoutIcon(props: Props): React.JSX.Element;
-type CustomIcon = JSX.Element | string;
+type CustomIcon = React.JSX.Element | string;
 declare function NoteWithCustomIcon(props: Props & {
     icon: CustomIcon;
 }): React.JSX.Element;

package/dist/parseMarkdownMini.d.ts

@@ -1,2 +1,3 @@
 export { parseMarkdownMini };
-declare function parseMarkdownMini(markdown: string): JSX.Element;
+import React from 'react';
+declare function parseMarkdownMini(markdown: string): React.JSX.Element;

package/dist/utils/Emoji/Emoji.d.ts

@@ -5,4 +5,4 @@ type EmojiName = 'warning' | 'typescript' | 'shield' | 'mechanical-arm' | 'mount
 declare function Emoji({ name, style }: {
     name: EmojiName;
     style?: React.CSSProperties;
-}): JSX.Element;
+}): React.JSX.Element;

package/dist/utils/jsxToTextContent.d.ts

@@ -1,2 +1,2 @@
 export { jsxToTextContent };
-declare function jsxToTextContent(node: JSX.Element): string;
+declare function jsxToTextContent(node: React.JSX.Element): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.10.10",
+  "version": "0.10.12",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/parseMarkdownMini.ts

@@ -2,7 +2,7 @@ export { parseMarkdownMini }
 
 import React from 'react'
 
-function parseMarkdownMini(markdown: string): JSX.Element {
+function parseMarkdownMini(markdown: string): React.JSX.Element {
   type Part = { nodeType: 'text' | 'code'; content: string }
   const parts: Part[] = []
   let current: Part | undefined

package/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 declare module '*.mdx' {
-  const value: (props?: any) => JSX.Element
+  const value: (props?: any) => React.JSX.Element
   export default value
   export const headings: { level: number; title: string; id: string }[]
 }

package/utils/Emoji/Emoji.ts

@@ -37,7 +37,7 @@ type EmojiName =
   | 'trophy'
   | 'ribbon'
 
-function Emoji({ name, style }: { name: EmojiName; style?: React.CSSProperties }): JSX.Element {
+function Emoji({ name, style }: { name: EmojiName; style?: React.CSSProperties }): React.JSX.Element {
   const emoji =
     // ***
     // U+26A0

package/utils/jsxToTextContent.ts

@@ -3,7 +3,7 @@ import { assert } from './assert'
 export { jsxToTextContent }
 
 // https://stackoverflow.com/questions/34204975/react-is-there-something-similar-to-node-textcontent/60564620#60564620
-function jsxToTextContent(node: JSX.Element): string {
+function jsxToTextContent(node: React.JSX.Element): string {
   if (['string', 'number'].includes(typeof node)) return String(node)
   if (node instanceof Array) return node.map(jsxToTextContent).join('')
   if (typeof node === 'object' && node) return jsxToTextContent(node.props.children)