@brillout/docpress 0.7.10 → 0.8.1

package/MenuModal.tsx

@@ -0,0 +1,146 @@
+export { MenuModal }
+export { toggleMenuModal }
+export { closeMenuModal }
+export { hotkeyMenuOpen }
+export { hotkeyMenuClose }
+
+import React from 'react'
+import { usePageContext } from './renderer/usePageContext'
+import { NavigationContent } from './navigation/Navigation'
+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"
+        style={{
+          position: 'fixed',
+          width: '100%',
+          height: '100vh',
+          top: 0,
+          left: 0,
+          zIndex: 9999,
+          overflow: 'scroll',
+          background: 'var(--bg-color)',
+        }}
+      >
+        <div
+          style={{
+            // Place <LinksBottom /> to the bottom
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100vh',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Nav />
+          <LinksBottom />
+        </div>
+        <CloseButton />
+      </div>
+    </>
+  )
+}
+function Nav() {
+  const pageContext = usePageContext()
+  const navItems = pageContext.navItemsAll
+  return <NavigationContent columnLayout={true} navItems={navItems} />
+}
+function LinksBottom() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        paddingTop: 10,
+        paddingBottom: 40,
+      }}
+    >
+      <Links />
+    </div>
+  )
+}
+
+function getStyle() {
+  return css`
+html:not(.menu-modal-show) #menu-modal {
+  display: none;
+}
+// disable scroll of main view
+html.menu-modal-show {
+  overflow: hidden !important;
+}
+@container(min-width: ${containerQueryMobile}px) {
+  #menu-modal .nav-item-level-3 {
+    display: none;
+  }
+}
+`
+}
+
+function CloseButton() {
+  return (
+    <a
+      onClick={toggleMenuModal}
+      style={{ position: 'fixed', top: 11, right: 11, zIndex: 10 }}
+      aria-label={hotkeyMenuClose}
+      data-balloon-pos="left"
+      data-balloon-blunt
+      data-balloon-nofocus
+    >
+      <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
+          cx="11.45"
+          cy="11.45"
+          r="10.607"
+          fill="#ececec"
+          stroke="#666"
+          strokeDashoffset="251.44"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.6875"
+          style={{ paintOrder: 'normal' }}
+        />
+        <path
+          d="m7.5904 6.2204 3.86 3.86 3.84-3.84a0.92 0.92 0 0 1 0.66-0.29 1 1 0 0 1 1 1 0.9 0.9 0 0 1-0.27 0.66l-3.89 3.84 3.89 3.89a0.9 0.9 0 0 1 0.27 0.61 1 1 0 0 1-1 1 0.92 0.92 0 0 1-0.69-0.27l-3.81-3.86-3.85 3.85a0.92 0.92 0 0 1-0.65 0.28 1 1 0 0 1-1-1 0.9 0.9 0 0 1 0.27-0.66l3.89-3.84-3.89-3.89a0.9 0.9 0 0 1-0.27-0.61 1 1 0 0 1 1-1c0.24 3e-3 0.47 0.1 0.64 0.27z"
+          fill="#666"
+          stroke="#666"
+          strokeWidth=".11719"
+        />
+      </svg>
+    </a>
+  )
+}
+
+function toggleMenuModal() {
+  document.documentElement.classList.toggle('menu-modal-show')
+  if (document.documentElement.classList.contains('menu-modal-show') && getViewportWidth() < containerQueryMobile) {
+    autoScroll()
+  }
+}
+function getViewportWidth(): number {
+  // `window.innerWidth` inlcudes scrollbar width: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+  return document.documentElement.clientWidth
+}
+function autoScroll() {
+  const nav = document.querySelector('#menu-modal .navigation-content')!
+  const href = window.location.pathname
+  const navLinks = Array.from(nav.querySelectorAll(`a[href="${href}"]`))
+  const navLink = navLinks[0]
+  if (!navLink) return
+  navLink.scrollIntoView({
+    behavior: 'instant',
+    block: 'center',
+    inline: 'start',
+  })
+}
+function closeMenuModal() {
+  document.documentElement.classList.remove('menu-modal-show')
+}

package/autoScrollNav.ts

@@ -2,12 +2,11 @@ export { autoScrollNav }
 export const autoScrollNav_SSR = `autoScrollNav();${autoScrollNav.toString()}`
 
 // - We cannot use TypeScript syntax because of autoScrollNav_SSR
-// - We have to save & restore `dodocument.documentElement.scrollTop` because scrollIntoView() scrolls the main view. (I don't know why).
+// - We have to save & restore `document.documentElement.scrollTop` because scrollIntoView() scrolls the main view. (I don't know why).
 //   - Failed alternatives:
 //     - scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
 //     - Doesn't work: the scrolling is off by hundreds of px (I guess because this function runs too early while the page is still rendering).
 //       ```js
-//       const navigationContainerEl = document.getElementById("navigation-container")
 //       const offset = navLink.offsetTop - (window.innerHeight / 2)
 //       navigationContainerEl.scrollTop = offset
 //       ```
@@ -20,10 +19,10 @@ export const autoScrollNav_SSR = `autoScrollNav();${autoScrollNav.toString()}`
 //       ```
 
 function autoScrollNav() {
-  const navigationEl = document.getElementById('navigation-content-main')
-  if (!navigationEl) return
+  const nav = document.querySelector('#nav-left .navigation-content')
+  if (!nav) return
   const href = window.location.pathname
-  const navLinks = Array.from(navigationEl.querySelectorAll(`a[href="${href}"]`))
+  const navLinks = Array.from(nav.querySelectorAll(`a[href="${href}"]`))
   const navLink = navLinks[0]
   if (!navLink) return
 

package/components/CodeBlockTransformer.tsx

@@ -2,9 +2,7 @@ export { CodeBlockTransformer }
 
 import React from 'react'
 import { assert } from '../utils/server'
-/* Imorted in /src/css/index.css instead
 import './CodeBlockTransformer.css'
-*/
 
 type LineBreak = 'white-space' | 'break-word'
 

package/components/Note.css

@@ -1,6 +1,6 @@
 blockquote {
   --color: 0, 0, 0;
-  --color-strengh-bg: 0.7;
+  --color-strengh-bg: 1.5;
   --color-strengh-border: 1.5;
   border-left: 8px solid rgba(var(--color), calc(0.06 * var(--color-strengh-border)));
   background-color: rgba(var(--color), calc(0.03 * var(--color-strengh-bg)));
@@ -9,12 +9,12 @@ blockquote {
   padding: 4px 16px;
 }
 blockquote.note-color-red {
-  --color-strengh-bg: 1.7;
+  --color-strengh-bg: 3.3;
   --color-strengh-border: 6;
-  --color: 190, 25, 49;
+  --color: 220, 25, 49;
 }
 blockquote.note-color-yellow {
-  --color-strengh-bg: 4;
+  --color-strengh-bg: 7;
   --color-strengh-border: 8;
   --color: 255, 204, 50;
 }

package/components/Note.tsx

@@ -15,9 +15,7 @@ export { Note }
 
 import React from 'react'
 import { assert } from '../utils/assert'
-/* Imorted in /src/css/index.css instead
 import './Note.css'
-*/
 
 type Props = {
   children: React.ReactNode

package/components/Supporters.tsx

@@ -26,6 +26,7 @@ function SectionDescription({ children }: { children?: Children }) {
         display: 'inline-block',
         marginTop: 12,
         marginBottom: 12,
+        fontSize: '1.05em',
       }}
     >
       {children}

package/config/resolveHeadingsData.ts

@@ -1,6 +1,6 @@
 export { resolveHeadingsData }
 
-import { assert, jsxToTextContent } from '../utils/server'
+import { assert, isBrowser, jsxToTextContent } from '../utils/server'
 import type {
   HeadingDefinition,
   HeadingDetachedDefinition,
@@ -9,11 +9,13 @@ import type {
 } from '../types/Heading'
 import type { Config } from '../types/Config'
 import { getConfig } from './getConfig'
-import { NavigationData, NavItem } from '../navigation/Navigation'
+import type { NavItem, NavItemAll } from '../navigation/Navigation'
 import type { LinkData } from '../components'
 import type { Exports, PageContextOriginal } from './resolvePageContext'
 import pc from '@brillout/picocolors'
 import { parseTitle } from '../parseTitle'
+import { determineColumnLayoutEntries } from '../renderer/getStyleColumnLayout'
+assert(!isBrowser())
 
 type PageSectionResolved = {
   url: string | null
@@ -47,35 +49,26 @@ function resolveHeadingsData(pageContext: PageContextOriginal) {
     ...headingsDetachedResolved.map(headingToLinkData),
   ]
 
-  let navigationData: NavigationData
+  // TODO/refactor: remove navItems
+  let navItems: NavItem[]
+  let navItemsAll: NavItemAll[]
+  let columnLayouts: number[][]
   {
-    const currentUrl: string = pageContext.urlPathname
     const navItemsPageSections = pageSectionsResolved
       .filter((pageSection) => pageSection.pageSectionLevel === 2)
       .map(pageSectionToNavItem)
+    navItemsAll = headingsResolved.map(headingToNavItem)
+    const res = determineColumnLayoutEntries(navItemsAll)
+    columnLayouts = res.columnLayouts
     if (isDetachedPage) {
-      const navItemsAll: NavItem[] = headingsResolved
-      const navItems: NavItem[] = [headingToNavItem(activeHeading), ...navItemsPageSections]
-      navigationData = {
-        isDetachedPage: true,
-        navItems,
-        navItemsAll,
-        currentUrl,
-      }
+      navItems = [headingToNavItem(activeHeading), ...navItemsPageSections]
     } else {
-      const navItemsAll: NavItem[] = headingsResolved.map(headingToNavItem)
-      const activeHeadingIndex = navItemsAll.findIndex((navItem) => navItem.url === currentUrl)
+      navItems = navItemsAll
+      const activeHeadingIndex = navItemsAll.findIndex((navItem) => navItem.url === pageContext.urlPathname)
       assert(activeHeadingIndex >= 0)
       navItemsPageSections.forEach((navItem, i) => {
         navItemsAll.splice(activeHeadingIndex + 1 + i, 0, navItem)
       })
-
-      navigationData = {
-        isDetachedPage: false,
-        navItems: navItemsAll,
-        navItemsAll,
-        currentUrl,
-      }
     }
   }
 
@@ -84,13 +77,16 @@ function resolveHeadingsData(pageContext: PageContextOriginal) {
     .map((h) => ({ title: typeof h.topNavigation === 'string' ? h.topNavigation : h.title, url: h.url }))
 
   const pageContextAddendum = {
-    navigationData,
+    isDetachedPage,
+    navItems,
+    navItemsAll,
     linksAll,
     isLandingPage,
     pageTitle,
     documentTitle,
-    noSideNavigation: activeHeading.noSideNavigation,
     topNavigationList,
+    // TODO: don't pass to client-side
+    columnLayouts,
   }
   return pageContextAddendum
 }
@@ -101,6 +97,7 @@ function headingToNavItem(heading: HeadingResolved | HeadingDetachedResolved): N
     url: heading.url,
     title: heading.title,
     titleInNav: heading.titleInNav,
+    menuModalFullWidth: heading.menuModalFullWidth,
   }
 }
 function headingToLinkData(heading: HeadingResolved | HeadingDetachedResolved): LinkData {

package/config/resolvePageContext.ts

@@ -23,10 +23,20 @@ function resolvePageContext(pageContext: PageContextOriginal) {
   objectAssign(pageContextResolved, resolveHeadingsData(pageContext))
 
   const config = getConfig()
-  const { faviconUrl, algolia, tagline, twitterHandle, bannerUrl, websiteUrl, topNavigationStyle } = config
+  const {
+    faviconUrl,
+    algolia,
+    tagline,
+    twitterHandle,
+    bannerUrl,
+    websiteUrl,
+    topNavigationStyle,
+    projectInfo: { projectName },
+  } = config
   objectAssign(pageContextResolved, {
     urlPathname: pageContext.urlPathname, // TODO: remove
     meta: {
+      projectName,
       faviconUrl,
       twitterHandle,
       bannerUrl,

package/css/code/block.css

@@ -22,27 +22,27 @@ figure[data-rehype-pretty-code-figure] {
 }
 
 /* 821px screen width => the width of code blocks isn't shrinked anymore => no need to reduce the font-size of code blocks */
-@media screen and (max-width: 820px) {
+@container(max-width: 820px) {
   pre > code {
     font-size: 0.9em !important;
   }
 }
-@media screen and (max-width: 720px) {
+@container(max-width: 720px) {
   pre > code {
     font-size: 0.8em !important;
   }
 }
-@media screen and (max-width: 620px) {
+@container(max-width: 620px) {
   pre > code {
     font-size: 0.7em !important;
   }
 }
-@media screen and (max-width: 550px) {
+@container(max-width: 550px) {
   pre > code {
     font-size: 0.6em !important;
   }
 }
-@media screen and (max-width: 450px) {
+@container(max-width: 450px) {
   pre > code {
     font-size: 0.5em !important;
   }

package/css/code/inline.css

@@ -8,7 +8,7 @@ code {
  *  - Allow them on mobile
  *  - Allow them for `<code long>`
  */
-@media screen and (max-width: 500px) {
+@container(max-width: 500px) {
   code {
     word-break: break-word;
   }

package/css/code.css

@@ -3,21 +3,25 @@
 @import './code/diff.css';
 
 code {
-  /*
-  background-color: #f4f4f4;
-  0.043137255 = 1 - (#f4 / #ff)
-  */
-  background-color: rgba(0, 0, 0, 0.043137255);
   border-radius: 4px;
 }
+pre {
+  background: none !important;
+}
 
 /* Inline */
 code {
+  background: rgba(0, 0, 0, 0.063137255);
   font-size: 1.1em;
 }
 
 /* Block */
 pre > code {
+  /*
+  background-color: #f4f4f4;
+  0.043137255 = 1 - (#f4 / #ff)
+  */
+  background: rgba(0, 0, 0, 0.043137255);
   font-size: 1em;
 }
 /* Workaround for shiki regression */

package/css/index.css

@@ -1,5 +1,4 @@
 @import './reset.css';
-@import './block-design.css';
 @import './colorize-on-hover.css';
 @import './heading.css';
 @import './button.css';
@@ -8,6 +7,3 @@
 @import './code.css';
 @import './table.css';
 @import './tooltip.css';
-@import '../algolia/DocSearch.css';
-@import '../components/Note.css';
-@import '../components/CodeBlockTransformer.css';

package/css/reset.css

@@ -4,9 +4,3 @@
 body {
   margin: 0;
 }
-
-/* Avoid tweet embeds to overflow the body width.
- * Settings `overflow: hidden` to a container doesn't work (This is a CSS bug?) */
-iframe {
-  max-width: 100%;
-}

package/dist/+config.d.ts

@@ -10,12 +10,6 @@ declare const _default: {
     hydrationCanBeAborted: true;
     passToClient: string[];
     meta: {
-        NavHeader: {
-            env: {
-                client: true;
-                server: true;
-            };
-        };
         Layout: {
             env: {
                 client: true;
@@ -37,13 +31,7 @@ declare global {
             exports: Exports;
         }
         interface Config {
-            Layout?: ReactComponent | ImportString;
-            NavHeader?: {
-                NavHeader: ReactComponent;
-                navHeaderWrapperStyle?: React.CSSProperties;
-                NavHeaderMobile: ReactComponent;
-                navHeaderMobileWrapperStyle?: React.CSSProperties;
-            };
+            Layout?: ReactComponent | null | ImportString;
         }
     }
 }

package/dist/+config.js

@@ -9,9 +9,6 @@ export default {
     hydrationCanBeAborted: true,
     passToClient: ['pageContextResolved'],
     meta: {
-        NavHeader: {
-            env: { client: true, server: true },
-        },
         Layout: {
             env: { client: true, server: true },
         },

package/dist/components/CodeBlockTransformer.d.ts

@@ -1,5 +1,6 @@
 export { CodeBlockTransformer };
 import React from 'react';
+import './CodeBlockTransformer.css';
 type LineBreak = 'white-space' | 'break-word';
 declare function CodeBlockTransformer({ children, lineBreak }: {
     children: React.ReactNode;

package/dist/components/CodeBlockTransformer.js

@@ -1,6 +1,7 @@
 export { CodeBlockTransformer };
 import React from 'react';
 import { assert } from '../utils/server';
+import './CodeBlockTransformer.css';
 function CodeBlockTransformer(_a) {
     var children = _a.children, lineBreak = _a.lineBreak;
     assert(lineBreak === 'white-space' || lineBreak === 'break-word', '`lineBreak` is currently the only use case for <CodeBlockTransformer>');

package/dist/components/Note.d.ts

@@ -6,6 +6,7 @@ export { Danger };
 export { NoteWithoutIcon };
 export { NoteWithCustomIcon };
 import React from 'react';
+import './Note.css';
 type Props = {
     children: React.ReactNode;
     style?: React.CSSProperties;

package/dist/components/Note.js

@@ -25,6 +25,7 @@ export { Note }
 */
 import React from 'react';
 import { assert } from '../utils/assert';
+import './Note.css';
 function Warning(props) {
     return React.createElement(NoteGeneric, __assign({ type: "warning" }, props));
 }

package/dist/components/Supporters.js

@@ -14,6 +14,7 @@ function SectionDescription(_a) {
             display: 'inline-block',
             marginTop: 12,
             marginBottom: 12,
+            fontSize: '1.05em',
         } }, children));
 }
 function Individuals(_a) {

package/dist/config/resolveHeadingsData.d.ts

@@ -1,21 +1,18 @@
 export { resolveHeadingsData };
-import { NavItem } from '../navigation/Navigation';
+import type { NavItem, NavItemAll } from '../navigation/Navigation';
 import type { LinkData } from '../components';
 import type { PageContextOriginal } from './resolvePageContext';
 declare function resolveHeadingsData(pageContext: PageContextOriginal): {
-    navigationData: {
-        navItems: NavItem[];
-        navItemsAll: NavItem[];
-        currentUrl: string;
-        isDetachedPage: boolean;
-    };
+    isDetachedPage: boolean;
+    navItems: NavItem[];
+    navItemsAll: NavItemAll[];
     linksAll: LinkData[];
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
-    noSideNavigation: (true | "no-logo") | undefined;
     topNavigationList: {
         title: string;
         url: string | null | undefined;
     }[];
+    columnLayouts: number[][];
 };

package/dist/config/resolveHeadingsData.js

@@ -19,10 +19,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 export { resolveHeadingsData };
-import { assert, jsxToTextContent } from '../utils/server';
+import { assert, isBrowser, jsxToTextContent } from '../utils/server';
 import { getConfig } from './getConfig';
 import pc from '@brillout/picocolors';
 import { parseTitle } from '../parseTitle';
+import { determineColumnLayoutEntries } from '../renderer/getStyleColumnLayout';
+assert(!isBrowser());
 function resolveHeadingsData(pageContext) {
     var config = getConfig();
     {
@@ -36,48 +38,43 @@ function resolveHeadingsData(pageContext) {
     var _b = getTitles(activeHeading, pageContext, config), documentTitle = _b.documentTitle, isLandingPage = _b.isLandingPage, pageTitle = _b.pageTitle;
     var pageSectionsResolved = getPageSectionsResolved(pageContext, activeHeading);
     var linksAll = __spreadArray(__spreadArray(__spreadArray([], pageSectionsResolved.map(pageSectionToLinkData), true), headingsResolved.map(headingToLinkData), true), headingsDetachedResolved.map(headingToLinkData), true);
-    var navigationData;
+    // TODO/refactor: remove navItems
+    var navItems;
+    var navItemsAll;
+    var columnLayouts;
     {
-        var currentUrl_1 = pageContext.urlPathname;
         var navItemsPageSections = pageSectionsResolved
             .filter(function (pageSection) { return pageSection.pageSectionLevel === 2; })
             .map(pageSectionToNavItem);
+        navItemsAll = headingsResolved.map(headingToNavItem);
+        var res = determineColumnLayoutEntries(navItemsAll);
+        columnLayouts = res.columnLayouts;
         if (isDetachedPage) {
-            var navItemsAll = headingsResolved;
-            var navItems = __spreadArray([headingToNavItem(activeHeading)], navItemsPageSections, true);
-            navigationData = {
-                isDetachedPage: true,
-                navItems: navItems,
-                navItemsAll: navItemsAll,
-                currentUrl: currentUrl_1,
-            };
+            navItems = __spreadArray([headingToNavItem(activeHeading)], navItemsPageSections, true);
         }
         else {
-            var navItemsAll_1 = headingsResolved.map(headingToNavItem);
-            var activeHeadingIndex_1 = navItemsAll_1.findIndex(function (navItem) { return navItem.url === currentUrl_1; });
+            navItems = navItemsAll;
+            var activeHeadingIndex_1 = navItemsAll.findIndex(function (navItem) { return navItem.url === pageContext.urlPathname; });
             assert(activeHeadingIndex_1 >= 0);
             navItemsPageSections.forEach(function (navItem, i) {
-                navItemsAll_1.splice(activeHeadingIndex_1 + 1 + i, 0, navItem);
+                navItemsAll.splice(activeHeadingIndex_1 + 1 + i, 0, navItem);
             });
-            navigationData = {
-                isDetachedPage: false,
-                navItems: navItemsAll_1,
-                navItemsAll: navItemsAll_1,
-                currentUrl: currentUrl_1,
-            };
         }
     }
     var topNavigationList = headingsResolved
         .filter(function (heading) { return heading.topNavigation; })
         .map(function (h) { return ({ title: typeof h.topNavigation === 'string' ? h.topNavigation : h.title, url: h.url }); });
     var pageContextAddendum = {
-        navigationData: navigationData,
+        isDetachedPage: isDetachedPage,
+        navItems: navItems,
+        navItemsAll: navItemsAll,
         linksAll: linksAll,
         isLandingPage: isLandingPage,
         pageTitle: pageTitle,
         documentTitle: documentTitle,
-        noSideNavigation: activeHeading.noSideNavigation,
         topNavigationList: topNavigationList,
+        // TODO: don't pass to client-side
+        columnLayouts: columnLayouts,
     };
     return pageContextAddendum;
 }
@@ -87,6 +84,7 @@ function headingToNavItem(heading) {
         url: heading.url,
         title: heading.title,
         titleInNav: heading.titleInNav,
+        menuModalFullWidth: heading.menuModalFullWidth,
     };
 }
 function headingToLinkData(heading) {