@brillout/docpress 0.9.3 → 0.9.5

package/Layout.tsx

@@ -26,13 +26,10 @@ const mainViewPadding = 20
 const mainViewWidthMax = 800
 const navLeftWidthMax = 370
 const navLeftWidthMin = 300
-// 840 = 800 + 20 * 2
-const mainViewMax = mainViewWidthMax + mainViewPadding * 2
+const mainViewMax = (mainViewWidthMax + mainViewPadding * 2) as 840 // 840 = 800 + 20 * 2
 const containerQueryMobileMenu = 1000
-// 1143 = 840 + 300
-const containerQueryMobileLayout = mainViewMax + navLeftWidthMin
-// 1213 = 840 + 370 + 3
-const containerQueryExtraSpace = mainViewMax + navLeftWidthMax + blockMargin
+const containerQueryMobileLayout = (mainViewMax + navLeftWidthMin) as 1143 // 1143 = 840 + 300
+const containerQueryExtraSpace = (mainViewMax + navLeftWidthMax + blockMargin) as 1213 // 1213 = 840 + 370 + 3
 
 // Avoid whitespace at the bottom of pages with almost no content
 const whitespaceBuster1: React.CSSProperties = {
@@ -61,7 +58,8 @@ function Layout({ children }: { children: React.ReactNode }) {
         ['--bg-color']: '#f5f5f7',
         ['--block-margin']: `${blockMargin}px`,
         ['--icon-text-padding']: '8px',
-        ['--nav-head-height']: `${isLandingPage ? 70 : 60}px`,
+        // ['--nav-head-height']: `${isLandingPage ? 70 : 60}px`,
+        ['--nav-head-height']: `60px`,
       }}
     >
       <MenuModal isTopNav={isLandingPage} />
@@ -89,7 +87,11 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
       <style>{getStyle()}</style>
       <div style={{ display: 'flex', ...whitespaceBuster2 }}>
         <NavLeft />
-        <div id='nav-left-margin' className="low-prio-grow" style={{ width: 0, maxWidth: 50, background: 'var(--bg-color)' }} />
+        <div
+          id="nav-left-margin"
+          className="low-prio-grow"
+          style={{ width: 0, maxWidth: 50, background: 'var(--bg-color)' }}
+        />
         <PageContent>{children}</PageContent>
       </div>
     </>
@@ -246,6 +248,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   const pageContext2 = usePageContext2()
   const { projectName } = pageContext.meta
   const { isLandingPage } = pageContext
+  const { navMaxWidth } = pageContext.config
 
   const linkStyle: React.CSSProperties = {
     height: '100%',
@@ -256,7 +259,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   const TopNavigation = pageContext2.config.TopNavigation || PassThrough
   const navSecondaryContent = (
     <div
-      className={isNavLeft ? 'show-on-nav-hover add-transition' : 'hide-on-shrink'}
+      className={isNavLeft ? 'show-on-nav-hover add-transition' : 'hide-on-shrink desktop-grow'}
       style={{
         padding: 0,
         display: 'flex',
@@ -274,6 +277,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
       }}
     >
       <TopNavigation />
+      <div className="desktop-grow" />
       <NavSecondaryContent
         style={{
           display: 'inline-flex',
@@ -309,6 +313,8 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
           className="nav-head-content"
           style={{
             width: '100%',
+            maxWidth: navMaxWidth,
+            margin: 'auto',
             height: 'var(--nav-head-height)',
             fontSize: `min(16.96px, ${isProjectNameShort(projectName) ? '4.8cqw' : '4.5cqw'})`,
             color: '#666',
@@ -317,9 +323,10 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
             justifyContent: 'center',
           }}
         >
-          <NavLogo className="grow-half" />
-          <SearchLink className="grow-half" style={linkStyle} />
-          <MenuLink className="grow-full" style={linkStyle} />
+          <NavLogo className="mobile-grow-half" />
+          <div className="desktop-grow" />
+          <SearchLink className="mobile-grow-half" style={linkStyle} />
+          <MenuLink className="mobile-grow-full" style={linkStyle} />
           {navSecondaryContent}
         </div>
       </div>
@@ -330,10 +337,10 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   function getStyle() {
     let style = css`
 @container container-nav-head (max-width: 550px) {
-  .grow-full {
+  .mobile-grow-full {
     flex-grow: 1;
   }
-  .grow-half {
+  .mobile-grow-half {
     flex-grow: 0.5;
   }
   .nav-head-content {
@@ -358,7 +365,23 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   }
 }
 `
-    if (isLandingPage)
+    if (navMaxWidth) {
+      style += css`
+@media(min-width: ${containerQueryMobileMenu + 1}px) {
+  .desktop-grow {
+    flex-grow: 1;
+  }
+  .desktop-fade {
+    transition: opacity 0.3s ease-in-out !important;
+  }
+  html:not(.menu-modal-show) .nav-head-top:not(:hover) .desktop-fade {
+    transition: opacity 0.3s ease-in-out !important;
+    opacity: 0.5;
+  }
+}
+`
+    }
+    if (isLandingPage && !navMaxWidth)
       style += css`
 @media(min-width: ${containerQueryMobileMenu + 1}px) {
   .nav-logo {
@@ -521,7 +544,7 @@ function MenuLink(props: PropsDiv) {
 }
 function DocsIcon() {
   return (
-    <span style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)' }} className="decolorize-6">
+    <span style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)' }} className="decolorize-6 desktop-fade">
       📚
     </span>
   )
@@ -530,7 +553,7 @@ function MenuIcon() {
   return (
     <svg
       style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', verticalAlign: 'top', width: '1.3em' }}
-      className="decolorize-6"
+      className="decolorize-6 desktop-fade"
       viewBox="0 0 448 512"
     >
       <path

package/NavSecondaryContent.tsx

@@ -9,7 +9,7 @@ import iconLanguages from './icons/languages.svg'
 import { usePageContext } from './renderer/usePageContext'
 import '@docsearch/css'
 
-function NavSecondaryContent(props: { style?: React.CSSProperties; className?: string }) {
+function NavSecondaryContent(props: { style?: React.CSSProperties }) {
   const pageContext = usePageContext()
   const { projectInfo, i18n } = pageContext.config
   const iconI18n = !i18n ? null : (
@@ -28,6 +28,7 @@ function NavSecondaryContent(props: { style?: React.CSSProperties; className?: s
         alignItems: 'center',
         ...props.style,
       }}
+      className="desktop-fade"
     >
       {iconI18n}
       {projectInfo.discordInvite && (

package/components/RepoLink.tsx

@@ -16,9 +16,10 @@ function RepoLink({ path, text, editMode }: { path: string; text?: string | JSX.
   if (!path.startsWith('/')) {
     path = '/' + path
   }
-  const viewMode = path.endsWith('/') || editMode ? 'tree' : 'blob'
+  const viewMode = path.endsWith('/') && !editMode ? 'tree' : 'blob'
   const { githubRepository } = pageContext.config.projectInfo
   assert(githubRepository.startsWith('https://github.com/'))
-  const href = `${githubRepository}/${viewMode}/main${path}`
+  let href = `${githubRepository}/${viewMode}/main${path}`
+  if (editMode) href += '?plain=1'
   return <a href={href}>{text}</a>
 }

package/dist/Layout.d.ts

@@ -8,7 +8,7 @@ import React from 'react';
 declare const navLeftWidthMax = 370;
 declare const navLeftWidthMin = 300;
 declare const containerQueryMobileMenu = 1000;
-declare const containerQueryMobileLayout: number;
+declare const containerQueryMobileLayout: 1143;
 declare function Layout({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;

package/dist/Layout.js

@@ -39,13 +39,10 @@ var mainViewPadding = 20;
 var mainViewWidthMax = 800;
 var navLeftWidthMax = 370;
 var navLeftWidthMin = 300;
-// 840 = 800 + 20 * 2
-var mainViewMax = mainViewWidthMax + mainViewPadding * 2;
+var mainViewMax = (mainViewWidthMax + mainViewPadding * 2); // 840 = 800 + 20 * 2
 var containerQueryMobileMenu = 1000;
-// 1143 = 840 + 300
-var containerQueryMobileLayout = mainViewMax + navLeftWidthMin;
-// 1213 = 840 + 370 + 3
-var containerQueryExtraSpace = mainViewMax + navLeftWidthMax + blockMargin;
+var containerQueryMobileLayout = (mainViewMax + navLeftWidthMin); // 1143 = 840 + 300
+var containerQueryExtraSpace = (mainViewMax + navLeftWidthMax + blockMargin); // 1213 = 840 + 370 + 3
 // Avoid whitespace at the bottom of pages with almost no content
 var whitespaceBuster1 = {
     minHeight: '100vh',
@@ -71,7 +68,8 @@ function Layout(_a) {
             _b['--bg-color'] = '#f5f5f7',
             _b['--block-margin'] = "".concat(blockMargin, "px"),
             _b['--icon-text-padding'] = '8px',
-            _b['--nav-head-height'] = "".concat(isLandingPage ? 70 : 60, "px"),
+            // ['--nav-head-height']: `${isLandingPage ? 70 : 60}px`,
+            _b['--nav-head-height'] = "60px",
             _b) },
         React.createElement(MenuModal, { isTopNav: isLandingPage }),
         React.createElement("div", { className: isLandingPage ? '' : 'doc-page', style: __assign({ 
@@ -89,7 +87,7 @@ function LayoutDocsPage(_a) {
         React.createElement("style", null, getStyle()),
         React.createElement("div", { style: __assign({ display: 'flex' }, whitespaceBuster2) },
             React.createElement(NavLeft, null),
-            React.createElement("div", { id: 'nav-left-margin', className: "low-prio-grow", style: { width: 0, maxWidth: 50, background: 'var(--bg-color)' } }),
+            React.createElement("div", { id: "nav-left-margin", className: "low-prio-grow", style: { width: 0, maxWidth: 50, background: 'var(--bg-color)' } }),
             React.createElement(PageContent, null, children))));
     function getStyle() {
         var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n@container container-viewport (min-width: ", "px) {\n  .low-prio-grow {\n    flex-grow: 1;\n  }\n  #navigation-container {\n    width: ", "px !important;\n  }\n}"], ["\n@container container-viewport (min-width: ", "px) {\n  .low-prio-grow {\n    flex-grow: 1;\n  }\n  #navigation-container {\n    width: ", "px !important;\n  }\n}"])), containerQueryExtraSpace, navLeftWidthMax);
@@ -168,13 +166,14 @@ function NavHead(_a) {
     var pageContext2 = usePageContext2();
     var projectName = pageContext.meta.projectName;
     var isLandingPage = pageContext.isLandingPage;
+    var navMaxWidth = pageContext.config.navMaxWidth;
     var linkStyle = {
         height: '100%',
         padding: '0 var(--padding-side)',
         justifyContent: 'center',
     };
     var TopNavigation = pageContext2.config.TopNavigation || PassThrough;
-    var navSecondaryContent = (React.createElement("div", { className: isNavLeft ? 'show-on-nav-hover add-transition' : 'hide-on-shrink', style: __assign({ padding: 0, display: 'flex', height: '100%' }, (!isNavLeft
+    var navSecondaryContent = (React.createElement("div", { className: isNavLeft ? 'show-on-nav-hover add-transition' : 'hide-on-shrink desktop-grow', style: __assign({ padding: 0, display: 'flex', height: '100%' }, (!isNavLeft
             ? {}
             : {
                 position: 'absolute',
@@ -185,6 +184,7 @@ function NavHead(_a) {
                 width: mainViewMax, // guaranteed real estate
             })) },
         React.createElement(TopNavigation, null),
+        React.createElement("div", { className: "desktop-grow" }),
         React.createElement(NavSecondaryContent, { style: {
                 display: 'inline-flex',
                 fontSize: '1.06em',
@@ -207,6 +207,8 @@ function NavHead(_a) {
             } },
             React.createElement("div", { className: "nav-head-content", style: (_b = {
                         width: '100%',
+                        maxWidth: navMaxWidth,
+                        margin: 'auto',
                         height: 'var(--nav-head-height)',
                         fontSize: "min(16.96px, ".concat(isProjectNameShort(projectName) ? '4.8cqw' : '4.5cqw', ")"),
                         color: '#666'
@@ -215,17 +217,21 @@ function NavHead(_a) {
                     _b.display = 'flex',
                     _b.justifyContent = 'center',
                     _b) },
-                React.createElement(NavLogo, { className: "grow-half" }),
-                React.createElement(SearchLink, { className: "grow-half", style: linkStyle }),
-                React.createElement(MenuLink, { className: "grow-full", style: linkStyle }),
+                React.createElement(NavLogo, { className: "mobile-grow-half" }),
+                React.createElement("div", { className: "desktop-grow" }),
+                React.createElement(SearchLink, { className: "mobile-grow-half", style: linkStyle }),
+                React.createElement(MenuLink, { className: "mobile-grow-full", style: linkStyle }),
                 navSecondaryContent)),
         getStyle()));
     function getStyle() {
-        var style = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n@container container-nav-head (max-width: 550px) {\n  .grow-full {\n    flex-grow: 1;\n  }\n  .grow-half {\n    flex-grow: 0.5;\n  }\n  .nav-head-content {\n    --padding-side: 0px;\n  }\n  .nav-logo {\n    padding-left: 15px;\n    margin-left: -10px;\n  }\n}\n@container container-nav-head (min-width: 501px) {\n  .nav-head-content {\n    --padding-side: 35px;\n  }\n  .nav-logo {\n    padding: 0 var(--padding-side);\n  }\n}\n@media(max-width: ", "px) {\n  .hide-on-shrink {\n    display: none !important;\n  }\n}\n"], ["\n@container container-nav-head (max-width: 550px) {\n  .grow-full {\n    flex-grow: 1;\n  }\n  .grow-half {\n    flex-grow: 0.5;\n  }\n  .nav-head-content {\n    --padding-side: 0px;\n  }\n  .nav-logo {\n    padding-left: 15px;\n    margin-left: -10px;\n  }\n}\n@container container-nav-head (min-width: 501px) {\n  .nav-head-content {\n    --padding-side: 35px;\n  }\n  .nav-logo {\n    padding: 0 var(--padding-side);\n  }\n}\n@media(max-width: ", "px) {\n  .hide-on-shrink {\n    display: none !important;\n  }\n}\n"])), containerQueryMobileMenu);
-        if (isLandingPage)
-            style += css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n@media(min-width: ", "px) {\n  .nav-logo {\n    display: none !important;\n  }\n}\n"], ["\n@media(min-width: ", "px) {\n  .nav-logo {\n    display: none !important;\n  }\n}\n"])), containerQueryMobileMenu + 1);
+        var style = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n@container container-nav-head (max-width: 550px) {\n  .mobile-grow-full {\n    flex-grow: 1;\n  }\n  .mobile-grow-half {\n    flex-grow: 0.5;\n  }\n  .nav-head-content {\n    --padding-side: 0px;\n  }\n  .nav-logo {\n    padding-left: 15px;\n    margin-left: -10px;\n  }\n}\n@container container-nav-head (min-width: 501px) {\n  .nav-head-content {\n    --padding-side: 35px;\n  }\n  .nav-logo {\n    padding: 0 var(--padding-side);\n  }\n}\n@media(max-width: ", "px) {\n  .hide-on-shrink {\n    display: none !important;\n  }\n}\n"], ["\n@container container-nav-head (max-width: 550px) {\n  .mobile-grow-full {\n    flex-grow: 1;\n  }\n  .mobile-grow-half {\n    flex-grow: 0.5;\n  }\n  .nav-head-content {\n    --padding-side: 0px;\n  }\n  .nav-logo {\n    padding-left: 15px;\n    margin-left: -10px;\n  }\n}\n@container container-nav-head (min-width: 501px) {\n  .nav-head-content {\n    --padding-side: 35px;\n  }\n  .nav-logo {\n    padding: 0 var(--padding-side);\n  }\n}\n@media(max-width: ", "px) {\n  .hide-on-shrink {\n    display: none !important;\n  }\n}\n"])), containerQueryMobileMenu);
+        if (navMaxWidth) {
+            style += css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n@media(min-width: ", "px) {\n  .desktop-grow {\n    flex-grow: 1;\n  }\n  .desktop-fade {\n    transition: opacity 0.3s ease-in-out !important;\n  }\n  html:not(.menu-modal-show) .nav-head-top:not(:hover) .desktop-fade {\n    transition: opacity 0.3s ease-in-out !important;\n    opacity: 0.5;\n  }\n}\n"], ["\n@media(min-width: ", "px) {\n  .desktop-grow {\n    flex-grow: 1;\n  }\n  .desktop-fade {\n    transition: opacity 0.3s ease-in-out !important;\n  }\n  html:not(.menu-modal-show) .nav-head-top:not(:hover) .desktop-fade {\n    transition: opacity 0.3s ease-in-out !important;\n    opacity: 0.5;\n  }\n}\n"])), containerQueryMobileMenu + 1);
+        }
+        if (isLandingPage && !navMaxWidth)
+            style += css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n@media(min-width: ", "px) {\n  .nav-logo {\n    display: none !important;\n  }\n}\n"], ["\n@media(min-width: ", "px) {\n  .nav-logo {\n    display: none !important;\n  }\n}\n"])), containerQueryMobileMenu + 1);
         if (isNavLeft) {
-            style += css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\n.show-on-nav-hover {\n  opacity: 0;\n  transition-property: opacity;\n  pointer-events: none;\n}\nhtml:not(.unexpand-nav) :has(.nav-head-full-width:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav) :has(.show-on-nav-hover:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav).menu-modal-show .show-on-nav-hover {\n  opacity: 1;\n  pointer-events: all;\n}\n"], ["\n\n.show-on-nav-hover {\n  opacity: 0;\n  transition-property: opacity;\n  pointer-events: none;\n}\nhtml:not(.unexpand-nav) :has(.nav-head-full-width:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav) :has(.show-on-nav-hover:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav).menu-modal-show .show-on-nav-hover {\n  opacity: 1;\n  pointer-events: all;\n}\n"])));
+            style += css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\n.show-on-nav-hover {\n  opacity: 0;\n  transition-property: opacity;\n  pointer-events: none;\n}\nhtml:not(.unexpand-nav) :has(.nav-head-full-width:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav) :has(.show-on-nav-hover:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav).menu-modal-show .show-on-nav-hover {\n  opacity: 1;\n  pointer-events: all;\n}\n"], ["\n\n.show-on-nav-hover {\n  opacity: 0;\n  transition-property: opacity;\n  pointer-events: none;\n}\nhtml:not(.unexpand-nav) :has(.nav-head-full-width:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav) :has(.show-on-nav-hover:hover) .show-on-nav-hover,\nhtml:not(.unexpand-nav).menu-modal-show .show-on-nav-hover {\n  opacity: 1;\n  pointer-events: all;\n}\n"])));
         }
         return React.createElement(Style, null, style);
     }
@@ -251,7 +257,7 @@ function NavHeaderLeftFullWidthBackground() {
             } }),
         React.createElement(Style, null, 
         // (min-width: 0px) => trick to always apply => @container seems to always require a condition
-        css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n@container container-viewport (min-width: 0px) {\n  .nav-bg {\n     width: 100cqw;\n  }\n}\n"], ["\n@container container-viewport (min-width: 0px) {\n  .nav-bg {\n     width: 100cqw;\n  }\n}\n"]))))));
+        css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n@container container-viewport (min-width: 0px) {\n  .nav-bg {\n     width: 100cqw;\n  }\n}\n"], ["\n@container container-viewport (min-width: 0px) {\n  .nav-bg {\n     width: 100cqw;\n  }\n}\n"]))))));
 }
 function NavLogo(_a) {
     var className = _a.className;
@@ -305,13 +311,13 @@ function MenuLink(props) {
         React.createElement("span", { className: "text-menu" },
             React.createElement(MenuIcon, null),
             " Menu"),
-        React.createElement(Style, null, css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n@media(max-width: ", "px) {\n  .text-docs {\n    display: none;\n  }\n}\n@media(min-width: ", "px) {\n  .text-menu {\n    display: none;\n  }\n}\n"], ["\n@media(max-width: ", "px) {\n  .text-docs {\n    display: none;\n  }\n}\n@media(min-width: ", "px) {\n  .text-menu {\n    display: none;\n  }\n}\n"])), containerQueryMobileMenu, containerQueryMobileMenu + 1))));
+        React.createElement(Style, null, css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n@media(max-width: ", "px) {\n  .text-docs {\n    display: none;\n  }\n}\n@media(min-width: ", "px) {\n  .text-menu {\n    display: none;\n  }\n}\n"], ["\n@media(max-width: ", "px) {\n  .text-docs {\n    display: none;\n  }\n}\n@media(min-width: ", "px) {\n  .text-menu {\n    display: none;\n  }\n}\n"])), containerQueryMobileMenu, containerQueryMobileMenu + 1))));
 }
 function DocsIcon() {
-    return (React.createElement("span", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)' }, className: "decolorize-6" }, "\uD83D\uDCDA"));
+    return (React.createElement("span", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)' }, className: "decolorize-6 desktop-fade" }, "\uD83D\uDCDA"));
 }
 function MenuIcon() {
-    return (React.createElement("svg", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', verticalAlign: 'top', width: '1.3em' }, className: "decolorize-6", viewBox: "0 0 448 512" },
+    return (React.createElement("svg", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', verticalAlign: 'top', width: '1.3em' }, className: "decolorize-6 desktop-fade", viewBox: "0 0 448 512" },
         React.createElement("path", { fill: "currentColor", d: "M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" })));
 }
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/NavSecondaryContent.d.ts

@@ -3,5 +3,4 @@ import React from 'react';
 import '@docsearch/css';
 declare function NavSecondaryContent(props: {
     style?: React.CSSProperties;
-    className?: string;
 }): React.JSX.Element;

package/dist/NavSecondaryContent.js

@@ -22,7 +22,7 @@ function NavSecondaryContent(props) {
     var pageContext = usePageContext();
     var _a = pageContext.config, projectInfo = _a.projectInfo, i18n = _a.i18n;
     var iconI18n = !i18n ? null : (React.createElement(LinkIcon, { className: "decolorize-4", icon: iconLanguages, href: '/languages', style: { height: 21, position: 'relative', top: 0, left: 0 } }));
-    return (React.createElement("div", __assign({}, props, { style: __assign({ display: 'flex', alignItems: 'center' }, props.style) }),
+    return (React.createElement("div", __assign({}, props, { style: __assign({ display: 'flex', alignItems: 'center' }, props.style), className: "desktop-fade" }),
         iconI18n,
         projectInfo.discordInvite && (React.createElement(LinkIcon, { className: "decolorize-6", icon: iconDiscord, href: projectInfo.discordInvite })),
         React.createElement(LinkIcon, { className: "decolorize-4", icon: iconTwitter, href: projectInfo.twitterProfile }),

package/dist/components/RepoLink.js

@@ -14,9 +14,11 @@ function RepoLink(_a) {
     if (!path.startsWith('/')) {
         path = '/' + path;
     }
-    var viewMode = path.endsWith('/') || editMode ? 'tree' : 'blob';
+    var viewMode = path.endsWith('/') && !editMode ? 'tree' : 'blob';
     var githubRepository = pageContext.config.projectInfo.githubRepository;
     assert(githubRepository.startsWith('https://github.com/'));
     var href = "".concat(githubRepository, "/").concat(viewMode, "/main").concat(path);
+    if (editMode)
+        href += '?plain=1';
     return React.createElement("a", { href: href }, text);
 }

package/dist/docsearch/SearchLink.js

@@ -21,5 +21,5 @@ function SearchLink(props) {
         "Search"));
 }
 function SearchIcon() {
-    return (React.createElement("span", { style: { marginRight: 'var(--icon-text-padding)', fontSize: '1.1em' }, className: "decolorize-7" }, "\uD83D\uDD0D"));
+    return (React.createElement("span", { style: { marginRight: 'var(--icon-text-padding)', fontSize: '1.1em' }, className: "decolorize-7 desktop-fade" }, "\uD83D\uDD0D"));
 }

package/dist/renderer/usePageContext.js

@@ -1,12 +1,17 @@
 export { usePageContext };
 export { PageContextProvider };
 import React, { useContext } from 'react';
-var Context = React.createContext(undefined);
+import { getGlobalObject } from '../utils/getGlobalObject';
+var globalObject = getGlobalObject('onRenderClient.ts', {
+    Context: React.createContext(undefined),
+});
 function PageContextProvider(_a) {
     var pageContext = _a.pageContext, children = _a.children;
+    var Context = globalObject.Context;
     return React.createElement(Context.Provider, { value: pageContext }, children);
 }
 function usePageContext() {
+    var Context = globalObject.Context;
     var pageContext = useContext(Context);
     return pageContext;
 }

package/dist/types/Config.d.ts

@@ -27,4 +27,5 @@ type Config = {
     i18n?: true;
     pressKit?: true;
     sponsorGithubAccount?: string;
+    navMaxWidth?: number;
 };

package/docsearch/SearchLink.tsx

@@ -29,7 +29,7 @@ function SearchLink(props: PropsAnchor) {
 }
 function SearchIcon() {
   return (
-    <span style={{ marginRight: 'var(--icon-text-padding)', fontSize: '1.1em' }} className="decolorize-7">
+    <span style={{ marginRight: 'var(--icon-text-padding)', fontSize: '1.1em' }} className="decolorize-7 desktop-fade">
       🔍
     </span>
   )

package/package.json

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

package/renderer/usePageContext.tsx

@@ -4,8 +4,11 @@ export { PageContextProvider }
 import React, { useContext } from 'react'
 import type { PageContextResolved } from '../config/resolvePageContext'
 import type { PageContext } from 'vike/types'
+import { getGlobalObject } from '../utils/getGlobalObject'
 
-const Context = React.createContext<PageContextResolved>(undefined as any)
+const globalObject = getGlobalObject('onRenderClient.ts', {
+  Context: React.createContext<PageContextResolved>(undefined as any),
+})
 
 function PageContextProvider({
   pageContext,
@@ -14,10 +17,12 @@ function PageContextProvider({
   pageContext: PageContextResolved
   children: React.ReactNode
 }) {
+  const { Context } = globalObject
   return <Context.Provider value={pageContext}>{children}</Context.Provider>
 }
 
 function usePageContext(): PageContextResolved {
+  const { Context } = globalObject
   const pageContext = useContext(Context)
   return pageContext
 }

package/types/Config.ts

@@ -29,4 +29,5 @@ type Config = {
   i18n?: true
   pressKit?: true
   sponsorGithubAccount?: string
+  navMaxWidth?: number
 }