🧑🏻‍🔬 Slight improvements to chemical formulas (#128)

.changeset/large-geese-sparkle.md

@@ -0,0 +1,5 @@
+---
+'myst-demo': patch
+---
+
+Update types!

.changeset/lovely-cups-juggle.md

@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Update chemical formula parsing and presentation

.changeset/serious-weeks-thank.md

@@ -0,0 +1,5 @@
+---
+'@myst-theme/book': patch
+---
+
+Remove console.log

packages/myst-demo/src/index.tsx

@@ -171,7 +171,7 @@ export function MySTRenderer({
   column?: boolean;
   fullscreen?: boolean;
   captureTab?: boolean;
-  TitleBlock?: (props: { frontmatter: PageFrontmatter }) => JSX.Element;
+  TitleBlock?: (props: { frontmatter: PageFrontmatter }) => JSX.Element | null;
   numbering?: any;
   className?: string;
 }) {

packages/myst-to-react/src/extensions/chemicalFormula.tsx

@@ -6,8 +6,9 @@ import type { NodeRenderer } from '@myst-theme/providers';
  * @returns ['H', '2', '0']
  */
 function parseFormula(formula?: string) {
-  return [...(formula ?? '')].reduce((acc, letter) => {
+  return [...(formula ?? '')].reduce((acc, current) => {
     const last = acc.pop();
+    const letter = current === '+' ? '⁺' : current === '-' ? '⁻' : current;
     const isNumber = letter.match(/[0-9]/);
     const lastIsNumber = last?.match(/[0-9]/);
     if (isNumber) {
@@ -26,12 +27,12 @@ function parseFormula(formula?: string) {
 export const ChemicalFormula: NodeRenderer = (node) => {
   const parts = parseFormula(node.value);
   return (
-    <code key={node.key} className="text-inherit">
+    <span key={node.key} className="text-inherit" aria-roledescription="Chemical Formula">
       {parts.map((letter, index) => {
         if (letter.match(/[0-9]/)) return <sub key={index}>{letter}</sub>;
         return <span key={index}>{letter}</span>;
       })}
-    </code>
+    </span>
   );
 };
 

themes/book/app/utils/loaders.server.ts

@@ -79,7 +79,6 @@ export async function getPage(
 
 export async function getObjectsInv(): Promise<Buffer | null> {
   const url = updateLink('/objects.inv');
-  console.log(url);
   const response = await fetch(url).catch(() => null);
   if (!response || response.status === 404) return null;
   return response.buffer();