@brillout/docpress 0.15.10 → 0.15.11

package/components/CodeSnippets/useSelectCodeLang.ts

@@ -0,0 +1,60 @@
+export { useSelectCodeLang }
+
+import { useState, useEffect, useCallback } from 'react'
+import { assertWarning } from '../../utils/assert'
+
+const storageKey = 'docpress:code-lang'
+const codeLangDefaultSsr = 'ts'
+const codeLangDefaultClient = 'js'
+
+function useSelectCodeLang() {
+  const [codeLangSelected, setCodeLangSelected] = useState(codeLangDefaultSsr)
+  const updateState = () => {
+    setCodeLangSelected(getCodeLangStorage())
+  }
+  const updateStateOnStorageEvent = (event: StorageEvent) => {
+    if (event.key === storageKey) updateState()
+  }
+
+  const getCodeLangStorage = () => {
+    try {
+      return window.localStorage.getItem(storageKey) ?? codeLangDefaultClient
+    } catch (error) {
+      console.error(error)
+      assertWarning(false, 'Error reading from localStorage')
+      return codeLangDefaultClient
+    }
+  }
+
+  const selectCodeLang = useCallback((value: string) => {
+    try {
+      window.localStorage.setItem(storageKey, value)
+      setCodeLangSelected(value)
+      window.dispatchEvent(new CustomEvent('code-lang-storage'))
+    } catch (error) {
+      console.error(error)
+      assertWarning(false, 'Error setting localStorage')
+    }
+  }, [])
+
+  useEffect(() => {
+    // Initial load from localStorage
+    updateState()
+    // Update code lang in current tab
+    window.addEventListener('code-lang-storage', updateState)
+    // Update code lang if changed in another tab
+    window.addEventListener('storage', updateStateOnStorageEvent)
+    return () => {
+      window.removeEventListener('code-lang-storage', updateState)
+      window.removeEventListener('storage', updateStateOnStorageEvent)
+    }
+  }, [])
+
+  return [codeLangSelected, selectCodeLang] as const
+}
+
+declare global {
+  interface WindowEventMap {
+    'code-lang-storage': CustomEvent
+  }
+}

package/components/CodeSnippets.css

@@ -0,0 +1,78 @@
+.code-snippets {
+  position: relative;
+
+  &:hover {
+    .copy-button,
+    .code-lang-toggle {
+      opacity: 1;
+    }
+  }
+
+  /* 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;
+    top: 10px;
+    right: 42px;
+    z-index: 3;
+
+    /* Checkbox appearance reset */
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    margin: 0;
+    padding: 0 4px;
+    height: 25px;
+    display: flex;
+    background-color: #f7f7f7;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out, background-color 0.4s ease-in-out;
+
+    &:not(:hover) {
+      background-color: #eee;
+    }
+
+    /* Toggle Labels */
+    &::before,
+    &::after {
+      width: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &::before {
+      content: 'JS';
+    }
+
+    &::after {
+      content: 'TS';
+      border-left: none;
+      opacity: 0.3;
+    }
+
+    &:checked {
+      &::before {
+        opacity: 0.3;
+      }
+
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  /* Code block visibility based on toggle */
+  &:has(.code-lang-toggle:checked) figure:first-of-type {
+    display: none;
+  }
+
+  &:has(.code-lang-toggle:not(:checked)) figure:last-of-type {
+    display: none;
+  }
+}

package/components/CodeSnippets.tsx

@@ -0,0 +1,50 @@
+// Public
+export { TypescriptOnly }
+
+// Internal
+export { CodeSnippets }
+
+import React, { useEffect, useRef } from 'react'
+import { useSelectCodeLang } from './CodeSnippets/useSelectCodeLang'
+import './CodeSnippets.css'
+
+/** Only show if TypeScript is selected */
+function TypescriptOnly({ children }: { children: React.ReactNode }) {
+  const [codeLangSelected] = useSelectCodeLang()
+  return <div style={{ display: codeLangSelected === 'ts' ? 'block' : 'none' }}>{children}</div>
+}
+
+function CodeSnippets({ children }: { children: React.ReactNode }) {
+  const [codeLangSelected, selectCodeLang] = useSelectCodeLang()
+  const prevPositionRef = useRef<null | { top: number; el: Element }>(null)
+
+  // Restores the scroll position of the toggle element after toggling languages.
+  useEffect(() => {
+    if (!prevPositionRef.current) return
+    const { top, el } = prevPositionRef.current
+    const delta = el.getBoundingClientRect().top - top
+    if (delta !== 0) {
+      window.scrollBy(0, delta)
+    }
+    prevPositionRef.current = null
+  }, [codeLangSelected])
+
+  return (
+    <div className="code-snippets">
+      <input
+        type="checkbox"
+        name="code-lang-toggle"
+        className="code-lang-toggle raised"
+        checked={codeLangSelected === 'ts'}
+        onChange={onChange}
+        title="Toggle language"
+      />
+      {children}
+    </div>
+  )
+  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const element = e.target
+    prevPositionRef.current = { top: element.getBoundingClientRect().top, el: element }
+    selectCodeLang(element.checked ? 'ts' : 'js')
+  }
+}

package/components/Pre.css

@@ -0,0 +1,51 @@
+pre > code {
+  /*
+  background-color: #f4f4f4;
+  0.043137255 = 1 - (#f4 / #ff)
+  */
+  background: rgba(0, 0, 0, 0.043137255);
+  font-size: 1em;
+}
+
+/* Copy button */
+pre {
+  &:has(.copy-button) {
+    position: relative;
+  }
+
+  &:hover {
+    .copy-button {
+      opacity: 1;
+    }
+  }
+
+  .copy-button {
+    position: absolute !important;
+    top: 10px;
+    right: 10px;
+    z-index: 3;
+    margin: 0;
+    height: 25px;
+    width: 30px;
+    background-color: #f7f7f7;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out, background-color 0.4s ease-in-out;
+
+    &:not(:hover) {
+      background-color: #eee;
+    }
+
+    & svg {
+      width: 100%;
+      height: 100%;
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  }
+}
+
+/* Workaround for shiki regression */
+pre > code:not([data-language]) {
+  padding: 16px !important;
+}

package/components/Pre.tsx

@@ -0,0 +1,72 @@
+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 (
+    <pre {...props}>
+      {!props['hide-menu'] && <CopyButton />}
+      {children}
+    </pre>
+  )
+}
+
+function CopyButton() {
+  const [isSuccess, setIsSuccess] = useState(null as null | boolean)
+  const onCopy = (success: boolean) => {
+    setIsSuccess(success)
+    setTimeout(() => {
+      setIsSuccess(null)
+    }, 900)
+  }
+  const tooltip = isSuccess === null ? 'Copy to clipboard' : isSuccess ? 'Copied' : 'Failed'
+  const icon =
+    isSuccess === null ? (
+      // Copy icon
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" 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>
+    ) : isSuccess ? (
+      // Green checkmark
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#28a745" strokeWidth="3">
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+    ) : (
+      '❌'
+    )
+  return (
+    <button
+      className="copy-button raised"
+      aria-label={tooltip}
+      data-label-position="top"
+      type="button"
+      onClick={onClick}
+    >
+      {icon}
+    </button>
+  )
+  async function onClick(e: React.MouseEvent<HTMLButtonElement>) {
+    let success: boolean
+    const preEl = e.currentTarget.parentElement!
+    let text = preEl.textContent || ''
+    text = removeTrailingWhitespaces(text)
+    try {
+      await navigator.clipboard.writeText(text)
+      success = true
+    } catch (error) {
+      console.error(error)
+      success = false
+    }
+    onCopy(success)
+  }
+}
+function removeTrailingWhitespaces(text: string) {
+  return text
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .join('\n')
+}

package/components/index.ts

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

package/components/useMDXComponents.tsx

@@ -0,0 +1,13 @@
+export { useMDXComponents }
+
+import React from 'react'
+import type { UseMdxComponents } from '@mdx-js/mdx'
+import { Pre } from './Pre.js'
+import { CodeSnippets } from './CodeSnippets.js'
+
+const useMDXComponents: UseMdxComponents = () => {
+  return {
+    CodeSnippets,
+    pre: (props) => <Pre {...props} />,
+  }
+}

package/css/button.css

@@ -5,3 +5,26 @@ button,
   border-radius: 5px;
   cursor: pointer;
 }
+
+/* Raised button */
+.raised {
+  cursor: pointer;
+  border-radius: 5px;
+  border-style: solid;
+  border-width: 1px 2px 2px 1px;
+  border-color: hsl(0, 0%, 75%) hsl(0, 0%, 72%) hsl(0, 0%, 72%) hsl(0, 0%, 75%);
+
+  &:hover {
+    border-color: hsl(0, 0%, 72%) hsl(0, 0%, 66%) hsl(0, 0%, 66%) hsl(0, 0%, 72%);
+  }
+
+  &:active {
+    border-width: 2px 1px 1px 2px;
+    border-color: hsl(0, 0%, 66%) hsl(0, 0%, 72%) hsl(0, 0%, 72%) hsl(0, 0%, 66%);
+  }
+
+  &:disabled {
+    border-width: 1px;
+    border-color: hsl(0, 0%, 72%);
+  }
+}

package/css/code.css

@@ -2,29 +2,11 @@
 @import './code/block.css';
 @import './code/diff.css';
 
-code {
-  border-radius: 4px;
-}
-pre {
-  background: none !important;
-}
+/* For code blocks, see Pre.css instead */
 
-/* Inline */
+/* Inline <code> */
 code {
+  border-radius: 4px;
   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 */
-pre > code:not([data-language]) {
-  padding: 16px !important;
-}

package/css/index.css

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

package/css/tooltip.css

@@ -17,10 +17,8 @@
     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;
@@ -34,4 +32,14 @@
     */
     white-space: nowrap;
   }
+  /* Show below */
+  [aria-label]:not([data-label-position])::before {
+    top: 100%;
+    margin-top: 5px;
+  }
+  /* Show above */
+  [aria-label][data-label-position='top']::before {
+    bottom: 100%;
+    margin-bottom: 7px;
+  }
 }

package/dist/+config.js

@@ -1,6 +1,6 @@
 export { config as default };
 import { viteConfig } from './vite.config.js';
-var config = {
+const config = {
     name: '@brillout/docpress',
     require: { vike: '>=0.4.234' },
     vite: viteConfig,

package/dist/NavItemComponent.js

@@ -1,53 +1,39 @@
-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);
-};
 export { NavItemComponent };
 export { getNavItemsWithComputed };
 import React from 'react';
 import { assert, assertWarning, jsxToTextContent } from './utils/server';
 import './NavItemComponent.css';
 import { parseMarkdownMini } from './parseMarkdownMini';
-function NavItemComponent(_a) {
-    var _b;
-    var _c;
-    var navItem = _a.navItem, onClick = _a.onClick;
+function NavItemComponent({ navItem, onClick, }) {
     assert([1, 2, 3, 4].includes(navItem.level), navItem);
-    var titleJsx = parseMarkdownMini(navItem.title);
-    var titleInNavJsx = parseMarkdownMini(navItem.titleInNav);
-    var iconSize = 25;
-    var icon = navItem.titleIcon && (React.createElement("img", { src: navItem.titleIcon, style: __assign({ height: iconSize, width: iconSize, marginRight: 8, marginLeft: 4 }, navItem.titleIconStyle) }));
+    const titleJsx = parseMarkdownMini(navItem.title);
+    const titleInNavJsx = parseMarkdownMini(navItem.titleInNav);
+    const iconSize = 25;
+    const icon = navItem.titleIcon && (React.createElement("img", { src: navItem.titleIcon, style: { height: iconSize, width: iconSize, marginRight: 8, marginLeft: 4, ...navItem.titleIconStyle } }));
     if (navItem.level === 1 || navItem.level === 4) {
         assert(navItem.url === undefined);
     }
     else {
-        var sectionTitle = jsxToTextContent(titleJsx);
+        const sectionTitle = jsxToTextContent(titleJsx);
         assertWarning(navItem.url, [
-            "".concat(jsxToTextContent(titleInNavJsx), " is missing a URL hash."),
-            "Add a URL hash with: `## ".concat(sectionTitle, "{#some-hash}`."),
+            `${jsxToTextContent(titleInNavJsx)} is missing a URL hash.`,
+            `Add a URL hash with: \`## ${sectionTitle}{#some-hash}\`.`,
             /* TO-DO/eventually: not implemented yet.
             `Use \`<h2 id="url-hash">${sectionTitle}</h2>\` instead of \`## ${sectionTitle}\`.`,
             */
         ].join(' '));
     }
-    var children = titleInNavJsx;
+    let children = titleInNavJsx;
     if (navItem.level === 1) {
         children = (React.createElement(React.Fragment, null,
             icon,
             children,
             React.createElement(Chevron, { className: "collapsible-icon", height: 9 })));
     }
-    var props = {
-        href: (_c = navItem.url) !== null && _c !== void 0 ? _c : undefined,
-        children: children,
-        onClick: onClick,
+    const props = {
+        href: navItem.url ?? undefined,
+        children,
+        onClick,
         className: [
             'nav-item',
             'nav-item-level-' + navItem.level,
@@ -59,45 +45,51 @@ function NavItemComponent(_a) {
             .join(' '),
     };
     if (navItem.level === 1) {
-        props.style = (_b = {},
-            _b['--category-color'] = navItem.color,
-            _b);
+        props.style = {
+            ['--category-color']: navItem.color,
+        };
     }
     if (navItem.level === 2 || navItem.level === 3) {
-        return React.createElement("a", __assign({}, props));
+        return React.createElement("a", { ...props });
     }
     else {
-        return React.createElement("span", __assign({}, props));
+        return React.createElement("span", { ...props });
     }
 }
 function getNavItemsWithComputed(navItems, currentUrl) {
-    var navItemIdx;
-    var navItemsWithComputed = navItems.map(function (navItem, i) {
+    let navItemIdx;
+    const navItemsWithComputed = navItems.map((navItem, i) => {
         assert([1, 2, 3, 4].includes(navItem.level), navItem);
-        var navItemPrevious = navItems[i - 1];
-        var navItemNext = navItems[i + 1];
-        var isActive = false;
+        const navItemPrevious = navItems[i - 1];
+        const navItemNext = navItems[i + 1];
+        let isActive = false;
         if (navItem.url === currentUrl) {
-            assert(navItem.level === 2, { currentUrl: currentUrl });
+            assert(navItem.level === 2, { currentUrl });
             assert(navItemIdx === undefined);
             navItemIdx = i;
             isActive = true;
         }
-        var isFirstOfItsKind = navItem.level !== (navItemPrevious === null || navItemPrevious === void 0 ? void 0 : navItemPrevious.level);
-        var isLastOfItsKind = navItem.level !== (navItemNext === null || navItemNext === void 0 ? void 0 : navItemNext.level);
-        var navItemComputed = __assign(__assign({}, navItem), { isActive: isActive, isRelevant: false, isFirstOfItsKind: isFirstOfItsKind, isLastOfItsKind: isLastOfItsKind });
+        const isFirstOfItsKind = navItem.level !== navItemPrevious?.level;
+        const isLastOfItsKind = navItem.level !== navItemNext?.level;
+        const navItemComputed = {
+            ...navItem,
+            isActive,
+            isRelevant: false,
+            isFirstOfItsKind,
+            isLastOfItsKind,
+        };
         return navItemComputed;
     });
     // Set `isRelevant`
     if (navItemIdx !== undefined) {
-        for (var i = navItemIdx; i >= 0; i--) {
-            var navItem = navItemsWithComputed[i];
+        for (let i = navItemIdx; i >= 0; i--) {
+            const navItem = navItemsWithComputed[i];
             navItem.isRelevant = true;
             if (navItem.level === 1)
                 break;
         }
-        for (var i = navItemIdx; i < navItemsWithComputed.length; i++) {
-            var navItem = navItemsWithComputed[i];
+        for (let i = navItemIdx; i < navItemsWithComputed.length; i++) {
+            const navItem = navItemsWithComputed[i];
             if (navItem.level === 1)
                 break;
             navItem.isRelevant = true;
@@ -106,6 +98,6 @@ function getNavItemsWithComputed(navItems, currentUrl) {
     return navItemsWithComputed;
 }
 function Chevron(props) {
-    return (React.createElement("svg", __assign({ viewBox: "0 0 512 292.52", xmlns: "http://www.w3.org/2000/svg" }, props),
+    return (React.createElement("svg", { viewBox: "0 0 512 292.52", xmlns: "http://www.w3.org/2000/svg", ...props },
         React.createElement("path", { fill: "#aaa", d: "M10.725 82.42L230.125 261.82c6.8 6.8 16.2 10.7 25.9 10.7s19.1-3.9 25.9-10.7l219.4-179.4c14.3-14.3 14.3-37.4 0-51.7s-37.4-14.3-51.7 0l-193.6 153.6-193.6-153.6c-14.3-14.3-37.4-14.3-51.7 0s-14.3 37.5 0 51.7z" })));
 }

package/dist/components/CodeBlockTransformer.js

@@ -2,9 +2,8 @@ export { CodeBlockTransformer };
 import React from 'react';
 import { assert } from '../utils/server';
 import './CodeBlockTransformer.css';
-function CodeBlockTransformer(_a) {
-    var children = _a.children, lineBreak = _a.lineBreak;
+function CodeBlockTransformer({ children, lineBreak }) {
     assert(lineBreak === 'white-space' || lineBreak === 'break-word', '`lineBreak` is currently the only use case for <CodeBlockTransformer>');
-    var className = "with-line-break_".concat(lineBreak);
+    const className = `with-line-break_${lineBreak}`;
     return React.createElement("div", { className: className }, children);
 }

package/dist/components/CodeSnippets/useSelectCodeLang.d.ts

@@ -0,0 +1,7 @@
+export { useSelectCodeLang };
+declare function useSelectCodeLang(): readonly [string, (value: string) => void];
+declare global {
+    interface WindowEventMap {
+        'code-lang-storage': CustomEvent;
+    }
+}

package/dist/components/CodeSnippets/useSelectCodeLang.js

@@ -0,0 +1,50 @@
+export { useSelectCodeLang };
+import { useState, useEffect, useCallback } from 'react';
+import { assertWarning } from '../../utils/assert';
+const storageKey = 'docpress:code-lang';
+const codeLangDefaultSsr = 'ts';
+const codeLangDefaultClient = 'js';
+function useSelectCodeLang() {
+    const [codeLangSelected, setCodeLangSelected] = useState(codeLangDefaultSsr);
+    const updateState = () => {
+        setCodeLangSelected(getCodeLangStorage());
+    };
+    const updateStateOnStorageEvent = (event) => {
+        if (event.key === storageKey)
+            updateState();
+    };
+    const getCodeLangStorage = () => {
+        try {
+            return window.localStorage.getItem(storageKey) ?? codeLangDefaultClient;
+        }
+        catch (error) {
+            console.error(error);
+            assertWarning(false, 'Error reading from localStorage');
+            return codeLangDefaultClient;
+        }
+    };
+    const selectCodeLang = useCallback((value) => {
+        try {
+            window.localStorage.setItem(storageKey, value);
+            setCodeLangSelected(value);
+            window.dispatchEvent(new CustomEvent('code-lang-storage'));
+        }
+        catch (error) {
+            console.error(error);
+            assertWarning(false, 'Error setting localStorage');
+        }
+    }, []);
+    useEffect(() => {
+        // Initial load from localStorage
+        updateState();
+        // Update code lang in current tab
+        window.addEventListener('code-lang-storage', updateState);
+        // Update code lang if changed in another tab
+        window.addEventListener('storage', updateStateOnStorageEvent);
+        return () => {
+            window.removeEventListener('code-lang-storage', updateState);
+            window.removeEventListener('storage', updateStateOnStorageEvent);
+        };
+    }, []);
+    return [codeLangSelected, selectCodeLang];
+}

package/dist/components/CodeSnippets.d.ts

@@ -0,0 +1,11 @@
+export { TypescriptOnly };
+export { CodeSnippets };
+import React from 'react';
+import './CodeSnippets.css';
+/** Only show if TypeScript is selected */
+declare function TypescriptOnly({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function CodeSnippets({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;