@brillout/docpress 0.6.21 → 0.7.0

package/navigation/navigation-fullscreen/initNavigationFullscreen.ts

@@ -1,14 +1,12 @@
 export { initNavigationFullscreen }
+export { hideNavigationFullScreen }
 
 import { assert } from '../../utils/client'
-
 let scrollPositionBeforeToggle: number = 0
+initOnce()
 
-function initNavigationFullscreen() {
-  updateColumnWidth()
+function initOnce() {
   window.addEventListener('resize', updateColumnWidth, { passive: true })
-  document.getElementById('navigation-fullscreen-button')!.onclick = toggleNavExpend
-  document.getElementById('navigation-fullscreen-close')!.onclick = toggleNavExpend
   document.addEventListener(
     // We don't use keydown to not interfere with user pressing `<Esc>` for closing the browser's `<Ctrl-F>` search diablog, see https://stackoverflow.com/questions/66595035/how-to-detect-escape-key-if-search-bar-of-browser-is-open
     'keydown',
@@ -19,6 +17,11 @@ function initNavigationFullscreen() {
     false,
   )
 }
+function initNavigationFullscreen() {
+  document.getElementById('navigation-fullscreen-button')!.onclick = toggleNavExpend
+  document.getElementById('navigation-fullscreen-close')!.onclick = toggleNavExpend
+  updateColumnWidth()
+}
 
 function toggleNavExpend() {
   const navContainer = document.getElementById('navigation-container')!
@@ -29,6 +32,10 @@ function toggleNavExpend() {
   }
   scrollPositionBeforeToggle = scrollPos
 }
+function hideNavigationFullScreen() {
+  if (!document.documentElement.classList.contains('navigation-fullscreen')) return
+  toggleNavExpend()
+}
 
 function updateColumnWidth() {
   const navMinWidth = 299

package/package.json

@@ -1,21 +1,24 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.6.21",
+  "version": "0.7.0",
   "type": "module",
   "scripts": {
-    "// Build vite.config.ts and +config.ts": "",
+    "======== Build": "",
+    "// Build vite.config.ts and +config.ts (other files don't need to be built as @brillout/docpress is noExternal)": "",
     "build": "rm -rf dist/ && tsc --project tsconfig.config.json",
-    "// Development": "",
+    "======== Develop": "",
     "dev": "tsc --watch --project tsconfig.config.json",
-    "// Check types while developing": "",
-    "types": "tsc --noEmit --watch",
-    "// Release": "",
+    "// Check types of all source files while developing": "",
+    "typecheck": "tsc --noEmit --watch",
+    "========= Release": "",
     "release": "release-me patch",
-    "release:commit": "release-me commit",
-    "release:breaking-change": "release-me minor"
+    "release:minor": "release-me minor",
+    "release:commit": "release-me commit"
   },
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
+    "@docsearch/css": "^3.6.1",
+    "@docsearch/react": "3.6.1",
     "@mdx-js/mdx": "3.0.1",
     "@mdx-js/react": "3.0.1",
     "@mdx-js/rollup": "3.0.1",
@@ -39,7 +42,8 @@
   },
   "exports": {
     "./renderer/onRenderHtml": "./renderer/onRenderHtml.tsx",
-    "./renderer/client": "./renderer/client.ts",
+    "./renderer/onRenderClient": "./renderer/onRenderClient.tsx",
+    "./renderer/onBeforeRender": "./renderer/onBeforeRender.ts",
     ".": "./index.ts",
     "./FeatureList/FeatureList": "./components/FeatureList/FeatureList.tsx",
     "./FeatureList/FeatureList.client": {
@@ -70,12 +74,14 @@
   },
   "devDependencies": {
     "@brillout/release-me": "^0.3.8",
-    "@types/node": "^15.12.1",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "typescript": "^5.4.3",
-    "vike": "^0.4.195",
-    "vite": "^5.2.2"
+    "@types/node": "link:../demo/node_modules/@types/node/",
+    "@types/react": "link:../demo/node_modules/@types/react/",
+    "@types/react-dom": "link:../demo/node_modules/@types/react-dom/",
+    "react": "link:../demo/node_modules/react/",
+    "react-dom": "link:../demo/node_modules/react-dom/",
+    "typescript": "link:../demo/node_modules/typescript/",
+    "vike": "link:../demo/node_modules/vike/",
+    "vite": "link:../demo/node_modules/vite/"
   },
   "repository": "https://github.com/brillout/docpress",
   "license": "MIT",

package/parsePageSections.ts

@@ -44,7 +44,12 @@ function transform(code: string) {
         return line
       }
 
-      if (line.startsWith('#')) {
+      if (
+        line.startsWith('#')
+        /* TODO/eventually: implement.
+        || line.startsWith('<h2')
+        */
+      ) {
         const { pageSectionId, pageSectionLevel, pageSectionTitle, headingHtml } = parsePageSection(line)
         pageSections.push({ pageSectionId, pageSectionLevel, pageSectionTitle })
         return headingHtml

package/renderer/getPageElement.tsx

@@ -0,0 +1,16 @@
+export { getPageElement }
+
+import type { PageContext } from 'vike/types'
+import type { PageContextResolved } from '../config/resolvePageContext'
+import { PageLayout } from '../PageLayout'
+import React from 'react'
+
+function getPageElement(pageContext: PageContext, pageContextResolved: PageContextResolved) {
+  const { Page } = pageContext
+  const page = (
+    <PageLayout pageContext={pageContextResolved} pageContext2={pageContext}>
+      <Page />
+    </PageLayout>
+  )
+  return page
+}

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,79 @@
+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 {
+  hideNavigationFullScreen,
+  initNavigationFullscreen,
+} from '../navigation/navigation-fullscreen/initNavigationFullscreen'
+import { hideMobileNavigation, 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'
+
+initOnLinkClick()
+
+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 initOnLinkClick() {
+  document.addEventListener('click', (ev) => {
+    const linkTag = findLinkTag(ev.target as HTMLElement)
+    if (!linkTag) return
+    const url = linkTag.getAttribute('href')
+    if (!url) return
+    hideMobileNavigation()
+    hideNavigationFullScreen()
+  })
+}
+function findLinkTag(target: HTMLElement): null | HTMLElement {
+  while (target.tagName !== 'A') {
+    const { parentNode } = target
+    if (!parentNode) {
+      return null
+    }
+    target = parentNode as HTMLElement
+  }
+  return target
+}
+
+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.config.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["vite.config.ts", "+config.ts"],
+  "files": ["vite.config.ts", "+config.ts"],
   "compilerOptions": {
     "outDir": "./dist/"
   }

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[]
 }
 
@@ -37,7 +37,7 @@ type IsCategory = {
   titleInNav?: undefined
 }
 type HeadingDefinitionLevel =
-  | ({ level: 1; titleEmoji: EmojiName } & IsCategory)
+  | ({ level: 1 } & IsCategory)
   | ({ level: 4 } & IsCategory)
   | {
       level: 2

package/vite.config.ts

@@ -26,10 +26,12 @@ const config: UserConfig = {
       includeAssetsImportedByServer: true,
     }),
   ],
-  optimizeDeps: { include: ['@brillout/docpress', 'react-dom'] },
-  // @ts-ignore
+  optimizeDeps: {
+    include: ['react', 'react-dom', 'react-dom/client'],
+    exclude: ['@brillout/docpress'],
+  },
   ssr: {
-    noExternal: ['@brillout/docpress'],
+    noExternal: ['@brillout/docpress', '@docsearch/react'],
   },
   clearScreen: false,
 }

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'