@brillout/docpress 0.15.1 → 0.15.3

package/+config.ts

@@ -4,7 +4,7 @@ import type { Config } from 'vike/types'
 import { viteConfig } from './vite.config.js'
 import type { Config as DocpressConfig } from './types/Config'
 import type { PageSection } from './parsePageSections'
-import type { Conf } from './resolveConf.js'
+import type { Resolved } from './resolvePageContext.js'
 
 const config = {
   name: '@brillout/docpress',
@@ -33,7 +33,7 @@ declare global {
   namespace Vike {
     interface PageContext {
       Page: ReactComponent
-      conf: Conf
+      resolved: Resolved
     }
     interface Config {
       docpress?: DocpressConfig

package/Layout.tsx

@@ -46,7 +46,7 @@ const whitespaceBuster2: React.CSSProperties = {
 
 function Layout({ children }: { children: React.ReactNode }) {
   const pageContext = usePageContext()
-  const { isLandingPage } = pageContext.conf
+  const { isLandingPage } = pageContext.resolved
 
   let content: React.JSX.Element
   if (isLandingPage) {
@@ -85,8 +85,8 @@ function Layout({ children }: { children: React.ReactNode }) {
 function LayoutDocsPage({ children }: { children: React.ReactNode }) {
   const pageContext = usePageContext()
   const hideNavLeftAlways =
-    pageContext.conf.pageDesign?.hideMenuLeft ||
-    (pageContext.conf.navItemsDetached && pageContext.conf.navItemsDetached.length <= 1)
+    pageContext.resolved.pageDesign?.hideMenuLeft ||
+    (pageContext.resolved.navItemsDetached && pageContext.resolved.navItemsDetached.length <= 1)
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -155,13 +155,13 @@ function LayoutLandingPage({ children }: { children: React.ReactNode }) {
 
 function PageContent({ children }: { children: React.ReactNode }) {
   const pageContext = usePageContext()
-  const { isLandingPage, pageTitle } = pageContext.conf
+  const { isLandingPage, pageTitle } = pageContext.resolved
   const pageTitleParsed = pageTitle && parseMarkdownMini(pageTitle)
   /*
   const { globalNote } = pageContext.globalContext.config.docpress
   */
   const ifDocPage = (style: React.CSSProperties) => (isLandingPage ? {} : style)
-  const contentMaxWidth = pageContext.conf.pageDesign?.contentMaxWidth ?? mainViewWidthMax
+  const contentMaxWidth = pageContext.resolved.pageDesign?.contentMaxWidth ?? mainViewWidthMax
   return (
     <div
       className="page-wrapper low-prio-grow"
@@ -187,7 +187,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
         }}
       >
         {/* globalNote */}
-        {pageTitleParsed && !pageContext.conf.pageDesign?.hideTitle && (
+        {pageTitleParsed && !pageContext.resolved.pageDesign?.hideTitle && (
           <div>
             <EditLink className="show-only-on-desktop" style={{ float: 'right', marginTop: 6, padding: 10 }} />
             <h1 id={`${pageContext.urlPathname.replace('/', '')}`}>{pageTitleParsed}</h1>
@@ -201,7 +201,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
 
 function NavLeft() {
   const pageContext = usePageContext()
-  const { navItemsAll, navItemsDetached } = pageContext.conf
+  const { navItemsAll, navItemsDetached } = pageContext.resolved
   return (
     <>
       <div
@@ -280,7 +280,7 @@ const menuLinkStyle: React.CSSProperties = {
 
 function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   const pageContext = usePageContext()
-  const { isLandingPage } = pageContext.conf
+  const { isLandingPage } = pageContext.resolved
   const { navMaxWidth, name, algolia } = pageContext.globalContext.config.docpress
 
   const navSecondaryContent = (
@@ -482,8 +482,36 @@ function NavHeaderLeftFullWidthBackground() {
 
 function NavLogo({ className }: { className: string }) {
   const pageContext = usePageContext()
-  const iconSize = pageContext.globalContext.config.docpress.navLogoSize ?? 39
-  const { name } = pageContext.globalContext.config.docpress
+
+  const { navLogo } = pageContext.globalContext.config.docpress
+  let navLogoResolved = navLogo
+  if (!navLogoResolved) {
+    const iconSize = pageContext.globalContext.config.docpress.navLogoSize ?? 39
+    const { name, logo, navLogoStyle, navLogoTextStyle } = pageContext.globalContext.config.docpress
+    navLogoResolved = (
+      <>
+        <img
+          src={logo}
+          style={{
+            height: iconSize,
+            width: iconSize,
+            ...navLogoStyle,
+          }}
+          onContextMenu={onContextMenu}
+        />
+        <span
+          style={{
+            marginLeft: `calc(var(--icon-text-padding) + 2px)`,
+            fontSize: isProjectNameShort(name) ? '1.65em' : '1.3em',
+            ...navLogoTextStyle,
+          }}
+        >
+          {name}
+        </span>
+      </>
+    )
+  }
+
   return (
     <a
       className={cls(['nav-logo', className])}
@@ -494,32 +522,18 @@ function NavLogo({ className }: { className: string }) {
         color: 'inherit',
       }}
       href="/"
+      onContextMenu={!navLogo ? undefined : onContextMenu}
     >
-      <img
-        src={pageContext.globalContext.config.docpress.logo}
-        style={{
-          height: iconSize,
-          width: iconSize,
-          ...pageContext.globalContext.config.docpress.navLogoStyle,
-        }}
-        onContextMenu={(ev) => {
-          if (!pageContext.globalContext.config.docpress.pressKit) return // no /press page
-          if (window.location.pathname === '/press') return
-          ev.preventDefault()
-          navigate('/press#logo')
-        }}
-      />
-      <span
-        style={{
-          marginLeft: `calc(var(--icon-text-padding) + 2px)`,
-          fontSize: isProjectNameShort(name) ? '1.65em' : '1.3em',
-          ...pageContext.globalContext.config.docpress.navLogoTextStyle,
-        }}
-      >
-        {name}
-      </span>
+      {navLogoResolved}
     </a>
   )
+
+  function onContextMenu(ev: React.MouseEvent<unknown, MouseEvent>) {
+    if (!pageContext.globalContext.config.docpress.pressKit) return // no /press page
+    if (window.location.pathname === '/press') return
+    ev.preventDefault()
+    navigate('/press#logo')
+  }
 }
 function isProjectNameShort(name: string) {
   return name.length <= 4

package/MenuModal.tsx

@@ -73,7 +73,7 @@ function BorderBottom() {
 }
 function Nav() {
   const pageContext = usePageContext()
-  const navItems = pageContext.conf.navItemsAll
+  const navItems = pageContext.resolved.navItemsAll
   return <NavigationWithColumnLayout navItems={navItems} />
 }
 

package/components/Link.tsx

@@ -141,7 +141,7 @@ function findLinkData(
   { pageContext, noWarning }: { pageContext: PageContext; noWarning?: boolean },
 ): LinkData | null {
   assert(href.startsWith('/') || href.startsWith('#'))
-  const { linksAll } = pageContext.conf
+  const { linksAll } = pageContext.resolved
   const linkData = linksAll.find(({ url }) => href === url)
   if (href.startsWith('#')) {
     if (!noWarning) {

package/dist/+config.d.ts

@@ -1,7 +1,7 @@
 export { config as default };
 import type { Config as DocpressConfig } from './types/Config';
 import type { PageSection } from './parsePageSections';
-import type { Conf } from './resolveConf.js';
+import type { Resolved } from './resolvePageContext.js';
 declare const config: {
     name: string;
     require: {
@@ -35,7 +35,7 @@ declare global {
     namespace Vike {
         interface PageContext {
             Page: ReactComponent;
-            conf: Conf;
+            resolved: Resolved;
         }
         interface Config {
             docpress?: DocpressConfig;

package/dist/components/Link.js

@@ -91,7 +91,7 @@ function getLinkTextData(_a) {
 function findLinkData(href, _a) {
     var pageContext = _a.pageContext, noWarning = _a.noWarning;
     assert(href.startsWith('/') || href.startsWith('#'));
-    var linksAll = pageContext.conf.linksAll;
+    var linksAll = pageContext.resolved.linksAll;
     var linkData = linksAll.find(function (_a) {
         var url = _a.url;
         return href === url;

package/dist/renderer/usePageContext.js

@@ -9,7 +9,7 @@ var globalObject = getGlobalObject('usePageContext.ts', {
 function usePageContextLegacy() {
     var Ctx = globalObject.Ctx;
     var pageContext = useContext(Ctx);
-    return pageContext.conf;
+    return pageContext.resolved;
 }
 function usePageContext() {
     var pageContext = useContext(globalObject.Ctx);

package/dist/{resolveConf.d.ts → resolvePageContext.d.ts}

@@ -1,9 +1,9 @@
-export { resolveConf };
-export type Conf = ReturnType<typeof resolveConf>;
+export { resolvePageContext };
+export type Resolved = ReturnType<typeof resolvePageContext>;
 import type { NavItem } from './NavItemComponent';
 import type { LinkData } from './components';
 import type { PageContextServer } from 'vike/types';
-declare function resolveConf(pageContext: PageContextServer): {
+declare function resolvePageContext(pageContext: PageContextServer): {
     navItemsAll: NavItem[];
     navItemsDetached: NavItem[] | undefined;
     pageDesign: {

package/dist/{resolveConf.js → resolvePageContext.js}

@@ -18,13 +18,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-export { resolveConf };
+export { resolvePageContext };
 import { assert } from './utils/assert';
 import { jsxToTextContent } from './utils/jsxToTextContent';
 import pc from '@brillout/picocolors';
 import { parseMarkdownMini } from './parseMarkdownMini';
 import { determineNavItemsColumnLayout } from './determineNavItemsColumnLayout';
-function resolveConf(pageContext) {
+function resolvePageContext(pageContext) {
     var _a;
     var config = pageContext.globalContext.config.docpress;
     var urlPathname = pageContext.urlPathname;
@@ -33,9 +33,9 @@ function resolveConf(pageContext) {
         var headings = config.headings, headingsDetached = config.headingsDetached;
         assertHeadingsDefinition(__spreadArray(__spreadArray([], headings, true), headingsDetached, true));
     }
-    var resolved = getHeadingsResolved(config);
-    var headingsDetachedResolved = resolved.headingsDetachedResolved;
-    var headingsResolved = resolved.headingsResolved;
+    var ret = getHeadingsResolved(config);
+    var headingsDetachedResolved = ret.headingsDetachedResolved;
+    var headingsResolved = ret.headingsResolved;
     var _b = getActiveHeading(headingsResolved, headingsDetachedResolved, urlPathname), activeHeading = _b.activeHeading, isDetachedPage = _b.isDetachedPage, activeCategoryName = _b.activeCategoryName;
     var _c = getTitles(activeHeading, urlPathname, config), documentTitle = _c.documentTitle, isLandingPage = _c.isLandingPage, pageTitle = _c.pageTitle;
     var pageSectionsResolved = getPageSectionsResolved(pageSections, activeHeading);
@@ -61,7 +61,7 @@ function resolveConf(pageContext) {
             });
         }
     }
-    var conf = {
+    var resolved = {
         navItemsAll: navItemsAll,
         navItemsDetached: navItemsDetached,
         pageDesign: activeHeading.pageDesign,
@@ -71,7 +71,7 @@ function resolveConf(pageContext) {
         documentTitle: documentTitle,
         activeCategoryName: activeCategoryName,
     };
-    return conf;
+    return resolved;
 }
 function headingToNavItem(heading) {
     return {

package/dist/types/Config.d.ts

@@ -21,15 +21,17 @@ type Config = {
         apiKey: string;
         indexName: string;
     };
+    googleAnalytics?: string;
     i18n?: true;
     pressKit?: true;
     docsDir?: string;
-    topNavigation?: React.ReactNode;
-    globalNote?: React.ReactNode;
     navMaxWidth?: number;
+    topNavigation?: React.ReactNode;
+    navLogo?: React.ReactNode;
     navLogoSize?: number;
     navLogoStyle?: React.CSSProperties;
     navLogoTextStyle?: React.CSSProperties;
+    globalNote?: React.ReactNode;
 };
 /** Order in Algolia search results */
 type Category = string | {

package/package.json

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

package/renderer/onCreatePageContext.ts

@@ -1,8 +1,8 @@
 export { onCreatePageContext }
 
 import type { PageContextServer } from 'vike/types'
-import { resolveConf } from '../resolveConf'
+import { resolvePageContext } from '../resolvePageContext'
 
 function onCreatePageContext(pageContext: PageContextServer) {
-  pageContext.conf = resolveConf(pageContext)
+  pageContext.resolved = resolvePageContext(pageContext)
 }

package/renderer/onRenderClient.tsx

@@ -12,9 +12,11 @@ import { getGlobalObject } from '../utils/client'
 import { initKeyBindings } from '../initKeyBindings'
 import { initOnNavigation } from './initOnNavigation'
 import { setHydrationIsFinished } from './getHydrationPromise'
+import { addScript } from '../utils/addScript'
 
 const globalObject = getGlobalObject<{
   root?: ReactDOM.Root
+  isNotFirstRender?: true
 }>('onRenderClient.ts', {})
 
 addEcosystemStamp()
@@ -30,6 +32,7 @@ async function onRenderClient(pageContext: PageContextClient) {
   })
   let page = getPageElement(pageContext)
   page = <OnRenderDoneHook renderPromiseResolve={renderPromiseResolve}>{page}</OnRenderDoneHook>
+
   const container = document.getElementById('page-view')!
   if (pageContext.isHydration) {
     globalObject.root = ReactDOM.hydrateRoot(container, page)
@@ -42,11 +45,19 @@ async function onRenderClient(pageContext: PageContextClient) {
   if (!pageContext.isHydration) {
     applyHead(pageContext)
   }
+
   await renderPromise
+
+  autoScrollNav()
+  installSectionUrlHashs()
+  setHydrationIsFinished()
+  initGoogleAnalytics(pageContext)
+
+  globalObject.isNotFirstRender = true
 }
 
 function applyHead(pageContext: PageContextClient) {
-  document.title = pageContext.conf.documentTitle
+  document.title = pageContext.resolved.documentTitle
 }
 
 function onRenderStart() {
@@ -54,18 +65,13 @@ function onRenderStart() {
   closeMenuModal()
 }
 
-function onRenderDone(renderPromiseResolve: () => void) {
-  autoScrollNav()
-  installSectionUrlHashs()
-  setHydrationIsFinished()
-  renderPromiseResolve()
-}
-
 function OnRenderDoneHook({
   renderPromiseResolve,
   children,
 }: { renderPromiseResolve: () => void; children: React.ReactNode }) {
-  useEffect(() => onRenderDone(renderPromiseResolve))
+  useEffect(() => {
+    renderPromiseResolve()
+  })
   return children
 }
 
@@ -74,3 +80,27 @@ function OnRenderDoneHook({
 function addEcosystemStamp() {
   ;(window as any)._isBrilloutDocpress = true
 }
+
+async function initGoogleAnalytics(pageContext: PageContextClient) {
+  const isFirstRender = !globalObject.isNotFirstRender
+  const id = pageContext.config.docpress.googleAnalytics
+
+  if (!id) return
+  if (isFirstRender) await installGoogleAnalytics(id)
+}
+async function installGoogleAnalytics(id: string) {
+  window.dataLayer = window.dataLayer || []
+  window.gtag = function gtag() {
+    window.dataLayer.push(arguments)
+  }
+  window.gtag('js', new Date())
+  window.gtag('config', id)
+
+  await addScript(`https://www.googletagmanager.com/gtag/js?id=${id}`)
+}
+declare global {
+  interface Window {
+    dataLayer: any[]
+    gtag: (...args: any[]) => void
+  }
+}

package/renderer/onRenderHtml.tsx

@@ -10,7 +10,7 @@ import type { Config } from '../types/Config'
 async function onRenderHtml(pageContext: PageContextServer): Promise<any> {
   const page = getPageElement(pageContext)
 
-  const { isLandingPage } = pageContext.conf
+  const { isLandingPage } = pageContext.resolved
   assert(typeof isLandingPage === 'boolean')
   const { tagline } = pageContext.globalContext.config.docpress
   assert(tagline)
@@ -21,7 +21,7 @@ async function onRenderHtml(pageContext: PageContextServer): Promise<any> {
   const faviconUrl = pageContext.globalContext.config.docpress.favicon ?? pageContext.globalContext.config.docpress.logo
   assert(faviconUrl)
 
-  const { documentTitle } = pageContext.conf
+  const { documentTitle } = pageContext.resolved
   assert(documentTitle)
   return escapeInject`<!DOCTYPE html>
     <html>
@@ -56,7 +56,7 @@ type ActiveCategory = {
 }
 function getActiveCategory(pageContext: PageContextServer) {
   const config = pageContext.globalContext.config.docpress
-  const { activeCategoryName } = pageContext.conf
+  const { activeCategoryName } = pageContext.resolved
 
   const activeCategory: ActiveCategory = config.categories
     // normalize

package/renderer/usePageContext.tsx

@@ -13,7 +13,7 @@ const globalObject = getGlobalObject('usePageContext.ts', {
 function usePageContextLegacy() {
   const { Ctx } = globalObject
   const pageContext = useContext(Ctx)
-  return pageContext.conf
+  return pageContext.resolved
 }
 
 function usePageContext(): PageContext {

package/{resolveConf.ts → resolvePageContext.ts}

@@ -1,5 +1,5 @@
-export { resolveConf }
-export type Conf = ReturnType<typeof resolveConf>
+export { resolvePageContext }
+export type Resolved = ReturnType<typeof resolvePageContext>
 
 import type { Config } from './types/Config'
 import type { NavItem } from './NavItemComponent'
@@ -26,7 +26,7 @@ type PageSectionResolved = {
   pageSectionLevel: number
 }
 
-function resolveConf(pageContext: PageContextServer) {
+function resolvePageContext(pageContext: PageContextServer) {
   const config = pageContext.globalContext.config.docpress
   const { urlPathname } = pageContext
   const pageSections = pageContext.config.pageSectionsExport ?? []
@@ -36,9 +36,9 @@ function resolveConf(pageContext: PageContextServer) {
     assertHeadingsDefinition([...headings, ...headingsDetached])
   }
 
-  const resolved = getHeadingsResolved(config)
-  const { headingsDetachedResolved } = resolved
-  let { headingsResolved } = resolved
+  const ret = getHeadingsResolved(config)
+  const { headingsDetachedResolved } = ret
+  let { headingsResolved } = ret
 
   const { activeHeading, isDetachedPage, activeCategoryName } = getActiveHeading(
     headingsResolved,
@@ -76,7 +76,7 @@ function resolveConf(pageContext: PageContextServer) {
     }
   }
 
-  const conf = {
+  const resolved = {
     navItemsAll,
     navItemsDetached,
     pageDesign: activeHeading.pageDesign,
@@ -86,7 +86,7 @@ function resolveConf(pageContext: PageContextServer) {
     documentTitle,
     activeCategoryName,
   }
-  return conf
+  return resolved
 }
 
 function headingToNavItem(heading: HeadingResolved | HeadingDetachedResolved): NavItem {

package/types/Config.ts

@@ -26,17 +26,21 @@ type Config = {
     apiKey: string
     indexName: string
   }
+  googleAnalytics?: string
 
   i18n?: true
   pressKit?: true
   docsDir?: string
+  navMaxWidth?: number
 
   topNavigation?: React.ReactNode
-  globalNote?: React.ReactNode
-  navMaxWidth?: number
+
+  navLogo?: React.ReactNode
   navLogoSize?: number
   navLogoStyle?: React.CSSProperties
   navLogoTextStyle?: React.CSSProperties
+
+  globalNote?: React.ReactNode
 }
 
 /** Order in Algolia search results */

package/utils/addScript.ts

@@ -0,0 +1,12 @@
+export { addScript }
+
+import { genPromise } from './genPromise'
+
+async function addScript(src: string) {
+  const { promise, resolve, reject } = genPromise()
+  const script = document.createElement('script')
+  script.onload = () => resolve()
+  script.onerror = () => reject(new Error(`Failed to load script: ${src}`))
+  script.src = src
+  return promise
+}

package/utils/genPromise.ts

@@ -1,5 +1,13 @@
-export function genPromise<T = void>(): { promise: Promise<T>; resolve: (val: T) => void } {
+export function genPromise<T = void>(): {
+  promise: Promise<T>
+  resolve: (val: T) => void
+  reject: (err: unknown) => void
+} {
   let resolve!: (val: T) => void
-  const promise = new Promise<T>((r) => (resolve = r))
-  return { promise, resolve }
+  let reject!: (err: unknown) => void
+  const promise = new Promise<T>((resolve_, reject_) => {
+    resolve = resolve_
+    reject = reject_
+  })
+  return { promise, resolve, reject }
 }