Upgrade to Next 14, fix titles, use server components

.api-report/mafs.api.md

@@ -459,17 +459,17 @@ export interface VectorProps extends Stroked {
 //
 // src/debug/index.tsx:4:19 - (ae-forgotten-export) The symbol "ViewportInfo" needs to be exported by the entry point index.d.ts
 // src/debug/index.tsx:4:19 - (ae-forgotten-export) The symbol "TransformWidget" needs to be exported by the entry point index.d.ts
-// src/display/Coordinates/index.tsx:9:25 - (ae-forgotten-export) The symbol "Cartesian" needs to be exported by the entry point index.d.ts
-// src/display/Coordinates/index.tsx:9:25 - (ae-forgotten-export) The symbol "PolarCoordinates" needs to be exported by the entry point index.d.ts
+// src/display/Coordinates/index.tsx:4:25 - (ae-forgotten-export) The symbol "Cartesian" needs to be exported by the entry point index.d.ts
+// src/display/Coordinates/index.tsx:4:25 - (ae-forgotten-export) The symbol "PolarCoordinates" needs to be exported by the entry point index.d.ts
 // src/display/Line.tsx:6:18 - (ae-forgotten-export) The symbol "PointAngle" needs to be exported by the entry point index.d.ts
 // src/display/Line.tsx:6:18 - (ae-forgotten-export) The symbol "PointSlope" needs to be exported by the entry point index.d.ts
 // src/display/Line.tsx:6:18 - (ae-forgotten-export) The symbol "ThroughPoints" needs to be exported by the entry point index.d.ts
 // src/display/Line.tsx:6:18 - (ae-forgotten-export) The symbol "Segment" needs to be exported by the entry point index.d.ts
-// src/display/Plot.tsx:6:18 - (ae-forgotten-export) The symbol "OfX" needs to be exported by the entry point index.d.ts
-// src/display/Plot.tsx:6:18 - (ae-forgotten-export) The symbol "OfY" needs to be exported by the entry point index.d.ts
-// src/display/Plot.tsx:6:18 - (ae-forgotten-export) The symbol "Parametric" needs to be exported by the entry point index.d.ts
-// src/display/Plot.tsx:6:18 - (ae-forgotten-export) The symbol "VectorField" needs to be exported by the entry point index.d.ts
-// src/display/Plot.tsx:6:18 - (ae-forgotten-export) The symbol "Inequality" needs to be exported by the entry point index.d.ts
+// src/display/Plot.tsx:7:18 - (ae-forgotten-export) The symbol "OfX" needs to be exported by the entry point index.d.ts
+// src/display/Plot.tsx:7:18 - (ae-forgotten-export) The symbol "OfY" needs to be exported by the entry point index.d.ts
+// src/display/Plot.tsx:7:18 - (ae-forgotten-export) The symbol "Parametric" needs to be exported by the entry point index.d.ts
+// src/display/Plot.tsx:7:18 - (ae-forgotten-export) The symbol "VectorField" needs to be exported by the entry point index.d.ts
+// src/display/Plot.tsx:7:18 - (ae-forgotten-export) The symbol "Inequality" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

docs/.gitignore

@@ -32,3 +32,6 @@ npm-debug.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Generated documentation metadata
+generated-docgen.tsx

docs/app/guides/custom-components/contexts/page.tsx

@@ -1,13 +1,13 @@
-"use client"
-
 import PizzaSlice from "guide-examples/custom/pizza-slice"
-import PizzaSliceSource from "!raw-loader!guide-examples/custom/pizza-slice"
-
 import PointCloud from "guide-examples/custom/point-cloud"
-import PointCloudSource from "!raw-loader!guide-examples/custom/point-cloud"
 
 import CodeAndExample from "components/CodeAndExample"
 import Link from "next/link"
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Transform contexts",
+}
 
 export default function TransformContextsPage() {
   return (
@@ -64,7 +64,7 @@ export default function TransformContextsPage() {
         transforms it.
       </p>
 
-      <CodeAndExample component={<PizzaSlice />} source={PizzaSliceSource} />
+      <CodeAndExample example={PizzaSlice} />
 
       <p>
         This is an example of a component that gets entirely transformed by the user and view
@@ -84,7 +84,7 @@ export default function TransformContextsPage() {
         the CSS transforms approach here, because that would distort each circle.
       </p>
 
-      <CodeAndExample component={<PointCloud />} source={PointCloudSource} />
+      <CodeAndExample example={PointCloud} />
     </>
   )
 }

docs/app/guides/custom-components/overview/page.tsx

@@ -1,6 +1,9 @@
-"use client"
-
 import PizzaMarch from "guide-examples/custom/pizza-march"
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Custom components",
+}
 
 export default function CustomPage() {
   return (

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

@@ -1,20 +1,22 @@
-"use client"
 import CodeAndExample from "components/CodeAndExample"
 
 import MovableCircle from "guide-examples/MovableCircle"
-import MovableCircleSource from "!raw-loader!guide-examples/MovableCircle"
 
 import { PropTable } from "components/PropTable"
-import { Circle } from "mafs"
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Circles",
+}
 
 export default function Page() {
   return (
     <>
       <p>Circles take a center vector and a radius.</p>
 
-      <CodeAndExample component={<MovableCircle />} source={MovableCircleSource} />
+      <CodeAndExample example={MovableCircle} />
 
-      <PropTable of={Circle} />
+      <PropTable of={"Circle"} />
     </>
   )
 }

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

@@ -1,18 +1,17 @@
-"use client"
-
-import { Coordinates } from "mafs"
 import { PropTable } from "components/PropTable"
 import CodeAndExample from "components/CodeAndExample"
 
 import CartesianCoordinatesExample from "guide-examples/display/coordinates/CartesianCoordinatesExample"
-import CartesianCoordinatesExampleSource from "!raw-loader!guide-examples/display/coordinates/CartesianCoordinatesExample"
-
 import CartesianCoordinatesConfigExample from "guide-examples/display/coordinates/CartesianCoordinatesConfigExample"
-import CartesianCoordinatesConfigExampleSource from "!raw-loader!guide-examples/display/coordinates/CartesianCoordinatesConfigExample"
 import Code from "components/Code"
 
 import PolarCoordinatesExample from "guide-examples/display/coordinates/PolarCoordinatesExample"
-import PolarCoordinatesExampleSource from "!raw-loader!guide-examples/display/coordinates/PolarCoordinatesExample"
+
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Coordinates",
+}
 
 function CoordinatesPage() {
   return (
@@ -27,12 +26,9 @@ function CoordinatesPage() {
 
       <h2>Cartesian coordinates</h2>
 
-      <CodeAndExample
-        component={<CartesianCoordinatesExample />}
-        source={CartesianCoordinatesExampleSource}
-      />
+      <CodeAndExample example={CartesianCoordinatesExample} />
 
-      <PropTable of={Coordinates.Cartesian} />
+      <PropTable of={"Coordinates.Cartesian"} />
 
       <h3>Axis options</h3>
 
@@ -67,19 +63,13 @@ function CoordinatesPage() {
         <code>labels</code> to render in terms of π.
       </p>
 
-      <CodeAndExample
-        component={<CartesianCoordinatesConfigExample />}
-        source={CartesianCoordinatesConfigExampleSource}
-      />
+      <CodeAndExample example={CartesianCoordinatesConfigExample} />
 
       <h2>Polar coordinates</h2>
 
-      <CodeAndExample
-        component={<PolarCoordinatesExample />}
-        source={PolarCoordinatesExampleSource}
-      />
+      <CodeAndExample example={PolarCoordinatesExample} />
 
-      <PropTable of={Coordinates.Polar} />
+      <PropTable of={"Coordinates.Polar"} />
 
       <h3>Axis options</h3>
 

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

@@ -1,17 +1,16 @@
-"use client"
-
 import Code from "components/Code"
 import { PropTable } from "components/PropTable"
-import { Debug } from "mafs"
 import Link from "next/link"
 
 import CodeAndExample from "components/CodeAndExample"
 
 import PizzaSliceExample from "guide-examples/custom/pizza-slice"
-import PizzaSliceExampleSource from "!raw-loader!guide-examples/custom/pizza-slice"
-
 import Example from "guide-examples/debug/PaneVisualizerExample"
-import PaneVisualizerExampleSource from "!raw-loader!guide-examples/debug/PaneVisualizerExample"
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Debug",
+}
 
 export default function DebugPage() {
   return (
@@ -32,9 +31,9 @@ export default function DebugPage() {
         <Link href="/guides/custom-components/overview">custom components</Link>.
       </p>
 
-      <CodeAndExample component={<PizzaSliceExample />} source={PizzaSliceExampleSource} />
+      <CodeAndExample example={PizzaSliceExample} />
 
-      <PropTable of={Debug.TransformWidget} />
+      <PropTable of={"Debug.TransformWidget"} />
 
       <h2>Viewport info</h2>
 
@@ -44,9 +43,9 @@ export default function DebugPage() {
         pane context.
       </p>
 
-      <CodeAndExample component={<Example />} source={PaneVisualizerExampleSource} />
+      <CodeAndExample example={Example} />
 
-      <PropTable of={Debug.ViewportInfo} />
+      <PropTable of={"Debug.ViewportInfo"} />
     </>
   )
 }

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

@@ -1,22 +1,24 @@
-"use client"
 import CodeAndExample from "components/CodeAndExample"
 
 import MovableEllipse from "guide-examples/MovableEllipse"
-import MovableEllipseSource from "!raw-loader!guide-examples/MovableEllipse"
 import WIP from "components/WIP"
 import Link from "next/link"
 
-import { Ellipse } from "mafs"
 import { PropTable } from "components/PropTable"
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Ellipses",
+}
 
 export default function Page() {
   return (
     <>
       <p>Ellipses take a center vector, radius vector, and an angle.</p>
 
-      <CodeAndExample component={<MovableEllipse />} source={MovableEllipseSource} />
+      <CodeAndExample example={MovableEllipse} />
 
-      <PropTable of={Ellipse} />
+      <PropTable of={"Ellipse"} />
 
       <WIP>
         <p>

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

@@ -1,17 +1,15 @@
-"use client"
-
 import CodeAndExample from "components/CodeAndExample"
 import { PropTable } from "components/PropTable"
-import { Line } from "mafs"
 
 import LineSegmentExample from "guide-examples/LineSegmentExample"
-import LineSegmentExampleSource from "!raw-loader!guide-examples/LineSegmentExample"
 import LineThroughPointsExample from "guide-examples/LineThroughPointsExample"
-import LineThroughPointsExampleSource from "!raw-loader!guide-examples/LineThroughPointsExample"
 import LinePointSlopeExample from "guide-examples/LinePointSlopeExample"
-import LinePointSlopeExampleSource from "!raw-loader!guide-examples/LinePointSlopeExample"
 import LinePointAngleExample from "guide-examples/LinePointAngleExample"
-import LinePointAngleExampleSource from "!raw-loader!guide-examples/LinePointAngleExample"
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Lines",
+}
 
 function Lines() {
   return (
@@ -20,26 +18,23 @@ function Lines() {
 
       <h2>Line segment</h2>
 
-      <CodeAndExample component={<LineSegmentExample />} source={LineSegmentExampleSource} />
-      <PropTable of={Line.Segment} />
+      <CodeAndExample example={LineSegmentExample} />
+      <PropTable of={"Line.Segment"} />
 
       <h2>Line through two points</h2>
 
-      <CodeAndExample
-        component={<LineThroughPointsExample />}
-        source={LineThroughPointsExampleSource}
-      />
-      <PropTable of={Line.ThroughPoints} />
+      <CodeAndExample example={LineThroughPointsExample} />
+      <PropTable of={"Line.ThroughPoints"} />
 
       <h2>Point and slope</h2>
 
-      <CodeAndExample component={<LinePointSlopeExample />} source={LinePointSlopeExampleSource} />
-      <PropTable of={Line.PointSlope} />
+      <CodeAndExample example={LinePointSlopeExample} />
+      <PropTable of={"Line.PointSlope"} />
 
       <h2>Point and angle</h2>
 
-      <CodeAndExample component={<LinePointAngleExample />} source={LinePointAngleExampleSource} />
-      <PropTable of={Line.PointAngle} />
+      <CodeAndExample example={LinePointAngleExample} />
+      <PropTable of={"Line.PointAngle"} />
     </>
   )
 }

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

@@ -1,21 +1,16 @@
-"use client"
-
-import { Mafs } from "mafs"
 import CodeAndExample from "components/CodeAndExample"
 import { PropTable } from "components/PropTable"
 
 import PlainMafsExample from "guide-examples/PlainMafsExample"
-import PlainMafsExampleSource from "!raw-loader!guide-examples/PlainMafsExample"
-
 import ContainViewboxExample from "guide-examples/display/viewbox/ContainViewbox"
-import ContainViewboxExampleSource from "!raw-loader!guide-examples/display/viewbox/ContainViewbox"
-
 import ZoomExample from "guide-examples/display/viewbox/ZoomExample"
-import ZoomExampleSource from "!raw-loader!guide-examples/display/viewbox/ZoomExample"
-
 import StretchViewboxExample from "guide-examples/display/viewbox/StretchViewbox"
-import StretchViewboxExampleSource from "!raw-loader!guide-examples/display/viewbox/StretchViewbox"
 import Code from "components/Code"
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Mafs",
+}
 
 function MafsPage() {
   return (
@@ -25,8 +20,8 @@ function MafsPage() {
         components. On its own, it renders a blank canvas.
       </p>
 
-      <CodeAndExample component={<PlainMafsExample />} source={PlainMafsExampleSource} />
-      <PropTable of={Mafs} />
+      <CodeAndExample example={PlainMafsExample} />
+      <PropTable of="Mafs" />
 
       <h2>Sizing</h2>
 
@@ -60,7 +55,7 @@ function MafsPage() {
         <code>0.5-5</code>
       </p>
 
-      <CodeAndExample component={<ZoomExample />} source={ZoomExampleSource} />
+      <CodeAndExample example={ZoomExample} />
 
       <h2>Viewbox</h2>
 
@@ -70,7 +65,7 @@ function MafsPage() {
         to specify this with the <code>viewBox</code> prop.
       </p>
 
-      <CodeAndExample component={<ContainViewboxExample />} source={ContainViewboxExampleSource} />
+      <CodeAndExample example={ContainViewboxExample} />
 
       <h3>Aspect ratio preservation</h3>
 
@@ -80,7 +75,7 @@ function MafsPage() {
         tossing aside the aspect ratio preservation.
       </p>
 
-      <CodeAndExample component={<StretchViewboxExample />} source={StretchViewboxExampleSource} />
+      <CodeAndExample example={StretchViewboxExample} />
 
       <p>
         The only other option is <code>"contain"</code> for now, which is also the default.