ENH: update theme (#215)

* MAINT: bump dependencies

* FIX: bugs in CI

* MAINT: run prettier

* FIX: restore test file

* fix: enable frontmatter in viewer by default

* fix: don't pass unused options

* TEST: update tests to include markdown viewer

* MAINT: run linter

.github/workflows/build.yml

@@ -2,9 +2,11 @@ name: Build
 
 on:
   push:
-    branches: main
+    branches: 
+      - main
   pull_request:
-    branches: '*'
+    branches: 
+      - '*'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -159,4 +161,4 @@ jobs:
       - uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
       - uses: jupyterlab/maintainer-tools/.github/actions/check-links@v1
         with:
-          ignore_links: "https?://mybinder\.org.*" 
+          ignore_links: "https?://mybinder\\.org.*" 

package.json

@@ -65,9 +65,9 @@
         "@jupyterlab/notebook": "^4.0.0",
         "@jupyterlab/rendermime": "^4.0.0",
         "@jupyterlab/translation": "^4.0.0",
-        "@myst-theme/diagrams": "^0.5.21",
-        "@myst-theme/frontmatter": "^0.5.21",
-        "@myst-theme/providers": "^0.5.21",
+        "@myst-theme/diagrams": "^0.5.22",
+        "@myst-theme/frontmatter": "^0.5.22",
+        "@myst-theme/providers": "^0.5.22",
         "katex": "^0.15.2",
         "myst-common": "^1.1.24",
         "myst-ext-card": "^1.0.5",

src/__tests__/jupyterlab_myst.spec.ts

@@ -0,0 +1,9 @@
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */
+
+describe('jupyterlab-myst', () => {
+  it('should be tested', () => {
+    expect(1 + 1).toEqual(2);
+  });
+});

src/components/listItem.tsx

@@ -41,11 +41,10 @@ export function ListItem({
   line,
   children
 }: {
-     checked?: boolean,
-     line?: number,
-     children?: any[]
-
-   }): JSX.Element {
+  checked?: boolean;
+  line?: number;
+  children?: any[];
+}): JSX.Element {
   if (checked === null) {
     return (
       <li>
@@ -54,11 +53,8 @@ export function ListItem({
     );
   }
   return (
-    <TaskItem
-      checked={checked}
-      line={line}
-    >
+    <TaskItem checked={checked} line={line}>
       <MyST ast={children} />
     </TaskItem>
   );
-};
+}

src/index.ts

@@ -15,7 +15,7 @@ import {
 import { Cell } from '@jupyterlab/cells';
 import { MySTContentFactory } from './MySTContentFactory';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { notebookCellExecuted } from './actions';
 import { mystMarkdownRendererFactory } from './mime';
 
@@ -59,15 +59,26 @@ const mimeRendererPlugin: JupyterFrontEndPlugin<void> = {
   id: 'jupyterlab-myst:mime-renderer',
   requires: [IRenderMimeRegistry],
   autoStart: true,
-  optional: [IMarkdownViewerTracker],
+  optional: [IMarkdownViewerTracker, ISettingRegistry],
   activate: (
     app: JupyterFrontEnd,
     registry: IRenderMimeRegistry,
     // We don't need this tracker directly, but it ensures that the built-in
     // Markdown renderer is registered, so that we can then safely add our own.
-    tracker?: IMarkdownViewerTracker
+    tracker?: IMarkdownViewerTracker,
+    settingRegistry?: ISettingRegistry
   ) => {
     console.log('Using jupyterlab-myst:mime-renderer');
+
+    // Enable frontmatter by default
+    if (settingRegistry) {
+      settingRegistry
+        .load('@jupyterlab/markdownviewer-extension:plugin')
+        .then((settings: ISettingRegistry.ISettings) => {
+          settings.set('hideFrontMatter', false);
+        });
+    }
+
     // Add the MyST markdown renderer factory.
     registry.addFactory(mystMarkdownRendererFactory);
   }

src/myst.ts

@@ -30,7 +30,11 @@ import { exerciseDirectives } from 'myst-ext-exercise';
 import { StaticNotebook } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
-import { imageUrlSourceTransform, internalLinksTransform, addCiteChildrenPlugin } from './transforms';
+import {
+  imageUrlSourceTransform,
+  internalLinksTransform,
+  addCiteChildrenPlugin
+} from './transforms';
 import { IUserExpressionMetadata } from './userExpressions';
 import { IMySTMarkdownCell } from './types';
 import { Cell, ICellModel } from '@jupyterlab/cells';
@@ -92,16 +96,14 @@ export async function processArticleMDAST(
     article: mdast as any
   };
 
-  const { frontmatter: frontmatterRaw } = getFrontmatter(file, mdast, {
-  });
+  const { frontmatter: frontmatterRaw } = getFrontmatter(file, mdast);
+  // unnestKernelSpec(rawPageFrontmatter);
   const frontmatter = validatePageFrontmatter(frontmatterRaw, {
     property: 'frontmatter',
     messages: {}
   });
 
-  const state = new ReferenceState(
-	  "<PATH>",
-  {
+  const state = new ReferenceState('<PATH>', {
     numbering: frontmatter.numbering,
     vfile: file
   });
@@ -158,17 +160,15 @@ export async function processNotebookMDAST(
   const { frontmatter: frontmatterRaw } = getFrontmatter(
     file,
     // This is the first cell, which might have a YAML block or header.
-    mdast.children[0] as any,
-    {
-    }
+    mdast.children[0] as any
   );
 
   const frontmatter = validatePageFrontmatter(frontmatterRaw, {
     property: 'frontmatter',
     messages: {}
   });
 
-  const state = new ReferenceState("<PATH>",{
+  const state = new ReferenceState('<PATH>', {
     numbering: frontmatter.numbering,
     vfile: file
   });
@@ -226,7 +226,6 @@ export async function renderNotebook(notebook: StaticNotebook) {
     frontmatter,
     mdast: processedMDAST
   } = await processNotebookMDAST(
-
     mdast,
     notebook.rendermime.resolver ?? undefined
   );

src/renderers.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { DEFAULT_RENDERERS } from 'myst-to-react';
 import { MermaidNodeRenderer } from '@myst-theme/diagrams';
 import { NodeRenderer } from '@myst-theme/providers';
-import { InlineExpression,  ListItem } from './components';
+import { InlineExpression, ListItem } from './components';
 import { useSanitizer } from './providers';
 
 export const renderers: Record<string, NodeRenderer> = {
@@ -12,7 +12,13 @@ export const renderers: Record<string, NodeRenderer> = {
     return <InlineExpression value={node.value} />;
   },
   listItem: ({ node }) => {
-    return <ListItem checked={node.checked} line={node.position?.start.line} children={node.children}/>;
+    return (
+      <ListItem
+        checked={node.checked}
+        line={node.position?.start.line}
+        children={node.children}
+      />
+    );
   },
   html: ({ node }, children) => {
     const { sanitizer } = useSanitizer();

src/types.ts

@@ -2,7 +2,6 @@ import { MarkdownCell } from '@jupyterlab/cells';
 import { IMySTModel } from './widget';
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 
-
 export type IMySTMarkdownCell = MarkdownCell & {
   readonly fragmentMDAST: any | undefined;
   readonly attachmentsResolver: IRenderMime.IResolver;

src/userExpressions.ts

@@ -2,7 +2,6 @@ import { PartialJSONObject } from '@lumino/coreutils';
 import { Cell } from '@jupyterlab/cells';
 import type { IMySTMarkdownCell } from './types';
 
-
 export const metadataSection = 'user_expressions';
 
 /**
@@ -38,7 +37,6 @@ export function isError(output: IExpressionResult): output is IExpressionError {
   return output.status === 'error';
 }
 
-
 export interface IUserExpressionMetadata extends PartialJSONObject {
   expression: string;
   result: IExpressionResult;
@@ -48,7 +46,6 @@ export interface IUserExpressionsMetadata extends PartialJSONObject {
   [metadataSection]: IUserExpressionMetadata[];
 }
 
-
 export function getUserExpressions(
   cell: IMySTMarkdownCell | Cell
 ): IUserExpressionMetadata[] | undefined {

src/widget.tsx

@@ -13,11 +13,13 @@ import {
 } from '@myst-theme/providers';
 import { MyST } from 'myst-to-react';
 import React from 'react';
-import { UserExpressionsProvider,
+import {
+  UserExpressionsProvider,
   ITaskItemChange,
   ITaskItemController,
   TaskItemControllerProvider,
-  SanitizerProvider } from './providers';
+  SanitizerProvider
+} from './providers';
 import { renderers } from './renderers';
 import { IUserExpressionMetadata } from './userExpressions';
 import { linkFactory } from './transforms';
@@ -122,7 +124,6 @@ export class MySTWidget extends VDomRenderer<IMySTModel> {
     this._sanitizer = sanitizer;
     this._taskItemController = change => this._taskItemChanged.emit(change);
     this.addClass('myst');
-
   }
 
   private _trusted?: boolean = false;

ui-tests/jupyter_server_test_config.py

@@ -10,3 +10,5 @@
 
 # Uncomment to set server log level to debug level
 # c.ServerApp.log_level = "DEBUG"
+
+c.ServerApp.port = 9999

ui-tests/package.json

@@ -1,15 +1,15 @@
 {
-  "name": "jupyterlab-myst-ui-tests",
-  "version": "1.0.0",
-  "description": "JupyterLab jupyterlab-myst Integration Tests",
-  "private": true,
-  "scripts": {
-    "start": "jupyter lab --config jupyter_server_test_config.py",
-    "test": "jlpm playwright test",
-    "test:update": "jlpm playwright test --update-snapshots"
-  },
-  "devDependencies": {
-    "@jupyterlab/galata": "^5.0.5",
-    "@playwright/test": "^1.37.0"
-  }
+    "name": "jupyterlab-myst-ui-tests",
+    "version": "1.0.0",
+    "description": "JupyterLab jupyterlab-myst Integration Tests",
+    "private": true,
+    "scripts": {
+        "start": "jupyter lab --config jupyter_server_test_config.py",
+        "test": "jlpm playwright test",
+        "test:update": "jlpm playwright test --update-snapshots"
+    },
+    "devDependencies": {
+        "@jupyterlab/galata": "^5.0.5",
+        "@playwright/test": "^1.37.0"
+    }
 }

ui-tests/playwright.config.js

@@ -5,9 +5,13 @@ const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
 
 module.exports = {
   ...baseConfig,
+  use: {
+    ...baseConfig.use,
+    baseURL: process.env.TARGET_URL ?? 'http://127.0.0.1:9999'
+  },
   webServer: {
     command: 'jlpm start',
-    url: 'http://localhost:8888/lab',
+    url: 'http://localhost:9999/lab',
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI
   }

ui-tests/tests/files-run.spec.ts

@@ -0,0 +1,31 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { expect, galata, test } from '@jupyterlab/galata';
+import * as path from 'path';
+
+const fileName = 'myst_tests.md';
+const FACTORY = 'Markdown Preview';
+// test.use({ tmpPath: 'notebook-run-test' });
+
+test.describe.serial('File Run', () => {
+  test.beforeEach(async ({ request, page, tmpPath }) => {
+    const contents = galata.newContentsHelper(request, page);
+    await contents.uploadFile(
+      path.resolve(__dirname, `./files/${fileName}`),
+      `${tmpPath}/${fileName}`
+    );
+  });
+
+  test('View Markdown file and render result', async ({ page, tmpPath }) => {
+    const filePath = `${tmpPath}/${fileName}`;
+    await page.filebrowser.open(filePath, FACTORY);
+
+    const name = path.basename(filePath);
+    await page.activity.getTab(name);
+
+    const panel = await page.activity.getPanel(name);
+
+    expect(await panel!.screenshot()).toMatchSnapshot();
+  });
+});

ui-tests/tests/files/myst_tests.md

@@ -0,0 +1,6 @@
+# Hello
+
+```{note}
+:class: dropdown
+This is MyST in a notebook rendered by `jupyterlab-myst`!!
+```

ui-tests/tests/notebooks/myst_tests.ipynb

@@ -7,26 +7,27 @@
     "tags": []
    },
    "source": [
-    "## Hello\n",
+    "# Hello\n",
     "\n",
     "```{note}\n",
     ":class: dropdown\n",
+    "\n",
     "This is MyST in a notebook rendered by `jupyterlab-myst`!!\n",
     "```"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "124203ea-d9d8-4c2b-91b7-eca7cd68ee3f",
+   "id": "f3cc605e-a90d-4b26-9771-8f7a27b58134",
    "metadata": {},
    "outputs": [],
    "source": []
   }
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3.9.10 64-bit",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -40,7 +41,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.10"
+   "version": "3.10.13"
   },
   "vscode": {
    "interpreter": {