🖲 [Spike] Add button role

packages/myst-cli/package.json

@@ -72,6 +72,7 @@
     "myst-common": "^1.7.6",
     "myst-config": "^1.7.6",
     "myst-execute": "^0.1.2",
+    "myst-ext-button": "^0.0.0",
     "myst-ext-card": "^1.0.9",
     "myst-ext-exercise": "^1.0.9",
     "myst-ext-grid": "^1.0.9",

packages/myst-cli/src/process/myst.ts

@@ -1,4 +1,5 @@
 import { mystParse } from 'myst-parser';
+import { buttonRole } from 'myst-ext-button';
 import { cardDirective } from 'myst-ext-card';
 import { gridDirectives } from 'myst-ext-grid';
 import { proofDirective } from 'myst-ext-proof';
@@ -47,7 +48,7 @@ export function parseMyst(
     extensions: {
       frontmatter: !opts?.ignoreFrontmatter,
     },
-    roles: [...(session.plugins?.roles ?? [])],
+    roles: [buttonRole, ...(session.plugins?.roles ?? [])],
     vfile,
   });
   logMessagesFromVFile(session, vfile);

packages/myst-ext-button/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['curvenote'],
+};

packages/myst-ext-button/README.md

@@ -0,0 +1,3 @@
+# myst-ext-button
+
+`mystmd` extension for `button` role

packages/myst-ext-button/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "myst-ext-button",
+  "version": "0.0.0",
+  "sideEffects": false,
+  "license": "MIT",
+  "description": "MyST extension for button role",
+  "author": "Jenny Wong <jwong@2i2c.org>",
+  "homepage": "https://github.com/jupyter-book/mystmd/tree/main/packages/myst-ext-button",
+  "type": "module",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jupyter-book/mystmd.git"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "lint": "eslint \"src/**/!(*.spec).ts\" -c ./.eslintrc.cjs",
+    "lint:format": "npx prettier --check \"src/**/*.ts\"",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "build:esm": "tsc",
+    "build": "npm-run-all -l clean -p build:esm"
+  },
+  "bugs": {
+    "url": "https://github.com/jupyter-book/mystmd/issues"
+  },
+  "dependencies": {
+    "myst-common": "^1.7.2",
+    "myst-spec-ext": "^1.7.6"
+  },
+  "devDependencies": {
+    "myst-parser": "^1.5.7"
+  }
+}

packages/myst-ext-button/src/index.ts

@@ -0,0 +1,28 @@
+import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import type { Link } from 'myst-spec-ext';
+
+const REF_PATTERN = /^(.+?)<([^<>]+)>$/;
+
+export const buttonRole: RoleSpec = {
+  name: 'button',
+  doc: 'Button to navigate to external or internal links.',
+  body: {
+    type: String,
+    doc: 'The body of the button.',
+    required: true,
+  },
+  run(data: RoleData): GenericNode[] {
+    const body = data.body as string;
+    const match = REF_PATTERN.exec(body);
+    const [, modified, rawLabel] = match ?? [];
+    const url = rawLabel ?? body;
+    const node: Link = {
+      type: 'link',
+      kind: 'button',
+      url,
+      children: [],
+    };
+    if (modified) node.children = [{ type: 'text', value: modified.trim() }];
+    return [node];
+  },
+};

packages/myst-ext-button/tests/button.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { buttonRole } from '../src';
+import type { RoleData } from 'myst-common';
+
+describe('Button component', () => {
+  it('should process button role correctly', () => {
+    const data: RoleData = { body: 'Click me<http://example.com>' };
+    const result = buttonRole.run(data);
+    expect(result).toEqual([
+      {
+        type: 'link',
+        kind: 'button',
+        url: 'http://example.com',
+        children: [{ type: 'text', value: 'Click me' }],
+      },
+    ]);
+  });
+
+  it('should process button role without label correctly', () => {
+    const data: RoleData = { body: 'http://example.com' };
+    const result = buttonRole.run(data);
+    expect(result).toEqual([
+      {
+        type: 'link',
+        kind: 'button',
+        url: 'http://example.com',
+        children: [],
+      },
+    ]);
+  });
+});

packages/myst-ext-button/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig/base.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules", "src/**/*.spec.ts", "tests"]
+}

packages/myst-spec-ext/src/types.ts

@@ -284,6 +284,8 @@ export type Link = SpecLink & {
   static?: true;
   protocol?: string;
   error?: true;
+  kind?: 'button';
+  class?: Image['class'];
 };
 
 // Search types