@brillout/docpress 0.6.21 → 0.7.0

package/dist/types/Config.d.ts

@@ -0,0 +1,30 @@
+export type { Config };
+import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading';
+type Config = {
+    projectInfo: {
+        githubRepository: string;
+        githubIssues: string;
+        githubDiscussions?: string;
+        projectName: string;
+        projectVersion: string;
+        discordInvite?: string;
+        twitterProfile: string;
+    };
+    faviconUrl: string;
+    algolia: null | {
+        appId: string;
+        apiKey: string;
+        indexName: string;
+    };
+    headings: HeadingDefinition[];
+    headingsDetached: HeadingDetachedDefinition[];
+    /** Sets `<meta name="description" content="${tagline}" />` */
+    tagline: string;
+    websiteUrl: string;
+    bannerUrl?: string;
+    twitterHandle: string;
+    globalNote?: React.ReactNode;
+    i18n?: true;
+    pressKit?: true;
+    sponsorGithubAccount?: string;
+};

package/dist/types/Config.js

@@ -0,0 +1 @@
+export {};

package/dist/types/Heading.d.ts

@@ -0,0 +1,43 @@
+export { HeadingResolved };
+export { HeadingDetachedResolved };
+export { HeadingDetachedDefinition };
+export { HeadingDefinition };
+type HeadingResolved = {
+    url?: null | string;
+    level: number;
+    title: string;
+    titleInNav: string;
+    linkBreadcrumb: string[];
+    sectionTitles?: string[];
+} & Tmp;
+type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'> & {
+    level: 2;
+    linkBreadcrumb: null;
+};
+type HeadingDetachedDefinition = {
+    url: string;
+    title: string;
+    sectionTitles?: string[];
+};
+type HeadingDefinition = {
+    url?: null | string;
+    title: string;
+    titleInNav?: string;
+} & HeadingDefinitionLevel & Tmp;
+type IsCategory = {
+    url?: undefined;
+    titleDocument?: undefined;
+    titleInNav?: undefined;
+};
+type HeadingDefinitionLevel = ({
+    level: 1;
+} & IsCategory) | ({
+    level: 4;
+} & IsCategory) | {
+    level: 2;
+    sectionTitles?: string[];
+    url: null | string;
+};
+type Tmp = {
+    titleDocument?: string;
+};

package/dist/types/Heading.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/Emoji/Emoji.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export { Emoji };
+export type { EmojiName };
+type EmojiName = 'warning' | 'typescript' | 'shield' | 'mechanical-arm' | 'mountain' | 'rocket' | 'wrench' | 'compass' | 'seedling' | 'books' | 'plug' | 'earth' | 'gear' | 'red-heart' | 'high-voltage' | 'gem-stone' | 'dizzy' | 'sparkles' | 'writing-hang' | 'engine' | 'red-circle' | 'sparkling-heart' | 'gift' | 'package' | 'info' | 'lab' | 'trophy' | 'ribbon';
+declare function Emoji({ name, style }: {
+    name: EmojiName;
+    style?: React.CSSProperties;
+}): JSX.Element;

package/dist/utils/Emoji/Emoji.js

@@ -0,0 +1,191 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { assert } from '../assert';
+import { iconMechanicalArm, iconCompass, iconShield, iconTypescript, iconEngine } from './assets';
+export { Emoji };
+function Emoji(_a) {
+    var name = _a.name, style = _a.style;
+    var emoji = 
+    // ***
+    // U+26A0
+    // https://emojipedia.org/warning/
+    // https://www.unicompat.com/26A0 => 94.1%
+    // https://www.unicompat.com/26A0-FE0F => 92.4%
+    // https://www.unicompat.com/2697 => 94.1%
+    (name === 'warning' && Unicode(0x26a0, { fontFamily: 'emoji' })) ||
+        // ***
+        // U+2697
+        // https://emojipedia.org/alembic/
+        // https://www.unicompat.com/2697 => 94.1%
+        (name === 'lab' && Unicode(0x2697)) ||
+        // ***
+        // U+2139
+        // https://emojipedia.org/information/
+        // https://www.unicompat.com/2139 => 94.8%
+        // https://www.unicompat.com/2139-FE0F => 92.4%
+        (name === 'info' && Unicode(0x2139, { fontFamily: 'emoji' })) ||
+        // ***
+        // U+1F4E6
+        // https://emojipedia.org/package/
+        // https://www.unicompat.com/1F4E6 => 94.1%
+        (name === 'package' && Unicode(0x1f4e6)) ||
+        // ***
+        // U+1F381
+        // https://emojipedia.org/wrapped-gift/
+        // https://www.unicompat.com/1F381 => 94.1%
+        (name === 'gift' && Unicode(0x1f381)) ||
+        // ***
+        // U+1F496
+        // https://emojipedia.org/sparkling-heart/
+        // https://www.unicompat.com/1F496 => 94.1%
+        (name === 'sparkling-heart' && Unicode(0x1f496)) ||
+        // ***
+        // U+2B55
+        // https://emojipedia.org/hollow-red-circle/
+        // https://www.unicompat.com/2B55 => 94.1%
+        (name === 'red-circle' && Unicode(0x2b55)) ||
+        // ***
+        (name === 'engine' && Img(iconEngine)) ||
+        // ***
+        // https://www.typescriptlang.org/branding/
+        (name === 'typescript' && Img(iconTypescript)) ||
+        // ***
+        // U+FE0F
+        // https://emojipedia.org/shield/
+        // https://www.unicompat.com/FE0F => 46.5%
+        // https://icon-sets.iconify.design/noto/shield/
+        (name === 'shield' && Img(iconShield)) ||
+        // ***
+        // U+270D
+        // https://emojipedia.org/writing-hand/
+        // https://www.unicompat.com/270D => 93.8%
+        (name === 'writing-hang' && Unicode(0x270d)) ||
+        // ***
+        // U+1F4AB
+        // https://emojipedia.org/dizzy/
+        // https://www.unicompat.com/1F4AB => 94.1%
+        (name === 'dizzy' && Unicode(0x1f4ab)) ||
+        // ***
+        // U+1F9BE
+        // https://iconify.design/icon-sets/noto/mechanical-arm.html
+        // https://emojipedia.org/mechanical-arm/
+        // https://www.unicompat.com/1f9be => 65.5%
+        (name === 'mechanical-arm' && Img(iconMechanicalArm)) ||
+        // ***
+        // U+1F680
+        // https://www.unicompat.com/1F680 => 94.1
+        (name === 'rocket' && Unicode(0x1f680)) ||
+        // ***
+        // U+1F527
+        // https://emojipedia.org/wrench/
+        // https://www.unicompat.com/1F527 => 94.1%
+        (name === 'wrench' && Unicode(0x1f527)) ||
+        // ***
+        // U+1F9ED
+        // https://iconify.design/icon-sets/noto/compass.html
+        // https://www.unicompat.com/1F9ED => 67.1%
+        (name === 'compass' && Img(iconCompass, '1.4em')) ||
+        // ***
+        // U+1F331
+        // https://www.unicompat.com/1F331 => 94.1%
+        (name === 'seedling' && Unicode(0x1f331)) ||
+        // ***
+        // U+1F4DA
+        // https://www.unicompat.com/1F4DA => 94.1%
+        (name === 'books' && Unicode(0x1f4da)) ||
+        // ***
+        // U+1F50C
+        // https://www.unicompat.com/1F50C => 94.1%
+        (name === 'plug' && Unicode(0x1f50c)) ||
+        // ***
+        // U+1F30D
+        // https://www.unicompat.com/1F30D => 88.8%
+        (name === 'earth' && Unicode(0x1f30d)) ||
+        // ***
+        // U+2699
+        // https://www.unicompat.com/2699 => 94.1%
+        (name === 'gear' && Unicode(0x2699)) ||
+        // ***
+        // U+2764
+        // https://emojipedia.org/red-heart/
+        // https://www.unicompat.com/2764 => 94.4%
+        // https://www.unicompat.com/2764-FE0F => 92.4%
+        (name === 'red-heart' && Unicode(0x2764, { fontFamily: 'emoji' })) ||
+        // U+26A1
+        // https://www.unicompat.com/26A1 => 94.1%
+        (name === 'high-voltage' && Unicode(0x26a1)) ||
+        // U+2728
+        // https://emojipedia.org/sparkles/
+        // https://www.unicompat.com/2728 => 94.1%
+        (name === 'sparkles' && Unicode(0x2728)) ||
+        // ***
+        // U+1F48E
+        // https://emojipedia.org/gem-stone/
+        // https://www.unicompat.com/1F48E => 94.1%
+        (name === 'gem-stone' && Unicode(0x1f48e)) ||
+        // ***
+        // 0x1F3C6
+        // https://emojipedia.org/trophy/
+        // https://www.unicompat.com/1F3C6 => 94.1%
+        (name === 'trophy' && Unicode(0x1f3c6)) ||
+        // ***
+        // U+1F397
+        // https://emojipedia.org/reminder-ribbon/
+        // unicompat.com is down
+        //  - https://github.com/gelbartj/unicompat-public/issues/42
+        //  - https://stackoverflow.com/questions/51042771/unicode-symbols-and-os-browser-font-support
+        (name === 'ribbon' && Unicode(0x1f397, { fontFamily: 'emoji' })) ||
+        false;
+    /* ======= Unused ========
+      // ***
+      // U+1FAA8
+      // https://emojipedia.org/rock/
+      // https://www.unicompat.com/1faa8 => 20.7%
+      //
+      // ***
+      // U+26F0
+      // https://emojipedia.org/mountain/
+      // https://iconify.design/icon-sets/noto/mountain.html
+      // https://www.unicompat.com/26F0 => 89.3%
+      (name === 'mountain' && Img(iconMountain)) ||
+      //
+      // ***
+      // U+2194
+      // https://emojipedia.org/left-right-arrow/
+      // https://www.unicompat.com/2194 => 95.0%
+      // Couldn't manage to show colored version
+      (name === 'left-right-arrow' && Unicode(0x2194)) ||
+      (name === 'left-right-arrow' && Unicode(0x2194, { fontFamily: 'reset' })) ||
+      (name === 'left-right-arrow' && Unicode(0xFE0F)) ||
+      (name === 'left-right-arrow' && Unicode(0xFE0F, { fontFamily: 'reset' })) ||
+      ======================== */
+    assert(emoji, { name: name });
+    return emoji;
+    function Unicode(codePoint, styleAddendum) {
+        var text = String.fromCodePoint(codePoint);
+        if (style || styleAddendum) {
+            return React.createElement('span', { style: __assign(__assign({}, style), styleAddendum) }, text);
+        }
+        else {
+            return React.createElement(React.Fragment, null, text);
+        }
+    }
+    function Img(imgSrc, width) {
+        if (width === void 0) { width = '1.15em'; }
+        var props = {
+            src: imgSrc,
+            style: __assign({ verticalAlign: 'text-top', fontSize: '1em', width: width }, style),
+        };
+        return React.createElement('img', props);
+    }
+}

package/dist/utils/Emoji/assets.d.ts

@@ -0,0 +1,6 @@
+import iconMechanicalArm from './mechanical-arm.svg';
+import iconCompass from './compass.svg';
+import iconShield from './shield.svg';
+import iconTypescript from './typescript.svg';
+import iconEngine from './engine.png';
+export { iconMechanicalArm, iconCompass, iconShield, iconTypescript, iconEngine };

package/dist/utils/Emoji/assets.js

@@ -0,0 +1,7 @@
+import iconMechanicalArm from './mechanical-arm.svg';
+//import iconMountain from './mountain.svg'
+import iconCompass from './compass.svg';
+import iconShield from './shield.svg';
+import iconTypescript from './typescript.svg';
+import iconEngine from './engine.png';
+export { iconMechanicalArm, iconCompass, iconShield, iconTypescript, iconEngine };

package/dist/utils/Emoji/index.d.ts

@@ -0,0 +1 @@
+export * from './Emoji';

package/dist/utils/Emoji/index.js

@@ -0,0 +1 @@
+export * from './Emoji';

package/dist/utils/client.d.ts

@@ -0,0 +1,2 @@
+export * from './assert';
+export * from './isBrowser';

package/dist/utils/client.js

@@ -0,0 +1,2 @@
+export * from './assert';
+export * from './isBrowser';

package/dist/utils/filter.d.ts

@@ -0,0 +1,2 @@
+export { filter };
+declare function filter<T extends object>(obj: T, predicate: <K extends keyof T>(value: T[K], key: K) => boolean): T;

package/dist/utils/filter.js

@@ -0,0 +1,11 @@
+export { filter };
+// https://stackoverflow.com/questions/66341757/typescript-how-to-filter-the-object
+function filter(obj, predicate) {
+    var result = {};
+    Object.keys(obj).forEach(function (name) {
+        if (predicate(obj[name], name)) {
+            result[name] = obj[name];
+        }
+    });
+    return result;
+}

package/dist/utils/isBrowser.d.ts

@@ -0,0 +1,2 @@
+export { isBrowser };
+declare function isBrowser(): boolean;

package/dist/utils/isBrowser.js

@@ -0,0 +1,4 @@
+export { isBrowser };
+function isBrowser() {
+    return typeof window !== 'undefined';
+}

package/dist/utils/jsxToTextContent.d.ts

@@ -0,0 +1,2 @@
+export { jsxToTextContent };
+declare function jsxToTextContent(node: JSX.Element | string): string;

package/dist/utils/jsxToTextContent.js

@@ -0,0 +1,12 @@
+import { assert } from './assert';
+export { jsxToTextContent };
+// https://stackoverflow.com/questions/34204975/react-is-there-something-similar-to-node-textcontent/60564620#60564620
+function jsxToTextContent(node) {
+    if (['string', 'number'].includes(typeof node))
+        return String(node);
+    if (node instanceof Array)
+        return node.map(jsxToTextContent).join('');
+    if (typeof node === 'object' && node)
+        return jsxToTextContent(node.props.children);
+    assert(false);
+}

package/dist/utils/objectAssign.d.ts

@@ -0,0 +1,2 @@
+export { objectAssign };
+declare function objectAssign<Obj extends Object, ObjAddendum>(obj: Obj, objAddendum: ObjAddendum): asserts obj is Obj & ObjAddendum;

package/dist/utils/objectAssign.js

@@ -0,0 +1,5 @@
+export { objectAssign };
+// Same as `Object.assign()` but with type inference
+function objectAssign(obj, objAddendum) {
+    Object.assign(obj, objAddendum);
+}

package/dist/utils/server.d.ts

@@ -0,0 +1,7 @@
+export * from './client';
+export * from './isBrowser';
+export * from './filter';
+export * from './determineSectionUrlHash';
+export * from './jsxToTextContent';
+export * from './objectAssign';
+export * from './Emoji';

package/dist/utils/server.js

@@ -0,0 +1,7 @@
+export * from './client';
+export * from './isBrowser';
+export * from './filter';
+export * from './determineSectionUrlHash';
+export * from './jsxToTextContent';
+export * from './objectAssign';
+export * from './Emoji';

package/dist/vite.config.js

@@ -23,10 +23,12 @@ var config = {
             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/installSectionUrlHashs.ts

@@ -1,9 +1,6 @@
-import { assert } from './utils/client'
+export { installSectionUrlHashs }
 
-installSectionUrlHashs()
-/* Let browser restore previous scroll
-jumpToSection()
-*/
+import { assert } from './utils/client'
 
 function installSectionUrlHashs() {
   const pageContainer = document.querySelector('.doc-page .page-container')
@@ -22,10 +19,14 @@ function installSectionUrlHashs() {
       jumpToSection()
     }
   })
+
+  /* Let browser restore previous scroll
+  jumpToSection()
+  */
 }
 
 function assertNavLink(urlHash: string, heading: HTMLHeadingElement) {
-  const navigationEl = getNavigationEl()
+  const navigationEl = document.querySelector('#navigation-body')!
   {
     const { pathname } = window.location
     const parentNavLinkMatch = Array.from(navigationEl.querySelectorAll(`a[href="${pathname}"]`))
@@ -52,10 +53,3 @@ function jumpToSection() {
   }
   target.scrollIntoView()
 }
-
-function getNavigationEl() {
-  const elems: HTMLElement[] = Array.from(document.querySelectorAll('#navigation-container'))
-  assert(elems.length === 1)
-  const navigationEl = elems[0]!
-  return navigationEl
-}

package/navigation/Navigation.tsx

@@ -8,6 +8,7 @@ import { NavigationHeader } from './NavigationHeader'
 import { assert, Emoji, assertWarning, jsxToTextContent } from '../utils/server'
 import './Navigation.css'
 import { NavigationFullscreenClose } from './navigation-fullscreen/NavigationFullscreenButton'
+import { parseTitle } from '../parseTitle'
 
 type NavigationData = Parameters<typeof Navigation>[0]
 
@@ -26,17 +27,19 @@ function Navigation({
     <>
       <div id="navigation-container">
         <NavigationHeader />
-        {isDetachedPage && (
-          <>
-            {navItems.length > 1 && (
-              <NavigationContent id="navigation-content-detached" navItems={navItems} currentUrl={currentUrl} />
-            )}
-            <DetachedPageNote />
-          </>
-        )}
-        <NavigationContent id="navigation-content-main" navItems={navItemsAll} currentUrl={currentUrl} />
-        {/* <ScrollOverlay /> */}
-        <NavigationFullscreenClose />
+        <div id="navigation-body">
+          {isDetachedPage && (
+            <>
+              {navItems.length > 1 && (
+                <NavigationContent id="navigation-content-detached" navItems={navItems} currentUrl={currentUrl} />
+              )}
+              <DetachedPageNote />
+            </>
+          )}
+          <NavigationContent id="navigation-content-main" navItems={navItemsAll} currentUrl={currentUrl} />
+          {/* <ScrollOverlay /> */}
+          <NavigationFullscreenClose />
+        </div>
       </div>
     </>
   )
@@ -49,8 +52,8 @@ function NavigationMask() {
 type NavItem = {
   level: number
   url?: string | null
-  title: string | JSX.Element
-  titleInNav: string | JSX.Element
+  title: string
+  titleInNav: string
 }
 type NavItemComputed = NavItem & {
   isActive: boolean
@@ -90,15 +93,21 @@ function NavItemComponent({
   navItem: NavItemComputed
 }) {
   assert([1, 2, 3, 4].includes(navItem.level), navItem)
+  const titleJsx = parseTitle(navItem.title)
+  const titleInNavJsx = parseTitle(navItem.titleInNav)
   if (navItem.level === 1 || navItem.level === 4) {
     assert(navItem.url === undefined)
   } else {
-    const sectionTitle = jsxToTextContent(navItem.title)
+    const sectionTitle = jsxToTextContent(titleJsx)
     assertWarning(
       navItem.url,
-      `${jsxToTextContent(
-        navItem.titleInNav,
-      )} is missing a URL hash. Use \`<h2 id="url-hash">${sectionTitle}</h2>\` instead of \`## ${sectionTitle}\`.`,
+      [
+        `${jsxToTextContent(titleInNavJsx)} is missing a URL hash.`,
+        `Add a URL hash with: \`## ${sectionTitle}{#some-hash}\`.`,
+        /* TODO/eventually: not implemented yet.
+        `Use \`<h2 id="url-hash">${sectionTitle}</h2>\` instead of \`## ${sectionTitle}\`.`,
+        */
+      ].join(' '),
     )
   }
   return (
@@ -116,8 +125,8 @@ function NavItemComponent({
         .join(' ')}
       href={navItem.url ?? undefined}
     >
-      {/* <span className="nav-item-text">{navItem.titleInNav}</span> */}
-      {navItem.titleInNav}
+      {/* <span className="nav-item-text">{titleInNavJsx}</span> */}
+      {titleInNavJsx}
     </a>
   )
 }

package/navigation/NavigationHeader.tsx

@@ -4,12 +4,16 @@ import iconTwitter from '../icons/twitter.svg'
 import iconDiscord from '../icons/discord.svg'
 import iconChangelog from '../icons/changelog.svg'
 import iconLanguages from '../icons/languages.svg'
-import { usePageContext } from '../renderer/usePageContext'
+import { usePageContext, usePageContext2 } from '../renderer/usePageContext'
+import { DocSearch } from '@docsearch/react'
+import '@docsearch/css'
 
 export { NavigationHeader }
 
 function NavigationHeader() {
   const pageContext = usePageContext()
+  const pageContext2 = usePageContext2()
+  const { NavHeader } = pageContext2.config.NavHeader!
   return (
     <div
       id="navigation-header"
@@ -31,11 +35,11 @@ function NavigationHeader() {
           textDecoration: 'none',
           paddingTop: 12,
           paddingBottom: 7,
-          ...pageContext.config.navHeaderWrapperStyle,
+          ...pageContext2.config.NavHeader?.navHeaderWrapperStyle,
         }}
         href="/"
       >
-        {pageContext.config.navHeader}
+        <NavHeader />
       </a>
       <Links />
     </div>
@@ -53,6 +57,7 @@ function Links() {
       style={{ height: 21, position: 'relative', top: 0, left: 0 }}
     />
   )
+  const { algolia } = pageContext.meta
   return (
     <div
       style={{
@@ -67,7 +72,17 @@ function Links() {
         <LinkIcon className="decolorize-6" icon={iconDiscord} href={projectInfo.discordInvite} />
       )}
       <LinkIcon className="decolorize-7" icon={iconTwitter} href={projectInfo.twitterProfile} />
-      <div className="decolorize-6 colorize-on-hover" id="docsearch-desktop" />
+      {algolia && (
+        <div className="decolorize-6 colorize-on-hover">
+          <DocSearch
+            appId={algolia.appId}
+            indexName={algolia.indexName}
+            apiKey={algolia.apiKey}
+            transformItems={transformItems}
+            insights={true}
+          />
+        </div>
+      )}
       {iconI18n}
       <ChangelogButton />
     </div>
@@ -111,3 +126,17 @@ function LinkIcon({ className, icon, href, style }: { className: string; icon: s
     </>
   )
 }
+
+// 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
+type TransformItems = Parameters<typeof DocSearch>[0]['transformItems']
+const transformItems: TransformItems = (hits) => {
+  hits.map((hit) => {
+    if (hit.url.indexOf('#page-content') > 0) {
+      hit.url = hit.url.replace('#page-content', '')
+    }
+  })
+  return hits
+}

package/navigation/initMobileNavigation.ts

@@ -1,9 +1,9 @@
 export { initMobileNavigation }
+export { hideMobileNavigation }
 
 function initMobileNavigation() {
   activateMobileShowNavigationToggle()
   activateMobileNavigationMask()
-  autoHideNavigationOverlayOnLinkClick()
 }
 
 function activateMobileShowNavigationToggle() {
@@ -15,18 +15,9 @@ function activateMobileNavigationMask() {
   navigationMask.onclick = toggleNavigation
 }
 
-function autoHideNavigationOverlayOnLinkClick() {
-  document.addEventListener('click', (ev: any) => {
-    const el = ev.target
-    if (!el || !('classList' in el)) return
-    if (!el.classList.contains('nav-item')) return
-    hideNavigation()
-  })
-}
-
 function toggleNavigation() {
   document.body.classList.toggle('mobile-show-navigation')
 }
-function hideNavigation() {
+function hideMobileNavigation() {
   document.body.classList.remove('mobile-show-navigation')
 }

package/navigation/initPressKit.ts

@@ -1,5 +1,7 @@
 export { initPressKit }
 
+import { navigate } from 'vike/client/router'
+
 function initPressKit() {
   // Right click navigation header => show /press
   navigationHeaderRightClickInterceptor()
@@ -9,8 +11,9 @@ function navigationHeaderRightClickInterceptor() {
   const navHeader = document.getElementById('navigation-header')!
   if (!navHeader.classList.contains('press-kit')) return
   if (window.location.pathname === '/press') return
-  navHeader.oncontextmenu = (ev) => {
+  const navHeaderImg = document.querySelector('#navigation-header-logo img') as HTMLElement
+  navHeaderImg.oncontextmenu = (ev) => {
     ev.preventDefault()
-    window.location.href = '/press'
+    navigate('/press')
   }
 }