@brillout/docpress 0.15.10-commit-f89d08f → 0.15.10-commit-05c2883

package/components/CodeSnippets/useSelectCodeLang.ts

@@ -13,8 +13,7 @@ function useSelectCodeLang() {
     setCodeLangSelected(getCodeLangStorage())
   }
   const updateStateOnStorageEvent = (event: StorageEvent) => {
-    if (event.key === storageKey) return
-    updateState()
+    if (event.key === storageKey) updateState()
   }
 
   const getCodeLangStorage = () => {

package/components/CodeSnippets.css

@@ -1,61 +1,78 @@
-/* Wrapper */
-.code-snippet,
 .code-snippets {
   position: relative;
+
   &:hover {
-    button,
-    select {
+    .copy-button,
+    .code-lang-toggle {
       opacity: 1;
     }
   }
-}
 
-/* Language select */
-.code-lang-select {
-  right: 42px;
-  padding-left: 6px;
-  padding-right: 21px;
-  font-size: 14px;
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1'><path fill='%23666' d='M0 0l1 1 1-1z'/></svg>");
-  background-repeat: no-repeat;
-  background-position: right 7px center;
-  background-size: 10px;
-  /* Remove default arrow in some browsers */
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
+  /* 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;
+    }
 
-/* Copy button */
-.copy-button {
-  display: inline-flex;
-  align-items: center;
-  right: 10px;
-  width: 30px;
-  & svg {
-    width: 100%;
-    height: 100%;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    fill: none;
+    &: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;
   }
-}
 
-/* Common style */
-.copy-button,
-.code-lang-select {
-  position: absolute !important;
-  height: 25px;
-  top: 10px;
-  z-index: 3;
-  outline: none;
-  cursor: pointer;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  background-color: #f7f7f7;
-  opacity: 0;
-  transition: opacity 0.8s ease-in-out, background-color 0.4s ease-in-out;
-  &:not(:hover) {
-    background-color: #eee;
+  &:has(.code-lang-toggle:not(:checked)) figure:last-of-type {
+    display: none;
   }
 }

package/components/CodeSnippets.tsx

@@ -3,9 +3,8 @@ export { TypescriptOnly }
 
 // Internal
 export { CodeSnippets }
-export { CodeSnippet }
 
-import React, { useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { useSelectCodeLang } from './CodeSnippets/useSelectCodeLang'
 import './CodeSnippets.css'
 
@@ -17,91 +16,35 @@ function TypescriptOnly({ children }: { children: React.ReactNode }) {
 
 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">
-      <form style={{ position: 'relative' }}>
-        <select className="code-lang-select" onChange={onChange} value={codeLangSelected}>
-          <option value="js">JavaScript</option>
-          <option value="ts">TypeScript</option>
-        </select>
-      </form>
+      <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<HTMLSelectElement>) {
-    selectCodeLang(e.target.value)
+  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const element = e.target
+    prevPositionRef.current = { top: element.getBoundingClientRect().top, el: element }
+    selectCodeLang(element.checked ? 'ts' : 'js')
   }
 }
-
-function CodeSnippet({
-  children,
-  codeLang,
-  tsOnly = false,
-}: { children: React.ReactNode; codeLang: string; tsOnly: boolean }) {
-  const [codeLangSelected] = useSelectCodeLang()
-
-  const displayStyle = tsOnly ? {} : { display: codeLangSelected === codeLang ? 'block' : 'none' }
-
-  return (
-    <div className="code-snippet" style={{ ...displayStyle }}>
-      <CopyButton />
-      {children}
-    </div>
-  )
-}
-
-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 text =
-    isSuccess === null ? (
-      <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 ? (
-      <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" aria-label={tooltip} data-label-position="top" type="button" onClick={onClick}>
-      {text}
-    </button>
-  )
-  async function onClick(e: React.MouseEvent<HTMLButtonElement>) {
-    let success: boolean
-    try {
-      await copyToClipboard(e)
-      success = true
-    } catch (error) {
-      console.error(error)
-      success = false
-    }
-    onCopy(success)
-  }
-}
-
-async function copyToClipboard(e: React.MouseEvent<HTMLButtonElement>) {
-  const figureEl = e.currentTarget.nextElementSibling
-  if (figureEl?.tagName === 'FIGURE') {
-    let text = figureEl.textContent ?? ''
-    text = removeTrailingWhitespaces(text)
-    await navigator.clipboard.writeText(text)
-  }
-}
-
-function removeTrailingWhitespaces(text: string) {
-  return text
-    .split('\n')
-    .map((line) => line.trimEnd())
-    .join('\n')
-}

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,79 @@
+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
+    try {
+      await copyToClipboard(e)
+      success = true
+    } catch (error) {
+      console.error(error)
+      success = false
+    }
+    onCopy(success)
+  }
+}
+
+async function copyToClipboard(e: React.MouseEvent<HTMLButtonElement>) {
+  const codeEl = e.currentTarget.nextElementSibling
+  if (codeEl?.tagName === 'CODE') {
+    let text = codeEl.textContent ?? ''
+    text = removeTrailingWhitespaces(text)
+    await navigator.clipboard.writeText(text)
+  }
+}
+
+function removeTrailingWhitespaces(text: string) {
+  return text
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .join('\n')
+}

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/dist/components/CodeSnippets/useSelectCodeLang.js

@@ -11,8 +11,7 @@ function useSelectCodeLang() {
     };
     const updateStateOnStorageEvent = (event) => {
         if (event.key === storageKey)
-            return;
-        updateState();
+            updateState();
     };
     const getCodeLangStorage = () => {
         try {

package/dist/components/CodeSnippets.d.ts

@@ -1,6 +1,5 @@
 export { TypescriptOnly };
 export { CodeSnippets };
-export { CodeSnippet };
 import React from 'react';
 import './CodeSnippets.css';
 /** Only show if TypeScript is selected */
@@ -10,8 +9,3 @@ declare function TypescriptOnly({ children }: {
 declare function CodeSnippets({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
-declare function CodeSnippet({ children, codeLang, tsOnly, }: {
-    children: React.ReactNode;
-    codeLang: string;
-    tsOnly: boolean;
-}): React.JSX.Element;

package/dist/components/CodeSnippets.js

@@ -2,8 +2,7 @@
 export { TypescriptOnly };
 // Internal
 export { CodeSnippets };
-export { CodeSnippet };
-import React, { useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useSelectCodeLang } from './CodeSnippets/useSelectCodeLang';
 import './CodeSnippets.css';
 /** Only show if TypeScript is selected */
@@ -13,61 +12,24 @@ function TypescriptOnly({ children }) {
 }
 function CodeSnippets({ children }) {
     const [codeLangSelected, selectCodeLang] = useSelectCodeLang();
+    const prevPositionRef = useRef(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 (React.createElement("div", { className: "code-snippets" },
-        React.createElement("form", { style: { position: 'relative' } },
-            React.createElement("select", { className: "code-lang-select", onChange: onChange, value: codeLangSelected },
-                React.createElement("option", { value: "js" }, "JavaScript"),
-                React.createElement("option", { value: "ts" }, "TypeScript"))),
+        React.createElement("input", { type: "checkbox", name: "code-lang-toggle", className: "code-lang-toggle raised", checked: codeLangSelected === 'ts', onChange: onChange, title: "Toggle language" }),
         children));
     function onChange(e) {
-        selectCodeLang(e.target.value);
+        const element = e.target;
+        prevPositionRef.current = { top: element.getBoundingClientRect().top, el: element };
+        selectCodeLang(element.checked ? 'ts' : 'js');
     }
 }
-function CodeSnippet({ children, codeLang, tsOnly = false, }) {
-    const [codeLangSelected] = useSelectCodeLang();
-    const displayStyle = tsOnly ? {} : { display: codeLangSelected === codeLang ? 'block' : 'none' };
-    return (React.createElement("div", { className: "code-snippet", style: { ...displayStyle } },
-        React.createElement(CopyButton, null),
-        children));
-}
-function CopyButton() {
-    const [isSuccess, setIsSuccess] = useState(null);
-    const onCopy = (success) => {
-        setIsSuccess(success);
-        setTimeout(() => {
-            setIsSuccess(null);
-        }, 900);
-    };
-    const tooltip = isSuccess === null ? 'Copy to clipboard' : isSuccess ? 'Copied' : 'Failed';
-    const text = isSuccess === null ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2" },
-        React.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-        React.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }))) : isSuccess ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", stroke: "#28a745", strokeWidth: "3" },
-        React.createElement("polyline", { points: "20 6 9 17 4 12" }))) : ('❌');
-    return (React.createElement("button", { className: "copy-button", "aria-label": tooltip, "data-label-position": "top", type: "button", onClick: onClick }, text));
-    async function onClick(e) {
-        let success;
-        try {
-            await copyToClipboard(e);
-            success = true;
-        }
-        catch (error) {
-            console.error(error);
-            success = false;
-        }
-        onCopy(success);
-    }
-}
-async function copyToClipboard(e) {
-    const figureEl = e.currentTarget.nextElementSibling;
-    if (figureEl?.tagName === 'FIGURE') {
-        let text = figureEl.textContent ?? '';
-        text = removeTrailingWhitespaces(text);
-        await navigator.clipboard.writeText(text);
-    }
-}
-function removeTrailingWhitespaces(text) {
-    return text
-        .split('\n')
-        .map((line) => line.trimEnd())
-        .join('\n');
-}

package/dist/rehypeMetaToProps.d.ts

@@ -0,0 +1,19 @@
+export { rehypeMetaToProps };
+import type { Root } from 'hast';
+/**
+ * Rehype plugin to extract metadata from `<code>` blocks in markdown
+ * and attach them as props to the parent `<pre>` element.
+ *
+ * This allows using those props inside a custom `<Pre>` component.
+ *
+ * Example:
+ * ~~~mdx
+ * ```js foo="bar" hide_copy='true'
+ * export function add(a, b) {
+ *   return a + b
+ * }
+ * ```
+ * ~~~
+ * These props are then added to the `<pre>` element
+ */
+declare function rehypeMetaToProps(): (tree: Root) => void;

package/dist/rehypeMetaToProps.js

@@ -0,0 +1,62 @@
+export { rehypeMetaToProps };
+import { visit } from 'unist-util-visit';
+/**
+ * Rehype plugin to extract metadata from `<code>` blocks in markdown
+ * and attach them as props to the parent `<pre>` element.
+ *
+ * This allows using those props inside a custom `<Pre>` component.
+ *
+ * Example:
+ * ~~~mdx
+ * ```js foo="bar" hide_copy='true'
+ * export function add(a, b) {
+ *   return a + b
+ * }
+ * ```
+ * ~~~
+ * These props are then added to the `<pre>` element
+ */
+function rehypeMetaToProps() {
+    return (tree) => {
+        visit(tree, 'element', (node, _index, parent) => {
+            if (node.tagName === 'code' && parent?.type === 'element' && parent.tagName === 'pre') {
+                const props = parseMetaString(node.data?.meta);
+                parent.properties ??= {};
+                parent.properties = { ...parent.properties, ...props };
+            }
+        });
+    };
+}
+/**
+ * Minimal parser for a metadata string into key-value pairs.
+ *
+ * Supports simple patterns: key or key="value".
+ *
+ * Keys must contain only letters, dashes, or underscores (no digits).
+ * Keys are converted to kebab-case. Values default to "true" if missing.
+ *
+ * Example:
+ *   parseMetaString('foo fooBar="value"')
+ *   => { foo: 'true', foo_bar: 'value' }
+ *
+ * @param metaString - The input metadata string.
+ * @returns A plain object of parsed key-value pairs.
+ */
+function parseMetaString(metaString) {
+    if (!metaString)
+        return {};
+    const props = {};
+    const keyValuePairRE = /([a-zA-Z_-]+)(?:="([^"]*)")?(?=\s|$)/g;
+    for (const match of metaString.matchAll(keyValuePairRE)) {
+        let [_, key, value] = match;
+        props[kebabCase(key)] = value || 'true';
+    }
+    return props;
+}
+// Simple function to convert a camelCase or PascalCase string to kebab-case.
+function kebabCase(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace('_', '-')
+        .toLowerCase();
+}

package/dist/remarkDetype.d.ts

@@ -0,0 +1,4 @@
+export { remarkDetype };
+import type { Root } from 'mdast';
+import type { VFile } from '@mdx-js/mdx/internal-create-format-aware-processors';
+declare function remarkDetype(): (tree: Root, file: VFile) => Promise<void>;