@brillout/docpress 0.15.11 → 0.15.13-commit-ffe283f

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -3,7 +3,7 @@ export { NavigationWithColumnLayout }
 import React, { useEffect, useState } from 'react'
 import { assert } from '../utils/server'
 import { getViewportWidth } from '../utils/getViewportWidth'
-import { containerQueryMobileMenu, navLeftWidthMax, navLeftWidthMin } from '../Layout'
+import { viewTablet, navLeftWidthMax, navLeftWidthMin } from '../Layout'
 import { throttle } from '../utils/throttle'
 import { Collapsible } from './Collapsible'
 import { ColumnMap, getNavItemsWithComputed, NavItem, NavItemComponent, NavItemComputed } from '../NavItemComponent'
@@ -23,6 +23,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
     window.addEventListener('resize', throttle(updateviewportwidth, 300), { passive: true })
   })
   const navItemsByColumnLayouts = getNavItemsByColumnLayouts(navItemsWithComputed, viewportWidth)
+  const maxColumns = Math.max(...navItemsByColumnLayouts.map((layout) => layout.columns.length), 1)
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -40,10 +41,10 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
           >
             {columnLayout.isFullWidthCategory ? (
               <div style={{ marginTop: 0 }}>
-                <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+                <ColumnsWrapper numberOfColumns={maxColumns}>
                   <Collapsible
                     head={(onClick) => <NavItemComponent navItem={columnLayout.navItemLevel1} onClick={onClick} />}
-                    disabled={columnLayout.columns.length > 1}
+                    disabled={maxColumns > 1}
                     collapsedInit={!columnLayout.navItemLevel1.isRelevant}
                     marginBottomOnExpand={marginBottomOnExpand}
                   >
@@ -61,7 +62,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
                 </ColumnsWrapper>
               </div>
             ) : (
-              <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+              <ColumnsWrapper numberOfColumns={maxColumns}>
                 <ColumnsLayout>
                   {columnLayout.columns.map((column, j) => (
                     <Column key={j}>
@@ -69,7 +70,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
                         <div key={k} style={{ marginBottom: 0 }}>
                           <Collapsible
                             head={(onClick) => <NavItemComponent navItem={category.navItemLevel1} onClick={onClick} />}
-                            disabled={columnLayout.columns.length > 1}
+                            disabled={maxColumns > 1}
                             collapsedInit={!category.navItemLevel1.isRelevant}
                             marginBottomOnExpand={marginBottomOnExpand}
                           >
@@ -93,7 +94,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
 
   function getStyle() {
     const style = css`
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
+@media(min-width: ${viewTablet + 1}px) {
   .menu-navigation-content {
     position: absolute;
     width: 100%;
@@ -269,17 +270,23 @@ function getNavItemsByColumnEntries(navItems: NavItemComputed[]): NavItemsByColu
   let isFullWidthCategory: boolean | undefined
   navItems.forEach((navItem) => {
     if (navItem.level === 1) {
-      const isFullWidthCategoryPrevious = isFullWidthCategory
-      isFullWidthCategory = !!navItem.menuModalFullWidth
-      if (isFullWidthCategoryPrevious !== undefined && isFullWidthCategoryPrevious !== isFullWidthCategory) {
+      if (isFullWidthCategory) {
+        assert(navItem.menuModalFullWidth)
+      }
+      const isFullWidthCategoryPrevious = !!isFullWidthCategory
+      if (navItem.menuModalFullWidth) {
+        isFullWidthCategory = true
+        // Flush
         navItemsByColumnEntries.push({ columnEntries, isFullWidthCategory: isFullWidthCategoryPrevious })
         columnEntries = []
+      } else {
+        isFullWidthCategory = false
       }
     }
     assert(isFullWidthCategory !== undefined)
-    if (navItem.isColumnEntry) {
+    if (navItem.isPotentialColumn) {
       assert(navItem.level === 1 || navItem.level === 4)
-      columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry }
+      columnEntry = { navItems: [navItem], columnMap: navItem.isPotentialColumn }
       columnEntries.push(columnEntry)
     } else {
       assert(navItem.level !== 1)

package/MenuModal/toggleMenuModal.ts

@@ -4,7 +4,7 @@ export { keepMenuModalOpen }
 export { closeMenuModal }
 export { coseMenuModalOnMouseLeave }
 
-import { containerQueryMobileMenu } from '../Layout'
+import { viewTablet } from '../Layout'
 import { getHydrationPromise } from '../renderer/getHydrationPromise'
 import { getViewportWidth } from '../utils/getViewportWidth'
 import { isBrowser } from '../utils/isBrowser'
@@ -111,7 +111,7 @@ function toggleMenuModal(menuId: number) {
     closeMenuModal()
   } else {
     openMenuModal(menuId)
-    if (getViewportWidth() < containerQueryMobileMenu) autoScroll()
+    if (getViewportWidth() < viewTablet) autoScroll()
   }
 }
 

package/MenuModal.tsx

@@ -3,7 +3,7 @@ export { MenuModal }
 import React from 'react'
 import { usePageContext } from './renderer/usePageContext'
 import { css } from './utils/css'
-import { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout'
+import { viewDesktop, viewTablet } from './Layout'
 import { ExternalLinks } from './ExternalLinks'
 import { Style } from './utils/Style'
 import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
@@ -79,7 +79,7 @@ function Nav() {
 
 function getStyle() {
   return css`
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
+@media(min-width: ${viewTablet + 1}px) {
   #menu-modal-scroll-container {
     max-height: calc(100vh - var(--nav-head-height) - var(--block-margin));
     ${/* https://github.com/brillout/docpress/issues/23 */ ''}
@@ -99,7 +99,7 @@ function getStyle() {
     display: none !important;
   }
 }
-@media(max-width: ${containerQueryMobileMenu}px) {
+@media(max-width: ${viewTablet}px) {
   #menu-modal-scroll-container {
     ${/* Fallback for Firefox: it doesn't support `dvh` yet: https://caniuse.com/?search=dvh */ ''}
     ${/* Let's always and systematically use `dvh` instead of `vh` once Firefox supports it */ ''}
@@ -135,7 +135,7 @@ function getStyle() {
 }
 
 ${/* Hide same-page headings navigation */ ''}
-@container container-viewport (min-width: ${containerQueryMobileLayout}px) {
+@container container-viewport (min-width: ${viewDesktop}px) {
   #menu-modal-wrapper .nav-item-level-3 {
     display: none;
   }

package/NavItemComponent.tsx

@@ -31,8 +31,22 @@ type NavItem = {
   title: string
   titleInNav: string
   menuModalFullWidth?: true
-  isColumnEntry?: ColumnMap
+  /**
+   * Maps viewport column counts to column indices.
+   * Indicates this nav item is a "column entry" (a level-1 or level-4 heading that starts a new column section).
+   * Example: `{ 1: 0, 2: 1, 3: 0 }` means:
+   * - When there's 1 column, put this item in column 0
+   * - When there are 2 columns, put it in column 1
+   * - When there are 3 columns, put it in column 0
+   */
+  isPotentialColumn?: ColumnMap
 }
+/**
+ * A mapping of viewport column counts to column indices.
+ * Used to determine which column a nav item should be placed in for different viewport widths.
+ * Key: number of columns in the viewport
+ * Value: the column index (0-based) where this item should be placed
+ */
 type ColumnMap = Record<number, number>
 
 type PropsNavItem = PropsAnchor & PropsSpan

package/autoScrollNav.ts

@@ -1,7 +1,7 @@
 export { autoScrollNav }
-export const autoScrollNav_SSR = `autoScrollNav();${autoScrollNav.toString()}`
+export { autoScrollNav_SSR }
 
-// - We cannot use TypeScript syntax because of autoScrollNav_SSR
+// - WARNING: We cannot use TypeScript here because we serialize the function.
 // - 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.
@@ -17,7 +17,7 @@ export const autoScrollNav_SSR = `autoScrollNav();${autoScrollNav.toString()}`
 //       // ...
 //       document.documentElement.style.overflow = overflowOriginal
 //       ```
-
+const autoScrollNav_SSR = `autoScrollNav();${autoScrollNav.toString()}`
 function autoScrollNav() {
   const nav = document.querySelector('#nav-left .navigation-content')
   if (!nav) return

package/{components → code-blocks/components}/CodeSnippets.css

@@ -8,11 +8,6 @@
     }
   }
 
-  /* Hide language toggle for YAML */
-  &:has(code[data-language='yaml']) .code-lang-toggle {
-    display: none !important;
-  }
-
   /* Language toggle styles */
   .code-lang-toggle {
     position: absolute !important;
@@ -28,6 +23,7 @@
     margin: 0;
     padding: 0 4px;
     height: 25px;
+    width: 59px;
     display: flex;
     background-color: #f7f7f7;
     opacity: 0;

package/{components → code-blocks/components}/CodeSnippets.tsx

@@ -5,7 +5,7 @@ export { TypescriptOnly }
 export { CodeSnippets }
 
 import React, { useEffect, useRef } from 'react'
-import { useSelectCodeLang } from './CodeSnippets/useSelectCodeLang'
+import { useSelectCodeLang } from '../hooks/useSelectCodeLang'
 import './CodeSnippets.css'
 
 /** Only show if TypeScript is selected */
@@ -14,7 +14,7 @@ function TypescriptOnly({ children }: { children: React.ReactNode }) {
   return <div style={{ display: codeLangSelected === 'ts' ? 'block' : 'none' }}>{children}</div>
 }
 
-function CodeSnippets({ children }: { children: React.ReactNode }) {
+function CodeSnippets({ children, hideToggle = false }: { children: React.ReactNode; hideToggle: boolean }) {
   const [codeLangSelected, selectCodeLang] = useSelectCodeLang()
   const prevPositionRef = useRef<null | { top: number; el: Element }>(null)
 
@@ -35,6 +35,7 @@ function CodeSnippets({ children }: { children: React.ReactNode }) {
         type="checkbox"
         name="code-lang-toggle"
         className="code-lang-toggle raised"
+        style={{ display: hideToggle ? 'none' : undefined }}
         checked={codeLangSelected === 'ts'}
         onChange={onChange}
         title="Toggle language"

package/{components → code-blocks/components}/Pre.tsx

@@ -1,9 +1,7 @@
 export { Pre }
 
 import React, { ComponentPropsWithoutRef, useState } from 'react'
-/* Importing it here chokes the tests. I don't know why.
 import './Pre.css'
-//*/
 
 function Pre({ children, ...props }: ComponentPropsWithoutRef<'pre'> & { 'hide-menu'?: string }) {
   return (
@@ -26,7 +24,7 @@ function CopyButton() {
   const icon =
     isSuccess === null ? (
       // Copy icon
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="black" strokeWidth="2">
         <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
         <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
       </svg>

package/{components → code-blocks/hooks}/useMDXComponents.tsx

@@ -2,8 +2,8 @@ export { useMDXComponents }
 
 import React from 'react'
 import type { UseMdxComponents } from '@mdx-js/mdx'
-import { Pre } from './Pre.js'
-import { CodeSnippets } from './CodeSnippets.js'
+import { Pre } from '../components/Pre.js'
+import { CodeSnippets } from '../components/CodeSnippets.js'
 
 const useMDXComponents: UseMdxComponents = () => {
   return {

package/{components/CodeSnippets → code-blocks/hooks}/useSelectCodeLang.ts

@@ -1,4 +1,5 @@
 export { useSelectCodeLang }
+export { initializeJsToggle_SSR }
 
 import { useState, useEffect, useCallback } from 'react'
 import { assertWarning } from '../../utils/assert'
@@ -53,6 +54,19 @@ function useSelectCodeLang() {
   return [codeLangSelected, selectCodeLang] as const
 }
 
+// WARNING: We cannot use the variables storageKey nor codeLangDefaultClient here: closures
+// don't work because we serialize the function.
+// WARNING: We cannot use TypeScript here, for the same reason.
+const initializeJsToggle_SSR = `initializeJsToggle();${initializeJsToggle.toString()};`
+function initializeJsToggle() {
+  const codeLangSelected = localStorage.getItem('docpress:code-lang') ?? 'js'
+  if (codeLangSelected === 'js') {
+    const inputs = document.querySelectorAll('.code-lang-toggle')
+    // @ts-ignore
+    for (const input of inputs) input.checked = false
+  }
+}
+
 declare global {
   interface WindowEventMap {
     'code-lang-storage': CustomEvent

package/{rehypeMetaToProps.ts → code-blocks/rehypeMetaToProps.ts}

@@ -1,4 +1,4 @@
-export { rehypeMetaToProps }
+export { rehypeMetaToProps, parseMetaString }
 
 import { visit } from 'unist-util-visit'
 import type { ElementData, Root } from 'hast'
@@ -51,7 +51,7 @@ function parseMetaString(metaString: ElementData['meta']): Record<string, string
 
   const props: Record<string, string> = {}
 
-  const keyValuePairRE = /([a-zA-Z_-]+)(?:="([^"]*)")?(?=\s|$)/g
+  const keyValuePairRE = /([a-zA-Z_-]+)(?:=([^"'\s]+))?(?=\s|$)/g
   for (const match of metaString.matchAll(keyValuePairRE)) {
     let [_, key, value] = match
     props[kebabCase(key)] = value || 'true'

package/{remarkDetype.ts → code-blocks/remarkDetype.ts}

@@ -1,9 +1,11 @@
 export { remarkDetype }
 
 import type { Root, Parent, Code } from 'mdast'
+import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
 import type { VFile } from '@mdx-js/mdx/internal-create-format-aware-processors'
 import { visit } from 'unist-util-visit'
-import { assertUsage } from './utils/assert.js'
+import { assertUsage } from '../utils/assert.js'
+import { parseMetaString } from './rehypeMetaToProps.js'
 import pc from '@brillout/picocolors'
 import module from 'node:module'
 // Cannot use `import { transform } from 'detype'` as it results in errors,
@@ -13,7 +15,6 @@ const { transform: detype } = module.createRequire(import.meta.url)('detype') as
 const prettierOptions: NonNullable<Parameters<typeof detype>[2]>['prettierOptions'] = {
   semi: false,
   singleQuote: true,
-  printWidth: 100,
   trailingComma: 'none',
 }
 
@@ -65,22 +66,29 @@ function transformYaml(node: CodeNode) {
   }
 
   // Wrap both the original YAML and `yamlJsCode` with <CodeSnippets>
-  const yamlContainer = {
-    type: 'mdxJsxFlowElement' as const,
+  const yamlContainer: MdxJsxFlowElement = {
+    type: 'mdxJsxFlowElement',
     name: 'CodeSnippets',
     children: [yamlJsCode, codeBlock],
-    attributes: [],
+    attributes: [
+      {
+        name: 'hideToggle',
+        type: 'mdxJsxAttribute',
+      },
+    ],
   }
   parent.children.splice(index, 1, yamlContainer)
 }
 
 async function transformTsToJs(node: CodeNode, file: VFile) {
   const { codeBlock, index, parent } = node
-  let codeBlockContentJs = replaceFileNameSuffixes(codeBlock.value)
+  const maxWidth = Number(parseMetaString(codeBlock.meta)['max-width'])
+  let codeBlockReplacedJs = replaceFileNameSuffixes(codeBlock.value)
+  let codeBlockContentJs = ''
 
   // Remove TypeScript from the TS/TSX/Vue code node
   try {
-    codeBlockContentJs = await detype(codeBlockContentJs, `some-dummy-filename.${codeBlock.lang}`, {
+    codeBlockContentJs = await detype(codeBlockReplacedJs, `some-dummy-filename.${codeBlock.lang}`, {
       customizeBabelConfig(config) {
         // Add `onlyRemoveTypeImports: true` to the internal `@babel/preset-typescript` config
         // https://github.com/cyco130/detype/blob/46ec867e9efd31d31a312a215ca169bd6bff4726/src/transform.ts#L206
@@ -88,7 +96,10 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
         config.presets = [[config.presets[0], { onlyRemoveTypeImports: true }]]
       },
       removeTsComments: true,
-      prettierOptions,
+      prettierOptions: {
+        ...prettierOptions,
+        printWidth: maxWidth ? maxWidth : 99,
+      },
     })
   } catch (error) {
     // Log errors and return original content instead of throwing
@@ -113,6 +124,7 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
   if (codeBlockContentJs === codeBlock.value) return
 
   const { position, lang, ...rest } = codeBlock
+  const attributes: MdxJsxFlowElement['attributes'] = []
 
   const jsCode: Code = {
     ...rest,
@@ -121,12 +133,20 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
     value: codeBlockContentJs,
   }
 
+  // Add `hideToggle` attribute (prop) to `CodeSnippets` if the only change was replacing `.ts` with `.js`
+  if (codeBlockReplacedJs === codeBlockContentJs) {
+    attributes.push({
+      name: 'hideToggle',
+      type: 'mdxJsxAttribute',
+    })
+  }
+
   // Wrap both the original `codeBlock` and `jsCode` with <CodeSnippets>
-  const container = {
-    type: 'mdxJsxFlowElement' as const,
+  const container: MdxJsxFlowElement = {
+    type: 'mdxJsxFlowElement',
     name: 'CodeSnippets',
     children: [jsCode, codeBlock],
-    attributes: [],
+    attributes,
   }
   parent.children.splice(index, 1, container)
 }

package/code-blocks/shikiTransformerAutoLinks.ts

@@ -0,0 +1,61 @@
+export { shikiTransformerAutoLinks }
+
+import type { ShikiTransformer } from 'shiki'
+
+const linkRE = /https:\/\/[^\s]*[^.,\s"'`]/g
+
+/**
+ * A Shiki transformer that converts plain HTTPS URLs in code blocks into clickable `<a>` links.
+ *
+ * Inspired by `@jcayzac/shiki-transformer-autolinks`, but tailored for a narrower use case.
+ */
+function shikiTransformerAutoLinks(): ShikiTransformer {
+  return {
+    name: 'docpress-shiki-autolinks',
+    span(span) {
+      if (span.children.length !== 1) return
+      let child = span.children[0]
+      if (child.type !== 'text') return
+
+      const links: { href: string; index: number }[] = []
+      const matches = Array.from(child.value.matchAll(linkRE))
+
+      // Filter out URLs that contain `${...}`. e.g. `https://star-wars.brillout.com/api/films/${id}.json`.
+      const filtered = matches.filter(([href]) => !href.includes('${'))
+      if (filtered.length === 0) return
+
+      for (const match of filtered) {
+        const [href] = match
+        links.unshift({ href, index: match.index })
+      }
+
+      const newChildren: typeof span.children = []
+      for (const { href, index } of links) {
+        const postIndex = index + href.length
+        const postValue = child.value.slice(postIndex)
+
+        if (postValue.length > 0) {
+          newChildren.unshift({ type: 'text', value: postValue })
+        }
+
+        newChildren.unshift({
+          type: 'element',
+          tagName: 'a',
+          properties: { href },
+          children: [{ type: 'text', value: href }],
+        })
+
+        child = {
+          type: 'text',
+          value: child.value.slice(0, index),
+        }
+      }
+
+      if (child.value.length > 0) {
+        newChildren.unshift(child)
+      }
+
+      span.children = newChildren
+    },
+  }
+}

package/components/index.ts

@@ -8,4 +8,3 @@ export * from './HorizontalLine'
 export * from './CodeBlockTransformer'
 export * from './Comment'
 export * from './FileRemoved'
-export * from './CodeSnippets'

package/css/index.css

@@ -7,5 +7,4 @@
 @import './code.css';
 @import './table.css';
 @import './tooltip.css';
-@import '../components/Pre.css';
 @import '@docsearch/css';