@brillout/docpress 0.8.1 → 0.8.3

package/Layout.tsx

@@ -203,6 +203,7 @@ function NavTop() {
   return (
     <div
       id="top-navigation"
+      className="link-hover-animation"
       style={{
         position: 'relative',
         display: 'flex',
@@ -252,6 +253,7 @@ function NavLeft() {
     <>
       <div
         id="nav-left"
+        className="link-hover-animation"
         style={{
           flexGrow: 1,
           borderRight: 'var(--block-margin) solid white',
@@ -307,14 +309,14 @@ function NavigationHeader({
 }: { headerHeight: number; headerPadding: number; style?: React.CSSProperties }) {
   const pageContext = usePageContext()
   const iconSize = headerHeight - 2 * headerPadding
-  //*
-  const { projectName } = pageContext.meta
+  /*
+  const {projectName} = pageContext.meta
   /*/
   const projectName = 'Vike'
   //*/
   const isProjectNameShort = projectName.length <= 4
   const childrenStyle: React.CSSProperties = {
-    flexGrow: 1,
+    justifyContent: 'center',
     fontSize: isProjectNameShort ? '4.8cqw' : '4.5cqw',
     ['--icon-padding']: '1.8cqw',
   }
@@ -344,8 +346,11 @@ function NavigationHeader({
             textDecoration: 'none',
             height: '100%',
             padding: `${headerPadding}px 0`,
-            paddingLeft: 4,
+            paddingLeft: 4 + 10,
+            marginLeft: -10,
             ...childrenStyle,
+            justifyContent: 'flex-start',
+            flexGrow: 0.5,
           }}
           href="/"
         >
@@ -373,12 +378,14 @@ function NavigationHeader({
           style={{
             //
             ...childrenStyle,
+            flexGrow: 0.5,
           }}
         />
         <MenuLink
           style={{
             //
             ...childrenStyle,
+            flexGrow: 1,
           }}
         />
       </div>
@@ -386,10 +393,10 @@ function NavigationHeader({
   )
 }
 
-type PropsDiv = React.HTMLProps<HTMLDivElement>
-function MenuLink(props: PropsDiv) {
+type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
+function MenuLink(props: PropsAnchor) {
   return (
-    <div
+    <a
       {...props}
       style={{
         height: '100%',
@@ -403,21 +410,18 @@ function MenuLink(props: PropsDiv) {
         ev.preventDefault()
         toggleMenuModal()
       }}
-      aria-label={hotkeyMenuOpen}
-      data-balloon-pos="left"
-      data-balloon-blunt
-      data-balloon-nofocus
+      aria-label={'Ctrl\xa0+\xa0M'}
     >
       <MenuIcon />
       Menu
-    </div>
+    </a>
   )
 }
 function MenuIcon() {
   return (
     <svg
       style={{ marginRight: 'calc(var(--icon-padding) + 2px)', lineHeight: 0, width: '1.3em' }}
-      className="decolorize-7"
+      className="decolorize-6"
       viewBox="0 0 448 512"
     >
       <path

package/Links.tsx

@@ -27,6 +27,7 @@ function Links({ style }: { style?: React.CSSProperties }) {
         alignItems: 'center',
         paddingTop: 0,
         justifyContent: 'left',
+        height: '100%',
         ...style,
       }}
     >
@@ -47,20 +48,28 @@ function ChangelogButton() {
   return (
     <a
       href={`${projectInfo.githubRepository}/blob/main/CHANGELOG.md`}
-      className="button colorize-on-hover"
+      className="colorize-on-hover"
       style={{
         display: 'flex',
         alignItems: 'center',
-        padding: '1px 7px',
-        marginLeft: 5,
-        fontSize: '0.97em',
-        color: 'inherit',
+        padding: 10,
+        height: '100%',
       }}
     >
-      <span id="version-number" className="decolorize-7">
-        v{projectInfo.projectVersion}
-      </span>
-      <img className="decolorize-6" src={iconChangelog} height={16} style={{ marginLeft: 5 }} />
+      <div
+        className="button"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          padding: '2px 10px',
+          fontSize: '0.97em',
+        }}
+      >
+        <span id="version-number" className="decolorize-7">
+          v{projectInfo.projectVersion}
+        </span>
+        <img className="decolorize-6" src={iconChangelog} height={16} style={{ marginLeft: 6 }} />
+      </div>
     </a>
   )
 }
@@ -69,11 +78,11 @@ function LinkIcon({ className, icon, href, style }: { className: string; icon: s
   return (
     <>
       <a
-        className={'colorize-on-hover ' + className}
+        className="colorize-on-hover"
         href={href}
-        style={{ padding: 5, display: 'inline-block', lineHeight: 0 }}
+        style={{ padding: 5, display: 'inline-flex', lineHeight: 0, height: '100%', alignItems: 'center' }}
       >
-        <img src={icon} height="20" style={style} />
+        <img className={className} src={icon} height="20" style={style} />
       </a>
     </>
   )

package/MenuModal.tsx

@@ -1,8 +1,6 @@
 export { MenuModal }
 export { toggleMenuModal }
 export { closeMenuModal }
-export { hotkeyMenuOpen }
-export { hotkeyMenuClose }
 
 import React from 'react'
 import { usePageContext } from './renderer/usePageContext'
@@ -11,15 +9,13 @@ import { css } from './utils/css'
 import { containerQueryMobile } from './Layout'
 import { Links } from './Links'
 
-const hotkeyMenuOpen = 'Ctrl + M'
-const hotkeyMenuClose = 'Ctrl+M or Escape'
-
 function MenuModal() {
   return (
     <>
       <style>{getStyle()}</style>
       <div
         id="menu-modal"
+        className="link-hover-animation"
         style={{
           position: 'fixed',
           width: '100%',
@@ -59,11 +55,9 @@ function LinksBottom() {
       style={{
         display: 'flex',
         justifyContent: 'center',
-        paddingTop: 10,
-        paddingBottom: 40,
       }}
     >
-      <Links />
+      <Links style={{ height: 70 }} />
     </div>
   )
 }
@@ -87,13 +81,11 @@ html.menu-modal-show {
 
 function CloseButton() {
   return (
-    <a
+    <div
       onClick={toggleMenuModal}
-      style={{ position: 'fixed', top: 11, right: 11, zIndex: 10 }}
-      aria-label={hotkeyMenuClose}
-      data-balloon-pos="left"
-      data-balloon-blunt
-      data-balloon-nofocus
+      style={{ position: 'fixed', top: 0, right: 0, zIndex: 10, padding: 11, cursor: 'pointer' }}
+      aria-label={'Escape\nCtrl\xa0+\xa0M'}
+      data-label-shift
     >
       <svg width="48.855" height="48.855" version="1.1" viewBox="0 0 22.901 22.901" xmlns="http://www.w3.org/2000/svg">
         <circle
@@ -115,7 +107,7 @@ function CloseButton() {
           strokeWidth=".11719"
         />
       </svg>
-    </a>
+    </div>
   )
 }
 

package/css/button.css

@@ -1,5 +1,5 @@
 button,
-a.button {
+.button {
   background-color: #fafafa;
   border: 1px solid #aaa;
   border-radius: 5px;

package/css/colorize-on-hover.css

@@ -1,9 +1,7 @@
-.colorize-on-hover,
 .colorize-on-hover [class^='decolorize-'],
 .colorize-on-hover [class*=' decolorize-'] {
   transition: filter 0.3s ease-in-out;
 }
-.colorize-on-hover:hover,
 .colorize-on-hover:hover [class^='decolorize-'],
 .colorize-on-hover:hover [class*=' decolorize-'] {
   filter: grayscale(0) opacity(1) !important;
@@ -22,8 +20,14 @@
   filter: grayscale(1) opacity(0.4);
 }
 
-/*
- * Twitter opacity(0.7): #ababab > #868686
- * == Following computation does NOT work ==
- * Discord opacity(0.7): #6c6c6c > (0.7 * (#fff - #ababab) = #868686 = x * (#fff - #6c6c6c) <=> x = 0.7 * ((#fff - #ababab) / (#fff - #6c6c6c)) = 0.7 * ((255 - 171) / (255 - 108)) = 0.4)
- */
+.link-hover-animation a {
+  transition: all 0.3s ease-in-out !important;
+  transition-property: color, background-color !important;
+}
+.link-hover-animation a:hover {
+  color: black !important;
+  background-color: var(--active-color);
+}
+body {
+  --active-color: rgba(0, 0, 0, 0.03);
+}

package/css/font.css

@@ -1,5 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
 body {
-  font-family: 'Inter';
+  font-family: 'Inter', sans-serif;
 }
 button {
   font-family: inherit;
@@ -9,17 +11,3 @@ body {
   color: var(--color-text);
   line-height: 1.5;
 }
-
-@font-face {
-  font-family: 'Inter';
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique 0deg 12deg;
-  src: url('./Inter-Var.ttf') format('truetype-variations');
-}
-
-em,
-i {
-  font-variation-settings: 'slnt' -10;
-  font-style: normal;
-}

package/css/link.css

@@ -1,17 +1,9 @@
-/*
-:root {
-  --link-color: #4747ff;
-}
-*/
-
 a {
-  /*
-  color: inherit;
-  color: var(--link-color);
-  */
-  color: #4747ff;
   text-decoration: none;
 }
+a[href]:not(.nav-item) {
+  color: #4747ff;
+}
 a > button {
   color: var(--color-text);
 }

package/css/tooltip.css

@@ -1,11 +1,23 @@
-@import 'balloon-css';
-
-:root {
-  --balloon-color: #444;
-  --balloon-move: 2px;
-  --balloon-font-size: 14px;
-  --balloon-border-radius: 5px;
+[aria-label] {
+  position: relative;
 }
-[aria-label][data-balloon-pos]:after {
-  font-family: 'Inter';
+[aria-label]:hover::before {
+  font-family: monospace;
+  font-size: 12px;
+  content: attr(aria-label);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  margin-top: 5px;
+  background: #fdfdfd;
+  padding: 3px 10px;
+  box-shadow: rgb(0 0 0 / 8%) 2px 4px 7px 0px;
+  border-radius: 5px;
+  color: #333;
+  letter-spacing: -0.02em;
+  border: 1px solid #e3e3e3;
+}
+[data-label-shift]::before {
+  margin-left: -10px;
 }

package/dist/navigation/Navigation.js

@@ -70,7 +70,10 @@ function NavItemComponent(_a) {
             */
         ].join(' '));
     }
-    return (React.createElement("a", { className: [
+    var props = {
+        href: (_b = navItem.url) !== null && _b !== void 0 ? _b : undefined,
+        children: titleInNavJsx,
+        className: [
             'nav-item',
             'nav-item-level-' + navItem.level,
             navItem.url && navItem.isActive && ' is-active',
@@ -78,7 +81,14 @@ function NavItemComponent(_a) {
             navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
         ]
             .filter(Boolean)
-            .join(' '), href: (_b = navItem.url) !== null && _b !== void 0 ? _b : undefined }, titleInNavJsx));
+            .join(' '),
+    };
+    if (navItem.level === 2 || navItem.level === 3) {
+        return React.createElement("a", __assign({}, props));
+    }
+    else {
+        return React.createElement("span", __assign({}, props));
+    }
 }
 function groupByColumnLayout(navItems) {
     var navItemsColumnLayout = [];

package/docsearch/SearchLink.tsx

@@ -3,10 +3,10 @@ export { SearchLink }
 import React from 'react'
 import { openDocsearchModal } from './toggleDocsearchModal'
 
-type PropsDiv = React.HTMLProps<HTMLDivElement>
-function SearchLink(props: PropsDiv) {
+type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
+function SearchLink(props: PropsAnchor) {
   return (
-    <div
+    <a
       {...props}
       style={{
         height: '100%',
@@ -20,21 +20,18 @@ function SearchLink(props: PropsDiv) {
         ev.preventDefault()
         openDocsearchModal()
       }}
-      aria-label="Ctrl + K"
-      data-balloon-pos="left"
-      data-balloon-blunt
-      data-balloon-nofocus
+      aria-label={'Ctrl\xa0+\xa0K'}
     >
       <SearchIcon />
       Search
-    </div>
+    </a>
   )
 }
 function SearchIcon() {
   return (
     <svg
       style={{ marginRight: 'var(--icon-padding)', lineHeight: 0, width: '1.3em' }}
-      className="decolorize-6"
+      className="decolorize-7"
       viewBox="0 0 20 20"
     >
       <path

package/initKeyBindings.ts

@@ -5,32 +5,27 @@ import { closeMenuModal, toggleMenuModal } from './MenuModal'
 
 function initKeyBindings() {
   window.addEventListener(
-    // Cannot use `keyup`: https://stackoverflow.com/questions/66595035/how-to-detect-escape-key-if-search-bar-of-browser-is-open/66600548#66600548
     'keydown',
     (ev) => {
-      if (ev.key === 'Escape') {
+      const key = (ev.key || '').toLowerCase()
+
+      if (key === 'escape') {
         closeDocsearchModal()
         closeMenuModal()
-        return
       }
 
-      const key = (ev.key || '').toLowerCase()
-      const isCtrl = ev.metaKey || ev.ctrlKey
-      if (isCtrl && key === 'm') {
-        ev.preventDefault()
+      if (key === 'm' && ev.ctrlKey) {
         closeDocsearchModal()
         toggleMenuModal()
-        return
       }
 
-      // Replicate https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts#L45-L49
-      if ((isCtrl && key === 'k') || (key === '/' && !isEditingContent(ev))) {
-        ev.preventDefault()
+      // Replicates docsearch keybinding
+      // https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts#L45-L49
+      if ((key === 'k' && (ev.ctrlKey || ev.metaKey)) || (key === '/' && !isEditingContent(ev))) {
         closeMenuModal()
-        return
       }
     },
-    false,
+    { passive: true },
   )
 }
 function isEditingContent(event: KeyboardEvent): boolean {

package/navigation/Navigation.css

@@ -3,7 +3,6 @@
   white-space: nowrap;
   overflow-x: hidden;
   --padding-left-global: 9px;
-  --padding-left-additional: 0px;
 }
 .nav-item code {
   font-size: 0.9em;
@@ -53,49 +52,45 @@
   text-decoration: none;
   --padding: 5px;
 
-  /* #ededed === rgb(237, 237, 237)
-   * #f5f5f5 === rgb(245, 245, 245)
-   * 1 - (237 / 245) === 0.03265306122
-  background-color: #ededed;
-  */
-  background-color: rgba(0,0,0, 0.03265306122);
   padding: var(--padding) 0;
-  padding-left: calc(var(--padding-left-global) + var(--padding-left-additional));
+  padding-left: calc(var(--padding-left-global) + 6px);
 }
 #menu-modal .nav-item-level-3 {
   border-right: 4px solid #eee;
 }
-.nav-item {
-  /*
-  --shadow-size: 14px;
-  --shadow-color: rgba(0, 0, 0, 0.09);
-  */
-  --shadow-size: 7px;
+.nav-item-level-3 {
+  --shadow-size: 9px;
   --shadow-color: rgba(0, 0, 0, 0.11);
   --shadow-size-minus: calc(-1 * var(--shadow-size));
   --shadow-top: inset 0px var(--shadow-size) var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
   --shadow-bottom: inset 0px var(--shadow-size-minus) var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
+  --box-shadow-left: inset var(--shadow-size-minus) 0px var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
+  --box-shadow-right: inset var(--shadow-size) 0px var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
   --box-shadow-top: 0 0;
   --box-shadow-bottom: 0 0;
-  box-shadow: var(--box-shadow-top), var(--box-shadow-bottom);
+  box-shadow: var(--box-shadow-top), var(--box-shadow-bottom), var(--box-shadow-left), var(--box-shadow-right);
 }
 .nav-item-level-3.nav-item-first-of-its-kind {
-  padding-top: calc(var(--padding) * 1.8);
+  padding-top: 10px;
   --box-shadow-top: var(--shadow-top);
 }
 .nav-item-level-3.nav-item-last-of-its-kind {
-  padding-bottom: calc(var(--padding) * 1.8);
+  padding-bottom: 10px;
   --box-shadow-bottom: var(--shadow-bottom);
 }
 .nav-item-level-2,
 .nav-item-level-3 {
   position: relative;
 }
-.nav-item-level-2.is-active {
-  /* #ededed === rgb(237, 237, 237)
-   * #f5f5f5 === rgb(245, 245, 245)
-   * 1 - (237 / 245) === 0.03265306122
-  background-color: #ededed;
-  */
-  background-color: rgba(0,0,0, 0.03265306122);
+
+.nav-item-level-3::before,
+.nav-item-level-2.is-active::before {
+  background-color: var(--active-color);
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  content: "";
 }

package/navigation/Navigation.tsx

@@ -92,8 +92,10 @@ 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 {
@@ -109,23 +111,28 @@ function NavItemComponent({
       ].join(' '),
     )
   }
-  return (
-    <a
-      className={[
-        'nav-item',
-        'nav-item-level-' + navItem.level,
-        navItem.url && navItem.isActive && ' is-active',
-        navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
-        navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      href={navItem.url ?? undefined}
-    >
-      {/* <span className="nav-item-text">{titleInNavJsx}</span> */}
-      {titleInNavJsx}
-    </a>
-  )
+
+  const props: PropsAnchor & PropsSpan = {
+    href: navItem.url ?? undefined,
+    children: titleInNavJsx,
+    className: [
+      'nav-item',
+      'nav-item-level-' + navItem.level,
+      navItem.url && navItem.isActive && ' is-active',
+      navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
+      navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  }
+  type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
+  type PropsSpan = React.HTMLProps<HTMLSpanElement>
+
+  if (navItem.level === 2 || navItem.level === 3) {
+    return <a {...props} />
+  } else {
+    return <span {...props} />
+  }
 }
 
 type NavItemsColumnEntry = NavItemComputed & { navItemChilds: NavItemComputed[] }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -11,7 +11,6 @@
     "@mdx-js/rollup": "3.0.1",
     "@shikijs/transformers": "1.2.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "balloon-css": "1.2.0",
     "rehype-pretty-code": "0.13.0",
     "remark-gfm": "4.0.0",
     "shiki": "1.2.0",