FIX: correct font-sizes (again!) (#237)

* chore: fix font sizes

* chore: simplify preflight

* chore: run linter

* Update Playwright Snapshots

* fix: add proof styles

* chore: update ui-tests

* chore: run prettier

* test: update test

* Update Playwright Snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/myst.ts

@@ -99,7 +99,6 @@ export async function processArticleMDAST(
 
   const { frontmatter: frontmatterRaw } = getFrontmatter(file, mdast);
   // unnestKernelSpec(rawPageFrontmatter);
-  console.log(JSON.stringify(frontmatterRaw));
   const frontmatter = validatePageFrontmatter(frontmatterRaw, {
     property: 'frontmatter',
     messages: {}

style/preflight.css

@@ -5,11 +5,6 @@
 
 /* This is a highly simplified version of https://tailwindcss.com/docs/preflight to work with JupyterLab */
 
-.myst {
-  font-size: var(--jp-content-font-size1);
-  color: var(--jp-content-font-color1);
-}
-
 .myst
   :where(*):not(
     :where([class~='jp-RenderedHTMLCommon'], [class~='jp-RenderedHTMLCommon'] *)

style/tailwind.css

@@ -10,3 +10,4 @@
 @import url('@myst-theme/styles/block-styles.css');
 @import url('@myst-theme/styles/tasklists.css');
 @import url('@myst-theme/styles/hover.css');
+@import url('@myst-theme/styles/proof.css');

tailwind.config.js

@@ -20,11 +20,11 @@ module.exports = {
       typography: theme => ({
         DEFAULT: {
           css: {
+            fontSize: 'var(--jp-content-font-size1)',
+            color: 'var(--jp-content-font-color1)',
+            fontFamily: 'var(--jp-content-font-family)',
+            lineHeight: 'var(--jp-content-line-height)',
             p: {
-              color: 'var(--jp-content-font-color1)',
-              fontFamily: 'var(--jp-content-font-family)',
-              fontSize: 'var(--jp-content-font-size1)',
-              lineHeight: 'var(--jp-content-line-height)',
               marginTop: 0,
               marginBottom: '1em'
             },
@@ -33,8 +33,7 @@ module.exports = {
               fontWeight: 'var(--jp-content-heading-font-weight, 500)',
               fontStyle: 'normal',
               marginTop: 'var(--jp-content-heading-margin-top, 1.2em)',
-              marginBottom: 'var(--jp-content-heading-margin-bottom, 0.8em)',
-              color: 'var(--jp-content-font-color1)'
+              marginBottom: 'var(--jp-content-heading-margin-bottom, 0.8em)'
             },
             'h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child':
               {

ui-tests/package.json

@@ -10,6 +10,7 @@
     },
     "devDependencies": {
         "@jupyterlab/galata": "^5.0.5",
-        "@playwright/test": "^1.37.0"
+        "@playwright/test": "^1.37.0",
+        "glob": "^10.3.12"
     }
 }

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

@@ -3,29 +3,34 @@
 
 import { expect, galata, test } from '@jupyterlab/galata';
 import * as path from 'path';
+import { globSync } from 'glob';
 
-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}`
-    );
-  });
+const files = globSync('files/*.md', { cwd: __dirname });
+
+for (const file of files) {
+  const fileName = path.basename(file);
+  test.describe.serial(`File Run: ${file}`, () => {
+    test.beforeEach(async ({ request, page, tmpPath }) => {
+      const contents = galata.newContentsHelper(request, page);
+      await contents.uploadFile(
+        path.resolve(__dirname, file),
+        `${tmpPath}/${fileName}`
+      );
+    });
 
-  test('View Markdown file and render result', async ({ page, tmpPath }) => {
-    const filePath = `${tmpPath}/${fileName}`;
-    await page.filebrowser.open(filePath, FACTORY);
+    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 name = path.basename(filePath);
+      await page.activity.getTab(name);
 
-    const panel = await page.activity.getPanel(name);
+      const panel = await page.activity.getPanel(name);
 
-    expect(await panel!.screenshot()).toMatchSnapshot();
+      expect(await panel!.screenshot()).toMatchSnapshot();
+    });
   });
-});
+}

ui-tests/tests/files/directives.md

@@ -0,0 +1,46 @@
+---
+title: Directives
+date: 2024-04-26
+authors:
+  - name: Angus Hollands
+    affiliations:
+      - 2i2c
+---
+
+```{note}
+:class: dropdown
+
+This is MyST in a notebook rendered by `jupyterlab-myst`!!
+```
+
+:::{pull-quote}
+We know what we are, but know not what we may be.
+:::
+
+They say the owl was a baker’s daughter. Lord, we know what we are, but know not what we may be. God be at your table.
+
+:::{prf:proof}
+:label: full-proof
+Let $z$ be any other point in $S$ and use the fact that $S$ is a linear subspace to deduce
+
+```{math}
+\| y - z \|^2
+= \| (y - \hat y) + (\hat y - z) \|^2
+= \| y - \hat y \|^2  + \| \hat y - z  \|^2
+```
+
+Hence $\| y - z \| \geq \| y - \hat y \|$, which completes the proof.
+:::
+
+```{mermaid}
+flowchart LR
+  A[Jupyter Notebook] --> C
+  B[MyST Markdown] --> C
+  C(mystmd) --> D{AST}
+  D <--> E[LaTeX]
+  E --> F[PDF]
+  D --> G[Word]
+  D --> H[React]
+  D --> I[HTML]
+  D <--> J[JATS]
+```

ui-tests/tests/files/typography.md

@@ -0,0 +1,39 @@
+# Typography
+
+## Subtitle!
+
+- Bullet
+  - List
+    1. Containing
+    2. Some
+  - Numbers
+
+A link https://google.com and an autolink <https://bbc.co.uk/news> and a custom link [to anywhere!](https://wikipedia.org)
+
+Term 1
+: Definition
+
+Term 2
+: Definition
+
+{kbd}`Ctrl` + {kbd}`Space`
+
+Fleas \
+Adam \
+Had 'em.
+
+By Strickland Gillilan
+
+H{sub}`2`O, and 4{sup}`th` of July
+
+Well {abbr}`MyST (Markedly Structured Text)` is cool!
+
+Foo [^a] and Bar [^b]
+
+[^a]: A footnote
+[^b]: Another footnote
+
+Foo [^c] and Bar [^d]
+
+[^c]: A footnote
+[^d]: Another footnote

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

@@ -3,28 +3,32 @@
 
 import { expect, galata, test } from '@jupyterlab/galata';
 import * as path from 'path';
-
-const fileName = 'myst_tests.ipynb';
+import { globSync } from 'glob';
 
 // test.use({ tmpPath: 'notebook-run-test' });
 
-test.describe.serial('Notebook Run', () => {
-  test.beforeEach(async ({ request, page, tmpPath }) => {
-    const contents = galata.newContentsHelper(request, page);
-    await contents.uploadFile(
-      path.resolve(__dirname, `./notebooks/${fileName}`),
-      `${tmpPath}/${fileName}`
-    );
-  });
+const files = globSync('notebooks/*.ipynb', { cwd: __dirname });
+
+for (const file of files) {
+  test.describe.serial(`Notebook Run: ${file}`, () => {
+    const fileName = path.basename(file);
+    test.beforeEach(async ({ request, page, tmpPath }) => {
+      const contents = galata.newContentsHelper(request, page);
+      await contents.uploadFile(
+        path.resolve(__dirname, file),
+        `${tmpPath}/${fileName}`
+      );
+    });
 
-  test('Run Notebook and capture cell outputs', async ({ page, tmpPath }) => {
-    await page.notebook.openByPath(`${tmpPath}/${fileName}`);
-    await page.notebook.activate(fileName);
+    test('Run Notebook and capture cell outputs', async ({ page, tmpPath }) => {
+      await page.notebook.openByPath(`${tmpPath}/${fileName}`);
+      await page.notebook.activate(fileName);
 
-    await page.notebook.run();
+      await page.notebook.run();
 
-    const nbPanel = await page.notebook.getNotebookInPanel();
+      const nbPanel = await page.notebook.getNotebookInPanel();
 
-    expect(await nbPanel!.screenshot()).toMatchSnapshot();
+      expect(await nbPanel!.screenshot()).toMatchSnapshot();
+    });
   });
-});
+}

ui-tests/tests/notebooks/directives.ipynb

@@ -0,0 +1,104 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "ca08bb8d-dc60-494e-a63e-5a9a7d4be7bd",
+   "metadata": {},
+   "source": [
+    "---\n",
+    "title: Directives\n",
+    "date: 2024-04-26\n",
+    "authors:\n",
+    "  - name: Angus Hollands\n",
+    "    affiliations:\n",
+    "      - 2i2c\n",
+    "---"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "d79b49b1-d263-4759-bfce-699f88f8c778",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "```{note}\n",
+    ":class: dropdown\n",
+    "\n",
+    "This is MyST in a notebook rendered by `jupyterlab-myst`!!\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "aaaab279-c281-4f20-8852-dcaa08c0d07c",
+   "metadata": {},
+   "source": [
+    ":::{pull-quote}\n",
+    "We know what we are, but know not what we may be.\n",
+    ":::\n",
+    "\n",
+    "They say the owl was a baker’s daughter. Lord, we know what we are, but know not what we may be. God be at your table."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "c2113213-77a9-4ffc-aec8-fe686f85c4a8",
+   "metadata": {},
+   "source": [
+    ":::{prf:proof}\n",
+    ":label: full-proof\n",
+    "Let $z$ be any other point in $S$ and use the fact that $S$ is a linear subspace to deduce\n",
+    "\n",
+    "```{math}\n",
+    "\\| y - z \\|^2\n",
+    "= \\| (y - \\hat y) + (\\hat y - z) \\|^2\n",
+    "= \\| y - \\hat y \\|^2  + \\| \\hat y - z  \\|^2\n",
+    "```\n",
+    "\n",
+    "Hence $\\| y - z \\| \\geq \\| y - \\hat y \\|$, which completes the proof.\n",
+    ":::"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "950ad6fc-7ae3-4eaf-a497-03aa5817cf90",
+   "metadata": {},
+   "source": [
+    "```{mermaid} \n",
+    "flowchart LR\n",
+    "  A[Jupyter Notebook] --> C\n",
+    "  B[MyST Markdown] --> C\n",
+    "  C(mystmd) --> D{AST}\n",
+    "  D <--> E[LaTeX]\n",
+    "  E --> F[PDF]\n",
+    "  D --> G[Word]\n",
+    "  D --> H[React]\n",
+    "  D --> I[HTML]\n",
+    "  D <--> J[JATS]\n",
+    "```"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.13"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}