@brillout/docpress 0.6.20 → 0.6.21-commit-74553e7

package/+config.ts

@@ -1,17 +1,36 @@
 import type { Config } from 'vike/types'
+import type { Exports } from './config/resolvePageContext'
 
 export default {
   // @ts-ignore Remove this ts-ignore once Vike's new version is released.
   name: '@brillout/docpress',
   onRenderHtml: 'import:@brillout/docpress/renderer/onRenderHtml:onRenderHtml',
-  client: 'import:@brillout/docpress/renderer/client:doesNotExist',
+  onRenderClient: 'import:@brillout/docpress/renderer/onRenderClient:onRenderClient',
+  onBeforeRender: 'import:@brillout/docpress/renderer/onBeforeRender:onBeforeRender',
+  clientRouting: true,
+  hydrationCanBeAborted: true,
+  passToClient: ['pageContextResolved'],
   meta: {
-    Page: {
-      env: { client: false, server: true },
-    },
-    // Vike already defines the setting 'name', but we redundantly define it here for older Vike versions (otherwise older Vike versions will complain that 'name` is an unknown config).
-    name: {
-      env: { config: true },
+    NavHeader: {
+      env: { client: true, server: true }
     },
   },
 } satisfies Config
+
+type ReactComponent = () => JSX.Element
+declare global {
+  namespace Vike {
+    interface PageContext {
+      Page: ReactComponent
+      exports: Exports
+    }
+    interface Config {
+      NavHeader?: {
+        NavHeader: ReactComponent
+        navHeaderWrapperStyle?: React.CSSProperties
+        NavHeaderMobile: ReactComponent
+        navHeaderMobileWrapperStyle?: React.CSSProperties
+      }
+    }
+  }
+}

package/MobileHeader.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
-import { usePageContext } from './renderer/usePageContext'
+import { usePageContext, usePageContext2 } from './renderer/usePageContext'
 
 export { MobileHeader }
 
 function MobileHeader() {
   const pageContext = usePageContext()
+  const pageContext2 = usePageContext2()
+  const { NavHeaderMobile } = pageContext2.config.NavHeader!
   return (
     <div
       id="mobile-header"
@@ -37,10 +39,10 @@ function MobileHeader() {
             alignItems: 'center',
             justifyContent: 'left',
             textDecoration: 'none',
-            ...pageContext.config.navHeaderMobileWrapperStyle,
+            ...pageContext2.config.NavHeader?.navHeaderMobileWrapperStyle,
           }}
         >
-          {pageContext.config.navHeaderMobile}
+          <NavHeaderMobile />
         </a>
       </div>
     </div>

package/PageLayout.css

@@ -1,42 +1,42 @@
-.doc-page #page-container {
+.doc-page .page-container {
   padding-bottom: 100px;
 }
 
-#page-layout {
+.page-layout {
   display: flex;
   justify-content: center;
   width: 100%;
 }
-#page-layout > #navigation-wrapper,
-#page-layout > #page-wrapper {
+.page-layout > #navigation-wrapper,
+.page-layout > .page-wrapper {
   flex-grow: 1;
 }
 /* Avoid overflow, see https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926 */
-#page-layout > #page-wrapper {
+.page-layout > .page-wrapper {
   min-width: 0;
 }
 
-.doc-page #page-wrapper {
+.doc-page .page-wrapper {
   --main-view-max-width: 800px;
 }
-.landing-page #page-wrapper {
+.landing-page .page-wrapper {
   --main-view-max-width: 1010px;
 }
-#page-wrapper {
+.page-wrapper {
   max-width: calc(var(--main-view-max-width) + 80px);
 }
-#page-content {
+.page-content {
   box-sizing: content-box;
   max-width: var(--main-view-max-width);
   padding: 20px var(--main-view-padding);
   margin: auto;
 }
 
-#page-content {
+.page-content {
   --main-view-padding: 20px;
 }
 @media screen and (max-width: 1139px) {
-  #page-content {
+  .page-content {
     --main-view-padding: 10px;
   }
 }

package/PageLayout.tsx

@@ -3,37 +3,44 @@ import { Navigation, NavigationMask } from './navigation/Navigation'
 import type { PageContextResolved } from './config/resolvePageContext'
 import { MobileHeader } from './MobileHeader'
 import { EditPageNote } from './components/EditPageNote'
-import { PageContextProvider } from './renderer/usePageContext'
+import { PageContextProvider, PageContextProvider2 } from './renderer/usePageContext'
 import './PageLayout.css'
 import { NavigationFullscreenButton } from './navigation/navigation-fullscreen/NavigationFullscreenButton'
+import type { PageContext } from 'vike/types'
 
 export { PageLayout }
 
-function PageLayout({ pageContext, children }: { pageContext: PageContextResolved; children: React.ReactNode }) {
-  const { isLandingPage, pageTitle } = pageContext
+function PageLayout({
+  pageContext,
+  children,
+  pageContext2,
+}: { pageContext: PageContextResolved; children: React.ReactNode; pageContext2: PageContext }) {
+  const { isLandingPage, pageTitle, navigationData } = pageContext
   const { globalNote } = pageContext.config
   return (
     <React.StrictMode>
-      <PageContextProvider pageContext={pageContext}>
-        <div id="page-layout" className={isLandingPage ? 'landing-page' : 'doc-page'}>
-          <div id="navigation-wrapper">
-            <Navigation {...pageContext.navigationData} />
-          </div>
-          <NavigationFullscreenButton />
-          <div id="page-wrapper">
-            <div id="page-container">
-              <MobileHeader />
-              <div id="page-content">
-                {globalNote}
-                {pageTitle && <h1>{pageTitle}</h1>}
-                {children}
-                {!isLandingPage && <EditPageNote pageContext={pageContext} />}
+      <PageContextProvider2 pageContext={pageContext2}>
+        <PageContextProvider pageContext={pageContext}>
+          <div className={`page-layout ${isLandingPage ? 'landing-page' : 'doc-page'}`}>
+            <div id="navigation-wrapper">
+              <Navigation {...pageContext.navigationData} />
+            </div>
+            <NavigationFullscreenButton />
+            <div className="page-wrapper">
+              <div className="page-container">
+                <MobileHeader />
+                <div className="page-content">
+                  {globalNote}
+                  {pageTitle && <h1 id={`${navigationData.currentUrl.replace('/', '')}`}>{pageTitle}</h1>}
+                  {children}
+                  {!isLandingPage && <EditPageNote pageContext={pageContext} />}
+                </div>
               </div>
+              <NavigationMask />
             </div>
-            <NavigationMask />
           </div>
-        </div>
-      </PageContextProvider>
+        </PageContextProvider>
+      </PageContextProvider2>
     </React.StrictMode>
   )
 }

package/algolia/DocSearch.css

@@ -8,14 +8,11 @@
   padding-right: 6px !important;
 }
 
-#docsearch-desktop {
-  max-width: 110px !important;
-}
-#docsearch-desktop .DocSearch-Button-Placeholder,
-#docsearch-desktop .DocSearch-Button-Keys {
-  display: none;
+.DocSearch-Button-Placeholder,
+.DocSearch-Button-Keys {
+  display: none !important;
 }
-#docsearch-desktop .DocSearch-Button {
+.DocSearch-Button {
   background: transparent !important;
   padding: 0 !important;
   position: relative;
@@ -24,11 +21,11 @@
   border: none !important;
   box-shadow: none !important;
 }
-#docsearch-desktop .DocSearch-Search-Icon {
+.DocSearch-Search-Icon {
   height: 21px !important;
   width: 21px !important;
 }
-#docsearch-desktop .DocSearch-Button {
+.DocSearch-Button {
   margin-right: 3px !important;
   margin-left: 1px !important;
 }

package/autoScrollNav.ts

@@ -1,6 +1,6 @@
-import { assert } from './utils/client'
+export { autoScrollNav }
 
-autoScrollNav()
+import { assert } from './utils/client'
 
 function autoScrollNav() {
   const navigationEl = document.getElementById('navigation-content-main')
@@ -31,6 +31,7 @@ function autoScrollNav() {
     block: 'center',
     inline: 'start',
   })
-  // Avoid scrollIntoView() from scrolling the main view. Alternatively, we could use scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) which doesn't scroll the main view but Firefox doesn't support it.
+  // Avoid scrollIntoView() from scrolling the main view.
+  // - Alternatively scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
   document.documentElement.scrollTop = scrollTopOriginal
 }

package/components/FeatureList/FeatureList.client.ts

@@ -1,17 +1,16 @@
-import { assert } from '../../utils/client'
+export { addTwitterWidgets }
+export { addFeatureClickHandlers }
 
-addTwitterWidgets()
-addFeatureClickHandlers()
-window.__docpress_hydrationFinished = true
+import { assert } from '../../utils/client'
 
 function addTwitterWidgets() {
   loadScript('https://platform.twitter.com/widgets.js')
 }
 
 function addFeatureClickHandlers() {
-  const featureEls: HTMLElement[] = Array.from(
-    document.getElementById('features')!.querySelectorAll('.feature.has-learn-more'),
-  )
+  const featuresEl = document.getElementById('features')
+  if (!featuresEl) return
+  const featureEls: HTMLElement[] = Array.from(featuresEl.querySelectorAll('.feature.has-learn-more'))
   featureEls.forEach((featureEl) => {
     featureEl.onclick = () => {
       expandLearnMore(featureEl)
@@ -59,7 +58,3 @@ function loadScript(scriptUrl: string): void {
 function getComputedStyle(el: HTMLElement, styleProp: string) {
   return window.document.defaultView!.getComputedStyle(el).getPropertyValue(styleProp)
 }
-
-declare global {
-  var __docpress_hydrationFinished: undefined | true
-}

package/components/Link.tsx

@@ -48,25 +48,25 @@ function getLinkText({
   noBreadcrumb: true | undefined
   pageContext: PageContextResolved
   doNotInferSectionTitle: true | undefined
-}): string | JSX.Element {
+}): JSX.Element {
   const { hrefPathname, hrefHash } = parseHref(href)
 
   const linkData = findLinkData(hrefPathname || pageContext.urlPathname, pageContext)
   const isLinkOnSamePage = linkData.url === pageContext.urlPathname
   if (!hrefPathname) assert(isLinkOnSamePage)
 
-  const breadcrumbParts: (string | JSX.Element)[] = []
+  const breadcrumbParts: JSX.Element[] = []
   if (linkData.linkBreadcrumb) {
-    breadcrumbParts.push(...(linkData.linkBreadcrumb ?? []).slice().reverse())
+    breadcrumbParts.push(...(linkData.linkBreadcrumb ?? []).slice().reverse().map(parseTitle))
   }
-  breadcrumbParts.push(linkData.title)
+  breadcrumbParts.push(parseTitle(linkData.title))
 
   if (hrefHash) {
-    let sectionTitle: string | JSX.Element | undefined = undefined
+    let sectionTitle: JSX.Element | undefined = undefined
     assert(!hrefHash.startsWith('#'))
     if (isLinkOnSamePage) {
       const linkDataPageSection = findLinkData(`#${hrefHash}`, pageContext)
-      sectionTitle = linkDataPageSection.title
+      sectionTitle = parseTitle(linkDataPageSection.title)
     } else if ('sectionTitles' in linkData && linkData.sectionTitles) {
       linkData.sectionTitles.forEach((title) => {
         if (determineSectionUrlHash(title) === hrefHash) {
@@ -79,7 +79,7 @@ function getLinkText({
         !doNotInferSectionTitle,
         `Page section title not found for <Link href="\`${href}\`" doNotInferSectionTitle={true} />.`,
       )
-      sectionTitle = determineSectionTitle(href)
+      sectionTitle = <>{determineSectionTitle(href)}</>
     }
     breadcrumbParts.push(sectionTitle)
   }
@@ -107,8 +107,8 @@ function getLinkText({
 
 type LinkData = {
   url?: null | string
-  title: JSX.Element
-  linkBreadcrumb: null | JSX.Element[]
+  title: string
+  linkBreadcrumb: null | string[]
   sectionTitles?: string[]
 }
 

package/config/getConfig.ts

@@ -12,7 +12,8 @@ function getConfig(): Config {
     files.length === 1,
     `Found multiple \`docpress.config.js\` files: ${files.map((f) => `\`${f}\``).join(', ')}. Define only one instead.`,
   )
-  const config = (Object.values(globResult)[0] as any).default as Config
+  const exports: any = Object.values(globResult)[0]
+  const config: Config = exports.default || exports.config
   assert(config)
   return config
 }

package/config/resolveHeadingsData.ts

@@ -9,7 +9,6 @@ import type {
 } from '../types/Heading'
 import type { Config } from '../types/Config'
 import { getConfig } from './getConfig'
-import { parseTitle, withEmoji } from '../parseTitle'
 import { NavigationData, NavItem } from '../navigation/Navigation'
 import type { LinkData } from '../components'
 import type { Exports, PageContextOriginal } from './resolvePageContext'
@@ -17,9 +16,9 @@ import pc from '@brillout/picocolors'
 
 type PageSectionResolved = {
   url: string | null
-  title: JSX.Element
-  titleInNav: JSX.Element
-  linkBreadcrumb: JSX.Element[]
+  title: string
+  titleInNav: string
+  linkBreadcrumb: string[]
   pageSectionLevel: number
 }
 
@@ -123,10 +122,10 @@ function pageSectionToLinkData(pageSection: PageSectionResolved): LinkData {
 
 function getTitles(
   activeHeading: HeadingResolved | HeadingDetachedResolved,
-  pageContext: { urlOriginal: string },
+  pageContext: { urlPathname: string },
   config: Config,
 ) {
-  const url = pageContext.urlOriginal
+  const url = pageContext.urlPathname
   const isLandingPage = url === '/'
 
   const { title } = activeHeading
@@ -147,25 +146,25 @@ function getTitles(
 function getActiveHeading(
   headingsResolved: HeadingResolved[],
   headingsDetachedResolved: HeadingDetachedResolved[],
-  pageContext: { urlOriginal: string; exports: Exports },
+  pageContext: { urlPathname: string; exports: Exports },
 ) {
   let activeHeading: HeadingResolved | HeadingDetachedResolved | null = null
-  const { urlOriginal } = pageContext
-  assert(urlOriginal)
+  const { urlPathname } = pageContext
+  assert(urlPathname)
   headingsResolved.forEach((heading) => {
-    if (heading.url === urlOriginal) {
+    if (heading.url === urlPathname) {
       activeHeading = heading
-      assert(heading.level === 2, { pageUrl: urlOriginal, heading })
+      assert(heading.level === 2, { pageUrl: urlPathname, heading })
     }
   })
   const isDetachedPage = !activeHeading
   if (!activeHeading) {
-    activeHeading = headingsDetachedResolved.find(({ url }) => urlOriginal === url) ?? null
+    activeHeading = headingsDetachedResolved.find(({ url }) => urlPathname === url) ?? null
   }
   if (!activeHeading) {
     throw new Error(
       [
-        `URL ${pc.bold(urlOriginal)} not found in following URLs:`,
+        `URL ${pc.bold(urlPathname)} not found in following URLs:`,
         ...headingsResolved
           .map((h) => `  ${h.url}`)
           .filter(Boolean)
@@ -177,19 +176,19 @@ function getActiveHeading(
 }
 
 function getPageSectionsResolved(
-  pageContext: { exports: Exports; urlOriginal: string },
+  pageContext: { exports: Exports },
   activeHeading: HeadingResolved | HeadingDetachedResolved,
 ): PageSectionResolved[] {
   const pageSections = pageContext.exports.pageSectionsExport ?? []
 
   const pageSectionsResolved = pageSections.map((pageSection) => {
-    const pageSectionTitleJsx = parseTitle(pageSection.pageSectionTitle)
+    const { pageSectionTitle } = pageSection
     const url: null | string = pageSection.pageSectionId === null ? null : '#' + pageSection.pageSectionId
     const pageSectionResolved: PageSectionResolved = {
       url,
-      title: pageSectionTitleJsx,
+      title: pageSectionTitle,
       linkBreadcrumb: [activeHeading.title, ...(activeHeading.linkBreadcrumb ?? [])],
-      titleInNav: pageSectionTitleJsx,
+      titleInNav: pageSectionTitle,
       pageSectionLevel: pageSection.pageSectionLevel,
     }
     return pageSectionResolved
@@ -205,10 +204,6 @@ function getPageSectionsResolved(
   return pageSectionsResolved
 }
 
-/**
- * - Parse title (from `string` to `JSX.Element`)
- * - Determine navigation breadcrumbs
- */
 function getHeadingsResolved(config: {
   headings: HeadingDefinition[]
   headingsDetached: HeadingDetachedDefinition[]
@@ -218,20 +213,19 @@ function getHeadingsResolved(config: {
 } {
   const headingsWithoutBreadcrumb: Omit<HeadingResolved, 'linkBreadcrumb'>[] = config.headings.map(
     (heading: HeadingDefinition) => {
-      const titleParsed: JSX.Element = parseTitle(heading.title)
-
       const titleInNav = heading.titleInNav || heading.title
+      /* TODO: remove this and all realted code
       let titleInNavParsed: JSX.Element
       titleInNavParsed = parseTitle(titleInNav)
       if ('titleEmoji' in heading) {
         assert(heading.titleEmoji)
         titleInNavParsed = withEmoji(heading.titleEmoji, titleInNavParsed)
       }
+      */
 
       const headingResolved: Omit<HeadingResolved, 'linkBreadcrumb'> = {
         ...heading,
-        title: titleParsed,
-        titleInNav: titleInNavParsed,
+        titleInNav,
       }
       return headingResolved
     },
@@ -247,17 +241,15 @@ function getHeadingsResolved(config: {
   })
 
   const headingsDetachedResolved = config.headingsDetached.map((headingsDetached) => {
-    const { url, title } = headingsDetached
+    const { url } = headingsDetached
     assert(
       headingsResolved.find((heading) => heading.url === url) === undefined,
       `remove ${headingsDetached.url} from headingsDetached`,
     )
-    const titleParsed = typeof title === 'string' ? parseTitle(title) : title
     return {
       ...headingsDetached,
       level: 2 as const,
-      title: titleParsed,
-      titleInNav: titleParsed,
+      titleInNav: headingsDetached.title,
       linkBreadcrumb: null,
     }
   })
@@ -266,7 +258,7 @@ function getHeadingsResolved(config: {
 }
 
 function getHeadingsBreadcrumb(heading: Omit<HeadingResolved, 'linkBreadcrumb'>, headings: HeadingResolved[]) {
-  const linkBreadcrumb: JSX.Element[] = []
+  const linkBreadcrumb: string[] = []
   let levelCurrent = heading.level
   headings
     .slice()

package/config/resolvePageContext.ts

@@ -9,14 +9,12 @@ import type { PageSection } from '../parsePageSections'
 import { getConfig } from './getConfig'
 import { resolveHeadingsData } from './resolveHeadingsData'
 
-type ReactComponent = () => JSX.Element
 type Exports = {
   pageSectionsExport?: PageSection[]
 }
-type PageContextOriginal = PageContextServer & {
-  Page: ReactComponent
-  exports: Exports
-}
+// TODO/refactor: remove PageContextOriginal in favor of using PageContextServer
+type PageContextOriginal = PageContextServer
+
 type PageContextResolved = ReturnType<typeof resolvePageContext>
 
 function resolvePageContext(pageContext: PageContextOriginal) {
@@ -27,7 +25,7 @@ function resolvePageContext(pageContext: PageContextOriginal) {
   const config = getConfig()
   const { faviconUrl, algolia, tagline, twitterHandle, bannerUrl, websiteUrl } = config
   objectAssign(pageContextResolved, {
-    ...pageContext,
+    urlPathname: pageContext.urlPathname, // TODO: remove
     meta: {
       faviconUrl,
       twitterHandle,

package/dist/+config.d.ts

@@ -1,19 +1,36 @@
+import type { Exports } from './config/resolvePageContext';
 declare const _default: {
     name: string;
     onRenderHtml: "import:@brillout/docpress/renderer/onRenderHtml:onRenderHtml";
-    client: string;
+    onRenderClient: "import:@brillout/docpress/renderer/onRenderClient:onRenderClient";
+    onBeforeRender: "import:@brillout/docpress/renderer/onBeforeRender:onBeforeRender";
+    clientRouting: true;
+    hydrationCanBeAborted: true;
+    passToClient: string[];
     meta: {
-        Page: {
+        NavHeader: {
             env: {
-                client: false;
+                client: true;
                 server: true;
             };
         };
-        name: {
-            env: {
-                config: true;
-            };
-        };
     };
 };
 export default _default;
+type ReactComponent = () => JSX.Element;
+declare global {
+    namespace Vike {
+        interface PageContext {
+            Page: ReactComponent;
+            exports: Exports;
+        }
+        interface Config {
+            NavHeader?: {
+                NavHeader: ReactComponent;
+                navHeaderWrapperStyle?: React.CSSProperties;
+                NavHeaderMobile: ReactComponent;
+                navHeaderMobileWrapperStyle?: React.CSSProperties;
+            };
+        }
+    }
+}

package/dist/+config.js

@@ -2,14 +2,14 @@ export default {
     // @ts-ignore Remove this ts-ignore once Vike's new version is released.
     name: '@brillout/docpress',
     onRenderHtml: 'import:@brillout/docpress/renderer/onRenderHtml:onRenderHtml',
-    client: 'import:@brillout/docpress/renderer/client:doesNotExist',
+    onRenderClient: 'import:@brillout/docpress/renderer/onRenderClient:onRenderClient',
+    onBeforeRender: 'import:@brillout/docpress/renderer/onBeforeRender:onBeforeRender',
+    clientRouting: true,
+    hydrationCanBeAborted: true,
+    passToClient: ['pageContextResolved'],
     meta: {
-        Page: {
-            env: { client: false, server: true },
-        },
-        // Vike already defines the setting 'name', but we redundantly define it here for older Vike versions (otherwise older Vike versions will complain that 'name` is an unknown config).
-        name: {
-            env: { config: true },
+        NavHeader: {
+            env: { client: true, server: true }
         },
     },
 };

package/dist/components/CodeBlockTransformer.d.ts

@@ -0,0 +1,7 @@
+export { CodeBlockTransformer };
+import React from 'react';
+type LineBreak = 'white-space' | 'break-word';
+declare function CodeBlockTransformer({ children, lineBreak }: {
+    children: React.ReactNode;
+    lineBreak: LineBreak;
+}): React.JSX.Element;

package/dist/components/CodeBlockTransformer.js

@@ -0,0 +1,9 @@
+export { CodeBlockTransformer };
+import React from 'react';
+import { assert } from '../utils/server';
+function CodeBlockTransformer(_a) {
+    var children = _a.children, lineBreak = _a.lineBreak;
+    assert(lineBreak === 'white-space' || lineBreak === 'break-word', '`lineBreak` is currently the only use case for <CodeBlockTransformer>');
+    var className = "with-line-break_".concat(lineBreak);
+    return React.createElement("div", { className: className }, children);
+}

package/dist/components/Comment.d.ts

@@ -0,0 +1,5 @@
+export { Comment };
+import React from 'react';
+declare function Comment({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/Comment.js

@@ -0,0 +1,6 @@
+export { Comment };
+import React from 'react';
+function Comment(_a) {
+    var children = _a.children;
+    return React.createElement(React.Fragment, null);
+}

package/dist/components/Consulting.d.ts

@@ -0,0 +1,4 @@
+export { Consulting, Consultants };
+import React from 'react';
+declare function Consulting(): React.JSX.Element;
+declare function Consultants(): React.JSX.Element;