myst-to-react 0.2.9 → 0.3.0

package/dist/esm/grid.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const gridClassNames = {
+    main: [
+        'grid-cols-1',
+        'grid-cols-2',
+        'grid-cols-3',
+        'grid-cols-4',
+        'grid-cols-5',
+        'grid-cols-6',
+        'grid-cols-7',
+        'grid-cols-8',
+        'grid-cols-9',
+        'grid-cols-10',
+        'grid-cols-11',
+        'grid-cols-12',
+    ],
+    sm: [
+        'sm:grid-cols-1',
+        'sm:grid-cols-2',
+        'sm:grid-cols-3',
+        'sm:grid-cols-4',
+        'sm:grid-cols-5',
+        'sm:grid-cols-6',
+        'sm:grid-cols-7',
+        'sm:grid-cols-8',
+        'sm:grid-cols-9',
+        'sm:grid-cols-10',
+        'sm:grid-cols-11',
+        'sm:grid-cols-12',
+    ],
+    md: [
+        'md:grid-cols-1',
+        'md:grid-cols-2',
+        'md:grid-cols-3',
+        'md:grid-cols-4',
+        'md:grid-cols-5',
+        'md:grid-cols-6',
+        'md:grid-cols-7',
+        'md:grid-cols-8',
+        'md:grid-cols-9',
+        'md:grid-cols-10',
+        'md:grid-cols-11',
+        'md:grid-cols-12',
+    ],
+    lg: [
+        'lg:grid-cols-1',
+        'lg:grid-cols-2',
+        'lg:grid-cols-3',
+        'lg:grid-cols-4',
+        'lg:grid-cols-5',
+        'lg:grid-cols-6',
+        'lg:grid-cols-7',
+        'lg:grid-cols-8',
+        'lg:grid-cols-9',
+        'lg:grid-cols-10',
+        'lg:grid-cols-11',
+        'lg:grid-cols-12',
+    ],
+    xl: [
+        'xl:grid-cols-1',
+        'xl:grid-cols-2',
+        'xl:grid-cols-3',
+        'xl:grid-cols-4',
+        'xl:grid-cols-5',
+        'xl:grid-cols-6',
+        'xl:grid-cols-7',
+        'xl:grid-cols-8',
+        'xl:grid-cols-9',
+        'xl:grid-cols-10',
+        'xl:grid-cols-11',
+        'xl:grid-cols-12',
+    ],
+};
+const DEFAULT_NUM_COLUMNS = 3;
+function getColumnClassName(classes, number) {
+    var _a;
+    const num = Number(number);
+    if (!number || Number.isNaN(num)) {
+        return getColumnClassName(classes, DEFAULT_NUM_COLUMNS);
+    }
+    return (_a = classes[num - 1]) !== null && _a !== void 0 ? _a : classes[DEFAULT_NUM_COLUMNS];
+}
+function gridColumnClasses(columns) {
+    if (!columns || columns.length <= 1) {
+        return getColumnClassName(gridClassNames.main, columns === null || columns === void 0 ? void 0 : columns[0]);
+    }
+    if (columns.length !== 4) {
+        return getColumnClassName(gridClassNames.main, columns[0]);
+    }
+    return [
+        // getColumnClassName(gridClassNames.main, columns[0]),
+        getColumnClassName(gridClassNames.sm, columns[0]),
+        getColumnClassName(gridClassNames.md, columns[1]),
+        getColumnClassName(gridClassNames.lg, columns[2]),
+        getColumnClassName(gridClassNames.xl, columns[3]),
+    ].join(' ');
+}
+function Grid({ columns, children }) {
+    const gridClasses = gridColumnClasses(columns);
+    const gutterClasses = 'gap-4';
+    return (_jsx("div", Object.assign({ className: classNames('myst-grid grid my-5', gridClasses, gutterClasses) }, { children: children })));
+}
+export const GridRenderer = (node, children) => {
+    return (_jsx(Grid, Object.assign({ columns: node.columns }, { children: children }), node.key));
+};
+const GRID_RENDERERS = {
+    grid: GridRenderer,
+};
+export default GRID_RENDERERS;

package/dist/esm/heading.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Heading } from 'myst-spec';
+import type { NodeRenderer } from '@myst-theme/providers';
+export declare function HashLink({ id, kind, title, children, hover, className, hideInPopup, }: {
+    id?: string;
+    kind: string;
+    title?: string;
+    hover?: boolean;
+    children?: '#' | '¶' | React.ReactNode;
+    className?: string;
+    hideInPopup?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare const Heading: NodeRenderer<Heading>;
+declare const HEADING_RENDERERS: {
+    heading: NodeRenderer<Heading>;
+};
+export default HEADING_RENDERERS;
+//# sourceMappingURL=heading.d.ts.map

package/dist/esm/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../src/heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EACF,IAAI,EACJ,KAA8B,EAC9B,QAAc,EACd,KAAK,EACL,SAAyB,EACzB,WAAW,GACZ,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,kDA6BA;AAED,QAAA,MAAM,OAAO,EAAE,YAAY,CAAC,OAAO,CAoBlC,CAAC;AAEF,QAAA,MAAM,iBAAiB;;CAEtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/heading.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useXRefState } from '@myst-theme/providers';
+import { createElement as e } from 'react';
+import classNames from 'classnames';
+export function HashLink({ id, kind, title = `Link to this ${kind}`, children = '¶', hover, className = 'font-normal', hideInPopup, }) {
+    const { inCrossRef } = useXRefState();
+    if (inCrossRef || !id) {
+        // If we are in a cross-reference pop-out, either hide hash link
+        // or return something that is **not** a link
+        return hideInPopup ? null : (_jsx("span", Object.assign({ className: classNames('select-none', className) }, { children: children })));
+    }
+    const scroll = (evt) => {
+        evt.preventDefault();
+        const el = document.getElementById(id);
+        el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth' });
+        history.replaceState(undefined, '', `#${id}`);
+    };
+    return (_jsx("a", Object.assign({ className: classNames('select-none no-underline text-inherit hover:text-inherit', className, {
+            'transition-opacity opacity-0 group-hover:opacity-70': hover,
+            'hover:underline': !hover,
+        }), onClick: scroll, href: `#${id}`, title: title, "aria-label": title }, { children: children })));
+}
+const Heading = (node, children) => {
+    const { enumerator, depth, key, identifier, html_id } = node;
+    const id = html_id || identifier || key;
+    const textContent = (_jsxs(_Fragment, { children: [enumerator && _jsx("span", Object.assign({ className: "select-none mr-3" }, { children: enumerator })), _jsx("span", Object.assign({ className: "heading-text" }, { children: children })), _jsx(HashLink, { id: id, kind: "Section", className: "px-2 font-normal", hover: true, hideInPopup: true })] }));
+    // The `heading-text` class is picked up in the Outline to select without the enumerator and "#" link
+    return e(`h${depth}`, {
+        key: node.key,
+        id,
+        className: 'relative group',
+    }, textContent);
+};
+const HEADING_RENDERERS = {
+    heading: Heading,
+};
+export default HEADING_RENDERERS;

package/dist/esm/iframe.d.ts

@@ -0,0 +1,7 @@
+import type { NodeRenderer } from '@myst-theme/providers';
+export declare const IFrame: NodeRenderer;
+declare const IFRAME_RENDERERS: {
+    iframe: NodeRenderer<any>;
+};
+export default IFRAME_RENDERERS;
+//# sourceMappingURL=iframe.d.ts.map

package/dist/esm/iframe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../../src/iframe.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAuB1D,eAAO,MAAM,MAAM,EAAE,YAkCpB,CAAC;AAEF,QAAA,MAAM,gBAAgB;;CAErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/iframe.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** This is duplicated in image, but a bit different logic */
+function getStyleValue(width) {
+    if (typeof width === 'number' && Number.isNaN(width)) {
+        // If it is nan, return undefined.
+        return undefined;
+    }
+    if (typeof width === 'string') {
+        if (width.endsWith('%')) {
+            return getStyleValue(Number(width.replace('%', '')));
+        }
+        else if (width.endsWith('px')) {
+            const px = getStyleValue(Number(width.replace('px', '')));
+            return px ? px / 750 : 70;
+        }
+        else if (!Number.isNaN(Number(width))) {
+            return Number(width);
+        }
+        console.log(`Unknown width ${width} in getImageWidth`);
+        return undefined;
+    }
+    return width;
+}
+export const IFrame = (node) => {
+    const width = getStyleValue(node.width) || 70;
+    return (_jsx("figure", Object.assign({ id: node.label || undefined, style: { textAlign: node.align || 'center' } }, { children: _jsx("div", Object.assign({ style: {
+                position: 'relative',
+                display: 'inline-block',
+                paddingBottom: '60%',
+                width: `min(max(${width}%, 500px), 100%)`,
+            } }, { children: _jsx("iframe", { width: "100%", height: "100%", src: node.src, allowFullScreen: true, allow: "autoplay", style: {
+                    width: '100%',
+                    height: '100%',
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    border: 'none',
+                } }) })) }), node.key));
+};
+const IFRAME_RENDERERS = {
+    iframe: IFrame,
+};
+export default IFRAME_RENDERERS;

package/dist/esm/image.d.ts

@@ -0,0 +1,11 @@
+import type { Image as ImageNodeSpec } from 'myst-spec';
+import type { NodeRenderer } from '@myst-theme/providers';
+type ImageNode = ImageNodeSpec & {
+    height?: string;
+};
+export declare const Image: NodeRenderer<ImageNode>;
+declare const IMAGE_RENDERERS: {
+    image: NodeRenderer<ImageNode>;
+};
+export default IMAGE_RENDERERS;
+//# sourceMappingURL=image.d.ts.map

package/dist/esm/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1D,KAAK,SAAS,GAAG,aAAa,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA2GrD,eAAO,MAAM,KAAK,EAAE,YAAY,CAAC,SAAS,CAczC,CAAC;AAEF,QAAA,MAAM,eAAe;;CAEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/image.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getStyleValue(width) {
+    if (typeof width === 'number' && Number.isNaN(width)) {
+        // If it is nan, return undefined.
+        return undefined;
+    }
+    if (typeof width === 'string') {
+        if (width.endsWith('%')) {
+            return width;
+        }
+        else if (width.endsWith('px')) {
+            return Number(width.replace('px', ''));
+        }
+        else if (!Number.isNaN(Number(width))) {
+            return Number(width);
+        }
+        console.log(`Unknown width ${width} in getImageWidth`);
+        return undefined;
+    }
+    return width;
+}
+function alignToMargin(align) {
+    switch (align) {
+        case 'left':
+            return { marginRight: 'auto' };
+        case 'right':
+            return { marginLeft: 'auto' };
+        case 'center':
+            return { margin: '0 auto' };
+        default:
+            return {};
+    }
+}
+function Video({ src, urlSource, align = 'center', width, height, }) {
+    return (_jsx("video", { style: Object.assign({ width: getStyleValue(width), height: getStyleValue(height) }, alignToMargin(align)), src: src, "data-canonical-url": urlSource, autoPlay: true, 
+        // For autoplay, the element needs to be muted to actually start!
+        muted: true, "webkit-playsinline": "true", playsInline: true, loop: true }));
+}
+function Picture({ src, srcOptimized, urlSource, align = 'center', alt, width, height, }) {
+    if (src.endsWith('.mp4')) {
+        return _jsx(Video, { width: width, height: height, align: align, src: src, urlSource: urlSource });
+    }
+    const image = (_jsx("img", { style: Object.assign({ width: getStyleValue(width), height: getStyleValue(height) }, alignToMargin(align)), src: src, alt: alt, "data-canonical-url": urlSource }));
+    if (!srcOptimized)
+        return image;
+    return (_jsxs("picture", { children: [_jsx("source", { srcSet: srcOptimized, type: "image/webp" }), image] }));
+}
+export const Image = (node) => {
+    return (_jsx(Picture, { src: node.url, srcOptimized: node.urlOptimized, alt: node.alt || node.title, width: node.width || undefined, height: node.height || undefined, align: node.align, 
+        // Note that sourceUrl is for backwards compatibility
+        urlSource: node.urlSource || node.sourceUrl }, node.key));
+};
+const IMAGE_RENDERERS = {
+    image: Image,
+};
+export default IMAGE_RENDERERS;

package/dist/esm/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { NodeRenderer } from '@myst-theme/providers';
+import type { GenericParent } from 'myst-common';
+export { CopyIcon } from './components/CopyIcon';
+export { CodeBlock } from './code';
+export { Admonition, AdmonitionKind } from './admonitions';
+export { Details } from './dropdown';
+export { TabSet, TabItem } from './tabs';
+export declare const DEFAULT_RENDERERS: Record<string, NodeRenderer>;
+export declare function useParse(node: GenericParent | null, renderers?: Record<string, NodeRenderer>): import("react").ReactNode;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAwBjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEzC,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAsB1D,CAAC;AAEF,wBAAgB,QAAQ,CACtB,IAAI,EAAE,aAAa,GAAG,IAAI,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAqB,6BAU5D"}

package/dist/esm/index.js

@@ -0,0 +1,40 @@
+import { mystToReact } from './convertToReact';
+import BASIC_RENDERERS from './basic';
+import ADMONITION_RENDERERS from './admonitions';
+import DROPDOWN_RENDERERS from './dropdown';
+import CARD_RENDERERS from './card';
+import GRID_RENDERERS from './grid';
+import CITE_RENDERERS from './cite';
+import FOOTNOTE_RENDERERS from './footnotes';
+import CODE_RENDERERS from './code';
+import MATH_RENDERERS from './math';
+import REACTIVE_RENDERERS from './reactive';
+import IFRAME_RENDERERS from './iframe';
+import IMAGE_RENDERERS from './image';
+import LINK_RENDERERS from './links';
+import HEADING_RENDERERS from './heading';
+import CROSS_REFERENCE_RENDERERS from './crossReference';
+import TAB_RENDERERS from './tabs';
+import EXT_RENDERERS from './extensions';
+import INLINE_EXPRESSION_RENDERERS from './inlineExpression';
+import PROOF_RENDERERS from './proof';
+import EXERCISE_RENDERERS from './exercise';
+import UNKNOWN_MYST_RENDERERS from './unknown';
+export { CopyIcon } from './components/CopyIcon';
+export { CodeBlock } from './code';
+export { Admonition, AdmonitionKind } from './admonitions';
+export { Details } from './dropdown';
+export { TabSet, TabItem } from './tabs';
+export const DEFAULT_RENDERERS = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BASIC_RENDERERS), UNKNOWN_MYST_RENDERERS), IMAGE_RENDERERS), LINK_RENDERERS), CODE_RENDERERS), MATH_RENDERERS), CITE_RENDERERS), TAB_RENDERERS), IFRAME_RENDERERS), FOOTNOTE_RENDERERS), ADMONITION_RENDERERS), REACTIVE_RENDERERS), HEADING_RENDERERS), CROSS_REFERENCE_RENDERERS), DROPDOWN_RENDERERS), CARD_RENDERERS), GRID_RENDERERS), INLINE_EXPRESSION_RENDERERS), EXT_RENDERERS), PROOF_RENDERERS), EXERCISE_RENDERERS);
+export function useParse(node, renderers = DEFAULT_RENDERERS) {
+    if (!node)
+        return null;
+    try {
+        const nodes = mystToReact(node, renderers);
+        return nodes;
+    }
+    catch (error) {
+        console.error(error);
+        return null;
+    }
+}

package/dist/esm/inlineError.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: string;
+    message?: string;
+}
+export declare function InlineError({ value, message }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=inlineError.d.ts.map

package/dist/esm/inlineError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inlineError.d.ts","sourceRoot":"","sources":["../../src/inlineError.tsx"],"names":[],"mappings":"AAEA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,2CAOpD"}

package/dist/esm/inlineError.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ExclamationCircleIcon from '@heroicons/react/24/outline/ExclamationCircleIcon';
+export function InlineError({ value, message }) {
+    return (_jsxs("span", Object.assign({ className: "text-yellow-600", title: message || value }, { children: [_jsx(ExclamationCircleIcon, { className: "inline h-[1em] mr-1" }), value] })));
+}

package/dist/esm/inlineExpression.d.ts

@@ -0,0 +1,7 @@
+import type { NodeRenderer } from '@myst-theme/providers';
+export declare const InlineExpression: NodeRenderer;
+declare const INLINE_EXPRESSION_RENDERERS: {
+    inlineExpression: NodeRenderer<any>;
+};
+export default INLINE_EXPRESSION_RENDERERS;
+//# sourceMappingURL=inlineExpression.d.ts.map

package/dist/esm/inlineExpression.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inlineExpression.d.ts","sourceRoot":"","sources":["../../src/inlineExpression.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,eAAO,MAAM,gBAAgB,EAAE,YAa9B,CAAC;AAEF,QAAA,MAAM,2BAA2B;;CAEhC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/esm/inlineExpression.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InlineError } from './inlineError';
+export const InlineExpression = (node, children) => {
+    var _a, _b, _c;
+    if (!node.result) {
+        return _jsx(InlineError, { value: `Unexecuted inline expression for: ${node.value}` });
+    }
+    if (((_a = node.result) === null || _a === void 0 ? void 0 : _a.status) !== 'ok') {
+        return _jsx(InlineError, { value: `${(_b = node.result) === null || _b === void 0 ? void 0 : _b.ename}: ${(_c = node.result) === null || _c === void 0 ? void 0 : _c.evalue}` });
+    }
+    // TODO: something with Thebe in the future!
+    return (_jsx("span", Object.assign({ title: `Evaluated from: "${node.value}"` }, { children: children }), node.key));
+};
+const INLINE_EXPRESSION_RENDERERS = {
+    inlineExpression: InlineExpression,
+};
+export default INLINE_EXPRESSION_RENDERERS;

package/dist/esm/links/github.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare function GithubLink({ kind, children, url, org, repo, raw, file, from, to, issue_number, }: {
+    children: React.ReactNode;
+    kind: 'file' | 'issue';
+    url: string;
+    raw: string;
+    org: string;
+    repo: string;
+    file: string;
+    from?: number;
+    issue_number?: string | number;
+    to?: number;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=github.d.ts.map

package/dist/esm/links/github.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"github.d.ts","sourceRoot":"","sources":["../../../src/links/github.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAoNnD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,YAAY,GACb,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,2CAoCA"}

package/dist/esm/links/github.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import useSWR from 'swr';
+import ExternalLinkIcon from '@heroicons/react/24/outline/ArrowTopRightOnSquareIcon';
+import PlusCircleIcon from '@heroicons/react/24/outline/PlusCircleIcon';
+import CheckCircleIcon from '@heroicons/react/24/outline/CheckCircleIcon';
+import { HoverPopover } from '../components/HoverPopover';
+import { LinkCard } from '../components/LinkCard';
+import { useEffect, useState } from 'react';
+import { CodeBlock } from '../code';
+import classNames from 'classnames';
+const fetcher = (...args) => fetch(...args).then((res) => {
+    if (res.status === 200)
+        return res.text();
+    throw new Error(`Content returned with status ${res.status}.`);
+});
+const jsonFetcher = (...args) => fetch(...args).then((res) => {
+    if (res.status === 200)
+        return res.json();
+    throw new Error(`Content returned with status ${res.status}.`);
+});
+function extToLanguage(ext) {
+    var _a;
+    return ((_a = {
+        ts: 'typescript',
+        js: 'javascript',
+        py: 'python',
+        md: 'markdown',
+        yml: 'yaml',
+    }[ext !== null && ext !== void 0 ? ext : '']) !== null && _a !== void 0 ? _a : ext);
+}
+function useLoadWhenOpen(open, url, loader) {
+    const [cached, setCached] = useState();
+    const { data, error } = useSWR(open ? url : null, loader);
+    useEffect(() => {
+        setCached(cached || data);
+    }, [cached, url, data]);
+    return { data: cached, error };
+}
+function GithubFilePreview({ url, raw, org, repo, file, from, to, open, }) {
+    const { data, error } = useLoadWhenOpen(open, raw, fetcher);
+    let code = data;
+    if (error) {
+        return (_jsxs("div", Object.assign({ className: "hover-document w-[500px] sm:max-w-[500px]" }, { children: [_jsx("a", Object.assign({ href: url, className: "block text-inherit hover:text-inherit", target: "_blank", rel: "noreferrer" }, { children: _jsx(ExternalLinkIcon, { className: "w-4 h-4 float-right" }) })), _jsxs("div", Object.assign({ className: "mt-2" }, { children: ["Error loading \"", file, "\" from GitHub."] }))] })));
+    }
+    const lang = extToLanguage(file === null || file === void 0 ? void 0 : file.split('.').pop());
+    let startingLineNumber = 1;
+    let emphasizeLines = [];
+    const offset = 5;
+    if (code && from && to) {
+        startingLineNumber = from;
+        code = code === null || code === void 0 ? void 0 : code.split('\n').slice(from - 1, to).join('\n');
+    }
+    else if (code && from) {
+        startingLineNumber = from + 1 - offset;
+        emphasizeLines = [from];
+        code = code === null || code === void 0 ? void 0 : code.split('\n').slice(Math.max(0, from - offset), from + offset).join('\n');
+    }
+    else {
+        code = code === null || code === void 0 ? void 0 : code.split('\n').slice(0, 10).join('\n');
+    }
+    const description = code ? (_jsx(_Fragment, { children: _jsx(CodeBlock, { value: code, lang: lang, filename: file, showLineNumbers: true, startingLineNumber: startingLineNumber, emphasizeLines: emphasizeLines, showCopy: false }) })) : null;
+    return (_jsx(LinkCard, { loading: !code, url: url, title: `GitHub - ${org}/${repo}`, description: description, className: "hover-document max-w-[80vw]" }));
+}
+// https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
+function useWhiteTextColor(bgColor) {
+    const color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
+    const r = parseInt(color.substring(0, 2), 16); // hexToR
+    const g = parseInt(color.substring(2, 4), 16); // hexToG
+    const b = parseInt(color.substring(4, 6), 16); // hexToB
+    return r * 0.299 + g * 0.587 + b * 0.114 <= 186;
+}
+function GithubIssuePreview({ url, org, repo, issue_number, open, }) {
+    var _a, _b;
+    const { data, error } = useLoadWhenOpen(open, `https://api.github.com/repos/${org}/${repo}/issues/${issue_number}`, jsonFetcher);
+    if (!data && !error) {
+        return (_jsx("div", Object.assign({ className: "hover-document w-[500px] sm:max-w-[500px] animate-pulse" }, { children: "Loading..." })));
+    }
+    const resp = data;
+    if (error) {
+        return (_jsxs("div", Object.assign({ className: "hover-document" }, { children: [_jsx("a", Object.assign({ href: url, className: "block text-inherit hover:text-inherit", target: "_blank", rel: "noreferrer" }, { children: _jsx(ExternalLinkIcon, { className: "w-4 h-4 float-right" }) })), _jsx("div", Object.assign({ className: "mt-2" }, { children: "Error loading from GitHub." }))] })));
+    }
+    const dateString = new Date(resp.created_at).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    });
+    return (_jsxs("div", Object.assign({ className: "hover-document w-[400px] sm:max-w-[400px] p-3" }, { children: [_jsxs("div", Object.assign({ className: "text-xs font-light" }, { children: [org, "/", repo] })), _jsxs("div", Object.assign({ className: "text-lg font-bold my-2 dark:text-white" }, { children: [resp.state === 'open' && (_jsx(PlusCircleIcon, { className: "w-6 h-6 inline-block text-green-700 dark:text-green-500 mr-2 -translate-y-px" })), resp.state === 'closed' && (_jsx(CheckCircleIcon, { className: "w-6 h-6 inline-block text-purple-700 dark:text-purple-500 mr-2 -translate-y-px" })), resp.title] })), _jsxs("div", Object.assign({ className: "text-xs font-light" }, { children: ["#", issue_number, " opened on ", dateString, " by", ' ', _jsxs("span", Object.assign({ className: "font-normal" }, { children: ["@", resp.user.login] }))] })), _jsx("p", Object.assign({ className: "text-md max-h-[4rem] overflow-hidden" }, { children: resp.body })), ((_a = resp.labels) === null || _a === void 0 ? void 0 : _a.length) > 0 && (_jsx("div", Object.assign({ className: "flex flex-wrap" }, { children: (_b = resp.labels) === null || _b === void 0 ? void 0 : _b.map((label) => (_jsx("span", Object.assign({ className: classNames('mr-1 text-xs inline-flex items-center px-2 py-0.5 rounded-full', {
+                        'text-white': useWhiteTextColor(label.color),
+                    }), style: { backgroundColor: `#${label.color}` } }, { children: label.name }), label.id))) })))] })));
+}
+export function GithubLink({ kind, children, url, org, repo, raw, file, from, to, issue_number, }) {
+    return (_jsx(HoverPopover, Object.assign({ card: ({ load }) => {
+            if (kind === 'file') {
+                return (_jsx(GithubFilePreview, { url: url, raw: raw, file: file, from: from, to: to, open: load, org: org, repo: repo }));
+            }
+            if (kind === 'issue') {
+                return (_jsx(GithubIssuePreview, { url: url, open: load, org: org, issue_number: issue_number, repo: repo }));
+            }
+        } }, { children: _jsx("a", Object.assign({ href: url, className: "italic", target: "_blank", rel: "noreferrer" }, { children: children })) })));
+}

package/dist/esm/links/index.d.ts

@@ -0,0 +1,14 @@
+import type { Link } from 'myst-spec';
+import type { NodeRenderer } from '@myst-theme/providers';
+type TransformedLink = Link & {
+    internal?: boolean;
+    protocol?: string;
+};
+export declare const link: NodeRenderer<TransformedLink>;
+export declare const linkBlock: NodeRenderer<TransformedLink>;
+declare const LINK_RENDERERS: {
+    link: NodeRenderer<TransformedLink>;
+    linkBlock: NodeRenderer<TransformedLink>;
+};
+export default LINK_RENDERERS;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/links/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/links/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAKtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAO1D,KAAK,eAAe,GAAG,IAAI,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA0CxE,eAAO,MAAM,IAAI,EAAE,YAAY,CAAC,eAAe,CAiD9C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,YAAY,CAAC,eAAe,CAkCnD,CAAC;AAEF,QAAA,MAAM,cAAc;;;CAGnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/esm/links/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ExternalLinkIcon from '@heroicons/react/24/outline/ArrowTopRightOnSquareIcon';
+import LinkIcon from '@heroicons/react/24/outline/LinkIcon';
+import { useLinkProvider, useSiteManifest, useBaseurl, withBaseurl } from '@myst-theme/providers';
+import { HoverPopover } from '../components/HoverPopover';
+import { LinkCard } from '../components/LinkCard';
+import { WikiLink } from './wiki';
+import { RRIDLink } from './rrid';
+import { GithubLink } from './github';
+function getPageInfo(site, path) {
+    var _a;
+    if (!site)
+        return undefined;
+    const [projectSlug, pageSlug] = path.replace(/^\//, '').split('/');
+    const project = (_a = site.projects) === null || _a === void 0 ? void 0 : _a.find((p) => p.slug === projectSlug || (!p.slug && !pageSlug));
+    if (!project)
+        return undefined;
+    return project.pages.find((p) => p.slug === (pageSlug || projectSlug));
+}
+function InternalLink({ url, children }) {
+    const Link = useLinkProvider();
+    const site = useSiteManifest();
+    const page = getPageInfo(site, url);
+    const baseurl = useBaseurl();
+    const skipPreview = !page || (!page.description && !page.thumbnail);
+    if (!page || skipPreview) {
+        return (_jsx(Link, Object.assign({ to: withBaseurl(url, baseurl), prefetch: "intent" }, { children: children })));
+    }
+    return (_jsx(HoverPopover, Object.assign({ card: _jsx(LinkCard, { internal: true, url: url, title: page.title, description: page.description, thumbnail: page.thumbnailOptimized || page.thumbnail }) }, { children: _jsx(Link, Object.assign({ to: withBaseurl(url, baseurl), prefetch: "intent" }, { children: children })) })));
+}
+export const link = (node, children) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const internal = (_a = node.internal) !== null && _a !== void 0 ? _a : false;
+    const protocol = node.protocol;
+    switch (protocol) {
+        case 'wiki':
+            return (_jsx(WikiLink, Object.assign({ url: node.url, page: (_b = node.data) === null || _b === void 0 ? void 0 : _b.page, wiki: (_c = node.data) === null || _c === void 0 ? void 0 : _c.wiki }, { children: children }), node.key));
+        case 'github':
+            return (_jsx(GithubLink, Object.assign({ kind: (_d = node.data) === null || _d === void 0 ? void 0 : _d.kind, url: node.url, org: (_e = node.data) === null || _e === void 0 ? void 0 : _e.org, repo: (_f = node.data) === null || _f === void 0 ? void 0 : _f.repo, raw: (_g = node.data) === null || _g === void 0 ? void 0 : _g.raw, file: (_h = node.data) === null || _h === void 0 ? void 0 : _h.file, from: (_j = node.data) === null || _j === void 0 ? void 0 : _j.from, to: (_k = node.data) === null || _k === void 0 ? void 0 : _k.to, issue_number: (_l = node.data) === null || _l === void 0 ? void 0 : _l.issue_number }, { children: children }), node.key));
+        case 'rrid':
+            return _jsx(RRIDLink, { rrid: (_m = node.data) === null || _m === void 0 ? void 0 : _m.rrid }, node.key);
+        default:
+            if (internal) {
+                return (_jsx(InternalLink, Object.assign({ url: node.url }, { children: children }), node.key));
+            }
+            return (_jsx("a", Object.assign({ target: "_blank", href: node.url, rel: "noreferrer" }, { children: children }), node.key));
+    }
+};
+export const linkBlock = (node, children) => {
+    var _a;
+    const iconClass = 'w-6 h-6 self-center transition-transform flex-none ml-3';
+    const containerClass = 'flex-1 p-4 my-5 block border font-normal hover:border-blue-500 dark:hover:border-blue-400 no-underline hover:text-blue-600 dark:hover:text-blue-400 text-gray-600 dark:text-gray-100 border-gray-200 dark:border-gray-500 rounded shadow-sm hover:shadow-lg dark:shadow-neutral-700';
+    const internal = (_a = node.internal) !== null && _a !== void 0 ? _a : false;
+    const nested = (_jsxs("div", Object.assign({ className: "flex align-middle h-full" }, { children: [_jsxs("div", Object.assign({ className: "flex-grow" }, { children: [node.title, _jsx("div", Object.assign({ className: "text-xs text-gray-500 dark:text-gray-400" }, { children: children }))] })), internal && _jsx(LinkIcon, { className: iconClass }), !internal && _jsx(ExternalLinkIcon, { className: iconClass })] })));
+    if (internal) {
+        return (_jsx("a", Object.assign({ href: node.url, className: containerClass }, { children: nested }), node.key));
+    }
+    return (_jsx("a", Object.assign({ className: containerClass, target: "_blank", rel: "noopener noreferrer", href: node.url }, { children: nested }), node.key));
+};
+const LINK_RENDERERS = {
+    link,
+    linkBlock,
+};
+export default LINK_RENDERERS;

package/dist/esm/links/rrid.d.ts

@@ -0,0 +1,4 @@
+export declare function RRIDLink({ rrid }: {
+    rrid: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=rrid.d.ts.map

package/dist/esm/links/rrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rrid.d.ts","sourceRoot":"","sources":["../../../src/links/rrid.tsx"],"names":[],"mappings":"AAkEA,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,2CAQlD"}