refactor: move katex component out of lib to reduce bundle

src/content/blogpost/radix/components/index.ts

@@ -1,3 +1,4 @@
 export { default as FormNumerals } from "./form-numerals/FormNumerals.svelte";
 export { default as Number } from "./number/Number.svelte";
 export { default as Numerals } from "./numerals/Numerals.svelte";
+export { default as MathExp } from "./math.svelte";

src/content/blogpost/radix/interactive/challenge/Progress.svelte

@@ -5,8 +5,8 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext } from "svelte";
 	import { fade } from "svelte/transition";
-	import { Button, MathExp } from "@components";
-	import { Number } from "../../components";
+	import { Button } from "@components";
+	import { Number, MathExp } from "../../components";
 	import Keyboard from "./Keyboard.svelte";
 	import { randInt } from "@utils/random";
 	import { radix } from "@ericrovell/radix";

src/content/blogpost/radix/interactive/decimal-conversion-stages/DecimalConversionStages.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { getContext } from "svelte";
-	import { MathExp } from "@components";
-	import { FormNumerals } from "../../components";
+	import { FormNumerals, MathExp } from "../../components";
 	import { getConversionStages, getRanks } from "./decimal-conversion-stages.helpers";
 	import { buildMathDifferences, buildMathPowerInequalities, buildMathRanks } from "./decimal-conversion-stages.katex";
 	import styles from "./decimal-conversion-stages.module.css";

src/content/blogpost/radix/interactive/number-into-decimal/NumberIntoDecimal.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { getContext } from "svelte";
 	import { radix } from "@ericrovell/radix";
-	import { MathExp } from "@components";
-	import { FormNumerals, Number, Numerals } from "../../components";
+	import { FormNumerals, Number, Numerals, MathExp } from "../../components";
 	import { decoder } from "../../util";
 	import styles from "./number-into-decimal.module.css";
 

src/content/blogpost/where-do-aperture-numbers-come-from/components/f-numbers/FNumber.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script lang="ts">
-	import { MathExp } from "@components";
+	import MathExp from "../math.svelte";
 
 	export let type: FStop = "f-number";
 	export let fstop = 0;

src/content/blogpost/where-do-aperture-numbers-come-from/components/math.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import katex from "katex";
+
+	export let math: string;
+	export let inline = false;
+
+	$: rendered = katex.renderToString(math, {
+		throwOnError: false,
+		displayMode: inline
+	});
+</script>
+
+{@html rendered}

src/lib/components/index.ts

@@ -15,7 +15,6 @@ export { InputNumber } from "./input-number";
 export { InputText } from "./input-text";
 export { InputSelect } from "./input-select";
 export { Link } from "./link";
-export { MathExp } from "./math";
 export * as Menu from "./menu";
 export { MenuIndicator } from "./menu-indicator";
 export { Meta, PageMeta, type MetaProps } from "./meta";