fixed all broken examples

Author: spidunno

docs/app/guides/display/images/page.tsx

@@ -5,6 +5,8 @@ import ImageExample from "guide-examples/display/images/ImageExample"
 import ImageAnchorExample from "guide-examples/display/images/ImageAnchorExample"
 import type { Metadata } from "next"
 
+import mafsImage from "../../../../components/guide-examples/display/images/mafs.png"
+
 export const metadata: Metadata = {
   title: "Images",
 }
@@ -17,7 +19,12 @@ function Images() {
         quality of life improvements tacked on (see below).
       </p>
 
-      <CodeAndExample example={ImageExample} />
+      <CodeAndExample
+        example={ImageExample}
+        extraImports={{
+          "./mafs.png": mafsImage,
+        }}
+      />
 
       <PropTable of={"Image"} />
 
@@ -48,7 +55,12 @@ function Images() {
         the image.
       </p>
 
-      <CodeAndExample example={ImageAnchorExample} />
+      <CodeAndExample
+        example={ImageAnchorExample}
+        extraImports={{
+          "./mafs.png": mafsImage,
+        }}
+      />
     </>
   )
 }

docs/app/guides/examples/bezier-curves/page.tsx

@@ -3,6 +3,8 @@ import BezierCurves from "guide-examples/examples/BezierCurves"
 import Link from "next/link"
 import type { Metadata } from "next"
 
+import * as easingFunctions from "js-easing-functions"
+
 export const metadata: Metadata = {
   title: "Bezier curves",
 }
@@ -15,7 +17,12 @@ export default function BezierCurvesPage() {
         <Link href="https://www.youtube.com/watch?v=aVwxzDHniEw">video on Bézier curves</Link>.
       </p>
 
-      <CodeAndExample example={BezierCurves} />
+      <CodeAndExample
+        example={BezierCurves}
+        extraImports={{
+          "js-easing-functions": easingFunctions,
+        }}
+      />
     </>
   )
 }

docs/components/CodeAndExample.tsx

@@ -28,44 +28,25 @@ interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   example: any
   collapsible?: boolean
+  extraImports?: Record<string, any>
 }
 
-function CodeAndExample({ collapsible: collapsibleProp = true, example }: Props) {
+function CodeAndExample({ collapsible: collapsibleProp = true, extraImports = {}, example }: Props) {
   const typedExample = example as {
     $component: React.ComponentType
     $source: string
     $highlightedSource: React.ReactNode
-    $width: number
-    $height: number
   }
 
   const runnerScope = React.useMemo(
     () => ({
       import: {
         react: React,
         mafs: {
-          ...mafs,
-          Mafs: (props: mafs.MafsProps) => (
-            <mafs.Mafs
-              {...props}
-              width={
-                props.width
-                  ? props.width
-                  : isNaN(typedExample.$width)
-                    ? undefined
-                    : typedExample.$width
-              }
-              height={
-                props.height
-                  ? props.height
-                  : isNaN(typedExample.$height)
-                    ? undefined
-                    : typedExample.$height
-              }
-            />
-          ),
+          ...mafs
         },
-        lodash
+        lodash,
+        ...extraImports
       },
     }),
     [],
@@ -95,13 +76,13 @@ function CodeAndExample({ collapsible: collapsibleProp = true, example }: Props)
 
   return (
     <div className="w-auto sm:text-base text-sm -m-6 md:m-0 dark:shadow-xl">
-      <div className={`unround-mafs z-10 relative`} style={{ minHeight: isNaN(typedExample.$height) ? 300 : typedExample.$height }}>
+      <div className={`unround-mafs z-10 relative`} style={{ minHeight: 100 }}>
         {!clientLoaded ? <Component /> : element}
         <div
-          className="w-full h-full absolute top-0 left-0 bg-black/50 p-12"
+          className="w-full h-full absolute top-0 left-0 bg-black/50 p-6"
           style={{ display: error ? "block" : "none" }}
         >
-          <div className="w-full h-full bg-gray-900 dark:bg-black text-gray-100 rounded-lg border-[1px] border-red-300 p-4">
+          <div className="w-full h-full overflow-y-auto bg-gray-900 dark:bg-black text-gray-100 rounded-lg border-[1px] border-red-300 p-4">
             <h4 className="text-gray-100">An error occured in your code!</h4>
             <hr className="my-2" />
             <code>{error}</code>

docs/components/RiemannHomepage.tsx

@@ -11,7 +11,7 @@ import {
   ConstraintFunction,
 } from "mafs"
 
-import range from "lodash/range"
+import { range } from "lodash"
 import { easeInOutCubic } from "js-easing-functions"
 
 interface Partition {

docs/components/guide-examples/SnapPoint.tsx

@@ -2,7 +2,7 @@
 
 // prettier-ignore
 import { Mafs, Transform, Vector, Coordinates, useMovablePoint, Circle, Polygon, vec, Theme } from "mafs"
-import clamp from "lodash/clamp"
+import { clamp } from "lodash"
 
 export default function SnapPoint() {
   return (

docs/components/guide-examples/display/DynamicMovablePoints.tsx

@@ -2,7 +2,7 @@
 
 // prettier-ignore
 import { Mafs, Coordinates, MovablePoint, useMovablePoint, Line, Theme, vec } from "mafs"
-import range from "lodash/range"
+import { range } from "lodash"
 
 export default function DynamicMovablePoints() {
   const start = useMovablePoint([-3, -1])

docs/components/guide-examples/display/PointsAlongFunction.tsx

@@ -2,7 +2,7 @@
 
 // prettier-ignore
 import { Mafs, Plot, Point, Coordinates, useMovablePoint } from "mafs"
-import range from "lodash/range"
+import { range } from "lodash"
 
 export default function PointsAlongFunction() {
   const fn = (x: number) => (x / 2) ** 2

docs/components/guide-examples/examples/Riemann.tsx

@@ -10,8 +10,7 @@ import {
   Coordinates,
 } from "mafs"
 
-import sumBy from "lodash/sumBy"
-import range from "lodash/range"
+import {range, sumBy} from "lodash"
 
 interface Partition {
   polygon: [number, number][]

docs/guide-example-loader.mjs

@@ -19,19 +19,19 @@ const starryNightPromise = createStarryNight(all)
 export default async function guideExampleLoader(source) {
   let cleanedSource = source
 
-  const heightRegex = /\s+height=\{([^}]*)\}/g
-  const widthRegex = /\s+width=\{([^}]*)\}/g
+  // const heightRegex = /\s+height=\{([^}]*)\}/g
+  // const widthRegex = /\s+width=\{([^}]*)\}/g
 
   const remove = [
-    heightRegex,
-    widthRegex,
+    // heightRegex,
+    // widthRegex,
     /.*prettier-ignore.*\n/gm,
     /^import React.* from "react"/gm,
     /"use client"/m,
   ]
 
-  const height = parseFloat(heightRegex.exec(cleanedSource)?.[1] || "300");
-  const width = parseFloat(widthRegex.exec(cleanedSource)?.[1] || "NaN");
+  // const height = parseFloat(heightRegex.exec(cleanedSource)?.[1] || "300");
+  // const width = parseFloat(widthRegex.exec(cleanedSource)?.[1] || "NaN");
 
   remove.forEach((regex) => {
     cleanedSource = cleanedSource.replace(regex, "")
@@ -65,8 +65,6 @@ export default async function guideExampleLoader(source) {
     $default.$source = ${JSON.stringify(cleanedSource)};
     $default.$component = $default;
     $default.$highlightedSource = toJsxRuntime(${JSON.stringify(tree)}, { Fragment, jsx, jsxs });
-    $default.$width = ${isNaN(width) ? "undefined" : JSON.stringify(width)};
-    $default.$height = ${isNaN(width) ? "300" : JSON.stringify(height)};
     export default $default;
   `
 }