@curvenote/renderers 0.2.1

package/README.md

@@ -0,0 +1,6 @@
+# @curvenote/renderers
+
+[![@curvenote/renderers on npm](https://img.shields.io/npm/v/@curvenote/renderers.svg)](https://www.npmjs.com/package/@curvenote/renderers)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/curvenote/curvenote/blob/main/LICENSE)
+
+Add Curvenote renderers to a site.

package/dist/cite.d.ts

@@ -0,0 +1,17 @@
+import type { NodeRenderer } from '@myst-theme/providers';
+import type { GenericParent } from 'myst-common';
+interface Props {
+    value: string;
+    message?: string;
+}
+export declare function InlineError({ value, message }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const CiteGroup: NodeRenderer<GenericParent>;
+export declare const Cite: ({ label, error, children, }: {
+    label?: string;
+    error?: boolean;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CiteRenderer: NodeRenderer;
+declare const CITE_RENDERERS: Record<string, NodeRenderer>;
+export default CITE_RENDERERS;
+//# sourceMappingURL=cite.d.ts.map

package/dist/cite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cite.d.ts","sourceRoot":"","sources":["../src/cite.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,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;AAgCD,eAAO,MAAM,SAAS,EAAE,YAAY,CAAC,aAAa,CAkDjD,CAAC;AAEF,eAAO,MAAM,IAAI,gCAId;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAsBA,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAO1B,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAGhD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/cite.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// This code was forked from `myst-to-react`.
+// https://github.com/jupyter-book/myst-theme/commit/61e24acebfb79dbe532088ce4f654ae8deb4de8b
+/**
+ * @license
+ * Copyright (c) 2024 Project Jupyter - Distributed under the terms of the MIT License
+ */
+import classNames from 'classnames';
+import { useReferences, useSiteManifest } from '@myst-theme/providers';
+import { doi } from 'doi-utils';
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
+import { HoverPopover, MyST } from 'myst-to-react';
+import { Fragment } from 'react/jsx-runtime';
+export function InlineError({ value, message }) {
+    return (_jsxs("span", { className: "text-yellow-600", title: message || value, children: [_jsx(ExclamationCircleIcon, { width: "1rem", height: "1rem", className: "inline mr-1" }), value] }));
+}
+function useNumberedReferences() {
+    var _a;
+    const config = useSiteManifest();
+    const numbered_references = !!((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.numbered_references);
+    return numbered_references;
+}
+function CiteChild({ html }) {
+    return (_jsx("div", { className: "hover-document article w-[500px] sm:max-w-[500px] p-3", dangerouslySetInnerHTML: { __html: html || '' } }));
+}
+// function CiteChildren({ citations }: { citations?: { enumerator: string; html: string }[] }) {
+//   return (
+//     <div className="hover-document article w-[500px] max-h-[500px] overflow-auto sm:max-w-[500px] p-3">
+//       {citations?.map((c) => (
+//         <div className="grid grid-cols-[35px_1fr] gap-2 my-1" key={c.enumerator}>
+//           <div className="text-right select-none text-stone-500 dark:text-stone-300">
+//             {c.enumerator}.
+//           </div>
+//           <div dangerouslySetInnerHTML={{ __html: c.html || '' }} />
+//         </div>
+//       ))}
+//     </div>
+//   );
+// }
+export const CiteGroup = ({ node }) => {
+    var _a, _b;
+    const numbered = useNumberedReferences();
+    // const references = useReferences();
+    const allCite = (_b = (_a = node.children) === null || _a === void 0 ? void 0 : _a.every((child) => child.type === 'cite')) !== null && _b !== void 0 ? _b : false;
+    if (numbered && allCite && node.kind === 'parenthetical') {
+        // const citations =
+        //   node.children?.map((child) => {
+        //     const label = child.label;
+        //     const {
+        //       html,
+        //       enumerator,
+        //       doi: doiString,
+        //       url: refUrl,
+        //     } = references?.cite?.data[label ?? ''] ?? {};
+        //     return { label, html, enumerator, doi: doiString, url: refUrl };
+        //   }) ?? [];
+        // return (
+        //   <HoverPopover openDelay={300} card={<CiteChildren citations={citations as any} />}>
+        //     <sup className="cite-group hover-link">
+        //       <cite>{citations.map((c) => c.enumerator).join(', ')}</cite>
+        //     </sup>
+        //   </HoverPopover>
+        // );
+        return (_jsx("sup", { className: "cite-group", children: _jsx("cite", { children: node.children.map((c, i) => (_jsxs(Fragment, { children: [_jsx(MyST, { ast: c }), i < node.children.length - 1 ? ', ' : null] }, c.key + 'wrap'))) }) }));
+    }
+    return (_jsx("span", { className: classNames({
+            'cite-group': allCite,
+            'xref-group': !allCite,
+            narrative: node.kind === 'narrative',
+            parenthetical: node.kind === 'parenthetical',
+        }), children: _jsx(MyST, { ast: node.children }) }));
+};
+export const Cite = ({ label, error, children, }) => {
+    var _a, _b;
+    const references = useReferences();
+    if (!label) {
+        return _jsx(InlineError, { value: "cite (no label)", message: 'Citation Has No Label' });
+    }
+    const { html, doi: doiString, url: refUrl } = (_b = (_a = references === null || references === void 0 ? void 0 : references.cite) === null || _a === void 0 ? void 0 : _a.data[label]) !== null && _b !== void 0 ? _b : {};
+    if (error) {
+        return _jsx(InlineError, { value: label, message: 'Citation Not Found' });
+    }
+    const url = doiString ? doi.buildUrl(doiString) : refUrl;
+    return (_jsx(HoverPopover, { openDelay: 300, card: _jsx(CiteChild, { html: html }), children: _jsxs("cite", { children: [url && (_jsx("a", { href: url, target: "_blank", rel: "noreferrer", className: "hover-link", children: children })), !url && _jsx("span", { className: "hover-link", children: children })] }) }));
+};
+export const CiteRenderer = ({ node }) => {
+    const numbered = useNumberedReferences();
+    return (_jsx(Cite, { label: node.label, error: node.error, children: numbered && node.kind === 'parenthetical' ? node.enumerator : _jsx(MyST, { ast: node.children }) }));
+};
+const CITE_RENDERERS = {
+    citeGroup: CiteGroup,
+    cite: CiteRenderer,
+};
+export default CITE_RENDERERS;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export declare const curvenoteRenderers: import("@myst-theme/providers").NodeRenderers;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,+CAG7B,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+import { mergeRenderers } from '@myst-theme/providers';
+import CITE_RENDERERS from './cite.js';
+import PERSON_CARD_RENDERERS from '@curvenote/ext-person/react';
+export const curvenoteRenderers = mergeRenderers([
+    CITE_RENDERERS,
+    PERSON_CARD_RENDERERS, //
+]);

package/dist/pdbLink.d.ts

@@ -0,0 +1,6 @@
+import type { GenericNode } from 'myst-common';
+export declare function PDBLink({ node, pdb }: {
+    node: GenericNode;
+    pdb: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=pdbLink.d.ts.map

package/dist/pdbLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdbLink.d.ts","sourceRoot":"","sources":["../src/pdbLink.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA8D/C,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,2CAQxE"}

package/dist/pdbLink.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { default as useSWR } from 'swr';
+import { HoverPopover, LinkCard, MyST } from 'myst-to-react';
+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"}`;
+const fetcher = (id) => fetch('https://data.rcsb.org/graphql', {
+    method: 'post',
+    headers: [['Content-Type', 'application/json']],
+    body: createQuery(id),
+}).then((res) => {
+    if (res.status === 200)
+        return res.json();
+    throw new Error(`Content returned with status ${res.status}.`);
+});
+function PDBChild({ pdb }) {
+    const { data, error } = useSWR(pdb, fetcher);
+    if (!data && !error) {
+        return (_jsx("div", { className: "hover-document article w-[500px] sm:max-w-[500px] animate-pulse", children: "Loading..." }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: "hover-document article w-[500px] sm:max-w-[500px]", children: ["Error loading ", pdb, "."] }));
+    }
+    // return <div>{JSON.stringify(data)}</div>;
+    const rcsb_id = data.data.entry.rcsb_id;
+    const title = data.data.entry.struct.title;
+    const abstract = data.data.entry.pubmed.rcsb_pubmed_abstract_text;
+    return (_jsx(LinkCard, { loading: !data, url: `https://www.rcsb.org/structure/${pdb}`, title: _jsxs("p", { className: "flex items-stretch gap-2 text-sm font-light", children: [_jsx("span", { children: "PDB: " }), _jsx("a", { href: `https://www.rcsb.org/structure/${pdb}`, className: "self-center", target: "_blank", rel: "noopener noreferrer", children: _jsx("code", { children: rcsb_id }) })] }), thumbnail: 'https://cdn.rcsb.org/images/structures/4n3b_assembly-1.jpeg', description: _jsxs(_Fragment, { children: [_jsx("div", { className: "mb-4 font-bold", children: title }), _jsx("p", { className: "mb-4 text-sm", children: abstract })] }) }));
+}
+export function PDBLink({ node, pdb }) {
+    return (_jsx(HoverPopover, { card: _jsx(PDBChild, { pdb: pdb }), children: _jsx("a", { href: `https://www.rcsb.org/structure/${pdb}`, target: "_blank", rel: "noopener noreferrer", children: _jsx(MyST, { ast: node.children }) }) }));
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@curvenote/renderers",
+  "version": "0.2.1",
+  "type": "module",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist",
+    "lint": "eslint \"src/**/*.ts*\" \"src/**/*.tsx\" -c ./.eslintrc.cjs",
+    "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\"",
+    "dev": "npm-run-all --parallel \"build:* -- --watch\"",
+    "build:esm": "tsc",
+    "build": "npm-run-all -l clean -p build:esm"
+  },
+  "dependencies": {
+    "@curvenote/ext-person": "^0.2.1",
+    "@heroicons/react": "^2.1.5",
+    "@myst-theme/providers": "^0.11.0",
+    "classnames": "^2.5.1",
+    "myst-to-react": "^0.11.0",
+    "swr": "^2.1.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
+  },
+  "devDependencies": {
+    "typescript": "latest"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}