refactor(mana): deprecate remarkMana.client

markdown/partials/sandbox.md

@@ -54,10 +54,18 @@ faithful as can be.
 You can inline mana symbols _almost_ everywhere.
 
 ```md
-{W} {U} {B} {R} {G}
+{W} {U} {B} {R} {G} {WP} {UP} {BP} {RP} {GP} {2W} {2U} {2B} {2R} {2G}
+
+{WU} {UB} {BR} {RG} {GW} {WB} {UR} {BG} {RW} {GU}
+
+{0} {1} {2} … {20} {S} {C} {X} {Y} {Z}
 ```
 
-{W} {U} {B} {R} {G}
+{W} {U} {B} {R} {G} {WP} {UP} {BP} {RP} {GP} {2W} {2U} {2B} {2R} {2G}
+
+{WU} {UB} {BR} {RG} {GW} {WB} {UR} {BG} {RW} {GU}
+
+{0} {1} {2} … {20} {S} {C} {X} {Y} {Z}
 
 When used collectively, for instance to indicate the color identity of an
 archetype, use the same order as found on the back of a _Magic: the Gathering_

src/components/Mana/Mana.tsx

@@ -9,8 +9,9 @@ type Props = {
 
 export const Mana: FunctionComponent<Props> = ({ pattern }) => (
   <Box
-    component="i"
-    className={`ms ms-cost ms-${pattern}`}
-    sx={{ fontSize: '.8em', mx: 0.125, verticalAlign: 'initial' }}
+    aria-label={`Mana symbol: "${pattern}"`}
+    component="span"
+    className={`ms ms-cost ms-${pattern.toLowerCase()}`}
+    sx={{ fontSize: '.9em', mx: 0.25, verticalAlign: 'text-bottom' }}
   />
 );

src/components/Remark/Remark.tsx

@@ -18,7 +18,6 @@ import { remarkAccordion } from '@/tools/remark/remarkAccordion.client';
 import { remarkBase } from '@/tools/remark/remarkBase.client';
 import { remarkCard } from '@/tools/remark/remarkCard.client';
 import { remarkDecklist } from '@/tools/remark/remarkDecklist.client';
-import { remarkMana } from '@/tools/remark/remarkMana.client';
 import { remarkRow } from '@/tools/remark/remarkRow.client';
 
 type Props = {
@@ -47,7 +46,6 @@ export const Remark: FunctionComponent<Props> = ({
       [remarkAccordion, { decklists }],
       remarkCard,
       [remarkDecklist, { decklists }],
-      remarkMana,
       [remarkRow, { scries: markdown.scries }],
     ],
   } as const satisfies Record<string, PluggableList>;

src/components/Remark/renderers/RemarkMana.tsx

@@ -1,16 +1,18 @@
-import { type FunctionComponent } from 'react';
+import { type FunctionComponent, type PropsWithChildren } from 'react';
 import { type ExtraProps } from 'react-markdown';
 
 import { Mana } from '@/components/Mana/Mana';
 
-type Props = ExtraProps & {
-  pattern?: string;
-};
+type Props = ExtraProps & PropsWithChildren & { pattern?: string };
 
-export const RemarkMana: FunctionComponent<Props> = ({ node, pattern }) => {
+export const RemarkMana: FunctionComponent<Props> = ({
+  children,
+  node,
+  pattern,
+}) => {
   if (!pattern) {
     console.error('Missing pattern in mana', node);
-    return null;
+    return children;
   }
-  return <Mana pattern={pattern.toLowerCase()} />;
+  return <Mana pattern={pattern} />;
 };

src/tools/mana/constants.ts

@@ -2,14 +2,14 @@ const MANA = '[WUBRG]';
 
 const PAIRS = [
   '(?:WU)',
-  '(?:WB)',
   '(?:UB)',
-  '(?:UR)',
   '(?:BR)',
-  '(?:BG)',
   '(?:RG)',
-  '(?:RW)',
   '(?:GW)',
+  '(?:WB)',
+  '(?:UR)',
+  '(?:BG)',
+  '(?:RW)',
   '(?:GU)',
 ].join('|');
 

src/tools/remark/remarkMana.server.ts

@@ -10,6 +10,7 @@ export const remarkMana: Plugin = () => async (tree) => {
     MANA_RE,
     (_match, value) =>
       ({
+        attributes: { pattern: value },
         children: [{ type: 'text', value }],
         name: 'mana',
         type: 'textDirective',

src/tools/remark/remarkScries.server.ts

@@ -21,6 +21,7 @@ export const remarkScries: Plugin = () => async (tree, file) => {
     const directive = node as ContainerDirective;
     const text = select('text', directive) as Text | undefined;
     if (!text) {
+      // TODO Use file.fail() instead?
       throw new Error(`Missing content for directive "${directive.name}"`);
     }
     text.value.split('\n').forEach((query) => {