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

package/renderer/onBeforeRender.ts

@@ -0,0 +1,12 @@
+export { onBeforeRender }
+
+import { resolvePageContext, type PageContextOriginal, type PageContextResolved } from '../config/resolvePageContext'
+
+function onBeforeRender(pageContextOriginal: PageContextOriginal) {
+  const pageContextResolved = resolvePageContext(pageContextOriginal)
+  return {
+    pageContext: {
+      pageContextResolved,
+    },
+  }
+}

package/renderer/onRenderClient.tsx

@@ -0,0 +1,53 @@
+export { onRenderClient }
+
+import React, { useEffect } from 'react'
+import type { PageContextClient } from 'vike/types'
+import ReactDOM from 'react-dom/client'
+import { PageContextResolved } from '../config/resolvePageContext'
+import { getPageElement } from './getPageElement'
+import { initNavigationFullscreen } from '../navigation/navigation-fullscreen/initNavigationFullscreen'
+import { initMobileNavigation } from '../navigation/initMobileNavigation'
+import { initPressKit } from '../navigation/initPressKit'
+import '../css/index.css'
+import { autoScrollNav } from '../autoScrollNav'
+import { installSectionUrlHashs } from '../installSectionUrlHashs'
+import { addFeatureClickHandlers, addTwitterWidgets } from '../components/FeatureList/FeatureList.client'
+
+let root: ReactDOM.Root
+function onRenderClient(pageContext: PageContextClient) {
+  const pageContextResolved: PageContextResolved = (pageContext as any).pageContextResolved
+  let page = getPageElement(pageContext, pageContextResolved)
+  page = <OnRenderDoneHook>{page}</OnRenderDoneHook>
+  const container = document.getElementById('page-view')!
+  if (pageContext.isHydration) {
+    root = ReactDOM.hydrateRoot(container, page)
+  } else {
+    if (!root) {
+      root = ReactDOM.createRoot(container)
+    }
+    root.render(page)
+  }
+}
+
+function onRenderDone() {
+  autoScrollNav()
+  installSectionUrlHashs()
+  initNavigationFullscreen()
+  initMobileNavigation()
+  initPressKit()
+  addFeatureClickHandlers()
+  addTwitterWidgets()
+  setHydrationIsFinished()
+}
+
+function OnRenderDoneHook({ children }: { children: React.ReactNode }) {
+  useEffect(onRenderDone)
+  return children
+}
+
+function setHydrationIsFinished() {
+  // Used by:
+  // - https://github.com/vikejs/vike/blob/9d67f3dd4bdfb38c835186b8147251e0e3b06657/docs/.testRun.ts#L22
+  // - https://github.com/brillout/telefunc/blob/57c942c15b7795cfda96b5106acc9e098aa509aa/docs/.testRun.ts#L26
+  ;(window as any).__docpress_hydrationFinished = true
+}

package/renderer/onRenderHtml.tsx

@@ -1,30 +1,21 @@
 export { onRenderHtml }
 
 import ReactDOMServer from 'react-dom/server'
-import React from 'react'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
-import { PageLayout } from '../PageLayout'
-import { resolvePageContext, PageContextOriginal } from '../config/resolvePageContext'
-import { getDocSearchJS, getDocSearchCSS } from '../algolia/DocSearch'
 import { assert } from '../utils/server'
+import type { PageContextServer } from 'vike/types'
+import type { PageContextResolved } from '../config/resolvePageContext'
+import { getPageElement } from './getPageElement'
 
-async function onRenderHtml(pageContextOriginal: PageContextOriginal) {
-  const { Page } = pageContextOriginal
-  const pageContextResolved = resolvePageContext(pageContextOriginal)
+async function onRenderHtml(pageContext: PageContextServer) {
+  const pageContextResolved: PageContextResolved = (pageContext as any).pageContextResolved
 
-  const page = (
-    <PageLayout pageContext={pageContextResolved}>
-      <Page />
-    </PageLayout>
-  )
+  const page = getPageElement(pageContext, pageContextResolved)
 
   const descriptionTag = pageContextResolved.isLandingPage
     ? dangerouslySkipEscape(`<meta name="description" content="${pageContextResolved.meta.tagline}" />`)
     : ''
 
-  const docSearchJS = getDocSearchJS(pageContextResolved)
-  const docSearchCSS = getDocSearchCSS(pageContextResolved)
-
   const pageHtml = ReactDOMServer.renderToString(page)
 
   return escapeInject`<!DOCTYPE html>
@@ -35,16 +26,10 @@ async function onRenderHtml(pageContextOriginal: PageContextOriginal) {
         <title>${pageContextResolved.documentTitle}</title>
         ${descriptionTag}
         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
-        ${docSearchCSS}
-        ${getOpenGraphTags(
-          pageContextOriginal.urlPathname,
-          pageContextResolved.documentTitle,
-          pageContextResolved.meta,
-        )}
+        ${getOpenGraphTags(pageContext.urlPathname, pageContextResolved.documentTitle, pageContextResolved.meta)}
       </head>
       <body>
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
-        ${docSearchJS}
       </body>
     </html>`
 }

package/renderer/usePageContext.tsx

@@ -3,6 +3,7 @@
 
 import React, { useContext } from 'react'
 import type { PageContextResolved } from '../config/resolvePageContext'
+import type { PageContext } from 'vike/types'
 
 export { PageContextProvider }
 export { usePageContext }
@@ -23,3 +24,22 @@ function usePageContext(): PageContextResolved {
   const pageContext = useContext(Context)
   return pageContext
 }
+
+export { PageContextProvider2 }
+// TODO/refactor: rename to usePageContext and remove old implementation
+export { usePageContext2 }
+
+const Context2 = React.createContext<PageContext>(undefined as any)
+function usePageContext2(): PageContext {
+  const pageContext = useContext(Context2)
+  return pageContext
+}
+function PageContextProvider2({
+  pageContext,
+  children,
+}: {
+  pageContext: PageContext
+  children: React.ReactNode
+}) {
+  return <Context2.Provider value={pageContext}>{children}</Context2.Provider>
+}

package/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "react",
     "module": "ES2020",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["vite/client"],
     "esModuleInterop": true,

package/types/Config.ts

@@ -13,28 +13,14 @@ type Config = {
     twitterProfile: string
   }
   faviconUrl: string
-  algolia:
-    | null
-    | ({
-        PENDING_APPROVAL?: true
-      } & (
-        | {
-            appId?: undefined
-            apiKey?: undefined
-            indexName?: undefined
-          }
-        | {
-            appId: string
-            apiKey: string
-            indexName: string
-          }
-      ))
+  algolia: null | {
+    appId: string
+    apiKey: string
+    indexName: string
+  }
   headings: HeadingDefinition[]
   headingsDetached: HeadingDetachedDefinition[]
-  navHeaderMobile: React.ReactNode
-  navHeaderMobileWrapperStyle?: React.CSSProperties
-  navHeader: React.ReactNode
-  navHeaderWrapperStyle?: React.CSSProperties
+
   /** Sets `<meta name="description" content="${tagline}" />` */
   tagline: string
   websiteUrl: string

package/types/Heading.ts

@@ -8,9 +8,9 @@ import type { EmojiName } from '../utils/server'
 type HeadingResolved = {
   url?: null | string
   level: number
-  title: JSX.Element
-  titleInNav: JSX.Element
-  linkBreadcrumb: JSX.Element[]
+  title: string
+  titleInNav: string
+  linkBreadcrumb: string[]
   sectionTitles?: string[]
 } & Tmp
 
@@ -21,7 +21,7 @@ type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'>
 
 type HeadingDetachedDefinition = {
   url: string
-  title: string | JSX.Element
+  title: string
   sectionTitles?: string[]
 }
 

package/vite.config.ts

@@ -6,6 +6,7 @@ import { parsePageSections } from './parsePageSections.js'
 import rehypePrettyCode from 'rehype-pretty-code'
 import remarkGfm from 'remark-gfm'
 import { transformerNotationDiff } from '@shikijs/transformers'
+import { cjsInterop } from 'vite-plugin-cjs-interop'
 
 const root = process.cwd()
 const prettyCode = [rehypePrettyCode, { theme: 'github-light', transformers: [transformerNotationDiff()] }]
@@ -25,9 +26,13 @@ const config: UserConfig = {
       },
       includeAssetsImportedByServer: true,
     }),
+    cjsInterop({
+      dependencies: ['@docsearch/react'],
+    }),
   ],
-  optimizeDeps: { include: ['@brillout/docpress', 'react-dom'] },
-  // @ts-ignore
+  optimizeDeps: {
+    include: ['react-dom/client', '@docsearch/react'],
+  },
   ssr: {
     noExternal: ['@brillout/docpress'],
   },

package/algolia/DocSearch.ts

@@ -1,62 +0,0 @@
-export { getDocSearchCSS }
-export { getDocSearchJS }
-
-import { dangerouslySkipEscape, escapeInject } from 'vike/server'
-import { PageContextResolved } from '../config/resolvePageContext'
-/* Imorted in /src/css/index.css instead
-import './DocSearch.css'
-*/
-
-function getDocSearchCSS(pageContext: PageContextResolved) {
-  const docSearchCSS = !pageContext.meta.algolia
-    ? ''
-    : escapeInject`
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
-    `
-  return docSearchCSS
-}
-
-function getDocSearchJS(pageContext: PageContextResolved) {
-  const { algolia } = pageContext.meta
-  // If the docpress website doesn't use algolia => we don't inject the algolia assets => the search icon wrapper stays empty
-  // If algolia is PENDING_APPROVAL => we fill a FAKE API key so that the algolia popup shows (while no results are shown).
-  //  - We show an alert warning users that there aren't any results until algolia's approval is pending (see below).
-  let docSearchJS = !algolia
-    ? ''
-    : escapeInject`
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
-    <script type="text/javascript">
-      const appId = '${algolia.appId || 'FAKE'}';
-      const apiKey = '${algolia.apiKey || 'FAKE'}';
-      const indexName = '${algolia.indexName || 'FAKE'}';
-      const transformItems = ${dangerouslySkipEscape(getTransformItems())};
-      docsearch({
-        container: '#docsearch-desktop',
-        appId, apiKey, indexName, transformItems,
-        insights: true,
-      });
-    </script>
-  `
-  if (algolia?.PENDING_APPROVAL) {
-    docSearchJS = escapeInject`
-    ${docSearchJS}
-    <script>document.getElementById('docsearch-desktop').addEventListener('click', () => window.alert("Algolia approval is pending: the search results may be empty until the approval process is completed."))</script>
-    `
-  }
-  return docSearchJS
-}
-
-// Remove superfluous hash '#page-content' from URLs pointing to whole pages
-//  - https://github.com/algolia/docsearch/issues/1801
-//  - https://discourse.algolia.com/t/how-to-avoid-hash-in-search-result-url/6486
-//  - https://discourse.algolia.com/t/docsearchs-transformdata-function-cannot-remove-hashes-from-result-urls/8487
-function getTransformItems() {
-  return `function(hits) {
-        hits.map(hit => {
-          if (hit.url.indexOf('#page-content') > 0) {
-            hit.url = hit.url.replace('#page-content', '');
-          }
-        });
-        return hits;
-      }`
-}

package/navigation/Navigation.client.ts

@@ -1,7 +0,0 @@
-import { initNavigationFullscreen } from './navigation-fullscreen/initNavigationFullscreen'
-import { initMobileNavigation } from './initMobileNavigation'
-import { initPressKit } from './initPressKit'
-
-initNavigationFullscreen()
-initMobileNavigation()
-initPressKit()

package/renderer/client.ts

@@ -1,4 +0,0 @@
-import '../css/index.css'
-import '../autoScrollNav'
-import '../installSectionUrlHashs'
-import '../navigation/Navigation.client'