🚀 MVP launch buttons for JupyterHub & MyBinder

packages/frontmatter/package.json

@@ -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": "*",

packages/frontmatter/src/FrontmatterBlock.tsx

@@ -6,6 +6,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,
@@ -187,20 +188,29 @@ export function Journal({
   );
 }
 
+export type LaunchOptions = {
+  repo: string;
+  location: string;
+  binder?: string;
+  jupyterhub?: string;
+};
+
 export function FrontmatterBlock({
   frontmatter,
   kind = SourceFileKind.Article,
   authorStyle = 'block',
   hideBadges,
   hideExports,
   className,
+  launchOptions,
 }: {
   frontmatter: Omit<PageFrontmatter, 'parts'>;
   kind?: SourceFileKind;
   authorStyle?: 'block' | 'list';
   hideBadges?: boolean;
   hideExports?: boolean;
   className?: string;
+  launchOptions?: LaunchOptions;
 }) {
   if (!frontmatter) return null;
   const {
@@ -226,6 +236,8 @@ export function FrontmatterBlock({
   const hasHeaders = !!subject || !!venue || !!volume || !!issue;
   const hasDateOrDoi = !!doi || !!date;
   const showHeaderBlock = hasHeaders || (hasBadges && !hideBadges) || (hasExports && !hideExports);
+  const hideLaunch: boolean = false;
+
   if (!title && !subtitle && !showHeaderBlock && !hasAuthors && !hasDateOrDoi) {
     // Nothing to show!
     return null;
@@ -267,6 +279,7 @@ export function FrontmatterBlock({
             </>
           )}
           {!hideExports && <DownloadsDropdown exports={(downloads ?? exports) as any} />}
+          {!hideLaunch && launchOptions && <LaunchButton {...launchOptions} />}
         </div>
       )}
       {title && <h1 className="mb-0">{title}</h1>}