From 6c4fe3c70c4a6b00f6aadca413d4f6af892a2492 Mon Sep 17 00:00:00 2001
From: David McArthur <david.mcarthur.2@glasgow.ac.uk>
Date: Thu, 11 Jul 2024 16:27:17 +0100
Subject: [PATCH] =?UTF-8?q?finish=20Maths2B=20tweaks=20=F0=9F=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/publish.yml                 |  62 ++++
 .../processor/fixtures/images/article.tex     |   4 +-
 .../processor/src/__test__/images.test.ts     |  28 +-
 .../processor/src/__test__/primitives.test.ts |   4 +-
 .../latexast-transforms/block-elements.ts     |  11 +-
 .../rehyperemark-handlers/index.ts            |  39 ++-
 .../rehyperemark-handlers/underline.ts        |  16 +-
 .../markdown-to-mdx/hast-transforms/index.ts  |  76 +++--
 .../processor/src/markdown-to-mdx/index.ts    |  13 +-
 .../markdown-to-mdx/mdast-transforms/index.ts |   8 +-
 .../mdast-transforms/underline.ts             |  20 ++
 packages/runtime/src/sidebar.tsx              |   5 +-
 .../styles/{uofg-lecture => }/article.scss    |   0
 packages/runtime/src/styles/index.scss        |   3 +
 .../runtime/src/styles/latex/article.scss     |  16 -
 packages/runtime/src/styles/latex/index.scss  |   1 -
 .../runtime/src/styles/latex/sidebar.scss     |  16 -
 .../runtime/src/styles/latex/typography.scss  |   4 -
 packages/runtime/src/styles/odl/index.scss    |   2 +-
 packages/runtime/src/styles/sidebar.scss      |  35 +++
 .../styles/{uofg-lecture => }/sidenote.scss   |   0
 packages/runtime/src/styles/structure.scss    |   8 +
 .../src/styles/uofg-lecture/index.scss        |   2 -
 .../src/styles/uofg-lecture/typography.scss   | 292 +++++++++---------
 packages/runtime/src/view-options/index.tsx   |   2 +-
 src/header/index.tsx                          |   4 +-
 26 files changed, 415 insertions(+), 256 deletions(-)
 create mode 100644 .github/workflows/publish.yml
 create mode 100644 packages/processor/src/markdown-to-mdx/mdast-transforms/underline.ts
 rename packages/runtime/src/styles/{uofg-lecture => }/article.scss (100%)
 delete mode 100644 packages/runtime/src/styles/latex/article.scss
 create mode 100644 packages/runtime/src/styles/sidebar.scss
 rename packages/runtime/src/styles/{uofg-lecture => }/sidenote.scss (100%)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 0000000..3a04ae8
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,62 @@
+name: 'publish'
+
+on:
+  push:
+    branches:
+      - main
+
+# This workflow will trigger on each push to the `release` branch to create or update a GitHub release, build your app, and upload the artifacts to the release.
+
+jobs:
+  publish-tauri:
+    permissions:
+      contents: write
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: 'macos-latest' # for Arm based macs (M1 and above).
+            args: '--target aarch64-apple-darwin'
+          - platform: 'macos-latest' # for Intel based macs.
+            args: '--target x86_64-apple-darwin'
+          - platform: 'ubuntu-20.04' # for Tauri v1 you could replace this with ubuntu-20.04.
+            args: ''
+          - platform: 'windows-latest'
+            args: ''
+
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          # Those targets are only used on macos runners so it's in an `if` to slightly speed up windows and linux builds.
+          targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
+
+      - name: install dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-20.04' # This must match the platform value defined above.
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
+        # webkitgtk 4.0 is for Tauri v1 - webkitgtk 4.1 is for Tauri v2.
+        # You can remove the one that doesn't apply to your app to speed up the workflow a bit.
+
+      - name: install frontend dependencies
+        run: yarn install # change this to npm, pnpm or bun depending on which one you use.
+
+      - uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tagName: app-v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version.
+          releaseName: 'App v__VERSION__'
+          releaseBody: 'See the assets to download this version and install.'
+          releaseDraft: true
+          prerelease: false
+          args: ${{ matrix.args }}
diff --git a/packages/processor/fixtures/images/article.tex b/packages/processor/fixtures/images/article.tex
index d5078b2..21ca617 100644
--- a/packages/processor/fixtures/images/article.tex
+++ b/packages/processor/fixtures/images/article.tex
@@ -2,10 +2,12 @@
 
 \begin{document}
 
-its reflection $\begin{bmatrix}a_1\\-a_2\end{bmatrix}$.
+\begin{framed}
+This operation caries the vector.
 %
 \begin{center}\includegraphics[scale=0.55]{./figs/Ex2-2-13reflection.png}\end{center}
 %
 Observe that
+\end{framed}
 
 \end{document}
diff --git a/packages/processor/src/__test__/images.test.ts b/packages/processor/src/__test__/images.test.ts
index 1919b5f..4b45948 100644
--- a/packages/processor/src/__test__/images.test.ts
+++ b/packages/processor/src/__test__/images.test.ts
@@ -3,32 +3,20 @@ import { expect, test } from 'vitest';
 import { unindentStringAndTrim } from '../test-utils/unindent-string';
 import { testProcessor } from '../test-utils/unit-test-processor';
 
-test('parsing bug', async () => {
-  const markdown = await testProcessor.latex(`
-    \\begin{center}\\includegraphics[scale=0.55]{./figs/Ex2-2-13reflection.png}\\end{center}
-  `);
+test('parsing bug 2', async () => {
+  const markdown = await testProcessor.fixture('images/article.tex');
 
   const expectedMarkdown = unindentStringAndTrim(`
+    ::::framed
+    This operation caries the vector.
+
     :::center
     ![](./figs/Ex2-2-13reflection.png)
     :::
+
+    Observe that
+    ::::
   `);
 
   expect(markdown).toBe(expectedMarkdown);
-
-  // const html = await testProcessor.md(markdown);
-
-  // const expectedHtml = unindentStringAndTrim(`
-  //   <div class="center">
-  //     <p><img src="./figs/Ex2-2-13reflection.png" alt /></p>
-  //   </div>
-  // `);
-
-  // expect(html).toBe(expectedHtml);
-});
-
-test.only('parsing bug 2', async () => {
-  const markdown = await testProcessor.fixture('images/article.tex');
-
-  console.log(markdown);
 });
diff --git a/packages/processor/src/__test__/primitives.test.ts b/packages/processor/src/__test__/primitives.test.ts
index 42ab25f..4cf42ec 100644
--- a/packages/processor/src/__test__/primitives.test.ts
+++ b/packages/processor/src/__test__/primitives.test.ts
@@ -23,7 +23,7 @@ test('parsing bug', async () => {
 
     *Example 2.1*
 
-    Example 2.1
+    :underline[Example 2.1]
   `);
 
   expect(markdown).toBe(expectedMarkdown);
@@ -36,7 +36,7 @@ test('parsing bug', async () => {
     <p><strong>Example 2.1</strong></p>
     <p><em>Example 2.1</em></p>
     <p><em>Example 2.1</em></p>
-    <p>Example 2.1</p>
+    <p><u>Example 2.1</u></p>
   `);
 
   expect(html).toBe(expectedHtml);
diff --git a/packages/processor/src/latex-to-markdown/latexast-transforms/block-elements.ts b/packages/processor/src/latex-to-markdown/latexast-transforms/block-elements.ts
index 0689e7e..b64933a 100644
--- a/packages/processor/src/latex-to-markdown/latexast-transforms/block-elements.ts
+++ b/packages/processor/src/latex-to-markdown/latexast-transforms/block-elements.ts
@@ -40,7 +40,12 @@ export function insertParbreaksAroundBlockElements() {
 }
 
 function shouldGetParbreaks(node: Node | Argument) {
-  return isDisplayMath(node) || isEnumerate(node) || isItemize(node);
+  return (
+    isDisplayMath(node) ||
+    isEnumerate(node) ||
+    isItemize(node) ||
+    isCenter(node)
+  );
 }
 
 function isDisplayMath(node: Node | Argument) {
@@ -55,6 +60,10 @@ function isItemize(node: Node | Argument) {
   return node.type === 'environment' && node.env === 'itemize';
 }
 
+function isCenter(node: Node | Argument) {
+  return node.type === 'macro' && node.content === 'html-tag:center';
+}
+
 function isParBreak(node?: Node) {
   return node?.type === 'parbreak';
 }
diff --git a/packages/processor/src/latex-to-markdown/rehyperemark-handlers/index.ts b/packages/processor/src/latex-to-markdown/rehyperemark-handlers/index.ts
index 2c76843..1528fdd 100644
--- a/packages/processor/src/latex-to-markdown/rehyperemark-handlers/index.ts
+++ b/packages/processor/src/latex-to-markdown/rehyperemark-handlers/index.ts
@@ -14,6 +14,7 @@ import { createLabel } from './label';
 import { createReference } from './reference';
 import { createSideNote } from './sidenote';
 import { createTitle } from './title';
+import { createUnderline } from './underline';
 
 // import { createUnderline } from './underline';
 
@@ -100,6 +101,12 @@ function spanHandler(ctx: Context, state: State, node: Element) {
       state.patch(node, result);
       return result;
     }
+
+    if (className.includes('underline')) {
+      const result = createUnderline(state, node);
+      state.patch(node, result);
+      return result;
+    }
   }
 
   return state.all(node);
@@ -138,15 +145,25 @@ function divHandler(state: State, node: Element) {
   return state.all(node);
 }
 
-function centerHandler(state: State, node: Element): ContainerDirective {
-  return {
-    type: 'containerDirective',
-    name: 'center',
-    children: [
-      {
-        type: 'paragraph',
-        children: state.all(node) as PhrasingContent[],
-      },
-    ],
-  };
+function centerHandler(state: State, node: Element) {
+  return [
+    {
+      type: 'text',
+      value: '\n\n',
+    },
+    {
+      type: 'containerDirective',
+      name: 'center',
+      children: [
+        {
+          type: 'paragraph',
+          children: state.all(node) as PhrasingContent[],
+        },
+      ],
+    },
+    {
+      type: 'text',
+      value: '\n\n',
+    },
+  ];
 }
diff --git a/packages/processor/src/latex-to-markdown/rehyperemark-handlers/underline.ts b/packages/processor/src/latex-to-markdown/rehyperemark-handlers/underline.ts
index 2298e27..aa7bdfc 100644
--- a/packages/processor/src/latex-to-markdown/rehyperemark-handlers/underline.ts
+++ b/packages/processor/src/latex-to-markdown/rehyperemark-handlers/underline.ts
@@ -1,11 +1,21 @@
 import { Element } from 'hast';
 import { State } from 'hast-util-to-mdast';
 import { Text } from 'mdast';
+import { TextDirective } from 'mdast-util-directive';
 
-export function createUnderline(_state: State, node: Element): Text {
+export function createUnderline(
+  _state: State,
+  node: Element
+): TextDirective {
   const text = node.children[0] as Text;
   return {
-    type: 'text',
-    value: `<u>${text.value}</u>`,
+    type: 'textDirective',
+    name: 'underline',
+    children: [
+      {
+        type: 'text',
+        value: text.value,
+      },
+    ],
   };
 }
diff --git a/packages/processor/src/markdown-to-mdx/hast-transforms/index.ts b/packages/processor/src/markdown-to-mdx/hast-transforms/index.ts
index eb505e6..0d55db2 100644
--- a/packages/processor/src/markdown-to-mdx/hast-transforms/index.ts
+++ b/packages/processor/src/markdown-to-mdx/hast-transforms/index.ts
@@ -1,4 +1,6 @@
 import { Options } from '../options';
+import { ElementContent } from 'hast';
+import { PhrasingContent, Root } from 'mdast';
 // import { createSvg } from '../utils/icons';
 // import autolinkHeadings from 'rehype-autolink-headings';
 import mathjaxBrowser from 'rehype-mathjax/browser';
@@ -6,7 +8,7 @@ import mathjaxBrowser from 'rehype-mathjax/browser';
 import mathjaxSvg from 'rehype-mathjax/svg';
 // import rehypeRaw from 'rehype-raw';
 // import rehypeSlug from 'rehype-slug';
-import { PluggableList } from 'unified';
+import { PluggableList, unified } from 'unified';
 
 // import { visit } from 'unist-util-visit';
 import { Context } from '../context';
@@ -30,28 +32,62 @@ const mathjaxOptions = {
   },
 };
 
+function createRehypeFragmentPlugins(
+  ctx: Context,
+  options: Partial<Options> = {}
+) {
+  const plugins: PluggableList = [];
+
+  if (options.mathsAsTex) {
+    plugins.push([mathjaxBrowser, mathjaxOptions]);
+  } else {
+    plugins.push([mathjaxSvg, mathjaxOptions]);
+  }
+
+  return plugins;
+}
+
 export function createRehypePlugins(ctx: Context, options: Options) {
-  const plugins: PluggableList = [
-    [options.mathsAsTex ? mathjaxBrowser : mathjaxSvg, mathjaxOptions],
-    // () => (tree) => {
-    //   console.dir(tree, { depth: null });
-    // },
-
-    // rehypeRaw,
-    // rehypeSlug,
-    // [
-    //   autolinkHeadings,
-    //   // {
-    //   //   content: createSvg('link-icon') as any,
-    //   //   properties: { className: 'link' },
-    //   // },
-    // ],
-    // () => (tree) => {
-    //   console.log(JSON.stringify(tree, null, 2));
-    // },
-  ];
+  const plugins = createRehypeFragmentPlugins(ctx, options);
+
+  // plugins.push(
+  //   () => (tree) => {
+  //     console.dir(tree, { depth: null });
+  //   },
+
+  //   rehypeRaw,
+  //   rehypeSlug,
+  //   [
+  //     autolinkHeadings,
+  //     // {
+  //     //   content: createSvg('link-icon') as any,
+  //     //   properties: { className: 'link' },
+  //     // },
+  //   ],
+  //   () => (tree) => {
+  //     console.log(JSON.stringify(tree, null, 2));
+  //   },
+  // );
+
   if (!options.noWrapper) {
     plugins.push([createWrapper, ctx]);
   }
   return plugins;
 }
+
+export async function toHast(
+  children: PhrasingContent[],
+  ctx: Context,
+  options?: Partial<Options>
+) {
+  const processor = unified().use(
+    createRehypeFragmentPlugins(ctx, options)
+  );
+
+  const root: Root = {
+    type: 'root',
+    children,
+  };
+  const hast = (await processor.run(root)) as Root;
+  return hast.children as ElementContent[];
+}
diff --git a/packages/processor/src/markdown-to-mdx/index.ts b/packages/processor/src/markdown-to-mdx/index.ts
index a6b5495..f00ae6e 100644
--- a/packages/processor/src/markdown-to-mdx/index.ts
+++ b/packages/processor/src/markdown-to-mdx/index.ts
@@ -33,18 +33,19 @@ const processorOptions: ProcessorOptions = {
 
 export async function markdownToJs(
   markdown: string,
-  options: Partial<Options> = {}
+  _options: Partial<Options> = {}
 ) {
   const ctx = createContext();
-  const mdast = await markdownToMdast(markdown, ctx);
+  const options = {
+    ...defaultOptions,
+    ..._options,
+  };
+  const mdast = await markdownToMdast(markdown, ctx, options);
   // console.dir(mdast, { depth: null });
 
   const processor = createProcessor({
     ...processorOptions,
-    rehypePlugins: createRehypePlugins(ctx, {
-      ...defaultOptions,
-      ...options,
-    }),
+    rehypePlugins: createRehypePlugins(ctx, options),
   });
 
   // @ts-expect-error: mdast is not of type Program
diff --git a/packages/processor/src/markdown-to-mdx/mdast-transforms/index.ts b/packages/processor/src/markdown-to-mdx/mdast-transforms/index.ts
index 1383184..d91c3b9 100644
--- a/packages/processor/src/markdown-to-mdx/mdast-transforms/index.ts
+++ b/packages/processor/src/markdown-to-mdx/mdast-transforms/index.ts
@@ -11,8 +11,13 @@ import { Context } from '../context';
 import { center } from './center';
 import { extractFrontmatter } from './extract-frontmatter';
 import { fancyTitle } from './fancy-title';
+import { underline } from './underline';
 
-export async function markdownToMdast(markdown: string, ctx: Context) {
+export async function markdownToMdast(
+  markdown: string,
+  ctx: Context
+  // options: Options
+) {
   const processor = createRemarkProcessor([
     [extractFrontmatter, ctx],
     fancyTitle,
@@ -22,6 +27,7 @@ export async function markdownToMdast(markdown: string, ctx: Context) {
     [boxouts, ctx],
     center,
     [sidenotes, ctx],
+    underline,
 
     // should be last
     escapeCharsForMdx,
diff --git a/packages/processor/src/markdown-to-mdx/mdast-transforms/underline.ts b/packages/processor/src/markdown-to-mdx/mdast-transforms/underline.ts
new file mode 100644
index 0000000..626a944
--- /dev/null
+++ b/packages/processor/src/markdown-to-mdx/mdast-transforms/underline.ts
@@ -0,0 +1,20 @@
+import { Root } from 'mdast';
+import { TextDirective } from 'mdast-util-directive';
+import { visit } from 'unist-util-visit';
+
+export function underline() {
+  return async (tree: Root) => {
+    visit(tree, 'textDirective', (node: TextDirective) => {
+      const name = node.name.trim();
+      if (name === 'underline') {
+        node.data = {
+          ...(node.data || {}),
+          hName: 'u',
+          hProperties: {
+            ...(node.data?.hProperties || {}),
+          },
+        };
+      }
+    });
+  };
+}
diff --git a/packages/runtime/src/sidebar.tsx b/packages/runtime/src/sidebar.tsx
index 95b8770..190f4f3 100644
--- a/packages/runtime/src/sidebar.tsx
+++ b/packages/runtime/src/sidebar.tsx
@@ -9,8 +9,7 @@ import { runOptions } from '@isos/processor';
 import { useLocalStorage } from '@isos/use-local-storage';
 
 import { Hamburger } from './components/hamburger';
-
-// import { Logo } from './components/logo';
+import { Logo } from './components/logo';
 
 type Props = {
   jsString: string;
@@ -72,7 +71,7 @@ const ViewOptionsToggle = styled.div`
   padding: 0.3rem 0.8rem 0.25rem;
   font-size: 0.8rem;
   line-height: 1.5rem;
-  font-weight: bold;
+  /* font-weight: bold; */
   color: rgba(var(--primaryColor), 1);
   background: rgba(var(--primaryColor), 0.1);
   border-radius: 0.2rem;
diff --git a/packages/runtime/src/styles/uofg-lecture/article.scss b/packages/runtime/src/styles/article.scss
similarity index 100%
rename from packages/runtime/src/styles/uofg-lecture/article.scss
rename to packages/runtime/src/styles/article.scss
diff --git a/packages/runtime/src/styles/index.scss b/packages/runtime/src/styles/index.scss
index 224a0a1..6258e6b 100644
--- a/packages/runtime/src/styles/index.scss
+++ b/packages/runtime/src/styles/index.scss
@@ -16,6 +16,9 @@
 
 @import './variables.scss';
 @import './structure.scss';
+@import './article.scss';
+@import './sidebar.scss';
+@import './sidenote.scss';
 @import './scrollbars.scss';
 
 // @import './odl/index.scss';
diff --git a/packages/runtime/src/styles/latex/article.scss b/packages/runtime/src/styles/latex/article.scss
deleted file mode 100644
index 3d23e33..0000000
--- a/packages/runtime/src/styles/latex/article.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-article {
-  position: relative;
-  padding: 2em 0 5em;
-  margin: 0 auto;
-
-  width: calc(60% * var(--lineWidth, 1));
-  font-size: calc(1rem * var(--fontSize, 1));
-  line-height: calc(1.5 * var(--lineSpacing, 1));
-  letter-spacing: calc(1em * var(--letterSpacing, 0));
-}
-
-@media (max-width: 1000px) {
-  article {
-    width: calc(85% * var(--lineWidth, 1));
-  }
-}
diff --git a/packages/runtime/src/styles/latex/index.scss b/packages/runtime/src/styles/latex/index.scss
index 66afa7b..6c3d9ea 100644
--- a/packages/runtime/src/styles/latex/index.scss
+++ b/packages/runtime/src/styles/latex/index.scss
@@ -5,5 +5,4 @@
 }
 
 @import './typography.scss';
-@import './article.scss';
 @import './sidebar.scss';
diff --git a/packages/runtime/src/styles/latex/sidebar.scss b/packages/runtime/src/styles/latex/sidebar.scss
index 452e115..4ab81fb 100644
--- a/packages/runtime/src/styles/latex/sidebar.scss
+++ b/packages/runtime/src/styles/latex/sidebar.scss
@@ -2,29 +2,13 @@
   fill: black;
 }
 
-.view-options-btn {
-  margin-top: 2rem;
-}
-
 nav {
-  padding: 2rem 2rem 0;
-
   li {
-    padding: 0 0 0.3rem 0;
-    list-style: none;
     font: normal 0.9rem/1.5 'ComputerModern';
-
-    p {
-      margin: 0;
-    }
   }
 
   & > ul > li {
-    padding-bottom: 1rem;
     font: normal 0.9rem/1.5 'ComputerModernBold';
-    p {
-      padding-bottom: 0.5rem;
-    }
   }
 
   & > ul > li li a {
diff --git a/packages/runtime/src/styles/latex/typography.scss b/packages/runtime/src/styles/latex/typography.scss
index f58577c..28fd8a5 100644
--- a/packages/runtime/src/styles/latex/typography.scss
+++ b/packages/runtime/src/styles/latex/typography.scss
@@ -93,10 +93,6 @@ p {
   margin-bottom: 1em;
 }
 
-.center {
-  text-align: center;
-}
-
 @counter-style latex-style-ol {
   symbols: '1' '2' '4' '5' '6' '7' '8' '9';
   prefix: '(';
diff --git a/packages/runtime/src/styles/odl/index.scss b/packages/runtime/src/styles/odl/index.scss
index 41fa4db..a65378f 100644
--- a/packages/runtime/src/styles/odl/index.scss
+++ b/packages/runtime/src/styles/odl/index.scss
@@ -22,4 +22,4 @@
 @import './gitgraph.scss';
 @import './text-file.scss';
 @import './browser-window.scss';
-@import './sidenotes.scss';
+// @import './sidenotes.scss';
diff --git a/packages/runtime/src/styles/sidebar.scss b/packages/runtime/src/styles/sidebar.scss
new file mode 100644
index 0000000..308158f
--- /dev/null
+++ b/packages/runtime/src/styles/sidebar.scss
@@ -0,0 +1,35 @@
+// .hamburger {
+//   fill: black;
+// }
+
+.view-options-btn {
+  margin-top: 2rem;
+}
+
+nav {
+  padding: 2rem 2rem 0;
+
+  ul {
+    li {
+      padding: 0 0 0.3rem 0;
+      list-style: none;
+      // font: normal 0.9rem/1.5 'ComputerModern';
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+
+  & > ul > li {
+    padding-bottom: 1rem;
+    // font: normal 0.9rem/1.5 'ComputerModernBold';
+    p {
+      padding-bottom: 0.5rem;
+    }
+  }
+
+  // & > ul > li li a {
+  //   color: $slate;
+  // }
+}
diff --git a/packages/runtime/src/styles/uofg-lecture/sidenote.scss b/packages/runtime/src/styles/sidenote.scss
similarity index 100%
rename from packages/runtime/src/styles/uofg-lecture/sidenote.scss
rename to packages/runtime/src/styles/sidenote.scss
diff --git a/packages/runtime/src/styles/structure.scss b/packages/runtime/src/styles/structure.scss
index d48d691..648c624 100644
--- a/packages/runtime/src/styles/structure.scss
+++ b/packages/runtime/src/styles/structure.scss
@@ -59,3 +59,11 @@ aside {
     padding-top: 2rem;
   }
 }
+
+.center {
+  text-align: center;
+}
+
+article img {
+  max-width: 100%;
+}
diff --git a/packages/runtime/src/styles/uofg-lecture/index.scss b/packages/runtime/src/styles/uofg-lecture/index.scss
index cfbd18f..66cfb46 100644
--- a/packages/runtime/src/styles/uofg-lecture/index.scss
+++ b/packages/runtime/src/styles/uofg-lecture/index.scss
@@ -5,6 +5,4 @@
 }
 
 @import './typography.scss';
-@import './article.scss';
-@import './sidenote.scss';
 // @import './sidebar.scss';
diff --git a/packages/runtime/src/styles/uofg-lecture/typography.scss b/packages/runtime/src/styles/uofg-lecture/typography.scss
index 08d6ca7..69b2497 100644
--- a/packages/runtime/src/styles/uofg-lecture/typography.scss
+++ b/packages/runtime/src/styles/uofg-lecture/typography.scss
@@ -38,27 +38,6 @@ body {
   font-style: normal;
 }
 
-strong,
-.boxout .type,
-h1 .part .number {
-  font-family: 'LinuxLibertineBold', arial, sans-serif;
-  font-weight: 700;
-  font-style: normal;
-}
-
-em {
-  font-family: 'LinuxLibertineItalic', arial, sans-serif;
-  font-weight: 400;
-  font-style: italic;
-}
-
-strong em,
-em strong {
-  font-family: 'LinuxLibertineBoldItalic', arial, sans-serif;
-  font-weight: 700;
-  font-style: italic;
-}
-
 a {
   text-decoration: none;
   color: $burgundy;
@@ -67,157 +46,180 @@ a {
   }
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: normal;
-}
+article {
+  strong,
+  .boxout .type,
+  h1 .part .number {
+    font-family: 'LinuxLibertineBold', arial, sans-serif;
+    font-weight: 700;
+    font-style: normal;
+  }
 
-h1 {
-  font-size: 2rem;
-  border: solid #4ec0e3;
-  border-width: 3px 0 3px 3px;
-  margin-left: -0.7em;
-  margin-bottom: 1.5em;
-  padding: 0.2em 0 0.4em 1em;
-  border-radius: 1.1em 0 0 1.1em;
-  display: flex;
-  justify-content: space-between;
-
-  .wrapper.has-sidenotes & {
-    margin-right: -22vw;
+  em {
+    font-family: 'LinuxLibertineItalic', arial, sans-serif;
+    font-weight: 400;
+    font-style: italic;
   }
 
-  .part {
-    padding-right: 0.5em;
-    .label {
-      // homemade small-caps
-      display: inline-block;
-      text-transform: uppercase;
-      font-size: 0.8rem;
-      transform: translateX(-20px) rotate(-90deg);
-      &::first-letter {
-        font-size: 1rem;
-      }
-    }
-    .number {
-      display: inline-block;
-      transform: translate(5px, -5px) scale(4.7);
-      $colour: white;
-      $size: 1px;
-      text-shadow: (-$size) (-$size) 0 $colour, $size (-$size) 0 $colour,
-        (-$size) $size 0 $colour, $size $size 0 $colour;
-    }
+  strong em,
+  em strong {
+    font-family: 'LinuxLibertineBoldItalic', arial, sans-serif;
+    font-weight: 700;
+    font-style: italic;
   }
-}
 
-h2 {
-  position: relative;
-  background: #b9e1ee;
-  padding: 0 0 0.2em 1.5em;
-  font-size: 1rem;
-  margin: 1.5em 0;
-
-  &:before {
-    content: '';
-    position: absolute;
-    left: -1.5em;
-    top: 0;
-    bottom: 0;
-    width: 2.5em;
-    background: #4ec0e3;
-    border-radius: 1em;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: normal;
   }
-}
 
-p {
-  text-indent: 1em;
-  margin-bottom: 1em;
-}
+  h1 {
+    font-size: 2rem;
+    border: solid #4ec0e3;
+    border-width: 3px 0 3px 3px;
+    margin-left: -0.7em;
+    margin-bottom: 1.5em;
+    padding: 0.2em 0 0.4em 1em;
+    border-radius: 1.1em 0 0 1.1em;
+    display: flex;
+    justify-content: space-between;
+
+    .wrapper.has-sidenotes & {
+      margin-right: -22vw;
+    }
 
-ul,
-ol {
-  li {
-    margin-left: 1.5em;
-    p {
-      text-indent: 0;
-      margin-bottom: 0.3em;
+    .part {
+      padding-right: 0.5em;
+      .label {
+        // homemade small-caps
+        display: inline-block;
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        transform: translateX(-20px) rotate(-90deg);
+        &::first-letter {
+          font-size: 1rem;
+        }
+      }
+      .number {
+        display: inline-block;
+        transform: translate(5px, -5px) scale(4.7);
+        $colour: white;
+        $size: 1px;
+        text-shadow: (-$size) (-$size) 0 $colour, $size (-$size) 0 $colour,
+          (-$size) $size 0 $colour, $size $size 0 $colour;
+      }
     }
   }
-}
 
-ul {
-  li li {
-    list-style-type: none;
-    margin-left: 1em;
+  h2 {
+    position: relative;
+    background: #b9e1ee;
+    padding: 0 0 0.2em 1.5em;
+    font-size: 1rem;
+    margin: 1.5em 0;
+
     &:before {
-      content: '–';
-      float: left;
-    }
-    p {
-      margin-left: 1em;
+      content: '';
+      position: absolute;
+      left: -1.5em;
+      top: 0;
+      bottom: 0;
+      width: 2.5em;
+      background: #4ec0e3;
+      border-radius: 1em;
     }
   }
-}
-
-@counter-style uofg-lecture-style-ol {
-  system: alphabetic;
-  symbols: a b c d e f g h;
-  prefix: '(';
-  suffix: ')';
-}
 
-ol li {
-  list-style: uofg-lecture-style-ol;
-}
+  p {
+    text-indent: 1em;
+    margin-bottom: 1em;
+  }
 
-// ol {
-//   li {
-//     list-style: lower-alpha;
-//   }
-// }
+  ul,
+  ol {
+    li {
+      margin-left: 1.5em;
+      p {
+        text-indent: 0;
+        margin-bottom: 0.3em;
+      }
+    }
+  }
 
-.framed {
-  border: 1px solid black;
-  padding: 0.5em 1em 1em;
-  margin-bottom: 1em;
-  p {
-    text-indent: 0;
-    &:last-child {
-      margin-bottom: 0;
+  ul {
+    li li {
+      list-style-type: none;
+      margin-left: 1em;
+      &:before {
+        content: '–';
+        float: left;
+      }
+      p {
+        margin-left: 1em;
+      }
     }
   }
-}
 
-.boxout {
-  &.proposition,
-  &.lemma {
-    font-style: italic;
+  @counter-style uofg-lecture-style-ol {
+    system: alphabetic;
+    symbols: a b c d e f g h;
+    prefix: '(';
+    suffix: ')';
+  }
+
+  ol li {
+    list-style: uofg-lecture-style-ol;
   }
 
-  // &.theorem {
-  //   .count {
-  //     display: none;
+  // ol {
+  //   li {
+  //     list-style: lower-alpha;
   //   }
   // }
 
-  .type {
-    text-indent: 0;
-    display: inline-block;
-    padding-right: 0.3em;
+  .framed {
+    border: 1px solid black;
+    padding: 0.5em 1em 1em;
+    margin-bottom: 1em;
+    p {
+      text-indent: 0;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
-  &.proof,
-  &.solution {
-    padding-right: 1rem;
-    .proof-box {
-      float: right;
-      font-size: 1.4em;
-      position: relative;
-      bottom: 0.15em;
+  .boxout {
+    &.proposition,
+    &.lemma {
+      font-style: italic;
+    }
+
+    // &.theorem {
+    //   .count {
+    //     display: none;
+    //   }
+    // }
+
+    .type {
+      text-indent: 0;
+      display: inline-block;
+      padding-right: 0.3em;
+    }
+
+    &.proof,
+    &.solution {
+      padding-right: 1rem;
+      .proof-box {
+        float: right;
+        font-size: 1.4em;
+        position: relative;
+        bottom: 0.15em;
+      }
     }
   }
 }
diff --git a/packages/runtime/src/view-options/index.tsx b/packages/runtime/src/view-options/index.tsx
index 63517fb..2f59435 100644
--- a/packages/runtime/src/view-options/index.tsx
+++ b/packages/runtime/src/view-options/index.tsx
@@ -21,7 +21,7 @@ const Wrapper = styled.div`
 const Title = styled.h3`
   margin: 2rem 0 0 0;
   font-size: 1rem;
-  font-weight: 600;
+  /* font-weight: 600; */
   line-height: 1.4;
   color: rgb(var(--primaryColor));
 `;
diff --git a/src/header/index.tsx b/src/header/index.tsx
index b3892e0..d408066 100644
--- a/src/header/index.tsx
+++ b/src/header/index.tsx
@@ -4,7 +4,7 @@ import { OpenFileButton } from './open-file-button';
 import { SaveFileButton } from './save-file-button';
 
 type Props = {
-  filePath: string | null;
+  filePath: string;
   loading: boolean;
   handleProcessFile: (filePath: string) => unknown;
   handleExportFile: (saveFilePath: string) => unknown;
@@ -19,7 +19,7 @@ export function Header({
   return (
     <Wrapper>
       <OpenFileButton onChange={handleProcessFile} />
-      {filePath !== null && (
+      {filePath !== '' && (
         <>
           <FilePath>
             {filePath}