@curvenote/renderers 1.0.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/articles.d.ts.map +1 -1
- package/dist/articles.js +8 -2
- package/dist/components/admonition.d.ts.map +1 -1
- package/dist/components/admonition.js +24 -4
- package/dist/components/anywidget-host.d.ts +7 -0
- package/dist/components/anywidget-host.d.ts.map +1 -0
- package/dist/components/anywidget-host.js +11 -0
- package/dist/components/bluesky.d.ts +6 -0
- package/dist/components/bluesky.d.ts.map +1 -0
- package/dist/components/bluesky.js +113 -0
- package/dist/components/cite-figurebar.d.ts +2 -1
- package/dist/components/cite-figurebar.d.ts.map +1 -1
- package/dist/components/cite-figurebar.js +74 -28
- package/dist/components/cite.d.ts +11 -0
- package/dist/components/cite.d.ts.map +1 -1
- package/dist/components/cite.js +130 -8
- package/dist/components/copy-icon.d.ts +11 -0
- package/dist/components/copy-icon.d.ts.map +1 -0
- package/dist/components/copy-icon.js +32 -0
- package/dist/components/definition-list.d.ts.map +1 -1
- package/dist/components/definition-list.js +3 -2
- package/dist/components/faq.js +2 -2
- package/dist/components/hash-link.d.ts +3 -0
- package/dist/components/hash-link.d.ts.map +1 -0
- package/dist/components/hash-link.js +3 -0
- package/dist/components/hero.d.ts +1 -1
- package/dist/components/hero.d.ts.map +1 -1
- package/dist/components/hero.js +14 -2
- package/dist/components/hover-popover.d.ts +26 -0
- package/dist/components/hover-popover.d.ts.map +1 -0
- package/dist/components/hover-popover.js +26 -0
- package/dist/components/images.d.ts.map +1 -1
- package/dist/components/images.js +7 -2
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +3 -0
- package/dist/components/pdb.d.ts.map +1 -1
- package/dist/components/pdb.js +42 -6
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +11 -3
- package/dist/myst/abbreviation.d.ts +6 -0
- package/dist/myst/abbreviation.d.ts.map +1 -0
- package/dist/myst/abbreviation.js +13 -0
- package/dist/myst/anywidget.d.ts +5 -0
- package/dist/myst/anywidget.d.ts.map +1 -0
- package/dist/myst/anywidget.js +12 -0
- package/dist/myst/code.d.ts +6 -0
- package/dist/myst/code.d.ts.map +1 -0
- package/dist/myst/code.js +103 -0
- package/dist/myst/container.d.ts +7 -0
- package/dist/myst/container.d.ts.map +1 -0
- package/dist/myst/container.js +57 -0
- package/dist/myst/cross-reference.d.ts +23 -0
- package/dist/myst/cross-reference.d.ts.map +1 -0
- package/dist/myst/cross-reference.js +140 -0
- package/dist/myst/footnotes.d.ts +7 -0
- package/dist/myst/footnotes.d.ts.map +1 -0
- package/dist/myst/footnotes.js +32 -0
- package/dist/myst/index.d.ts +14 -0
- package/dist/myst/index.d.ts.map +1 -0
- package/dist/myst/index.js +17 -0
- package/dist/myst/inline-expression.d.ts +6 -0
- package/dist/myst/inline-expression.d.ts.map +1 -0
- package/dist/myst/inline-expression.js +20 -0
- package/dist/myst/links/figshare.d.ts +8 -0
- package/dist/myst/links/figshare.d.ts.map +1 -0
- package/dist/myst/links/figshare.js +45 -0
- package/dist/myst/links/geo.d.ts +8 -0
- package/dist/myst/links/geo.d.ts.map +1 -0
- package/dist/myst/links/geo.js +116 -0
- package/dist/myst/links/github.d.ts +15 -0
- package/dist/myst/links/github.d.ts.map +1 -0
- package/dist/myst/links/github.js +156 -0
- package/dist/myst/links/huggingface.d.ts +10 -0
- package/dist/myst/links/huggingface.d.ts.map +1 -0
- package/dist/myst/links/huggingface.js +73 -0
- package/dist/myst/links/index.d.ts +12 -0
- package/dist/myst/links/index.d.ts.map +1 -0
- package/dist/myst/links/index.js +95 -0
- package/dist/myst/links/ror.d.ts +7 -0
- package/dist/myst/links/ror.d.ts.map +1 -0
- package/dist/myst/links/ror.js +34 -0
- package/dist/myst/links/rrid.d.ts +5 -0
- package/dist/myst/links/rrid.d.ts.map +1 -0
- package/dist/myst/links/rrid.js +31 -0
- package/dist/myst/links/wiki.d.ts +9 -0
- package/dist/myst/links/wiki.d.ts.map +1 -0
- package/dist/myst/links/wiki.js +41 -0
- package/dist/myst/math.d.ts +15 -0
- package/dist/myst/math.d.ts.map +1 -0
- package/dist/myst/math.js +53 -0
- package/dist/transforms/articles.d.ts +2 -1
- package/dist/transforms/articles.d.ts.map +1 -1
- package/dist/transforms/articles.js +2 -2
- package/dist/transforms/index.d.ts +5 -2
- package/dist/transforms/index.d.ts.map +1 -1
- package/dist/transforms/index.js +1 -0
- package/dist/utils/anywidget-analytics.d.ts +13 -0
- package/dist/utils/anywidget-analytics.d.ts.map +1 -0
- package/dist/utils/anywidget-analytics.js +15 -0
- package/dist/utils/content-analytics.d.ts +44 -0
- package/dist/utils/content-analytics.d.ts.map +1 -0
- package/dist/utils/content-analytics.js +59 -0
- package/package.json +22 -13
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"copy-icon.d.ts","sourceRoot":"","sources":["../../src/components/copy-icon.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,aAAa,2CA2CrE"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
// @curvenote-fork:myst-to-react
|
|
3
|
+
// MIT — https://github.com/jupyter-book/myst-theme (packages/myst-to-react)
|
|
4
|
+
// Baseline v1.1.4: https://github.com/jupyter-book/myst-theme/blob/e2e1db449c87294775717a8924d4dd1a4d32ceb2/packages/myst-to-react/src/components/CopyIcon.tsx
|
|
5
|
+
// Patched v1.3.0: https://github.com/jupyter-book/myst-theme/blob/be74efbb7d13b926a2a6c1e67913e1b1029f28e6/packages/myst-to-react/src/components/CopyIcon.tsx
|
|
6
|
+
import { DocumentDuplicateIcon, CheckIcon } from '@heroicons/react/24/outline';
|
|
7
|
+
import { useAnalytics } from '@curvenote/theme-ui';
|
|
8
|
+
import { cn } from '@curvenote/react-utils';
|
|
9
|
+
import { useCallback, useState } from 'react';
|
|
10
|
+
export function CopyIcon({ text, className, analytics }) {
|
|
11
|
+
const capture = useAnalytics();
|
|
12
|
+
const [copied, setCopied] = useState(false);
|
|
13
|
+
const onClick = useCallback(() => {
|
|
14
|
+
if (copied)
|
|
15
|
+
return;
|
|
16
|
+
navigator.clipboard.writeText(text).then(() => {
|
|
17
|
+
if (analytics) {
|
|
18
|
+
capture('content_code_copied', {
|
|
19
|
+
surface: 'content',
|
|
20
|
+
contentKind: analytics.contentKind ?? 'code',
|
|
21
|
+
...analytics.properties,
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
setCopied(true);
|
|
25
|
+
setTimeout(() => setCopied(false), 3000);
|
|
26
|
+
});
|
|
27
|
+
}, [analytics, capture, copied, text]);
|
|
28
|
+
return (_jsx("button", { type: "button", title: copied ? 'Copied!!' : 'Copy to Clipboard', className: cn('inline-flex items-center opacity-0 group-hover:opacity-100 hover:opacity-100 focus:opacity-100 active:opacity-100 cursor-pointer ml-2', 'transition-color duration-200 ease-in-out', {
|
|
29
|
+
'text-blue-400 hover:text-blue-500': !copied,
|
|
30
|
+
'text-green-500 hover:text-green-500': copied,
|
|
31
|
+
}, className), onClick: onClick, "aria-pressed": copied ? 'true' : 'false', "aria-label": "Copy code to clipboard", children: copied ? (_jsx(CheckIcon, { width: 24, height: 24, className: "text-success" })) : (_jsx(DocumentDuplicateIcon, { width: 24, height: 24 })) }));
|
|
32
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition-list.d.ts","sourceRoot":"","sources":["../../src/components/definition-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"definition-list.d.ts","sourceRoot":"","sources":["../../src/components/definition-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AA8CzE,eAAO,MAAM,yBAAyB,EAAE,aAIvC,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from '@curvenote/react-utils';
|
|
3
|
-
import { HashLink
|
|
3
|
+
import { HashLink } from './hash-link';
|
|
4
|
+
import { MyST } from 'myst-to-react';
|
|
4
5
|
const DefinitionListRenderer = ({ node, className }) => {
|
|
5
6
|
return (_jsx("dl", { className: cn('my-5', className), id: node.html_id || node.identifier || node.key, children: _jsx(MyST, { ast: node.children }) }));
|
|
6
7
|
};
|
|
@@ -8,7 +9,7 @@ const DefinitionTermRenderer = ({ node, className }) => {
|
|
|
8
9
|
const allowedStrongTypes = new Set(['text', 'emphasis']);
|
|
9
10
|
const makeStrong = node.children?.reduce((allowed, n) => allowed && allowedStrongTypes.has(n.type), true) ?? false;
|
|
10
11
|
const id = node.html_id || node.identifier || node.key;
|
|
11
|
-
return (_jsxs("dt", { id: id, className: cn('group', className), children: [makeStrong ? (_jsx("strong", { children: _jsx(MyST, { ast: node.children }) })) : (_jsx(MyST, { ast: node.children })), _jsx(HashLink, { id: id, title: "Link to Definition Term", hover: true, className: "ml-2" })] }));
|
|
12
|
+
return (_jsxs("dt", { id: id, className: cn('group', className), children: [makeStrong ? (_jsx("strong", { children: _jsx(MyST, { ast: node.children }) })) : (_jsx(MyST, { ast: node.children })), _jsx(HashLink, { id: id, title: "Link to Definition Term", hover: true, className: "ml-2", analytics: { linkKind: 'definition_term', properties: { targetId: id } } })] }));
|
|
12
13
|
};
|
|
13
14
|
const DefinitionDescriptionRenderer = ({ node, className }) => {
|
|
14
15
|
return (_jsx("dd", { id: node.html_id || node.identifier || node.key, className: className, children: _jsx(MyST, { ast: node.children }) }));
|
package/dist/components/faq.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Collapsible, CollapsibleContent, CollapsibleTrigger, Button, SimpleTooltip, } from '@curvenote-
|
|
2
|
+
import { Collapsible, CollapsibleContent, CollapsibleTrigger, Button, SimpleTooltip, } from '@curvenote/theme-ui';
|
|
3
3
|
import { ChevronRight, Link } from 'lucide-react';
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
import { MyST } from 'myst-to-react';
|
|
@@ -17,7 +17,7 @@ const FAQItemComponent = ({ id, title, content, defaultOpen, }) => {
|
|
|
17
17
|
console.error('Failed to copy link:', err);
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
return (_jsx("div", { className: "border-b border-muted-background group", children: _jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { className: "flex justify-between items-start py-4 w-full text-left cursor-pointer", children: [_jsxs("div", { className: "flex gap-3 items-start", children: [_jsx("div", { className: "
|
|
20
|
+
return (_jsx("div", { className: "border-b border-muted-background group", children: _jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { className: "flex justify-between items-start py-4 w-full text-left cursor-pointer", children: [_jsxs("div", { className: "flex gap-3 items-start", children: [_jsx("div", { className: "shrink-0 mt-1.5", children: _jsx(ChevronRight, { className: cn('w-4 h-4 transition-transform duration-200', {
|
|
21
21
|
'rotate-90': isOpen,
|
|
22
22
|
}) }) }), _jsx("span", { className: "font-medium text-foreground", children: title })] }), _jsx(SimpleTooltip, { title: "Copy link", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
|
|
23
23
|
e.stopPropagation();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hash-link.d.ts","sourceRoot":"","sources":["../../src/components/hash-link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/components/hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/components/hero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAMnF,OAAO,YAAY,CAAC;AAEpB,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;QAChC,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IACjE,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;CACjE;AAiDD,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,eAAe,EACf,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAa,GACd,EAAE,SAAS,2CA4GX;AAuCD,eAAO,MAAM,cAAc;;;;CAAkD,CAAC"}
|
package/dist/components/hero.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useBaseurl, withBaseurl } from '@myst-theme/providers';
|
|
3
|
+
import { Button, useAnalytics } from '@curvenote/theme-ui';
|
|
3
4
|
import { MyST } from 'myst-to-react';
|
|
4
5
|
import { cn } from '@curvenote/react-utils';
|
|
5
6
|
import './hero.css';
|
|
@@ -51,6 +52,8 @@ function getOverlayClasses(overlay) {
|
|
|
51
52
|
return backgrounds.filter(Boolean);
|
|
52
53
|
}
|
|
53
54
|
export function HeroComponent({ className, backgroundImage, kicker, title, content, actions, footer, maxWidth, overlay, light = false, }) {
|
|
55
|
+
const capture = useAnalytics();
|
|
56
|
+
const baseurl = useBaseurl();
|
|
54
57
|
return (_jsxs("div", { className: cn('flex overflow-hidden relative flex-col min-h-[300px]', className), children: [backgroundImage && (_jsx("div", { className: "absolute inset-0 bg-center bg-no-repeat bg-cover", style: { backgroundImage: `url(${backgroundImage})` } })), overlay != null && _jsx("div", { className: cn('absolute inset-0', ...getOverlayClasses(overlay)) }), _jsx("div", { className: "container flex relative z-10 flex-1 items-center px-4 mx-auto my-20 sm:px-6 lg:px-8", children: _jsxs("div", { className: cn('max-w-4xl', ...getMaxWidthClasses(maxWidth)), children: [kicker && (_jsx("div", { className: cn('mb-2 text-sm font-medium tracking-wide uppercase', {
|
|
55
58
|
'text-gray-300': light === false,
|
|
56
59
|
'text-black': light === true,
|
|
@@ -65,7 +68,16 @@ export function HeroComponent({ className, backgroundImage, kicker, title, conte
|
|
|
65
68
|
'bg-white text-gray-900 hover:bg-gray-100': action.variant !== 'outline' && light === false,
|
|
66
69
|
'bg-transparent border-black text-black hover:bg-black/10': action.variant === 'outline' && light === true,
|
|
67
70
|
'bg-black text-gray-200 hover:bg-black/80': action.variant !== 'outline' && light === true,
|
|
68
|
-
}, action.className), asChild: !!action.href, onClick:
|
|
71
|
+
}, action.className), asChild: !!action.href, onClick: (event) => {
|
|
72
|
+
action.onClick?.();
|
|
73
|
+
if (!action.href)
|
|
74
|
+
return;
|
|
75
|
+
capture('content_hero_action_clicked', {
|
|
76
|
+
surface: 'content',
|
|
77
|
+
href: withBaseurl(action.href, baseurl),
|
|
78
|
+
actionVariant: action.variant || 'default',
|
|
79
|
+
});
|
|
80
|
+
}, children: action.href ? (_jsx("a", { href: withBaseurl(action.href, baseurl), children: action.label })) : (action.label) }, index))) }))] }) }), footer && (_jsx("div", { className: "w-full backdrop-blur-lg bg-black/60", children: _jsx("div", { className: "container px-4 py-6 mx-auto sm:px-6 lg:px-8", children: _jsx("div", { className: "max-w-4xl text-sm leading-relaxed text-gray-300", children: footer }) }) }))] }));
|
|
69
81
|
}
|
|
70
82
|
const HeroRenderer = ({ node, className }) => {
|
|
71
83
|
// Extract properties from the node
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as HoverCard from '@radix-ui/react-hover-card';
|
|
2
|
+
import { type ReactNode } from 'react';
|
|
3
|
+
export type HoverPopoverCard = ReactNode | ((ctx: {
|
|
4
|
+
load: boolean;
|
|
5
|
+
}) => ReactNode);
|
|
6
|
+
export type HoverPopoverAnalytics = {
|
|
7
|
+
cardKind: string;
|
|
8
|
+
properties?: Record<string, unknown>;
|
|
9
|
+
};
|
|
10
|
+
export type HoverPopoverProps = {
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
openDelay?: number;
|
|
13
|
+
card: HoverPopoverCard;
|
|
14
|
+
side?: HoverCard.HoverCardContentProps['side'];
|
|
15
|
+
arrowClass?: string;
|
|
16
|
+
analytics?: HoverPopoverAnalytics;
|
|
17
|
+
};
|
|
18
|
+
export declare function HoverPopover({ children, openDelay, card, side, arrowClass, analytics, }: HoverPopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export type TooltipProps = {
|
|
20
|
+
title: ReactNode;
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
className?: string;
|
|
23
|
+
analytics?: HoverPopoverAnalytics;
|
|
24
|
+
};
|
|
25
|
+
export declare function Tooltip({ title, children, className, analytics }: TooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
//# sourceMappingURL=hover-popover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hover-popover.d.ts","sourceRoot":"","sources":["../../src/components/hover-popover.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAC;AAGxD,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,KAAK,SAAS,CAAC,CAAC;AAEnF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAe,EACf,IAAI,EACJ,IAAI,EACJ,UAAyB,EACzB,SAAS,GACV,EAAE,iBAAiB,2CAmCnB;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC,CAAC;AAEF,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,YAAY,2CAoB9E"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// @curvenote-fork:myst-to-react
|
|
3
|
+
// MIT — https://github.com/jupyter-book/myst-theme (packages/myst-to-react)
|
|
4
|
+
// Baseline v1.1.4: https://github.com/jupyter-book/myst-theme/blob/e2e1db449c87294775717a8924d4dd1a4d32ceb2/packages/myst-to-react/src/components/HoverPopover.tsx
|
|
5
|
+
// Patched v1.3.0: https://github.com/jupyter-book/myst-theme/blob/be74efbb7d13b926a2a6c1e67913e1b1029f28e6/packages/myst-to-react/src/components/HoverPopover.tsx
|
|
6
|
+
import * as HoverCard from '@radix-ui/react-hover-card';
|
|
7
|
+
import { OverlayDepthIncrement, useAnalytics } from '@curvenote/theme-ui';
|
|
8
|
+
import { cn } from '@curvenote/react-utils';
|
|
9
|
+
import { useCallback, useState } from 'react';
|
|
10
|
+
export function HoverPopover({ children, openDelay = 400, card, side, arrowClass = 'fill-white', analytics, }) {
|
|
11
|
+
const capture = useAnalytics();
|
|
12
|
+
const [load, setLoad] = useState(false);
|
|
13
|
+
const onOpenChange = useCallback((open) => {
|
|
14
|
+
if (!open || !analytics)
|
|
15
|
+
return;
|
|
16
|
+
capture('content_hover_card_opened', {
|
|
17
|
+
surface: 'content',
|
|
18
|
+
cardKind: analytics.cardKind,
|
|
19
|
+
...analytics.properties,
|
|
20
|
+
});
|
|
21
|
+
}, [analytics, capture]);
|
|
22
|
+
return (_jsxs(HoverCard.Root, { openDelay: openDelay, onOpenChange: onOpenChange, children: [_jsx(HoverCard.Trigger, { asChild: true, onMouseEnter: () => setLoad(true), children: children }), _jsx(HoverCard.Portal, { children: _jsx(HoverCard.Content, { className: "exclude-from-outline hover-card-content", sideOffset: 5, side: side, children: _jsxs(OverlayDepthIncrement, { children: [typeof card === 'function' ? load && card({ load }) : card, _jsx(HoverCard.Arrow, { className: arrowClass })] }) }) })] }));
|
|
23
|
+
}
|
|
24
|
+
export function Tooltip({ title, children, className, analytics }) {
|
|
25
|
+
return (_jsx(HoverPopover, { side: "top", card: _jsx("div", { className: cn('p-1 text-xs text-white bg-blue-900 dark:bg-white dark:text-black', className), children: title }), arrowClass: "fill-blue-900 dark:fill-white", analytics: analytics, children: children }));
|
|
26
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/components/images.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/components/images.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAuB1D,eAAO,MAAM,eAAe;;CAA2B,CAAC"}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import {} from '@myst-theme/providers';
|
|
3
|
-
import { Image } from '@curvenote-
|
|
3
|
+
import { Image, useAnalytics } from '@curvenote/theme-ui';
|
|
4
4
|
const ImageRenderer = ({ node }) => {
|
|
5
|
-
|
|
5
|
+
const capture = useAnalytics();
|
|
6
|
+
return (_jsx(Image, { src: node.url, srcOptimized: node.urlOptimized, urlSource: node.urlSource, alt: node.alt, onLightboxOpen: () => capture('content_image_lightbox_opened', {
|
|
7
|
+
surface: 'content',
|
|
8
|
+
imageUrl: node.url,
|
|
9
|
+
imageAlt: node.alt,
|
|
10
|
+
}) }));
|
|
6
11
|
};
|
|
7
12
|
export const IMAGE_RENDERERS = { image: ImageRenderer };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pdb.d.ts","sourceRoot":"","sources":["../../src/components/pdb.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"pdb.d.ts","sourceRoot":"","sources":["../../src/components/pdb.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AA0EzE,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,WAAW,CAiCrD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAI5B,CAAC"}
|
package/dist/components/pdb.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { default as useSWR } from 'swr';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { MyST } from 'myst-to-react';
|
|
4
|
+
import { HoverPopover } from './hover-popover';
|
|
5
|
+
import { LinkCard, useAnalytics } from '@curvenote/theme-ui';
|
|
6
|
+
import { useCallback } from 'react';
|
|
7
|
+
import { captureContentLinkClicked, useContentEnrichmentDisplay } from '../utils/content-analytics';
|
|
5
8
|
const createQuery = (id) => `{"query":"query structure ($id: String!) {\n entry(entry_id:$id){\n rcsb_id\n struct {\n title\n }\n pubmed {\n rcsb_pubmed_container_identifiers {\n pubmed_id\n }\n rcsb_pubmed_central_id\n rcsb_pubmed_doi\n rcsb_pubmed_abstract_text\n rcsb_pubmed_affiliation_info\n }\n }\n}\n","variables":{"id":"${id}"},"operationName":"structure"}`;
|
|
6
9
|
const fetcher = (id) => fetch('https://data.rcsb.org/graphql', {
|
|
7
10
|
method: 'post',
|
|
@@ -13,25 +16,58 @@ const fetcher = (id) => fetch('https://data.rcsb.org/graphql', {
|
|
|
13
16
|
throw new Error(`Content returned with status ${res.status}.`);
|
|
14
17
|
});
|
|
15
18
|
function PDBChild({ pdb }) {
|
|
19
|
+
const capture = useAnalytics();
|
|
16
20
|
const { data, error } = useSWR(pdb, fetcher);
|
|
21
|
+
const destinationUrl = `https://www.rcsb.org/structure/${pdb}`;
|
|
22
|
+
const captureCardLinkClick = useCallback(() => {
|
|
23
|
+
captureContentLinkClicked(capture, {
|
|
24
|
+
linkKind: 'pdb_link',
|
|
25
|
+
destinationUrl,
|
|
26
|
+
engagementSurface: 'hover_card',
|
|
27
|
+
cardKind: 'pdb_link',
|
|
28
|
+
properties: { pdb },
|
|
29
|
+
});
|
|
30
|
+
}, [capture, destinationUrl, pdb]);
|
|
31
|
+
const enrichmentOutcome = !data && !error ? 'loading' : error ? 'error' : 'success';
|
|
32
|
+
useContentEnrichmentDisplay({
|
|
33
|
+
capture,
|
|
34
|
+
enrichmentSource: 'rcsb',
|
|
35
|
+
outcome: enrichmentOutcome,
|
|
36
|
+
cardKind: 'pdb_link',
|
|
37
|
+
engagementSurface: 'hover_card',
|
|
38
|
+
properties: { pdb },
|
|
39
|
+
});
|
|
17
40
|
if (!data && !error) {
|
|
18
41
|
return (_jsx("div", { className: "hover-document article w-[500px] sm:max-w-[500px] animate-pulse", children: "Loading..." }));
|
|
19
42
|
}
|
|
20
43
|
if (error) {
|
|
21
44
|
return (_jsxs("div", { className: "hover-document article w-[500px] sm:max-w-[500px]", children: ["Error loading ", pdb, "."] }));
|
|
22
45
|
}
|
|
23
|
-
console.log(data);
|
|
24
46
|
const rcsb_id = data.data.entry.rcsb_id;
|
|
25
47
|
const title = data.data.entry.struct.title;
|
|
26
48
|
const abstract = data.data.entry.pubmed.rcsb_pubmed_abstract_text;
|
|
27
|
-
return (_jsx(LinkCard, { loading: !data, url:
|
|
49
|
+
return (_jsx(LinkCard, { loading: !data, url: destinationUrl, title: _jsxs("div", { className: "flex gap-2 items-stretch text-sm font-light", children: ["PDB ", rcsb_id] }), thumbnail: `https://cdn.rcsb.org/images/structures/${rcsb_id.toLowerCase()}_assembly-1.jpeg`, onLinkClick: captureCardLinkClick, description: _jsxs(_Fragment, { children: [_jsx("div", { className: "mb-4 font-bold", children: title }), _jsx("p", { className: "overflow-hidden text-sm line-clamp-5", children: abstract })] }) }));
|
|
28
50
|
}
|
|
29
51
|
export const PDBLinkRenderer = ({ node }) => {
|
|
52
|
+
const capture = useAnalytics();
|
|
30
53
|
const pdb = node.data?.pdb;
|
|
54
|
+
const pdbUrl = `https://www.rcsb.org/structure/${pdb}`;
|
|
55
|
+
const captureTriggerClick = useCallback(() => {
|
|
56
|
+
const destinationUrl = pdb ? pdbUrl : node.url;
|
|
57
|
+
if (!destinationUrl)
|
|
58
|
+
return;
|
|
59
|
+
captureContentLinkClicked(capture, {
|
|
60
|
+
linkKind: 'pdb_link',
|
|
61
|
+
destinationUrl,
|
|
62
|
+
engagementSurface: 'trigger',
|
|
63
|
+
cardKind: pdb ? 'pdb_link' : undefined,
|
|
64
|
+
properties: { pdb },
|
|
65
|
+
});
|
|
66
|
+
}, [capture, node.url, pdb]);
|
|
31
67
|
if (!pdb) {
|
|
32
|
-
return (_jsx("a", { href: node.url, target: "_blank", rel: "noopener noreferrer", children: _jsx(MyST, { ast: node.children }) }));
|
|
68
|
+
return (_jsx("a", { href: node.url, target: "_blank", rel: "noopener noreferrer", onClick: captureTriggerClick, children: _jsx(MyST, { ast: node.children }) }));
|
|
33
69
|
}
|
|
34
|
-
return (_jsx(HoverPopover, { card: _jsx(PDBChild, { pdb: pdb }), children: _jsx("a", { href:
|
|
70
|
+
return (_jsx(HoverPopover, { card: _jsx(PDBChild, { pdb: pdb }), analytics: { cardKind: 'pdb_link', properties: { pdb } }, children: _jsx("a", { href: pdbUrl, target: "_blank", rel: "noopener noreferrer", onClick: captureTriggerClick, children: _jsx(MyST, { ast: node.children }) }) }));
|
|
35
71
|
};
|
|
36
72
|
export const LINK_RENDERERS = {
|
|
37
73
|
link: {
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { MYST_SPEC_VERSION } from '@myst-theme/common';
|
|
2
|
-
declare const renderers: import("@myst-theme/providers").
|
|
2
|
+
declare const renderers: import("@myst-theme/providers").NodeRenderersValidated;
|
|
3
3
|
export * from './transforms';
|
|
4
4
|
export * from './components';
|
|
5
5
|
export * from './utils/abstract';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,QAAA,MAAM,SAAS,wDAqBd,CAAC;AAEF,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,33 +1,41 @@
|
|
|
1
1
|
import { DEFAULT_RENDERERS as mystRenderers } from 'myst-to-react';
|
|
2
2
|
import { mergeRenderers } from '@myst-theme/providers';
|
|
3
|
+
import MATH_RENDERERS from './myst/math';
|
|
3
4
|
import { MERMAID_RENDERERS } from './components/mermaid';
|
|
4
5
|
import { ARTICLES_RENDERERS } from './articles';
|
|
5
6
|
import { IMAGE_RENDERERS } from './components/images';
|
|
6
7
|
import { ADMONITION_RENDERERS } from './components/admonition';
|
|
7
8
|
import { HERO_RENDERERS } from './components/hero';
|
|
8
9
|
import { DEFINITION_LIST_RENDERERS } from './components/definition-list';
|
|
10
|
+
import { MYST_RENDERERS } from './myst/index.js';
|
|
9
11
|
import { LINK_RENDERERS } from './components/pdb';
|
|
12
|
+
import { BLUESKY_LINK_RENDERERS } from './components/bluesky';
|
|
10
13
|
import { CITE_RENDERERS } from './components/cite';
|
|
11
14
|
import { PERSON_CARD_RENDERERS } from '@curvenote/ext-person/react';
|
|
12
15
|
import { BLOG_RENDERERS } from '@curvenote/ext-blog/react';
|
|
13
16
|
// import { FAQ_RENDERERS } from './faq';
|
|
14
|
-
import {
|
|
17
|
+
import { MYST_ANYWIDGET_RENDERERS } from './myst/anywidget.js';
|
|
18
|
+
import { ANY_RENDERERS as ANY_WIDGET_RENDERERS } from '@curvenote/any-widget/react';
|
|
15
19
|
export { MYST_SPEC_VERSION } from '@myst-theme/common';
|
|
16
20
|
const renderers = mergeRenderers([
|
|
17
21
|
mystRenderers,
|
|
22
|
+
MATH_RENDERERS,
|
|
18
23
|
MERMAID_RENDERERS,
|
|
19
24
|
ARTICLES_RENDERERS,
|
|
20
25
|
IMAGE_RENDERERS,
|
|
21
26
|
ADMONITION_RENDERERS,
|
|
22
27
|
HERO_RENDERERS,
|
|
23
28
|
DEFINITION_LIST_RENDERERS,
|
|
29
|
+
MYST_RENDERERS,
|
|
24
30
|
LINK_RENDERERS,
|
|
31
|
+
BLUESKY_LINK_RENDERERS,
|
|
25
32
|
CITE_RENDERERS,
|
|
26
33
|
PERSON_CARD_RENDERERS,
|
|
27
34
|
BLOG_RENDERERS,
|
|
28
|
-
|
|
35
|
+
ANY_WIDGET_RENDERERS,
|
|
36
|
+
MYST_ANYWIDGET_RENDERERS,
|
|
29
37
|
// FAQ_RENDERERS,
|
|
30
|
-
]);
|
|
38
|
+
], true);
|
|
31
39
|
export * from './transforms';
|
|
32
40
|
export * from './components';
|
|
33
41
|
export * from './utils/abstract';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"abbreviation.d.ts","sourceRoot":"","sources":["../../src/myst/abbreviation.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,eAAO,MAAM,oBAAoB,EAAE,YAelC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;CAElC,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { MyST } from 'myst-to-react';
|
|
3
|
+
import { cn } from '@curvenote/react-utils';
|
|
4
|
+
import { Tooltip } from '../components/hover-popover';
|
|
5
|
+
export const AbbreviationRenderer = ({ node, className }) => {
|
|
6
|
+
return (_jsx(Tooltip, { title: node.title, className: cn(className), analytics: {
|
|
7
|
+
cardKind: 'abbreviation',
|
|
8
|
+
properties: { title: node.title },
|
|
9
|
+
}, children: _jsx("abbr", { "aria-label": node.title, className: "hover-text", children: _jsx(MyST, { ast: node.children }) }) }));
|
|
10
|
+
};
|
|
11
|
+
export const ABBREVIATION_RENDERERS = {
|
|
12
|
+
abbreviation: AbbreviationRenderer,
|
|
13
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"anywidget.d.ts","sourceRoot":"","sources":["../../src/myst/anywidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAgB1D,eAAO,MAAM,wBAAwB;;CAEpC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ANY_RENDERERS } from '@myst-theme/anywidget';
|
|
3
|
+
import { AnywidgetClickHost } from '../components/anywidget-host';
|
|
4
|
+
import { getMystAnywidgetIdentity } from '../utils/anywidget-analytics';
|
|
5
|
+
const UpstreamAnywidgetRenderer = ANY_RENDERERS.anywidget;
|
|
6
|
+
const MystAnywidgetRenderer = (props) => {
|
|
7
|
+
const identity = getMystAnywidgetIdentity(props.node);
|
|
8
|
+
return (_jsx(AnywidgetClickHost, { identity: identity, children: _jsx(UpstreamAnywidgetRenderer, { ...props }) }));
|
|
9
|
+
};
|
|
10
|
+
export const MYST_ANYWIDGET_RENDERERS = {
|
|
11
|
+
anywidget: MystAnywidgetRenderer,
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../src/myst/code.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,YAAY,EAAmB,MAAM,uBAAuB,CAAC;AA+M3E,eAAO,MAAM,cAAc;;;CAG1B,CAAC"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// @curvenote-fork:myst-to-react
|
|
3
|
+
// MIT — https://github.com/jupyter-book/myst-theme (packages/myst-to-react)
|
|
4
|
+
// Baseline v1.1.4: https://github.com/jupyter-book/myst-theme/blob/e2e1db449c87294775717a8924d4dd1a4d32ceb2/packages/myst-to-react/src/code.tsx
|
|
5
|
+
// Patched v1.3.0: https://github.com/jupyter-book/myst-theme/blob/be74efbb7d13b926a2a6c1e67913e1b1029f28e6/packages/myst-to-react/src/code.tsx
|
|
6
|
+
import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
7
|
+
import { DocumentIcon } from '@heroicons/react/24/outline';
|
|
8
|
+
import { useIsScrollable } from '@myst-theme/providers';
|
|
9
|
+
import { cn } from '@curvenote/react-utils';
|
|
10
|
+
import { Details, MyST } from 'myst-to-react';
|
|
11
|
+
import { useMemo } from 'react';
|
|
12
|
+
import { CopyIcon } from '../components/copy-icon';
|
|
13
|
+
function normalizeLanguage(lang) {
|
|
14
|
+
switch (lang) {
|
|
15
|
+
case 'html':
|
|
16
|
+
return 'xml';
|
|
17
|
+
default:
|
|
18
|
+
return lang;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
function CodeBlock({ value, lang, identifier, emphasizeLines, showLineNumbers, className, showCopy = true, startingLineNumber = 1, filename, shadow, background, border, copyAnalytics, mdastNodeType, mdastNodeId, }) {
|
|
22
|
+
const { ref: highlighterRef, isScrollable } = useIsScrollable();
|
|
23
|
+
const highlighterProps = useMemo(() => {
|
|
24
|
+
const highlightLines = new Set(emphasizeLines);
|
|
25
|
+
return {
|
|
26
|
+
language: normalizeLanguage(lang),
|
|
27
|
+
startingLineNumber,
|
|
28
|
+
showLineNumbers,
|
|
29
|
+
useInlineStyles: true,
|
|
30
|
+
wrapLines: true,
|
|
31
|
+
lineNumberContainerStyle: {
|
|
32
|
+
display: 'inline-block',
|
|
33
|
+
float: 'left',
|
|
34
|
+
minWidth: '1.25em',
|
|
35
|
+
paddingRight: '1em',
|
|
36
|
+
textAlign: 'right',
|
|
37
|
+
userSelect: 'none',
|
|
38
|
+
borderLeft: '4px solid transparent',
|
|
39
|
+
},
|
|
40
|
+
lineProps: (line) => {
|
|
41
|
+
if (typeof line === 'boolean')
|
|
42
|
+
return {};
|
|
43
|
+
return (highlightLines.has(line)
|
|
44
|
+
? {
|
|
45
|
+
'data-line-number': `${line}`,
|
|
46
|
+
'data-highlight': 'true',
|
|
47
|
+
}
|
|
48
|
+
: { 'data-line-number': `${line}` });
|
|
49
|
+
},
|
|
50
|
+
customStyle: {
|
|
51
|
+
backgroundColor: 'unset',
|
|
52
|
+
},
|
|
53
|
+
};
|
|
54
|
+
}, [emphasizeLines, lang, showLineNumbers, startingLineNumber]);
|
|
55
|
+
return (_jsxs("div", { id: identifier, "data-mdast-node-type": mdastNodeType, "data-mdast-node-id": mdastNodeId, className: cn('relative myst-code group not-prose', className, {
|
|
56
|
+
'my-5 text-sm shadow hover:shadow-md dark:shadow-2xl dark:shadow-neutral-900': shadow,
|
|
57
|
+
'bg-stone-200/10': background,
|
|
58
|
+
'border border-l-4 border-gray-200 border-l-blue-400 dark:border-l-blue-400 dark:border-gray-800': border,
|
|
59
|
+
}), children: [filename && (_jsxs("div", { className: "flex flex-row pl-2 bg-white border-b dark:bg-slate-600 dark:border-slate-300", children: [_jsx(DocumentIcon, { width: "16px", height: "16px", className: "inline-block flex-none self-center text-gray-500 myst-code-filename-icon dark:text-gray-100" }), _jsx("div", { className: "self-center p-2 text-sm leading-3 myst-code-filename-title prose text-slate-600 dark:text-white", children: filename })] })), _jsx("div", { ref: highlighterRef, tabIndex: isScrollable ? 0 : undefined, role: isScrollable ? 'region' : undefined, "aria-label": "code block content", className: "block overflow-auto p-3 myst-code-body hljs", children: _jsx(SyntaxHighlighter, { ...highlighterProps, customStyle: { padding: 0, margin: 0, background: 'transparent' }, children: value }) }), showCopy && (_jsx(CopyIcon, { text: value, className: cn('absolute right-1 myst-code-copy-icon', {
|
|
60
|
+
'top-[32px]': filename,
|
|
61
|
+
'top-1': !filename,
|
|
62
|
+
}), analytics: copyAnalytics }))] }));
|
|
63
|
+
}
|
|
64
|
+
const code = ({ node, className }) => {
|
|
65
|
+
const copyAnalytics = {
|
|
66
|
+
contentKind: 'code',
|
|
67
|
+
properties: {
|
|
68
|
+
codeLanguage: node.lang,
|
|
69
|
+
codeFilename: node.filename,
|
|
70
|
+
mdastType: node.type,
|
|
71
|
+
nodeKey: node.key,
|
|
72
|
+
codeExecutable: node.executable,
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
const child = (_jsx(CodeBlock, { identifier: node.html_id, mdastNodeType: node.type, mdastNodeId: node.key, value: node.value || '', lang: node.lang, filename: node.filename, emphasizeLines: node.emphasizeLines, showLineNumbers: node.showLineNumbers, startingLineNumber: node.startingLineNumber, shadow: true, border: node.executable, background: !node.executable, className: cn({ hidden: node.visibility === 'remove' }, node.class, className), copyAnalytics: copyAnalytics }));
|
|
76
|
+
if (node.visibility === 'hide') {
|
|
77
|
+
return _jsx(Details, { title: "Source", children: child });
|
|
78
|
+
}
|
|
79
|
+
return child;
|
|
80
|
+
};
|
|
81
|
+
function isColor(maybeColorHash) {
|
|
82
|
+
if (!maybeColorHash || maybeColorHash.length > 9)
|
|
83
|
+
return undefined;
|
|
84
|
+
if (!new Set([4, 7, 9]).has(maybeColorHash.length))
|
|
85
|
+
return undefined;
|
|
86
|
+
const match = /^#([0-9A-Fa-f]{3,8})$/.exec(maybeColorHash);
|
|
87
|
+
if (!match)
|
|
88
|
+
return undefined;
|
|
89
|
+
return match[1];
|
|
90
|
+
}
|
|
91
|
+
const inlineCode = ({ node, className }) => {
|
|
92
|
+
if (isColor(node.value)) {
|
|
93
|
+
return (_jsxs("code", { className: cn('px-1 rounded bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-100', className), children: [node.value, _jsx("span", { style: { backgroundColor: node.value }, className: "inline-block w-[10px] h-[10px] rounded-full ml-1" })] }));
|
|
94
|
+
}
|
|
95
|
+
if (node.children && node.children.length > 0) {
|
|
96
|
+
return (_jsx("code", { className: className, children: _jsx(MyST, { ast: node.children }) }));
|
|
97
|
+
}
|
|
98
|
+
return _jsx("code", { className: className, children: node.value });
|
|
99
|
+
};
|
|
100
|
+
export const CODE_RENDERERS = {
|
|
101
|
+
code,
|
|
102
|
+
inlineCode,
|
|
103
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/myst/container.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA0GxE,eAAO,MAAM,mBAAmB;;;;CAI/B,CAAC"}
|