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>

Author: agoose77

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-run.spec.ts-snapshots/File-Run-View-Markdown-file-and-render-result-1-linux.png

@@ -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]
+```