@myst-theme/frontmatter 0.13.4 → 0.13.5

package/dist/FrontmatterBlock.d.ts

@@ -1,4 +1,4 @@
-import type { PageFrontmatter } from 'myst-frontmatter';
+import type { ExpandedThebeFrontmatter, PageFrontmatter } from 'myst-frontmatter';
 import { SourceFileKind } from 'myst-spec-ext';
 export declare function DoiText({ doi: possibleLink, className }: {
     doi?: string;
@@ -28,12 +28,14 @@ export declare function Journal({ venue, volume, issue, className, }: {
     issue?: Required<PageFrontmatter>['issue'];
     className?: string;
 }): import("react/jsx-runtime").JSX.Element | null;
-export declare function FrontmatterBlock({ frontmatter, kind, authorStyle, hideBadges, hideExports, className, }: {
+export declare function FrontmatterBlock({ frontmatter, kind, authorStyle, hideBadges, hideExports, className, thebe, location, }: {
     frontmatter: Omit<PageFrontmatter, 'parts'>;
     kind?: SourceFileKind;
     authorStyle?: 'block' | 'list';
     hideBadges?: boolean;
     hideExports?: boolean;
     className?: string;
+    thebe?: ExpandedThebeFrontmatter;
+    location?: string;
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=FrontmatterBlock.d.ts.map

package/dist/FrontmatterBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FrontmatterBlock.d.ts","sourceRoot":"","sources":["../src/FrontmatterBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAwB/C,wBAAgB,OAAO,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAe7F;AAED,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAgB9F;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAIC,EACD,MAAM,GACP,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,kDAiBA;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,kDAkB1E;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,kDAkBvE;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,kDAiBzE;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,kDAyBA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,IAA6B,EAC7B,WAAqB,EACrB,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE;IACD,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;IAC5C,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,kDAuFA"}
+{"version":3,"file":"FrontmatterBlock.d.ts","sourceRoot":"","sources":["../src/FrontmatterBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAyB/C,wBAAgB,OAAO,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAe7F;AAED,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAgB9F;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAIC,EACD,MAAM,GACP,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,kDAiBA;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,kDAkB1E;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,kDAkBvE;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,kDAiBzE;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,kDAyBA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,IAA6B,EAC7B,WAAqB,EACrB,UAAU,EACV,WAAW,EACX,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;IAC5C,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,wBAAwB,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,kDA0FA"}

package/dist/FrontmatterBlock.js

@@ -5,6 +5,7 @@ import { JupyterIcon, OpenAccessIcon, GithubIcon, TwitterIcon } from '@scienceic
 import { LicenseBadges } from './licenses.js';
 import { DownloadsDropdown } from './downloads.js';
 import { AuthorAndAffiliations, AuthorsList } from './Authors.js';
+import { LaunchButton } from './LaunchButton.js';
 function ExternalOrInternalLink({ to, className, title, children, }) {
     return (_jsx("a", { href: to, className: className, title: title, children: children }));
 }
@@ -64,7 +65,7 @@ export function Journal({ venue, volume, issue, className, }) {
         return null;
     return (_jsxs("div", { className: classNames('flex-none mr-2', className), children: [url ? (_jsx(ExternalOrInternalLink, { className: "font-semibold no-underline smallcaps", to: url, title: title, children: title })) : (_jsx("span", { className: "font-semibold smallcaps", children: title })), volume != null && (_jsxs("span", { className: "pl-2 ml-2 border-l", children: ["Volume ", volume.title, issue != null && _jsxs(_Fragment, { children: [", Issue ", issue.title] })] }))] }));
 }
-export function FrontmatterBlock({ frontmatter, kind = SourceFileKind.Article, authorStyle = 'block', hideBadges, hideExports, className, }) {
+export function FrontmatterBlock({ frontmatter, kind = SourceFileKind.Article, authorStyle = 'block', hideBadges, hideExports, className, thebe, location, }) {
     if (!frontmatter)
         return null;
     const { title, subtitle, subject, doi, open_access, license, github, venue, volume, issue, exports, downloads, date, authors, } = frontmatter;
@@ -75,11 +76,12 @@ export function FrontmatterBlock({ frontmatter, kind = SourceFileKind.Article, a
     const hasHeaders = !!subject || !!venue || !!volume || !!issue;
     const hasDateOrDoi = !!doi || !!date;
     const showHeaderBlock = hasHeaders || (hasBadges && !hideBadges) || (hasExports && !hideExports);
+    const hideLaunch = false;
     if (!title && !subtitle && !showHeaderBlock && !hasAuthors && !hasDateOrDoi) {
         // Nothing to show!
         return null;
     }
     return (_jsxs("div", { id: "skip-to-frontmatter", "aria-label": "article frontmatter", className: classNames(className), children: [showHeaderBlock && (_jsxs("div", { className: "flex items-center h-6 mb-5 text-sm font-light", children: [subject && (_jsx("div", { className: classNames('flex-none pr-2 smallcaps', {
                             'border-r mr-2': venue,
-                        }), children: subject })), _jsx(Journal, { venue: venue, volume: volume, issue: issue }), _jsx("div", { className: "flex-grow" }), !hideBadges && (_jsxs(_Fragment, { children: [_jsx(LicenseBadges, { license: license }), _jsx(OpenAccessBadge, { open_access: open_access }), _jsx(GitHubLink, { github: github }), isJupyter && (_jsx("div", { className: "inline-block mr-1", children: _jsx(JupyterIcon, { width: "1.25rem", height: "1.25rem", className: "inline-block", title: "Jupyter Notebook" }) }))] })), !hideExports && _jsx(DownloadsDropdown, { exports: (downloads !== null && downloads !== void 0 ? downloads : exports) })] })), title && _jsx("h1", { className: "mb-0", children: title }), subtitle && _jsx("p", { className: "mt-2 mb-0 lead text-zinc-600 dark:text-zinc-400", children: subtitle }), hasAuthors && authorStyle === 'list' && (_jsx(AuthorsList, { authors: frontmatter.authors, affiliations: frontmatter.affiliations })), hasAuthors && authorStyle === 'block' && (_jsx(AuthorAndAffiliations, { authors: frontmatter.authors, affiliations: frontmatter.affiliations })), hasDateOrDoi && (_jsxs("div", { className: "flex mt-2 text-sm font-light", children: [_jsx(DateString, { date: date, spacer: !!doi }), _jsx(DoiBadge, { doi: doi })] }))] }));
+                        }), children: subject })), _jsx(Journal, { venue: venue, volume: volume, issue: issue }), _jsx("div", { className: "flex-grow" }), !hideBadges && (_jsxs(_Fragment, { children: [_jsx(LicenseBadges, { license: license }), _jsx(OpenAccessBadge, { open_access: open_access }), _jsx(GitHubLink, { github: github }), isJupyter && (_jsx("div", { className: "inline-block mr-1", children: _jsx(JupyterIcon, { width: "1.25rem", height: "1.25rem", className: "inline-block", title: "Jupyter Notebook" }) }))] })), !hideExports && _jsx(DownloadsDropdown, { exports: (downloads !== null && downloads !== void 0 ? downloads : exports) }), !hideLaunch && thebe && location && _jsx(LaunchButton, { thebe: thebe, location: location })] })), title && _jsx("h1", { className: "mb-0", children: title }), subtitle && _jsx("p", { className: "mt-2 mb-0 lead text-zinc-600 dark:text-zinc-400", children: subtitle }), hasAuthors && authorStyle === 'list' && (_jsx(AuthorsList, { authors: frontmatter.authors, affiliations: frontmatter.affiliations })), hasAuthors && authorStyle === 'block' && (_jsx(AuthorAndAffiliations, { authors: frontmatter.authors, affiliations: frontmatter.affiliations })), hasDateOrDoi && (_jsxs("div", { className: "flex mt-2 text-sm font-light", children: [_jsx(DateString, { date: date, spacer: !!doi }), _jsx(DoiBadge, { doi: doi })] }))] }));
 }

package/dist/LaunchButton.d.ts

@@ -0,0 +1,7 @@
+import type { ExpandedThebeFrontmatter } from 'myst-frontmatter';
+export type LaunchProps = {
+    thebe: ExpandedThebeFrontmatter;
+    location: string;
+};
+export declare function LaunchButton(props: LaunchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LaunchButton.d.ts.map

package/dist/LaunchButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LaunchButton.d.ts","sourceRoot":"","sources":["../src/LaunchButton.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAoB,MAAM,kBAAkB,CAAC;AAiDnF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,wBAAwB,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAmVF,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,2CAyD9C"}

package/dist/LaunchButton.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback, useState } from 'react';
+import classNames from 'classnames';
+import * as Popover from '@radix-ui/react-popover';
+import { RocketIcon, Cross2Icon, ClipboardCopyIcon, ExternalLinkIcon } from '@radix-ui/react-icons';
+import * as Tabs from '@radix-ui/react-tabs';
+import * as Form from '@radix-ui/react-form';
+const GITHUB_USERNAME_REPO_REGEX = /^(?:https?:\/\/github.com\/)?([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)(?:.git)?\/?$/;
+const GITLAB_USERNAME_REPO_REGEX = /^(?:https?:\/\/gitlab.com\/)?([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)(?:.git)?\/?$/;
+const GIST_USERNAME_REPO_REGEX = /^(?:https?:\/\/gist.github.com\/)?([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)(?:.git)?\/?$/;
+function CopyButton(props) {
+    const { className, defaultMessage, alternateMessage, buildLink, timeout } = props;
+    const [message, setMessage] = useState(defaultMessage);
+    const copyLink = useCallback(() => {
+        // Build the link for the clipboard
+        const link = props.buildLink();
+        // In secure links, we can copy it!
+        if (window.isSecureContext) {
+            // Write to clipboard
+            window.navigator.clipboard.writeText(link !== null && link !== void 0 ? link : '<invalid link>');
+            // Update UI
+            setMessage(alternateMessage !== null && alternateMessage !== void 0 ? alternateMessage : defaultMessage);
+            // Set callback to restore message
+            setTimeout(() => {
+                setMessage(defaultMessage);
+            }, timeout !== null && timeout !== void 0 ? timeout : 1000);
+        }
+    }, [defaultMessage, alternateMessage, buildLink, timeout, setMessage]);
+    return (_jsxs("button", { type: "button", className: classNames(className, 'flex flex-row items-center gap-1'), onClick: copyLink, children: [message, " ", _jsx(ClipboardCopyIcon, { className: "inline-block" })] }));
+}
+/**
+ * Ensure URL of for http://foo.com/bar?baz
+ * has the form      http://foo.com/bar/
+ *
+ * @param url - URL to parse
+ */
+function ensureBasename(url) {
+    // Parse input URL (or fallback)
+    const parsedURL = new URL(url);
+    // Drop any fragments
+    let baseURL = `${parsedURL.origin}${parsedURL.pathname}`;
+    // Ensure a trailing fragment
+    if (!baseURL.endsWith('/')) {
+        baseURL = `${baseURL}/`;
+    }
+    return baseURL;
+}
+/**
+ * Equivalent to Python's `urllib.parse.urlencode` function
+ *
+ * @param params - mapping from parameter name to string value
+ */
+function encodeURLParams(params) {
+    return Object.entries(params)
+        .filter(([key, value]) => value !== undefined)
+        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+        .join('&');
+}
+/**
+ * Make a binder url for supported providers
+ *
+ * - trim gitlab.com from repo
+ * - trim trailing or leading '/' on repo
+ * - convert to URL acceptable string. Required for gitlab
+ * - trailing / on binderUrl
+ *
+ * Copied from thebe-core
+ *
+ * @param opts BinderOptions
+ * @returns  a binder compatible url
+ */
+function makeBinderURL(options, location, version = 'v2') {
+    var _a, _b, _c, _d, _e, _f, _g;
+    let stub;
+    if (!options.repo || !options.url) {
+        return undefined;
+    }
+    switch (options.provider) {
+        case 'git': {
+            const encodedRepo = encodeURIComponent(options.repo);
+            const encodedRef = encodeURIComponent((_a = options.ref) !== null && _a !== void 0 ? _a : 'HEAD');
+            stub = `git/${encodedRepo}/${encodedRef}`;
+            break;
+        }
+        case 'gitlab': {
+            const [, org, repo] = (_b = options.repo.match(GITLAB_USERNAME_REPO_REGEX)) !== null && _b !== void 0 ? _b : [];
+            if (!org) {
+                return undefined;
+            }
+            const encodedRef = encodeURIComponent((_c = options.ref) !== null && _c !== void 0 ? _c : 'HEAD');
+            stub = `gl/${org}/${repo}/${encodedRef}`;
+            break;
+        }
+        case 'github': {
+            const [, org, repo] = (_d = options.repo.match(GITHUB_USERNAME_REPO_REGEX)) !== null && _d !== void 0 ? _d : [];
+            if (!org) {
+                return undefined;
+            }
+            const encodedRef = encodeURIComponent((_e = options.ref) !== null && _e !== void 0 ? _e : 'HEAD');
+            stub = `gh/${org}/${repo}/${encodedRef}`;
+            break;
+        }
+        case 'gist': {
+            const [, org, repo] = (_f = options.repo.match(GIST_USERNAME_REPO_REGEX)) !== null && _f !== void 0 ? _f : [];
+            if (!org) {
+                return undefined;
+            }
+            const encodedRef = encodeURIComponent((_g = options.ref) !== null && _g !== void 0 ? _g : 'HEAD');
+            stub = `gist/${org}/${repo}/${encodedRef}`;
+            break;
+        }
+        default: {
+            return undefined;
+        }
+    }
+    // Build binder URL path
+    const query = encodeURLParams({ urlpath: `/lab/tree/${location}` });
+    const binderURL = ensureBasename(options.url);
+    return `${binderURL}${version}/${stub}?${query}`;
+}
+function cloneNameFromRepo(repo) {
+    const url = new URL(repo);
+    const parts = url.pathname.slice(1).split('/');
+    return parts[parts.length - 1] || url.hostname;
+}
+/**
+ * Make an nbgitpuller url for supported providers
+ *
+ * - trim gitlab.com from repo
+ * - trim trailing or leading '/' on repo
+ * - convert to URL acceptable string. Required for gitlab
+ * - trailing / on binderUrl
+ *
+ * Copied from thebe-core
+ *
+ * @param opts BinderOptions
+ * @returns  a binder compatible url
+ */
+function makeNbgitpullerURL(options, location) {
+    var _a, _b, _c;
+    if (!options.repo || !options.url) {
+        return undefined;
+    }
+    const { ref } = options;
+    let repo;
+    let cloneName;
+    switch (options.provider) {
+        case 'git': {
+            repo = options.repo;
+            cloneName = cloneNameFromRepo(repo);
+            break;
+        }
+        case 'gitlab': {
+            const [, org, name] = (_a = options.repo.match(GITLAB_USERNAME_REPO_REGEX)) !== null && _a !== void 0 ? _a : [];
+            repo = `https://gitlab.com/${org}/${name}`;
+            cloneName = name;
+            break;
+        }
+        case 'github': {
+            const [, org, name] = (_b = options.repo.match(GITHUB_USERNAME_REPO_REGEX)) !== null && _b !== void 0 ? _b : [];
+            repo = `https://github.com/${org}/${name}`;
+            cloneName = name;
+            break;
+        }
+        case 'gist': {
+            const [, , rev] = (_c = options.repo.match(GIST_USERNAME_REPO_REGEX)) !== null && _c !== void 0 ? _c : [];
+            repo = `https://gist.github.com/${rev}`;
+            cloneName = rev;
+            break;
+        }
+        default: {
+            return undefined;
+        }
+    }
+    // Build binder URL path
+    const query = encodeURLParams({
+        repo,
+        // Need a valid branch name, not a rev
+        // branch: ref,
+        urlpath: `/lab/tree/${cloneName}${location}`,
+    });
+    return `git-pull?${query}`;
+}
+function BinderLaunchContent(props) {
+    var _a;
+    const { thebe, location, onLaunch } = props;
+    const { binder } = thebe;
+    const defaultBinderBaseURL = (_a = binder === null || binder === void 0 ? void 0 : binder.url) !== null && _a !== void 0 ? _a : 'https://mybinder.org';
+    const formRef = useRef(null);
+    const buildLink = useCallback(() => {
+        const form = formRef.current;
+        if (!form) {
+            return;
+        }
+        const data = Object.fromEntries(new FormData(form));
+        return makeBinderURL(Object.assign(Object.assign({}, (binder !== null && binder !== void 0 ? binder : {})), { url: data.url || defaultBinderBaseURL }), location);
+    }, [formRef, location, binder]);
+    // FIXME: use ValidityState from radix-ui once passing-by-name is fixed
+    const urlRef = useRef(null);
+    const buildValidLink = useCallback(() => {
+        var _a;
+        if (((_a = urlRef.current) === null || _a === void 0 ? void 0 : _a.dataset.invalid) === 'true') {
+            return;
+        }
+        else {
+            return buildLink();
+        }
+    }, [buildLink, urlRef]);
+    const handleSubmit = useCallback((event) => {
+        var _a;
+        event.preventDefault();
+        const link = buildLink();
+        // Link should exist, but guard anyway
+        if (link) {
+            (_a = window === null || window === void 0 ? void 0 : window.open(link, '_blank')) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        onLaunch === null || onLaunch === void 0 ? void 0 : onLaunch();
+    }, [defaultBinderBaseURL, buildLink, onLaunch]);
+    return (_jsxs(Form.Root, { className: "w-[260px]", onSubmit: handleSubmit, ref: formRef, children: [_jsxs("p", { className: "mb-2.5 text-[15px] font-medium leading-[19px]", children: ["Launch on a BinderHub e.g. ", _jsx("a", { href: "https://mybinder.org", children: "mybinder.org" })] }), _jsxs(Form.Field, { className: "mb-2.5 grid", name: "url", children: [_jsxs("div", { className: "flex items-baseline justify-between", children: [_jsx(Form.Label, { className: "text-[15px] font-medium leading-[35px]", children: "BinderHub URL" }), _jsx(Form.Message, { className: "text-[13px] opacity-80", match: "typeMismatch", children: "Please provide a valid URL that starts with http(s)." })] }), _jsx(Form.Control, { asChild: true, children: _jsx("input", { className: "box-border inline-flex h-[35px] w-full appearance-none items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-slate-400 outline-none bg-gray-50 dark:bg-gray-700 hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black]", type: "url", placeholder: defaultBinderBaseURL, ref: urlRef }) })] }), _jsxs("div", { className: "flex flex-row justify-between", children: [_jsx(Form.Submit, { asChild: true, children: _jsxs("button", { className: "inline-flex flex-row gap-1 h-[35px] items-center justify-center rounded px-[15px] font-medium leading-none bg-orange-500 hover:bg-orange-600 outline-none text-white focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none", children: [_jsx("span", { children: "Launch" }), " ", _jsx(ExternalLinkIcon, { className: "inline-block" })] }) }), _jsx(CopyButton, { className: "inline-flex h-[35px] items-center justify-center rounded px-[15px] font-medium leading-none bg-gray-400 hover:bg-gray-500 outline-none text-white focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none", defaultMessage: "Copy Link", alternateMessage: "Copied Link", buildLink: buildValidLink })] })] }));
+}
+function JupyterHubLaunchContent(props) {
+    const { onLaunch, location, thebe } = props;
+    const { binder } = thebe;
+    const defaultHubBaseURL = '';
+    const formRef = useRef(null);
+    const buildLink = useCallback(() => {
+        const form = formRef.current;
+        if (!form) {
+            return;
+        }
+        const data = Object.fromEntries(new FormData(form));
+        const rawHubBaseURL = data.url;
+        if (!rawHubBaseURL) {
+            return;
+        }
+        const gitPullURL = makeNbgitpullerURL(binder !== null && binder !== void 0 ? binder : {}, location);
+        const hubURL = ensureBasename(rawHubBaseURL);
+        return `${hubURL}hub/user-redirect/${gitPullURL}`;
+    }, [formRef, location, binder]);
+    // FIXME: use ValidityState from radix-ui once passing-by-name is fixed
+    const urlRef = useRef(null);
+    const buildValidLink = useCallback(() => {
+        var _a;
+        if (((_a = urlRef.current) === null || _a === void 0 ? void 0 : _a.dataset.invalid) === 'true') {
+            return;
+        }
+        else {
+            return buildLink();
+        }
+    }, [buildLink, urlRef]);
+    const handleSubmit = useCallback((event) => {
+        var _a;
+        event.preventDefault();
+        const link = buildLink();
+        // Link should exist, but guard anyway
+        if (link) {
+            (_a = window === null || window === void 0 ? void 0 : window.open(link, '_blank')) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        onLaunch === null || onLaunch === void 0 ? void 0 : onLaunch();
+    }, [defaultHubBaseURL, buildLink, onLaunch]);
+    return (_jsxs(Form.Root, { className: "w-[260px]", onSubmit: handleSubmit, ref: formRef, children: [_jsx("p", { className: "mb-2.5 text-[15px] font-medium leading-[19px]", children: "Launch on a JupyterHub" }), _jsxs(Form.Field, { className: "mb-2.5 grid", name: "url", children: [_jsxs("div", { className: "flex items-baseline justify-between", children: [_jsx(Form.Label, { className: "text-[15px] font-medium leading-[35px]", children: "JupyterHub URL" }), _jsx(Form.Message, { className: "text-[13px] opacity-80", match: "valueMissing", children: "Please provide a URL." }), _jsx(Form.Message, { className: "text-[13px] opacity-80", match: "typeMismatch", children: "Please provide a valid URL that starts with http(s)." })] }), _jsx(Form.Control, { asChild: true, children: _jsx("input", { className: "box-border inline-flex h-[35px] w-full appearance-none items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-slate-400 outline-none bg-gray-50 dark:bg-gray-700 hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black]", type: "url", required: true, ref: urlRef }) })] }), _jsxs("div", { className: "flex flex-row justify-between", children: [_jsx(Form.Submit, { asChild: true, children: _jsxs("button", { className: "inline-flex flex-row gap-1 h-[35px] items-center justify-center rounded px-[15px] font-medium leading-none bg-orange-500 hover:bg-orange-600 outline-none text-white focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none", children: [_jsx("span", { children: "Launch" }), " ", _jsx(ExternalLinkIcon, { className: "inline-block" })] }) }), _jsx(CopyButton, { className: "inline-flex h-[35px] items-center justify-center rounded px-[15px] font-medium leading-none bg-gray-400 hover:bg-gray-500 outline-none text-white focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none", defaultMessage: "Copy Link", alternateMessage: "Copied Link", buildLink: buildValidLink })] })] }));
+}
+export function LaunchButton(props) {
+    const closeRef = useRef(null);
+    const closePopover = useCallback(() => {
+        var _a, _b;
+        (_b = (_a = closeRef.current) === null || _a === void 0 ? void 0 : _a.click) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, []);
+    return (_jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx("button", { className: "inline-flex size-[24px] hover:text-[#E18435] items-center justify-center", "aria-label": "Launch in external computing interface", children: _jsx(RocketIcon, {}) }) }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { className: "z-30 text-gray-700 dark:text-white bg-white dark:bg-stone-800 p-5 rounded shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]", sideOffset: 5, children: [_jsxs(Tabs.Root, { className: "flex w-[300px] flex-col", defaultValue: "binder", children: [_jsxs(Tabs.List, { className: "flex shrink-0 border-b divide-x border-gray-200 dark:border-gray-400", "aria-label": "Launch into computing interface", children: [_jsx(Tabs.Trigger, { className: "flex h-[45px] flex-1 cursor-default items-center justify-center px-5 text-[15px] outline-none data-[state=active]:underline border-gray-200 dark:border-gray-400", value: "binder", children: "Binder" }), _jsx(Tabs.Trigger, { className: "flex h-[45px] flex-1 cursor-default items-center justify-center px-5 text-[15px] outline-none data-[state=active]:underline border-gray-200 dark:border-gray-400", value: "jupyterhub", children: "JupyterHub" })] }), _jsx(Tabs.Content, { className: "grow rounded-b-md p-5 outline-none", value: "binder", children: _jsx(BinderLaunchContent, Object.assign({}, props, { onLaunch: closePopover })) }), _jsx(Tabs.Content, { className: "grow rounded-b-md p-5 outline-none", value: "jupyterhub", children: _jsx(JupyterHubLaunchContent, Object.assign({}, props, { onLaunch: closePopover })) })] }), _jsx(Popover.Close, { className: "absolute right-[5px] top-[5px] inline-flex size-[25px] items-center justify-center rounded-full", "aria-label": "Close", ref: closeRef, children: _jsx(Cross2Icon, {}) }), _jsx(Popover.Arrow, { className: "fill-white" })] }) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/frontmatter",
-  "version": "0.13.4",
+  "version": "0.13.5",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,10 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-form": "^0.1.0",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@scienceicons/react": "^0.0.6",
     "classnames": "^2.3.2",
     "myst-common": "*",